@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/ibm-plex-mono-700.woff2") format("woff2"); } /* Site default theme: dark. Pages can override with or . To make the whole site light by default, swap the two palettes below (and swap .light/.dark in their selectors). */ :root, :root:has(body.dark) { --color-background: #0f0f0f; --color-text: #d1d1d1; --color-link: #7aa2f7; } :root:has(body.light) { --color-background: #f6f6f7; --color-text: #111; --color-link: #2f5fc4; } :root { --color-muted: #666; --font-monospace: "IBM Plex Mono", Menlo, monospace; --font-display: Menlo, Consolas, monospace; } html { height: 100%; background: var(--color-background); } body { margin: 0; padding: 40px; background: var(--color-background); color: var(--color-text); font-family: var(--font-monospace); font-size: 16px; line-height: 1.5; } a { color: var(--color-link); } pre, code { font: inherit; } pre { margin: 0; } h1, h2, h3, .big { font-family: var(--font-display); } .splash { height: 100vh; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .splash .big { margin: 0; font-size: 4em; line-height: 2; } .not-found { text-align: center; } .not-found .big { margin: 0 0 0.5em; line-height: 1; } .not-found a { color: var(--color-text); } .darker { color: var(--color-muted); }