html {
    font-size: 16px;
}

:root {
    --abs-white: rgba(255, 255, 255, 1);
    --abs-white-o75: rgba(255, 255, 255, 0.75);
    --abs-white-o50: rgba(255, 255, 255, 0.5);
    --abs-white-o25: rgba(255, 255, 255, 0.25);
    --abs-black: rgba(0, 0, 0, 1);
    --abs-black-o75: rgba(0, 0, 0, 0.75);
    --abs-black-o50: rgba(0, 0, 0, 0.5);
    --abs-black-o25: rgba(0, 0, 0, 0.25);

    /* COLORS VARIABLES */
    --black: #020613; /* TODO: rename to --blackish */
    /*--black: #111;*/
    --white: #f5f9fd; /* TODO: rename to --whitish */
    --gold-light: #f0dea7;
    --gold-rich: #e3c362;
    --gold-red: #a0591c;
    --dark-brown: #391d0a;

    /* TODO: replace these */
    --gold-dark: #ac9b7b;
    --gold-faded: #4e4736;

    /* TODO: replace these */
    --text-color: #fefefe;


    --static-color: var(--white);
    --changeable-color: var(--gold-light);

    --error-red: #ff2727;
    --valid-green: #44c54f;

    --global-menu-background-color: var(--abs-black-o75);
    --global-menu-text-color: var(--gold-light);

    /* COLOR USAGE */
    --body-background-color-web: var(--black);

    --text-color-normal: var(--gold-light);
    --text-color-header: var(--white);
    --text-color-label: var(--white);
    --text-color-emphasis: var(--gold-rich);

    --primary-color: var(--gold-light);
    --secondary-color: #80a4ed;
    --background-color-primary: #111111;
    --background-color-secondary: #333333;
    --text-color-interactible: var(--primary-color);
    --text-color-interactible-hover: var(--secondary-color);
    --text-color-interactible-active: var(--text-color-interactible-hover);
    --text-color-primary: #eeeeee;
    --text-color-faded: #dedede;
    --text-color-weak: #cccccc;

    /* GRADIENTS */
    --gradient-gold-red-to-weak-dark-brown: linear-gradient(
        180deg,
        var(--gold-red) 0%,
        rgba(160, 89, 28, 0.5) 79.69%,
        rgba(52, 30, 15, 0.3) 100%
    );

    /* SETTINGS */
    --font-stack: "EB Garamond", "Garamond", serif;

    /* Variables for overriding */
    --gap: 0rem;
}

button,
select,
option,
input {
    background: var(--abs-black-o25);
    color: var(--gold-light);
    border-color: var(--gold-dark);
    border-radius: 0;
    padding: 0.4rem 0.7rem;
    border-width: 1px;
    border-style: solid;
    border-radius: 0;
    outline: none;
    color: var(--text-color);
}

body {
    margin: 0;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
        Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    line-height: 1.5;
    /*background-color: #111;*/
    /*color: #ccc;*/
    /*max-width: 100vw;*/
    color: var(--text-color);
    /*font-family: var(--font-stack);*/
}

* {
    box-sizing: border-box;
}

#sapper {
    min-height: 100vh;

    /* Need max-width at 100% since 100vw doesn't account for scrollbars
       (otherwise, side scrollbar will also make bottom scrollbar) */
    width: 100vw;
    max-width: 100%;

    overflow-x: initial;
    display: flex;
    flex-direction: column;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    margin: 0 0 0.5em 0;
    font-weight: 400;
    line-height: 1.2;
}

h1, .h1 {
    font-size: 2em;
}

h2, .h2 {
    font-size: 1.5em;
}

h3, .h3 {
    font-size: 1.35em;
}

h4, .h4,
h5, .h5,
h6, .h6 {
    font-size: 1.2em;
    font-weight: 500;
}

p {
    line-height: 1.7;
    margin: 0;
}

a {
    color: inherit;
}

code {
    font-family: monospace;
    color: #fefefe;
    background-color: rgba(0, 0, 0, 0.1);
    outline: 1px dashed rgba(255, 255, 255, 0.3);
    padding: 0.2em 0.4em;
    border-radius: 2px;
}

/*@media (min-width: 400px) {*/
/*    body {*/
/*        font-size: 16px;*/
/*    }*/
/*}*/

img {
    display: block;
}

details summary {
    cursor: pointer;
}


/*************/
/* TEXT-FLOW */
/*************/
/**/
/*--> (for spacing in longer texts with lots of <h2>, <h3>, <p>, etc) */

.text-flow {
    font-size: 16px;
    font-family: 'Tahoma', sans-serif;
    font-weight: 400;
    line-height: 1.75;

    /* Readable width */
    max-width: 80ch;
    /* Center self (without flexbox, as the margins herein won't work in flex) */
    margin: auto;
}

.text-flow a {
    color: #e3c362;
    transition: all 0.2s;
}
.text-flow a:hover {
    color: #f0dea7;
}

.text-flow p {
    margin-bottom: 1em;
}

.text-flow h1,
.text-flow h2,
.text-flow h3,
.text-flow h4,
.text-flow h5,
.text-flow summary[data-as-h1],
.text-flow summary[data-as-h2],
.text-flow summary[data-as-h3],
.text-flow summary[data-as-h4],
.text-flow summary[data-as-h5] {
    font-family: 'Tahoma', sans-serif;
    margin: 3rem 0 1.38rem;
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    line-height: 1.3;
}

.text-flow summary[data-as-h1],
.text-flow h1 {
    font-family: 'Tahoma', sans-serif;
    margin-top: 0;
    font-size: 1.383em;
}
.text-flow summary[data-as-h1]::before,
.text-flow h1::before {
    content: "# ";
    opacity: 0.25;
}

.text-flow summary[data-as-h2],
.text-flow h2 {
    font-family: 'Tahoma', sans-serif;
    font-size: 1.296em;
}
.text-flow summary[data-as-h2]::before,
.text-flow h2::before {
    content: "## ";
    opacity: 0.25;
}

.text-flow summary[data-as-h3],
.text-flow h3 {
    font-family: 'Tahoma', sans-serif;
    font-size: 1.215em;
}
.text-flow summary[data-as-h3]::before,
.text-flow h3::before {
    content: "### ";
    opacity: 0.25;
}

.text-flow summary[data-as-h4],
.text-flow h4 {
    font-family: 'Tahoma', sans-serif;
    font-size: 1.138em;
}
.text-flow summary[data-as-h4]::before,
.text-flow h4::before {
    content: "#### ";
    opacity: 0.25;
}

.text-flow summary[data-as-h5],
.text-flow h5 {
    font-family: 'Tahoma', sans-serif;
    font-size: 1.067em;
}
.text-flow summary[data-as-h5]::before,
.text-flow h5::before {
    content: "##### ";
    opacity: 0.25;
}

.text-flow small,
.text-flow .text_small {
    font-family: 'Tahoma', sans-serif;
    font-size: 0.8em;
}