:root { --bg: #fafafa; --bg-light: #f0f0f0; --fg: #1b2229; --fg-light: #383a42; --link: #014980; --code: #e45649; } body { background-color: var(--bg); color: var(--fg-light); font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace; font-size: 0.9rem; line-height: 1.5; margin: 1.5rem auto; max-width: 45em; } a { padding: 0 0.15rem; text-decoration: none; } a,a:active { color: var(--link); } a:hover { background-color: var(--link); color: var(--bg); } h1,h2,h3,h4,h5,h6 { color: var(--fg); font-size: 1rem; text-transform: uppercase; } .skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; } nav { align-items: center; display: flex; justify-content: space-around; width: 100%; } nav ul { display: flex; list-style-type: none; margin: 0; padding: 0; width: 100%; } nav ul li { height: 100%; margin-bottom: 0.5rem; margin-right: 0.5rem; text-align: center; } blockquote { background-color: var(--bg-light); border-left: 8px solid var(--link); margin: 1rem 0; padding: 0.5rem 1rem; } blockquote p { margin: 0; } img { border-style: none; width: 100%; } table { border: 1px dotted var(--fg); border-collapse: collapse; width: 100%; } colgroup, thead, tbody { border: 1px dotted var(--fg); } pre, pre>code, code { font-size: 0.9rem; } pre { border: 1px dotted var(--fg); margin: 0.5rem 0; overflow-x: auto; padding: 0.5rem; } time { margin-right: 0.5rem; } :not(pre)>code { color: var(--code); } .post { align-items: flex-start; display: flex; margin: 0.5rem 0; } .post time { flex-shrink: 0; margin-right: 1rem; } footer { margin: 1rem 0; } @media (prefers-color-scheme: dark) { :root { --bg: #000000; --bg-light: #1B2229; --fg: #DFDFDF; --fg-light: #BBC2CF; --link: #67C0FF; --code: #FF6C6B; } }