html {overflow-y: scroll}
:root {
    --bgcolor: white;
    --fontcolor: #212121;
    --linkcolor: #0060df;
    --visitedcolor: #551a8b;
    --precolor: var(--fontcolor);
    --prebgcolor: #eee;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bgcolor: #212121;
        --fontcolor: white;
        --linkcolor: #5bf;
        --visitedcolor: #ae5ee0;
        --precolor: white;
        --prebgcolor: #666;
    }
}
body {
    max-width:42em;
    margin:40px auto;
    padding:0 10px;
    font-size: 1.3rem;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "IBM Plex Sans", Segoe UI, Helvetica, Arial, sans-serif;
    color: var(--fontcolor);
    background: var(--bgcolor)
}

a:link{color: var(--linkcolor)}
a:visited{color: var(--visitedcolor)}
h1 {font-weight: 400; font-size: 2.5rem; margin-bottom: 1rem;}
h2, h3, h4 {font-weight: 400; margin-bottom: 0;}
p > code{color: var(--precolor); background: var(--prebgcolor); padding:2px}
code{color: var(--precolor); background: var(--prebgcolor); padding:2px;}
pre{color: var(--precolor); background: var(--prebgcolor); padding:24px; overflow-x: auto}
.center {display: block;margin-left: auto;margin-right: auto;width: 100%;}
figcaption {color: #888; font: 12px/1.5 monospace; text-align: center;}
figure {margin: auto}
img {display: block; max-width: 100%; height: auto; margin: auto}
nav { font-family: monospace; font-weight: 600; }
nav a { text-decoration: none; }
nav a:visited { color: var(--linkcolor); }
strong {font-weight: 600;}
small {font-size: 1rem;}