:root {
    --main: #ffe6d0;
    --app: var(--parchment);
    --lightaccent: rgb(37, 37, 37);
    --accent: black;
    --text: #000000;
    --darktext: #62473E;
    --headertext: #000000;
    --accent2: rgb(57, 26, 0);
    --divider: rgb(223, 201, 169);
    --lightDivider: rgb(236, 215, 183);

    --bone: #fff2e7;
    --cream: #ffe6d0;
    --parchment: #FEBA7D;
    --tan: #D2B48C;
    --gold: #FEBA7D;
    --green: #0857265c;
    --orange: #F28C28;
    --red: #ff0000;
    --darkred: #6b2c1d;
    --quillred: #DE3F3F;
    --brown: #812A18;
    --darkbrown: #3f0808;

    --window: var(--sidebottombars);
    --window-border: var(--accent);
    --apppopup: rgb(221, 39, 39);
    --sidebottombars: #ffd8ba;
    --button-color: var(--quillred);
    --menu-border: var(--accent);
    --desktop-item-border: var(--accent);
    --desktop-item-background: var(--sidebottombars);

    --sidebar: rgb(221, 39, 39);
    --sidebaraccent: rgb(181, 31, 31);

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

@media (max-width: 768px) {
:root {
    --sidebottombars: rgb(221, 39, 39);
    --sidebaraccent: rgb(181, 31, 31);
}
}

:root.dark {
    --main: #2f0f0f;
    --app: #180404;
    --lightaccent: #a37362;
    --accent: #ca8e79;
    --text: var(--accent);
    --darktext: #62473E;
    --headertext: var(--accent);
    --accent2: var(--gold);
    --divider: #523636;
    --lightDivider: #412322;
    
    --window: #250303ba;
    --apppopup: rgb(255, 213, 163);
    --sidebottombars: #250303;
    --button-color: #6b2d1d6d;
    /* --button-color: #1c05056d; */
    --desktop-item-border: #52372d;
    --desktop-item-background: #7438334a;
    /* --desktop-item-background: #3d1d1d; */

    --sidebar: var(--sidebottombars);
    --sidebaraccent: #2f1414;
    --searchbackground: #260F0C;
    --loginButton: var(--darkaccent);
    --loginBackground: var(--accent);

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

@media (max-width: 768px) {
:root.dark {
    --lightaccent: #eba58b;
    --darkaccent: #250303;
    --headertext: #ffd8bb;
    --sidebaraccent: #2f1414;
}
}

:root.dark2 {
    --main: #2A150E;
    --app: #180404;
    --accent: #fde0b4de;
    --accent2: var(--gold);
    --window: var(--desktop-item-background);
    --window-border: #894646;
    --divider: rgb(69 34 34);
    --apppopup: rgb(255, 213, 163);
    --sidebottombars: #6B2C1D;
    --menu-border: #894646;
    --desktop-item-border: #3B2422;
    --desktop-item-background: #240609;

    --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: #ff2d24;
    --app: #ff2d24;
    --accent: rgb(57, 0, 0);
    --accent2: var(--green);
    --window: var(--sidebottombars);
    --divider: rgb(221 15 15);
    --apppopup: black;
    --sidebottombars: #f20e0e;

    --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.orange {
    --main: #ff5c24;
    --accent: rgb(0 0 0 / 73%);
    --accent2: var(--green);
    --window: var(--sidebottombars);
    --divider: rgb(0 0 0 / 23%);
    --apppopup: black;
    --sidebottombars: #ff4607;
}

:root.aquaman {
    --main: #ff5c24;
    --accent: rgb(57, 0, 0);
    --accent2: var(--green);
    --window: var(--sidebottombars);
    --divider: rgb(87, 47, 47);
    --apppopup: black;
    --sidebottombars: #92743c;
}

:root.parchment {
    --main: var(--parchment);
    --app: var(--parchment);
    --accent: rgb(57, 26, 0);
    --accent2: rgb(57, 26, 0);
    --window: #ffc28b;
    --divider: rgb(205 152 76);
    --apppopup: rgb(221, 39, 39);
    --sidebottombars: #fdc28b;

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

@media (max-width: 768px) {
:root.parchment {
    --minicalendarbackground: #ffd8ba;
}
}

: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: 'Didot';
    font-style: normal;
    font-weight: normal;
    src: local('Didot'), url('/_/fonts/Didot/Didot.ttf') format('truetype');
}

@font-face {
    font-family: 'Didot';
    src: url('/_/fonts/Didot/Didot-Bold.otf') format('opentype');
    font-style: normal;
    font-weight: 700;
}

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

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

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

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

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

iframe {
    border: none;
}

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

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

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

: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 {
    color: var(--accent)
}

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