:root {
    --main: #ffe6d0;
    --app: var(--parchment);
    --accent: rgb(57, 26, 0);
    --accent2: rgb(57, 26, 0);
    --window: #fff1e4;

    --bone: #fff2e7;
    --parchment: #FEBA7D;
    --gold: #FEBA7D;
    --divider: #bb7c36;
    --green: #0857265c;
    --red: #ff0000;
    --quillred: #DE3F3F;
    --brown: #812A18;
    --darkbrown: #3f0808;

    --house-src: /_/icons/house.svg;
    --nodes-src: /_/icons/nodes.svg;
    --forum-src: /_/icons/forum.svg;
    --people-src: /_/icons/people.svg;
    --settings-src: /_/icons/settings.svg;
}

:root.parchment {
    --main: var(--parchment);
    --app: var(--parchment);
    --accent: rgb(57, 26, 0);
    --accent2: rgb(57, 26, 0);
    --window: #ffc28b;

    --house-src: /_/icons/house.svg;
    --nodes-src: /_/icons/nodes.svg;
    --forum-src: /_/icons/forum.svg;
    --people-src: /_/icons/people.svg;
    --settings-src: /_/icons/settings.svg;
}

:root.dark {
    --main: #000000;
    --app: #180404;
    --accent: #8a7454;
    --accent2: var(--gold);
    --window: #340f0f;

    --house-src: /_/icons/housedark.svg;
    --nodes-src: /_/icons/nodesdark.svg;
    --forum-src: /_/icons/forumdark.svg;
    --people-src: /_/icons/peopledark.svg;
    --settings-src: /_/icons/settingsdark.svg;
}

:root.red {
    --main: var(--red);
    --app: var(--red);
    --accent: rgb(57, 0, 0);
    --accent2: var(--green);
    --window: #ff0000;

    --house-src: /_/icons/house.svg;
    --nodes-src: /_/icons/nodes.svg;
    --forum-src: /_/icons/forum.svg;
    --people-src: /_/icons/people.svg;

    --quill-src: /_/icons/people.svg;
}

:root.public {
    --main: black;
    --accent: var(--parchment);
}

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

:root.red body {
    background-color: #e70101;
}

:root.dark body {
    background-color: #000000;
}

:root.dark app-window {
    border: 1px solid #7a6b55;
}

:root app-window {
    border-bottom: 2px solid var(--window);
}

@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 {
    font-family: inherit;
    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 {
    font-family: "Nanum";
    color: var(--accent)
}

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