* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    content-visibility: auto;
    contain-intrinsic-size: auto 1rem;
}

/* just in case: make sure the page's minimum width corresponds to the contents,
 that the maximum corresponds to the viewport width (i.e. window size); that the
 page's minimum height is the viewport height and the maximum is the content */

html, body {
    max-width: var(--max-width-vw, var(--max-width-percent));
    min-height: 100vh;
}

/* make sure all children of "body" (i.e. all elements in the page) have a maximum
 width corresponding to the viewport (i.e. window size). This avoids overflows */
body * {
    max-width: var(--max-width-vw, var(--max-width-percent));
    color: var(--text-color);
    /*border: 2px solid transparent;*/
}

body {
    display: grid;
    grid-template-columns: 1fr; /*defaults to mobile-friendly layout: everything stacked*/
    grid-template-rows: auto 1fr; /*rows for the sidebar and the main content, respectively*/
    gap: 1px;
    background-color: var(--main-color);
    /* if the screen is equal or wider than 64rem (about 1024px, assuming font size 16)
    then make two columns: one for the sidebar and another for the content */
    @media only screen and (min-width: 64rem) {
        grid-template-columns: 20% 1fr; /*two columns: sidebar, main*/
        grid-template-rows: auto; /*contains both columns*/
    }
}


a {
    color: var(--link-color);
    line-height: 1.75rem;
}

:focus {
    outline: none !important;
    color: var(--text-color) !important;
    background-color: var(--accent-color) !important;
    filter: invert(1);
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.375rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

ol, ul {
    list-style-position: inside;
    + p {
        margin-top: 0.25rem;
    }
}

ul {
    list-style-type: "> ";
}

ol {
    list-style-type: decimal-leading-zero;
}

ul li::marker {
    font-size: 1rem;
    font-family: monospace;
}

ol li::marker {
    font-size: 1rem;
    font-family: monospace;
}

li {
    line-height: 1.75rem;
    margin: 0 0 0 2rem;
}

section, article {
    padding: 0;
    + section {
        padding: 1rem 0 0 0;
    }
    + article {
        padding: 1rem 0 0 0;
    }
}

header, .site-nav {
    padding: 1rem;
    border: 1px solid var(--border-color);
    p {
        text-indent: 0 !important;
    }
}

footer {
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
    padding: 0.5rem;
    max-width: 100%;
    address {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }
    p {
        margin: 0;
        padding: 0;
        line-height: 1rem;
        text-align: center;
    }
}

nav a {
    color: var(--text-color);
}

.site-nav {
    padding: 0.25rem 0.75rem;
    a {
        margin: 0 0.5rem 0 0;
    }
}

.skip {
    color: var(--text-color);
    @media only screen and (min-width: 64rem) {
        display: none;
    }
}

.page-nav {
    border: 1px solid var(--border-color);
}

.sidebar {
    display: grid;
    grid-template-columns: 1fr; /*two columns: sidebar, main*/
    grid-template-rows: auto auto 1fr auto;
    gap: 1px;
    @media only screen and (min-width: 64rem) {
        position: sticky;
        top: 0;
        max-height: 100vh;
        overflow-y: auto; /* sort of a very ugly workaround if the navigation links ever grow too numerous*/
    }
}

.page-toc {
    padding: 1rem;
    list-style: none;
    & ol, & ul {
        padding: 0 0 0 1rem;
    }
    * {
        list-style: inherit;
        padding: 0;
        margin: 0;
    }
}

.sub-toc li {
    width: fit-content;
    display: inline-block;
    padding: 0 0.25rem;
}

main {
    overflow: auto;
    padding: 2rem 64px;
    border: 1px solid var(--border-color);
}

details {
    margin: 1rem 0;
}

.table-container {
    overflow: auto;
    max-height: 80ch;
    margin: 1rem 32px 0 32px;
    background-color: var(--codeblock-color);
    border: 1px solid var(--codeblock-color);
}

table {
    table-layout: fixed;
    font-size: 0.9rem;
    font-family: monospace;
    border-collapse: collapse;
    white-space: nowrap;
    border: 1px solid var(--border-color);
    caption {
        text-align: left;
    }
    thead, tbody {
        border: 1px solid var(--border-color);
    }
    th, tr, td {
        border: 1px solid var(--border-color);
        padding: 0.5rem;
    }
    th {
        background-color: var(--accent-color);
    }
    tr:nth-child(odd) {
        background-color: var(--main-color);
    }
    tr:nth-child(even) {
        background-color: var(--codeblock-color);
    }
    td {
        min-width: max-content;
        max-width: 100000ch;
    }
}

p {
    text-indent: 1rem;
    line-height: 1.75rem;
    + p {
        margin: 0.5rem 0 0 0;
    }
}

quote {
    font-family: serif;
    font-style: italic;
    font-variant: small-caps;
}

quote:before {
    content: open-quote;
    display: inline;
    font-family: serif;
    font-style: italic;
    font-variant: small-caps;
}
quote:after {
    content: close-quote;
    display: inline;
    font-family: serif;
    font-style: italic;
    font-variant: small-caps;
}

em {
    font-weight: bold;
}

i {
    font-style: italic;
    font-weight: normal;
}

code, kbd, samp {
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--codeblock-text-color);
    padding: 0.1rem 4px;
    border: 1px solid var(--accent-color);
    border-radius: var(--decor-border-radius-med);
    background-color: var(--codeblock-color);
}

pre {
    margin: 1rem 0 1rem 0;
    padding: 0.75rem;
    overflow: auto;
    background-color: var(--codeblock-color);
    border: 1px solid var(--codeblock-border-color);
    color: var(--codeblock-text-color);
    max-width: 80ch;
    max-height: 80ch;
    border-radius: var(--decor-border-radius-big);
    code, kbd, samp {
        overflow: auto;
        background-color: inherit;
        color: inherit;
        border: none;
        padding: 0;
        /*line-height: 0;*/
        border: 0;
        border-radius: 0;
    }
}

/*pre > code {
    overflow: auto;
    background-color: inherit;
    color: inherit;
    border: none;
    padding: 0;
    line-height: 0;
    border: 0;
    border-radius: 0;
}*/