/* variables */

:root{

    /* template 
     * bg : background
     * pa : passive
     * ac : active
     * hl : hightlight
     * */
    
    /* copper */
    --copper-bg : #201;
    --copper-pa : #753;
    --copper-ac : #b67;
    --copper-hl : #deb;
    
    /* iron */
    --iron-bg : #021;
    --iron-pa : #537;
    --iron-ac : #888;
    --iron-hl : #dbe;
    
    /* gold */
    --gold-bg : #000;
    --gold-pa : #951;
    --gold-ac : #cb1;
    --gold-hl : #ffa;
    
    /* oak */
    --oak-bg : #003;
    --oak-pa : #753;
    --oak-ac : #6b7;
    --oak-hl : #ebd;
    
    /* cedar */
    --cedar-bg : #102;
    --cedar-pa : #3a2;
    --cedar-ac : #b85;
    --cedar-hl : #ddc;
    
    /* ebony */ 
    --ebony-bg : #111;
    --ebony-pa : #375;
    --ebony-ac : #d83;
    --ebony-hl : #ade;
    
    /* mountains */
    --mo-bg : #021;
    --mo-pa : #870;
    --mo-ac : #e55;
    --mo-hl : #daf;

    /* new-day */
    --nd-bg : #003;
    --nd-pa : #087;
    --nd-ac : #c57;
    --nd-hl : #fda;

    /* acid */
    --ac-bg : #003;
    --ac-pa : #834;
    --ac-ac : #8c4;
    --ac-hl : #ff8;
    
    /* calm */
    --ca-bg : #111;
    --ca-pa : #375;
    --ca-ac : #48c;
    --ca-hl : #f8f;
    
    /* dry */
    --dr-bg : #300;
    --dr-pa : #771;
    --dr-ac : #84c;
    --dr-hl : #8ff;

    /* forge */
    --fo-bg : #111;
    --fo-pa : #c30;
    --fo-ac : #897;
    --fo-hl : #adf;
    
    /* white */
    --wh-bg : #fff;
    --wh-pa : #000;
    --wh-ac : #000;
    --wh-hl : #000;
    
    /* black */
    --bl-bg : #000;
    --bl-pa : #444;
    --bl-ac : #999;
    --bl-hl : #fff;


}

/* fonts */

@font-face {
    font-family : "Topaz";
    src : url("../ttf/TopazPlus_a1200_v1.0.ttf");
}

/* main */

*{
    transition: background-color 2s, color 2s;
    box-sizing: border-box;
    margin:0;
    padding:0;
    font-family:Topaz;
    font-size:16px;
    line-height:16px;
    outline:none;
    border:none;
    overflow:hidden;
    cursor : none;
    pointer-events : none;
}

body{
    width : 100vw;
    height : 100vh;
    overflow : visible;
}

pre{
    position : absolute;
}

/* gold */

body.gold {
    background-color : var(--gold-bg);
}

body.gold > #passive {
    color : var(--gold-pa);
}

body.gold > #active {
    color : var(--gold-ac);
}

body.gold > #highlight {
    color : var(--gold-hl);
}

/* iron */

body.iron {
    background-color : var(--iron-bg);
}

body.iron > #passive {
    color : var(--iron-pa);
}

body.iron > #active {
    color : var(--iron-ac);
}

body.iron > #highlight {
    color : var(--iron-hl);
}

/* copper */

body.copper {
    background-color : var(--copper-bg);
}

body.copper > #passive {
    color : var(--copper-pa);
}

body.copper > #active {
    color : var(--copper-ac);
}

body.copper > #highlight {
    color : var(--copper-hl);
}

/* ebony */

body.ebony {
    background-color : var(--ebony-bg);
}

body.ebony > #passive {
    color : var(--ebony-pa);
}

body.ebony > #active {
    color : var(--ebony-ac);
}

body.ebony > #highlight {
    color : var(--ebony-hl);
}

/* cedar */

body.cedar {
    background-color : var(--cedar-bg);
}

body.cedar > #passive {
    color : var(--cedar-pa);
}

body.cedar > #active {
    color : var(--cedar-ac);
}

body.cedar > #highlight {
    color : var(--cedar-hl);
}

/* oak */

body.oak {
    background-color : var(--oak-bg);
}

body.oak > #passive {
    color : var(--oak-pa);
}

body.oak > #active {
    color : var(--oak-ac);
}

body.oak > #highlight {
    color : var(--oak-hl);
}


/* mountains */

body.mo {
    background-color : var(--mo-bg);
}

body.mo > #passive {
    color : var(--mo-pa);
}

body.mo > #active {
    color : var(--mo-ac);
}

body.mo > #highlight {
    color : var(--mo-hl);
}

/* new-day */

body.nd {
    background-color : var(--nd-bg);
}

body.nd > #passive {
    color : var(--nd-pa);
}

body.nd > #active {
    color : var(--nd-ac);
}

body.nd > #highlight {
    color : var(--nd-hl);
}

/* forge */

body.fo {
    background-color : var(--fo-bg);
}

body.fo > #passive {
    color : var(--fo-pa);
}

body.fo > #active {
    color : var(--fo-ac);
}

body.fo > #highlight {
    color : var(--fo-hl);
}

/* acid */

body.ac {
    background-color : var(--ac-bg);
}

body.ac > #passive {
    color : var(--ac-pa);
}

body.ac > #active {
    color : var(--ac-ac);
}

body.ac > #highlight {
    color : var(--ac-hl);
}

/* calm */

body.ca {
    background-color : var(--ca-bg);
}

body.ca > #passive {
    color : var(--ca-pa);
}

body.ca > #active {
    color : var(--ca-ac);
}

body.ca > #highlight {
    color : var(--ca-hl);
}

/* black */

body.bl {
    background-color : var(--bl-bg);
}

body.bl > #passive {
    color : var(--bl-pa);
}

body.bl > #active {
    color : var(--bl-ac);
}

body.bl > #highlight {
    color : var(--bl-hl);
}

/* white */

body.wh {
    background-color : var(--wh-bg);
}

body.wh > #passive {
    color : var(--wh-pa);
}

body.wh > #active {
    color : var(--wh-ac);
}

body.wh > #highlight {
    color : var(--wh-hl);
}

/* dry */

body.dr {
    background-color : var(--dr-bg);
}

body.dr > #passive {
    color : var(--dr-pa);
}

body.dr > #active {
    color : var(--dr-ac);
}

body.dr > #highlight {
    color : var(--dr-hl);
}