:root {
    --dark: #171B2B;
    --light: #FFD97A;
    --accent1: #AF5F46;
    --accent2: #85BE6A;
    --accent3: #D9103D;
}

.theme-dark {
    --darkfinal: #171B2B;
    --background2: #2f344b;
    --lightfinal: #FFD97A;
    --accentfinal: #85BE6A;
    --link: yellow;
    --linkbg: blue;
    --blobs: #AF5F46;
    --selected: #D9103D;
    --selectedbg: white;
    --mainfont: "wiki";
    --titlefont: "viktor";
    --peanutbg: rgba(255, 255, 255, 0);

}

.theme-light {
    --darkfinal: #FFD97A;
    --background2: #f5e1ae;
    --lightfinal: #171B2B;
    --accentfinal: #D9103D;
    --link: yellow;
    --linkbg: blue;
    --blobs: #729759;
    --selected: white;
    --selectedbg: #29a03a;
    --mainfont: "wiki";
    --titlefont: "viktor";
    --peanutbg: rgba(255, 255, 255, 0);
}

.theme-monolight {
    --darkfinal: white;
    --background2: white;
    --lightfinal: black;
    --accentfinal: black;
    --link: white;
    --linkbg: black;
    --blobs: black;
    --selected: rgb(255, 255, 255);
    --selectedbg: rgb(83, 83, 83);
    --mainfont: "maru";
    --titlefont: "maru";
    --peanutbg: white;
}

.theme-monodark {
    --darkfinal: black;
    --background2: black;
    --lightfinal: white;
    --accentfinal: white;
    --link: black;
    --linkbg: white;
    --blobs: white;
    --selected: rgb(83, 83, 83);
    --selectedbg: rgb(255, 255, 255);
    --mainfont: "maru";
    --titlefont: "maru";
    --peanutbg: black;
}

/* operandi themes */

.theme-cocktail {
    --darkfinal: #101245;
    --background2: #611249;
    --lightfinal: #f7ce8f;
    --accentfinal: #e7b23a;
    --link: #efd36e;
    --linkbg: #690083;
    --blobs: #8fbdc9;
    --selected: #3810d9;
    --selectedbg: white;
    --mainfont: "viktor";
    --titlefont: "viktor";
    --peanutbg: rgb(34 50 65 / 18%);
}

.theme-tbilisi {
    --darkfinal: #271c16;
    --background2: #2f1b02;
    --lightfinal: #f5fff0;
    --accentfinal: #85BE6A;
    --link: #142d18;
    --linkbg: #ffffff;
    --blobs: #af9546;
    --selected: #000000;
    --selectedbg: #e59874;
    --mainfont: "Helvetica";
    --titlefont: "Helvetica";
    --peanutbg: rgb(99 54 23 / 15%);
}

.theme-hackertrack {
    --darkfinal: #000000;
    --background2: #000000;
    --lightfinal: #10ff00;
    --accentfinal: #91ff00;
    --link: #e2fab1;
    --linkbg: #000000;
    --blobs: #000000;
    --selected: #000000;
    --selectedbg: #00ff1f;
    --mainfont: "Courier";
    --titlefont: "Courier";
    --peanutbg: #000000;
}

.theme-figures {
    --darkfinal: #020202;
    --background2: #121212;
    --lightfinal: #ffffff;
    --accentfinal: #ff003b;
    --link: #000000;
    --linkbg: #ff003b;
    --blobs: #ff003b;
    --selected: #ff003b;
    --selectedbg: #ffffff;
    --mainfont: "lexend";
    --titlefont: "lexend";
    --peanutbg: rgb(0 0 0 / 26%);
}


/* strange themes */

.theme-redacted {
    --darkfinal: rgb(241, 217, 189);
    --background2: rgb(187 157 123);
    --lightfinal: rgb(29, 27, 26);
    --accentfinal: rgb(31, 28, 28);
    --link: black;
    --linkbg: black;
    --blobs: rgb(90, 59, 29);
    --selected: black;
    --selectedbg: black;
    --mainfont: "Courier New";
    --titlefont: "Courier New";
    --peanutbg: #f3ede5;
}

.theme-wikipedia {
    --darkfinal: white;
    --background2: white;
    --lightfinal: #101418;
    --accentfinal: #101418;
    --link: #3056A9;
    --linkbg: white;
    --blobs: #F8F9FA;
    --selected: white;
    --selectedbg: #3367D1;
    --mainfont: "Arial";
    --titlefont: "Georgia";
    --peanutbg: rgba(255, 255, 255, 0);
}

.theme-bilgefest {
    --darkfinal: lavender;
    --background2: turquoise;
    --lightfinal: black;
    --accentfinal: forestgreen;
    --link: #E0AC00;
    --linkbg: darkorange;
    --blobs: #CBCBFE;
    --selected: white;
    --selectedbg: #A49A92;
    --mainfont: "bauhaus";
    --titlefont: "west";
    --peanutbg: #5A6942;
}


/* classic themes */

.theme-henry {
    --darkfinal: #000a0e;
    --background2: #11293e;
    --lightfinal: #BBABF7;
    --accentfinal: #DDEDD3;
    --link: yellow;
    --linkbg: blue;
    --blobs: #74a2b5;
    --selected: #031340;
    --selectedbg: #00FFFF;
    --mainfont: "classicwald";
    --titlefont: "classicwald";
    --peanutbg: #031340;
}

.theme-jor {
    --darkfinal: #0e0420;
    --background2: #6e3a8e;
    --lightfinal: white;
    --accentfinal: #dc96f3;
    --link: yellow;
    --linkbg: blue;
    --blobs: #E84ABE;
    --selected: #190442;
    --selectedbg: #FFC0CB;
    --mainfont: "classicjor";
    --titlefont: "classicjor";
    --peanutbg: #190442;
}

