body {
    line-height: 1.5;
    font-family: sans-serif;
    font-size: 14pt;
    margin: 0;
}

nav {
    width: 100%;
    display: flex;
    margin: auto 0pt auto 0pt;
}

nav a {
    width: 100%;
    border-radius: 10pt;
    text-align: center;
    justify-content: center;
}

main {
    margin: auto 30pt 120pt 30pt;
}

blockquote {
    border-top-width: 8pt;
    border-top-style: solid;
    padding: 12pt;
}

pre {
    border-radius: 12pt;
    margin: 12pt;
    padding: 12pt;
    font-size: 10pt;
    max-width: 120em;
    overflow-x: auto;
}

code:not(pre code) {
    border-radius: 8pt;
    font-size: 12pt;
    padding: 2pt 4pt;
}

.katex-html {
    font-size: 12pt;
}

img {
    max-width: 90%;
    max-height: 40em;
}

.social-icon {
    width: 6em;
    height: 6em;
}

figure {
    float: right;
    text-align: center;
    width: 20%;
    font-size: 12pt;
}

figure.sidebar {
    float: right;
}

figure.figure-flow {
    float: none;
}

table {
    margin: auto auto;
    text-align: center;
}

td {
    padding: 4pt;
}

/* ---------------- Variable Widths ------------------- */

@media (min-width: 40em) {
    main {
        margin-left: 5%;
        margin-right: 15%;
    }
}

/* ----------------- Color schemes -------------------- */
@media (prefers-color-scheme: light) {
    .title-banner {
        background-image: linear-gradient(to right, #eeb 0px, #a84 4000px);
    }

    body {
        background-color: #edd;
        color: #000;
    }

    a:link {
        color: #22a;
    }

    a:visited {
        color: #707;
    }
    
    nav a {
        background-color: rgba(64, 32, 16, 0.2);
    }
    
    blockquote {
        background-color: #eeb;
        border-top-color: #a84;
    }
    
    pre {
        background-color: rgba(255, 255, 255, 0.8);
    }
    
    code:not(pre code) {
        background-color: rgba(255, 255, 255, 0.8);
    }
    
    table {
        border: 1px solid #000;
    }

    table thead tr td {
        background-color: rgba(255, 255, 255, 0.5);
        border-bottom: 1px solid #000;
    }

    table tbody tr:nth-child(odd) {
        background-color: rgba(255, 255, 255, 0.5);
    }

    table tbody tr:nth-child(even) {
        background-color: rgba(192, 192, 192, 0.5);
    }
}

@media (prefers-color-scheme: dark) {
    .title-banner {
        background-image: linear-gradient(to right, #f80 0px, #620 4000px);
    }

    body {
        background-color: #101;
        color: #fff;
    }

    a:link {
        color: #aaf;
    }

    a:visited {
        color: #969;
    }
    
    nav a {
        background-color: rgba(200, 200, 200, 0.2);
    }
    
    blockquote {
        background-color: #310;
        border-top-color: #840;
    }
    
    pre {
        background-color: rgba(32, 32, 32, 0.8);
        color: #fff;
    }
    
    code:not(pre code) {
        background-color: rgba(32, 32, 32, 0.8);
        color: #fff;
    }
    
    table {
        border: 1px solid #eee;
    }
    
    table thead tr td {
        background-color: rgba(16, 16, 16, 0.5);
        border-bottom: 1px solid #eee;
    }

    table tbody tr:nth-child(odd) {
        background-color: rgba(16, 16, 16, 0.5);
    }

    table tbody tr:nth-child(even) {
        background-color: rgba(32, 32, 32, 0.5);
    }
}