:root {
    /* --bg: #f1faed; */
    /* --fg: #111517; */
    /* --shade1: #c1c9c2; */
    /* --shade2: #aab5ab; */
    /**/
    /* --shade3: #555e57; */
    /* --shade4: #3b423f; */
    /**/
    /* --shade5: #262d2b; */
    /* --shade6: #1e2624; */

    --fg: #f1faed;
    --bg: #111517;

    --shade6: #c1c9c2;
    --shade5: #aab5ab;

    --shade4: #555e57;
    --shade3: #3b423f;

    --shade2: #262d2b;
    --shade1: #1e2624;

    --red: #c95050;
    --orange: #dbb35e;
    --yellow: #f9da8d;
    --green: #89c4a6;
    --cyan: #8dd3dc;
    --blue: #7195ae;
    --purple: #a16eb2;
    --pink: #e07dad;

    --accent: var(--cyan);
    --header: var(--bg);
    --header-label: var(--green);
}


body {
    color: var(--fg);
    background-color: var(--bg);

    min-height: 100vh;

    margin: 0;
}

h1,
h2,
h3 {
    color: var(--header);
    display: block;
    padding: .25rem;
    margin: 0;
}

span.header {
    background-color: var(--header-label);
}

p {
    background-color: var(--shade2);
    padding: .25rem;
    margin: 0px;
}

blockquote {
    border-left: 5px solid var(--accent);
    margin: 0px;
}

table {
    width: 100%;
    text-align: center;
}

input[type=checkbox] {
    width: 0;
    height: 0;
}

label.checkbox {
    display: block;
    background-color: var(--shade2);
}

label.checkbox:has(input:checked) {
    background-color: var(--accent);
}

.module {
    display: inline-block;
    background-color: var(--shade1);
    margin: .5rem;
    padding: .5rem;
    min-width: 500px;
}

footer {
    position: absolute;
    width: 100%;
    padding: .25rem 0px;

    text-align: center;

    background-color: var(--shade2);
    color: var(--accent);

    bottom: 0px;
}