:root {
    --main: var(--brown);
    --accent: var(--gold);

    --gold: #FEBA7D;
    --divider: #bb7c36;
    --green: #0857265c;
    --red: #E84343;
    --brown: #812A18;
    --darkbrown: #3f0808;

    --accent2: var(--green);
}

@media (prefers-color-scheme: dark) {
:root {
    --main: var(--brown);
    --accent: var(--gold);
    --accent2: var(--gold);
}
}

@font-face {
    font-family: 'Canterbury';
    src: url('/_/fonts/Canterbury/Canterbury.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Nabla';
    font-style: normal;
    font-weight: normal;
    src: local('Nabla'), url('/_/fonts/Nabla/Nabla-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Nanum';
    src: url('/_/fonts/Nanum/NanumGothicCoding-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

body {
    margin: 0px;
    font-family: 'Bona Nova', sans-serif;
    font-size: 16px;
    background-color: var(--main);
    color: var(--accent);
}

@media (max-width: 480px) {
    body, html{
        overflow-x: hidden;
    }
}

#title {
    padding: 5px 10px; 
    font-size: 1.7rem;
    position: fixed; top: 4.5vh; left: 6vw;
    cursor: pointer; z-index: 1;
}

a {
    cursor: default;
    text-decoration: none;
    text-underline-offset: 5px;
    transition: background .02s, color .2s;
    user-select: none;
    color: var(--accent);
    display: inline-block;   /* makes background and padding behave */
    padding: 0.2em 0.5em;    /* adds breathing room */
}

a:hover {
    text-decoration: none;
    background: var(--green);
    color: var(--tan);
}

a:active {
    background: var(--red);   /* background color works now */
}

button {
    background-color: transparent;
    color: var(--accent);
    padding: 0.5em;
    box-shadow: none;
    border: 1px solid var(--accent);
    border-radius: 0.3em;
}

input {
    background-color: transparent;
    border: 1px solid var(--accent2);
    padding-left: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-radius: 0.3em;
}

input::placeholder {
    color: var(--accent)
}

input:focus {
    outline: 1px solid var(--red);
}