:root {

--sunny: #f0d6af;
--beige: #D7BE82;    
--wheat: #d1ab7a;
--moss: #515a47;
--corn: #755C1B;
--rusty: #7A4419;
--bloodred: #400406;

}

@font-face {
    font-family: 'AdevasPixel';
    src: url('AdevasPixel-Regular.woff2') format('woff2'),
        url('AdevasPixel-Regular.woff') format('woff');
}

@font-face {
    font-family: 'AdvinePixel';
    src: url('AdvinePixelDemo-Regular.woff2') format('woff2'),
        url('AdvinePixelDemo-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Smalle';
    src: url('Smalle.woff2') format('woff2'),
        url('Smalle.woff') format('woff');
}

@font-face {
    font-family: 'idk';
    src: url('idk.woff2') format('woff2');
}

body {
    background: var(--sunny);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 98vh;
}

section {
    background-color: var(--moss);

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    text-align: right;

    width: 37em;
    padding: 0 1em 1em 1em;
    max-height: 42.5em;

    box-shadow:
        -4px 0 0 0 #838b7a,
        4px 0 0 0 #838b7a,
        0 -4px 0 0 #838b7a,
        0 4px 0 0 #838b7a;
    overflow: hidden scroll;
}

#cont-header {
    position: sticky;
    top: 0;
    background-color: var(--moss);
}

h1 {
    font-family: 'AdevasPixel';
    font-size: 3em;
    color: var(--beige);

    margin: 0.1em;
}

#border {
    border: 1px dotted var(--wheat);
}

h2 {
    font-family: 'AdvinePixel';
    font-size: 2em;
    color: var(--wheat);

    margin: 0 0.1em 0.1em 0.1em;
}

p {
    font-family: 'idk';
    color: var(--sunny);
    text-align: center;
}

#subheader {
    font-family: 'AdvinePixel';
    color: var(--wheat);

    display: flex;
    justify-content: space-between;
    align-items: end;
}

#subheader a {
    margin-right: 0.5em;
    color: var(--sunny);
    text-decoration: underline dotted var(--beige);
}

#subheader a:focus, #subheader a:hover {
    margin-right: 0.5em;
    color: white;
    text-decoration: underline dotted var(--corn);
}

.important {
    text-decoration: underline wavy white;
}

@media only screen and (max-width: 1200px) {
    body {
        background: black url(leavesmobile.png) fixed center / cover repeat-x;
    }

    section {
        float: initial;

        width: initial;
        margin-top: 35em;
    }

    #subheader {
        flex-direction: column-reverse;
    }

}

@media (prefers-color-scheme: dark) {

    body {
        background: black;
    }

    section {
        background-color: var(--rusty);
        box-shadow:
            -4px 0 0 0 #6b3a11,
            4px 0 0 0 #6b3a11,
            0 -4px 0 0 #6b3a11,
            0 4px 0 0 #6b3a11;
    }

    #cont-header {
        background-color: var(--rusty);
    }

    h1 {
        color: var(--beige);
    }

    #border {
        border: var(--bloodred);
    }

    h2 {
        color: var(--wheat);
    }

    p {
        color: var(--sunny);
    }

    #subheader {
        color: var(--wheat);
    }

    #subheader a {
        color: var(--sunny);
        text-decoration: underline dotted var(--beige);
    }

    #subheader a:focus, #subheader a:hover {
        color: white;
        text-decoration: underline dotted var(--corn);
    }

    .important {
        text-decoration: underline wavy white;
    }

}