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

    --tan: #FFDFB4;
    --gold: #F2B36F;
    --divider: #bb7c36;
    --green: #0857265c;
    --red: #BC1C02;
    --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: 'Bona Nova';
    src: url('/_/fonts/BonaNova/BonaNova-Regular.woff') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bona Nova';
    src: url('/_/fonts/BonaNova/BonaNova-Bold.woff') format('truetype');
    font-weight: bold;
    font-style: normal;
}

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

#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);
}