:root {
    --tan: #E6D7AA;
    --accent: black;
    --purple: #251D44;
    --green: #0B5538;
    --red: #BC1C02;
    --brown: #c6a476;
}

@media (prefers-color-scheme: dark) {
:root {
    --tan: #251D44;
    --accent: #AF7323;
}
}

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

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

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

body {
    font-family: 'BonaNova', sans-serif;
    font-size: 16px;
    background-color: var(--tan);
    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: var(--green);
    color: var(--tan);
    padding: 1em;
    box-shadow: none;
}