/* Base site styles - and are not styleable with CSS; use :root/html for document-level settings - Provide generic styles for html, :root, body and a title pattern (h1 and .title) */ /* root variables and sensible defaults */ :root { --bg: #12263A; --text: #06BCC1; --muted: #C5D8D1; --accent: #F4D1AE; --max-width: 960px; --content-padding: 1.25rem; --base-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* html-level box sizing and font smoothing */ html { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: var(--base-font); font-size: 16px; /* easy math: 1rem = 16px */ background-color: var(--bg); color: var(--text); } /* make box-sizing inherit everywhere */ *, *::before, *::after { box-sizing: inherit; } /* body: central column, comfortable reading styles */ body { margin: 0; line-height: 1.5; -webkit-text-size-adjust: 100%; max-width: var(--max-width); padding: var(--content-padding); margin-left: auto; margin-right: auto; background-color: transparent; /* html provides the background */ } /* Generic title styles. Note: the <title> element (in <head>) cannot be styled; use an on-page title such as h1 or .title */ h1, .title { margin: 0 0 0.5rem 0; font-size: 2rem; /* 32px */ line-height: 1.1; color: var(--text); font-weight: 600; } /* Smaller subtitle style */ .subtitle, h2 { margin: 0 0 1rem 0; color: var(--muted); font-weight: 500; } /* links and accessible focus */ a { color: var(--accent); text-decoration: none; } a:hover, a:focus { text-decoration: underline; } /* utility: visually hidden (for accessibility) */ .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }