* { margin: 0; padding: 0; overflow-wrap: anywhere } :root { --foreground: black; --background: white; --line-height: 1.5; --font-size: 1.25rem; --mono: Consolas, monaco, monospace; --serif: font-family:georgia, times, serif; --sans-serif: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; } @media (prefers-color-scheme:dark) { --foreground: white; --background: black } body { max-width: 48rem; background-color: var(--background); padding: .5rem; margin: 0 auto } h1, h2, h3 { font-family: var(--sans-serif); line-height: 1.25; } h1 { font-size: 3rem } h2 { font-size: 2.25rem } h3 { font-size: 1.5rem } p { font-size: var(--font-size); font-family: var(--serif); line-height: var(--line-height); } h1, h2, h3, p, a, ul, blockquote { color: var(--foreground); background-color: var(--background) } br { line-height: 1 } a::before { font-size: var(--font-size); font-family: var(--mono); content: "⇒"; padding-right: .25rem; vertical-align: middle } a:hover { color: var(--background); background-color: var(--foreground) } a { font-size: var(--font-size); font-family: var(--serif); text-decoration: none; } li::before { font-size: var(--font-size); font-family: var(--mono); content: "*"; vertical-align: middle; padding-right: .5rem; } ul { font-size: var(--font-size); font-family: var(--serif); line-height: 1.25; list-style-type: none; } blockquote { font-size: var(--font-size); font-family: var(--serif); line-height: var(--line-height); border-left: .5rem solid var(--foreground); padding-left: .75rem; } pre { font-size: 1rem; font-family: var(--mono); line-height: 1; color: var(--background); background-color: var(--foreground); padding: 1.25rem; overflow-y: auto; } pre+blockquote { padding-top: .5rem; padding-bottom: .5rem; } ::selection, ::-moz-selection { color: var(--background); background-color: var(--foreground); } pre::selection, pre::-moz-selection { color: var(--foreground); background-color: var(--background); }