body {
    font-family: system-ui, sans-serif;
    color: hsl(0, 0%, 25%);
    line-height: 1.5;
    margin: 0;
}

h1,
h2 {
    font-weight: normal;
    margin: 0 0 0.5em;
}

p {
    margin: 0 0 1em;
}

a {
    color: hsl(220, 100%, 40%);
}

pre,
code {
    font-family: monospace, monospace;
    font-size: 0.9em;
    background: hsl(0, 0%, 95%);
    white-space: pre-wrap;
}

pre {
    border-left: solid 1px hsl(0, 0%, 60%);
    padding-left: 0.8em;
}

header {
    border-bottom: solid 1px hsl(0, 0%, 60%);
    text-align: center;
    padding: 1em;
}

#toc {
    text-wrap: none;
}
#toc ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#toc ul ul {
    padding-left: 1em;
}

main {
    max-width: 40em;
    margin: auto;
    padding: 1em;
}

.warning {
    background: #ffaaaa;
    padding: 1ex;
}

/* wide screen, show nav on left */
@media screen and (min-width: 70em) {
    nav {
        background: white;
        left: 2em;
        position: fixed;
    }
    #toc-toggle,
    #toc-label {
        display: none;
    }
}

/* narrow screen screen, hide nav behind checkbox */
@media screen and (max-width: 70em) {
    nav input[type="checkbox"]:not(:checked) ~ #toc {
        display: none;
    }
}