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 */
    --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(--input-background-color);*/
    /*color: var(--input-text-color-primary);*/
    /*border: 1px solid var(--gold-dark);*/
    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;*/
    background-color: var(--black);
    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;
}