body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue; font-size: 14px; line-height: 1.3; color: var(--body-text-color); background: var(--body-bg); position: fixed; left: 0; right: 0; bottom: 0; top: 0; } .container { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; position: absolute; top: 72px; left: 0; right: 0; bottom: 0; will-change: transform; /* avoids "repaint on scroll" in Chrome */ } main { position: relative; width: 602px; max-width: 100vw; padding: 15px 0; box-sizing: border-box; margin: 15px auto 15px; background: var(--main-bg); border: 1px solid var(--main-border); border-radius: 1px; @media (max-width: 767px) { margin: 5px auto 15px; } } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em 0; font-weight: 400; line-height: 1.2; } h1 { font-size: 2em; } a { color: var(--anchor-text); text-decoration: none; } a:visited { color: var(--anchor-text); } a:hover { text-decoration: underline; } input { border: 1px solid var(--input-border); padding: 5px; } button { font-size: 1.2em; background: var(--button-bg); border-radius: 2px; padding: 10px 15px; border: 1px solid var(--button-border); cursor: pointer; color: var(--button-text); &:hover { background: var(--button-bg-hover); } &:active { background: var(--button-bg-active); } &[disabled] { opacity: 0.35; pointer-events: none; cursor: not-allowed; } &.primary { border: 1px solid var(--button-primary-border); background: var(--button-primary-bg); color: var(--button-primary-text); &:hover { background: var(--button-primary-bg-hover); } &:active { background: var(--button-primary-bg-active); } } } p, label, input { font-size: 1.3em; } ul, li, p { padding: 0; margin: 0; } .hidden { opacity: 0; } *:focus { outline: 2px solid var(--focus-outline); } button::-moz-focus-inner { border: 0; }