:root{--bg-primary:#fefefe;--bg-secondary:#f5f5f5;--text-primary:#1a1a1a;--text-muted:#666;--text-faded:#999;--link-color:#1a5fb4;--link-active:#b00;--border-color:#ddd;--hr-color:#aaa}@media(prefers-color-scheme:dark){:root{--bg-primary:#121212;--bg-secondary:#1e1e1e;--text-primary:#e4e4e4;--text-muted:#a0a0a0;--text-faded:#707070;--link-color:#6cb4ff;--link-active:#ff6b6b;--border-color:#555;--hr-color:#666}}*,*::before,*::after{box-sizing:border-box}html,*{font-family:atkinson hyperlegible,sans-serif;font-size:16px;margin:0;padding:0}html{background-color:var(--bg-primary);color:var(--text-primary)}a,a:visited,a:hover,a:active{text-decoration:none;color:var(--link-color)}div#container{height:100vh;display:grid;grid-auto-flow:column;grid-template-rows:min-content 1fr;grid-template-columns:1fr minmax(400px,48rem)1fr;grid-template-areas:". nav ." ". main ." ". footer ."}nav{> ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: baseline; width: 100%; > li { font-weight: 300; cursor: pointer; > a, > a:visited, > a:hover { font-family: 'Kode Mono', monospace; color: var(--link-color); text-transform: lowercase; } > a:active { color: var(--link-active); } > a.title { text-transform: uppercase; font-weight: 700; font-size: 1.25rem; } } }}nav#main{grid-area:nav;padding-top:1.5rem;padding-left:1.5rem;padding-right:1.5rem;border-bottom:1px solid var(--border-color);> ul > li { > a, > a:visited, > a:hover { color: var(--text-primary); } }}nav.back{> ul { padding-left: 0; }}nav.prev-next{> ul { margin-top: 2rem; padding-left: 0; > li { font-family: 'Kode Mono', monospace; min-width: 12ch; color: var(--text-faded); cursor: inherit; } > li:first-child { text-align: left; } > li:last-child { text-align: right; } }}main{grid-area:main;padding-left:1.5rem;padding-right:1.5rem;h1 { margin-top: 2rem; margin-bottom: 1rem; font-size: 2rem; position: relative; } > h1 { text-align: center; } h2 { font-size: 1.8rem; margin-top: 1.5rem; margin-bottom: 0.7rem; position: relative; } h3 { font-size: 1.6rem; margin-top: 1rem; margin-bottom: 0.4em; position: relative; } h4 { font-size: 1.4rem; margin-top: 1rem; margin-bottom: 0.4em; position: relative; } p, li, blockquote, table { font-size: 1rem; line-height: 1.5rem; margin: 0; } div:has(iframe), figure { margin-bottom: 1.5rem; border: 1px solid var(--border-color); } p:not(:last-child), ul:not(:last-child), ol:not(:last-child), img:not(:last-child), blockquote:not(:last-child), table:not(:last-child) { margin-bottom: 1rem; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img.float-right { float: right; margin-left: 1rem; margin-bottom: 1rem; max-width: 30%; } ul, ol { padding-left: 1.5rem; } div.recent-posts { margin-bottom: 1.5rem; margin-left: 1.5rem; line-height: 1.5rem; time { font-family: 'Kode Mono', monospace; width: 11ch; display: inline-block; text-align: right; color: var(--text-faded); margin-right: 1ch; } } div.recent-posts.by-year { margin-left: 0; time { width: 9ch; } } article { a:has(h1) { h1 { margin-bottom: 0; } color: inherit; } time { display: block; font-family: 'Kode Mono', monospace; font-size: 0.9rem; color: var(--text-faded); text-align: right; margin-bottom: 1.5rem; } ul, ol { > li { margin-bottom: 0.25rem; } } code, pre { font-family: 'Kode Mono', monospace; margin-bottom: 1.5rem; span { font-family: 'Kode Mono', monospace; } } hr { border: none; border-top: 1px solid var(--hr-color); margin: 1rem 20%; } }}footer{grid-area:footer;padding:1.5rem;font-size:.875rem;font-style:italic;color:var(--text-faded);text-align:center}