@media (prefers-color-scheme: light) {
    :root {
        --bg-color: #f0f0f0;
        --text-color: #333;
        --link-color: #3265e4;
        --border-color: #ccc;
        --header: #ccc;
        --open-nav: rgb(16, 148, 73);
        --header-border: #333;
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #eee;
        --open-nav: yellow;
        --link-color: #86d1fc;
        --border-color: #ccc;
        --header: #000;
        --header-border: #ccc;
    }
}
a {
    color: var(--link-color);
}
body {
    font-family: serif;
    background-color: var(--bg-color, #f0f0f0);
    color: var(--text-color, #333);
    padding: 1vmin 5vmin;
    font-size: 1.5em;
}
p, li {
    line-height: 1.6;
    padding-bottom: .5em;
    margin:0;
}
section p {
    padding: 0 .2em .5em .2em;
}
nav li {
    line-height: 1.3;
    padding: .2em 0;
}
header {
    position: fixed;
    top: 0;
    left:0;
    padding: .5em .7em;
    background-color: var(--header);
    width: calc(100% - 1em);
    min-height: 90px;
    border-bottom: 1px solid var(--header-border);
}
header p {
    margin: 0;
    display: inline;
    padding-right: 1em;
    font-size: 0.7em;
}
h1 {
    font-size: 1em;
}
h2,h3,h4,h5,h6 {
    line-height: 1.2;
    position: sticky;
    top: 115px;
    display: flex;
    margin: 0;
    justify-content: center;
    min-height: 4em;
    padding: .5rem .2rem;
    background-color: var(--bg-color, #f0f0f0);
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}
h2 {font-size: 1.5rem}
section {
    max-width: 50rem;
    margin: 0 auto;
    padding: 6em .5em 0 .5em;
}
nav {
    margin: 1em 0;
}
p.byline {
    font-size: 0.8em;
    font-style: italic;
    margin: 0;
    padding: 0 0 .2em 0;
    text-align: right;
}
footer {
    font-size: 0.8em;
    margin: 2em 0 2em;
    padding: 0 .5em;
}
details {
    margin: .2em 1em;
}
details:open {
    color: var(--open-nav);
}