:root {
    /*
    Generated via Harmonizer: https://harmonizer.evilmartians.com/#W1siMTAwIiwxMDAsbnVsbCwiMjAwIiw5MCxudWxsLCIzMDAiLDc3LG51bGwsIjQwMCIsNjUsbnVsbCwiNjAwIiw2NSxudWxsLCI3MDAiLDc3LG51bGwsIjgwMCIsOTAsbnVsbCwiOTAwIiwxMDAsbnVsbF0sWyIxNjkiLDE2OV0sWyJhcGNhIiwiZmdUb0JnIiwiZXZlbiIsIiNmZmYiLCIjMDAwIiw0LCJwMyJdXQ
    */

    /* dark contrast */
    --green-100: oklch(0.96 0.07 169);
    --green-200: oklch(0.89 0.2 169);
    --green-300: oklch(0.82 0.22 169);
    --green-400: oklch(0.76 0.21 169);
    /* light contrast */
    --green-600: oklch(0.59 0.16 169);
    --green-700: oklch(0.5 0.14 169);
    --green-800: oklch(0.39 0.11 169);
    --green-900: oklch(0.29 0.08 169);

    /* light theme */
    --primary: var(--green-600);
    --secondary: var(--green-700);
    --tertiary: var(--green-800);
    --quaternary: var(--green-900);
    --text-primary: black;
    --text-secondary: #7c7c7c;
    --bg: white;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    justify-content: flex-start;
    color: var(--text-primary);
    background: var(--bg);
    min-height: 100dvh;
    font-family: 'RecVar', sans-serif;
    font-variation-settings: "MONO" 0, "CASL" 100;
}

pre {
    color: var(--text-primary);
    background: var(--bg);
    border-color: var(--primary);
    border-style: solid;
    border-width: 1px;
    padding: 1em;
    border-radius: 5px;
    overflow-x: auto;
}

code {
    font-size: 9pt;
    font-family: 'RecVar', monospace;
    font-variation-settings: "MONO" 100, "CASL" 100;
}

ul {
    margin-left: 1em;
    padding: 0;
}

li {
    padding: 0;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

audio {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

nav.menu {
    overflow: hidden;

    div {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        display: flex;
        height: 43px;
    }

    div.subs,
    .home {
        flex-grow: 1;
        flex-direction: row;
        justify-content: center;
    }

    div.home {
        a {
            border-color: var(--primary);
            border-width: 0px 0px 3px 0px;
            border-style: solid;
        }
    }

    a {
        padding-top: 10px;
        padding-bottom: 0px;
        padding-left: 10px;
        padding-right: 10px;
        height: 30px;
        color: var(--text-secondary);
        text-decoration: none;
    }

    a:hover {
        color: var(--text-primary);
        text-decoration: underline;
    }
}

header {
    padding: 0em 0em 0em 0em;
}

section {
    flex-grow: 1;

    .content {
        max-width: 80ch;
        margin: 0 auto;
        padding: 0em 1em;
    }
}

footer {
    padding: 0em 0em 1em 0em;
    text-align: center;
}

.subtitle {
    color: var(--text-secondary)
}