body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-size: 14px; line-height: 1.4; color: var(--body-text-color); background: var(--body-bg); -webkit-tap-highlight-color: transparent; /* fix for blue background on spoiler tap on Chrome for Android */ } .container { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; will-change: transform; /* avoids "Repaints on Scroll" warning in Chrome */ position: absolute; top: 42px; left: 0; right: 0; bottom: 0; @media (max-width: 991px) { top: 52px; } @media (max-width: 767px) { top: 62px; } } main { position: relative; width: 602px; max-width: 100vw; padding: 0; box-sizing: border-box; margin: 30px auto 15px; background: var(--main-bg); border: 1px solid var(--main-border); border-radius: 1px; min-height: 70vh; @media (max-width: 767px) { margin: 5px auto 15px; } } footer { width: 602px; max-width: 100vw; box-sizing: border-box; margin: 15px auto; border-radius: 1px; background: var(--main-bg); font-size: 0.9em; padding: 20px; border: 1px solid var(--main-border); } 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; box-sizing: border-box; } button, .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); text-decoration: none; } &: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); } .container:focus { // the outline causes choppy rendering on Edge and isn't visible or necessary anyway // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17343598/ outline: none; } button::-moz-focus-inner { border: 0; } /* Firefox hacks to remove ugly red border. Unnecessary since it gives a warning if you submit an empty field anyway. */ input:required, input:invalid { box-shadow: none; } textarea { font-family: inherit; font-size: inherit; box-sizing: border-box; } @keyframes spin { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } .spin { animation: spin 1.5s infinite linear; } .ellipsis::after { content: "\2026"; } /* via https://stackoverflow.com/a/19758620 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* this gets injected as raw HTML, so it's easiest to just define it in global.scss */ .inline-custom-emoji { width: 1.4em; height: 1.4em; margin: -0.1em 0; object-fit: contain; vertical-align: middle; }