:root {
    --header-font: 'M Plus 1p',sans-serif;
    --text-font: 'Inter', sans-serif;
    --text-color: black;
}

* {
    box-sizing: border-box;
    word-break: break-word;
}

html {
    font-size: 4vmin;
    font-family: sans-serif;
}

body {
    margin: 0;
    color: var(--text-color);
    font-family: var(--text-font);
}
h1,h2,h3,h4,h5,h6 {
    font-family: var(--header-font);
    margin: 0 0 1rem 0;
}
h2 {
    margin: 0;
    font-size: 1.1em;
}

a {
    color: var(--text-color);
    text-decoration-color: #555;
}

main {
    overflow: hidden;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

main > section:nth-child(10n+1) { --bg: calc(1*1347); }
main > section:nth-child(10n+2) { --bg: calc(2*1347); }
main > section:nth-child(10n+3) { --bg: calc(3*1347); }
main > section:nth-child(10n+4) { --bg: calc(4*1347); }
main > section:nth-child(10n+5) { --bg: calc(5*1347); }
main > section:nth-child(10n+6) { --bg: calc(6*1347); }
main > section:nth-child(10n+7) { --bg: calc(7*1347); }
main > section:nth-child(10n+8) { --bg: calc(8*1347); }
main > section:nth-child(10n+9) { --bg: calc(9*1347); }
main > section:nth-child(10n+0) { --bg: calc(10*1347); }

main > section {
    background-image: url('images/picking-nits.png');
    background-size: 50vmin;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-color: hsl(var(--bg), 70%, 95%);
    width: 100vw;
    height: 100vh;
    display: grid;
    align-items: center;
    justify-items: center;
    text-align: center;
    padding: 0px 1em;
    scroll-snap-align: center;
    grid-auto-rows: max-content;
    align-content: center;
    overflow-y: hidden;
    position: relative;
    padding-bottom: 20vmin;
}

main > section > * {
    background-color: hsla(var(--bg), 70%, 95%, 0.9);
}
main > section > figure {
    background: none;
}

main code {
    display: inline-block;
    background: hsl(var(--bg), 50%, 96%);
    margin: 0.2em;
}

@media (orientation: portrait) {
    main > section {
        height: auto;
        scroll-snap-align: none;
    }
    main > section + section {
        margin-top: 5em;
        padding-top: 5em;
        border-top: 0.5vh dashed white;
    }
}

main > section:focus {
    outline: none;
}
main > section > p {
    line-height: 1.5em;
}
main > section > h1,
main > section > h2
{
    align-self: start;
}
main > section > ul,
main > section > ol {
    text-align: left;
}
main > section > ul > li ~ li,
main > section > ol > li ~ li {
    margin-top: 0.5em;
}

main > section img,
main > section svg,
main > section video
{
    max-width: 100%;
    max-height: 60vh;
    width: 100vw;
    object-fit: contain;
    margin: 1rem 0;
    border-radius: 0.3em;
}

main > section figure,
main > section p {
    margin: 0;
}

main > section p + p {
    margin-top: 1em;
}

main > section img {
}

main > section .full-height {
    max-height: 90vh;
}

main > section blockquote {
    max-width: 20em;
    line-height: 1.8em;
}
main > section > iframe {
  width: 80%;
  height: 60vh;
}

footer {
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
    font-size: 0.6em;
    text-align: center;
    background: white;
}

footer #url {
    color: #555;
    text-decoration: none;
}