:root {
  --font: "Times New Roman";
}

html {
    font-family: var(--font);
    font-optical-sizing: auto;
    font-size: 14pt;
}

body {
    width: 90vw;
    margin: 0 auto;
}

pre {
    font-family: var(--font);
}

#toc {
    font-style: italic;
    margin: 6em 0;
}
#toc h1 {
    white-space: nowrap;
    margin: 1.5em 0;
    /* text-align: revert; */
}
#toc a {
    display: block;
    color: black;
    margin: .5em 0;
}

@media screen {
    body {
        /* Don't let text get too wide */
        /* max-width: 800px; */
        /* Have some space from the page border */
        /* margin: 0 auto; */
    }
    a {
        color:#00F;
        text-decoration: none;
    }
    .typo {
        font-style: italic;
    }
    ins {
        text-decoration: none;
        background-color: #d4fcbc;
    }
}

@media (min-width: 1000px) {
    body:has(#toc) {
        display: grid;
        column-gap: 2em;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            'a c'
            'b d';
        margin: 0 auto;
    }

    #toc h1 {
        margin: 0;
        /* text-align: revert; */
    }

    #title {
        grid-area: c;
        max-width: 800px;
        margin: 0 auto;
    }
    #content {
        grid-area: d;
        max-width: 800px;
        margin: 0 auto;
    }
    #toc {
        grid-area: a;
        grid-row: 1 / 3;
        margin: 0;
        display: grid;
        gap: .25em;
        position: sticky;
        top: 10vh;
        width: fit-content;
        height: min-content;
    }
}

@media print {
    @page {
        margin: 1in;

        @bottom-left {
            content: string(title);
            font-style: italic;
            color:#888;
        }

        @bottom-right {
            content: counter(page);
            font-style: italic;
            color:#888;
        }
    }

    #toc {
        display: none;
    }

    h2 {
        break-before: always;
    }

    dfn {
        font-style:normal;
    }

    a {
        color:#000;
        text-decoration: none;
    }

    ins {
        text-decoration: none;
    }
}

h2 {
    string-set: title content(text);

}

p {
    page-break-inside: avoid;
}

li {
    page-break-inside: avoid;
}

h1 {
    font-size:1.1em;
    font-weight: bold;
    text-align: center;
    margin: 2em;
    line-height: 2em;
}

h2 {
    font-size:1.0em;
    font-weight: bold;
    text-align: center;
    margin: 2em;
    line-height: 1.2em;
}

p .link, h2 .link {
    /* Make link appear to not shift text over */
    margin-left: -20px;
    cursor:pointer;
    vertical-align: middle;
    color: #FF0000;
    visibility:hidden;
}

.fixed {
    font-family: Consolas, Courier;
    font-size: smaller;
}
.tab {
    padding-left: 4em;
}

ol {
    padding-left: 4em;
    /* This enables margin for ol inside li */
    margin-top: 1em;
}

ol.letters {
    counter-reset: letter;
}

ol.letters > li {
    list-style: none;
    counter-increment: letter;
    margin-bottom: 1em;
}
ol.letters > li::marker {
    content: "(" counter(letter, lower-alpha) ") ";
    counter-increment: letter;
}

ol.numbers {
    counter-reset: number;
}

ol.numbers > li {
    list-style: none;
    counter-increment: number;
    margin-bottom: 1em;
}
ol.numbers > li::marker {
    content: "(" counter(number) ") ";
    counter-increment: number;
}