.theme-plok {
    --darkfinal: #340202;
    --background2: #6a1d00;
    --lightfinal: #edaa61;
    --accentfinal: #FFFCB2;
    --link: yellow;
    --linkbg: blue;
    --blobs: #a57d3d;
    --selected: #0f1d4a;
    --selectedbg: #DB0D39;
    --mainfont: "classicplok";
    --titlefont: "classicplok";
    --peanutbg: #0f1d4a;
}

.theme-erlendur {
    --darkfinal: #48af91;
    --background2: #a6ed8e;
    --lightfinal: #003434;
    --accentfinal: #FFFF7F;
    --link: yellow;
    --linkbg: blue;
    --blobs: #002F2F;
    --selected: #5f952a;
    --selectedbg: #000000;
    --mainfont: "classicerlendur";
    --titlefont: "classicerlendur";
    --peanutbg: chartreuse;
}

@property --darkfinal {
  syntax: '<color>';
  initial-value: #171B2B;
  inherits: true;
}

@property --background2 {
  syntax: '<color>';
  initial-value: #2f344b;
  inherits: true;
}

@property --lightfinal {
  syntax: '<color>';
  initial-value: #FFD97A;
  inherits: true;
}

@property --accentfinal {
  syntax: '<color>';
  initial-value: #85BE6A;
  inherits: true;
}

@property --link {
  syntax: '<color>';
  initial-value: rgb(255, 255, 0);
  inherits: true;
}

@property --linkbg {
  syntax: '<color>';
  initial-value: blue;
  inherits: true;
}

@property --blobs {
  syntax: '<color>';
  initial-value: #AF5F46;
  inherits: true;
}

@property --selected {
  syntax: '<color>';
  initial-value: #D9103D;
  inherits: true;
}

@property --selectedbg {
  syntax: '<color>';
  initial-value: white;
  inherits: true;
}

@property --peanutbg {
  syntax: '<color>';
  initial-value: rgba(255, 255, 255, 0);
  inherits: true;
}

/* theme box styling */

#themeselector {
    z-index: 9998;
    font-family: msp;
    font-size: 8pt;
    color: var(--lightfinal);
    background: var(--darkfinal);
    /* transition: color 0.5s ease; */
    /* transition: background 0.5s ease; */
    box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 0;
    text-shadow: var(--accentfinal) 0 1px 0;
    border: 1px solid black;
    scrollbar-width: thin;
    scrollbar-color: var(--lightfinal) transparent;
}

#themeselector:hover {
    color: var(--darkfinal);
    background: var(--lightfinal);
    cursor: pointer;
}

#themeselector:focus {
    outline: none;
    border: 1px solid black;
}

#themebox option {
    color: var(--darkfinal);
    background: var(--lightfinal);
    font-family: msp;
    
}

#themebox optgroup {
  /* font-style: italic; */
  font-family: msp;
  font-size: 10pt;
  color: var(--darkfinal);
  background-color: var(--accentfinal);
}

#themebox {
    z-index: 9998;
    position: fixed;
    top: -40px;
    left: 10px;
    margin: 0;
    padding: 20px 0 0 0;
    font-family: msp;
    font-size: 8pt;
    transition: top 0.5s cubic-bezier(0.18, 0.18, 0.23, 0.91);
}

#themebox:hover {
    top: -15px;
    font-size: 14pt;
}

#themebox p {
    font-family: msp;
    font-size: 8pt;
    margin: 10px 0 0 0;
    width: 100%;
    text-align: center;
    color: var(--lightfinal);
    background-color: var(--background2);
    /* animation: fadetheme 5s ease-in-out 1 forwards, fadethemetwo 5s ease-in-out 1 forwards 5s; */
    user-select: none;
}

@keyframes fadetheme {
    0% {
        background-color: var(--background2);
    }

    100% {
        background-color: rgba(0, 0, 0, 0);
    }
}

@keyframes fadethemetwo {
    0% {
        color: var(--lightfinal);
    }

    100% {
        color: rgba(0, 0, 0, 0);
    }
}

@keyframes comeback {
    0% {
        background-color: var(--background2);
        color: rgba(0, 0, 0, 0);
    }

    100% {
        background-color: var(--background2);
        color: var(--lightfinal)
    }
}

#themebox p:hover {
    animation: comeback 0s linear infinite;
}

#themebox label {
    text-decoration: underline;
    font-style: italic;
    font-family: var(--titlefont);
    font-size: 10pt;
    color: var(--darkfinal);
    background-color: var(--accentfinal);
}

/* body {
    transition: --darkfinal 0.5s, 
            --background2 2s, 
            --lightfinal 1s,
            --accentfinal 1s,
            --link 0.1s,
            --linkbg 1s,
            --blobs 1s,
            --selected 1s,
            --selectedbg 1s,
            --peanutbg 1s;
} */

.theme-zinereader {
    --darkfinal: #000000;
    --background2: #171a31;
    --lightfinal: #ffffff;
    --accentfinal: #ffffff;
    --link: #ffffff;
    --linkbg: blue;
    --blobs: #AF5F46;
    --selected: #0000ff;
    --selectedbg: #ffffff;
    --mainfont: "wiki";
    --titlefont: "viktor";
    --peanutbg: rgba(255, 255, 255, 0);
}

.theme-plaque {
    --darkfinal: black;
    --background2: black;
    --lightfinal: white;
    --accentfinal: white;
    --link: black;
    --linkbg: white;
    --blobs: white;
    --selected: rgb(83, 83, 83);
    --selectedbg: rgb(255, 255, 255);
    --mainfont: "maru";
    --titlefont: "maru";
    --peanutbg: black;
}