:root {
    --bg-color: white;
    --color: #333;
    --dark: var(--color);
    --gray: #ddd;
    --link: var(--color);
    --link-visited: #777;
    --inline-code-bg-color: #444;
    --code-fg-color: white;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #222;
        --color: #fff;
        --gray: #444;
        --link-visited: #bbb;
        --inline-code-bg-color: #777;
        --code-fg-color: white;
    }
}

body {
    font-family: sans-serif;
    margin: 0;
    width: 100vw;
    background-color: var(--bg-color);
    color: var(--color);
}

body > * {
    width: 90vw;
    margin: auto;
}

body > nav {
    display: flex;
    justify-content: space-between;
}

body > nav > * {
    margin: 1em 0;
}

body > nav * {
    font-size: 1em;
}

main {
    margin-top: 2em;
}

body > aside h1 {
    font-size: 1.5em;
}

body > aside > ul {
    padding-left: 0;
    margin: 0;
}

body > aside > ul > li {
    list-style-type: none;
    margin: 0.5em 0;
}

footer {
    margin-bottom: 2em;
}

footer > ul {
    padding: 0;
    list-style-type: none;
    display: flex;
}

footer > ul > li {
    margin-right: 1em;
    font-size: 0.75em;
}

main > header > h1 {
    margin-bottom: 5px;
}

main > :nth-child(2) {
    margin-top: 0;
}

blockquote {
    border-left: 3px solid var(--dark);
    padding: 0 10px;
    margin: 0;
}

a {
    color: var(--link);
    text-decoration: underline solid;
}

a.internal {
    text-decoration: underline dotted;
    -webkit-text-decoration: underline dotted;
}

a.internal.broken {
    text-decoration: none;
}

a:visited {
    color: var(--link-visited);
}

a.footnote-ref:visited {
    color: var(--link);
}

body > nav > h1 > a {
    text-decoration: none;
}

body > nav > h1 > a:visited {
    color: var(--link);
}

p {
    word-wrap: break-word;
}

p.failed-resource {
    border: 1px solid var(--dark);
    padding: 3em 1em;
    border-radius: 5px;
    background: var(--gray);
    text-align: center;
    box-sizing: border-box;
}

code.inline {
    background-color: var(--inline-code-bg-color);
    color: var(--code-fg-color);
    padding: 0 5px;
    border-radius: 5px;
}

table {
    width: 100%;
    table-layout: fixed;
    font-size: 0.75em;
}

table, th, tr, td {
    border: 1px solid var(--dark);
    border-collapse: collapse;
  }

tr > *:first-child {
    width: 20%;
}

td {
    padding: 5px;
}

td:nth-child(2) {
    overflow-x: scroll;
}

iframe, object, p, img, video {
    width: 100%;
}

iframe {
    aspect-ratio: 16 / 9;
}

.callout {
    border: 1px solid var(--dark);
    border-radius: 5px;
    padding: 10px;
    background-color: var(--gray);
}

#footnote-def-starter {
    text-align: center;
    border: none;
}

#footnote-def-starter::before {
    content: "•   •   •";
}

.footnote {
    display: flex;
}

.footnote > *:nth-child(2) {
    margin-top: 0;
}

@media only screen and (min-width: 768px) {
    table {
        font-size: 1em;
    }
}

@media only screen and (min-width: 800px) {
    body > * {
        width: 80vw;
    }

    blockquote {
        margin: 1em;
    }
}

@media only screen and (min-width: 1024px) {
    body > * {
        width: 60vw;
    }

    blockquote {
        margin: 0;
    }
}

@media only screen and (min-width: 1200px) {
    body > * {
        width: 50vw;
    }

    blockquote {
        margin: 1em;
    }
}