@CHARSET "UTF-8";

:root {
    --maxwidth: 1560px;
    --gridwidth: 360px;
    --dialoggridwidth: 200px;
    --rounding: 10px;
    --bannercolor: #0e5f93;
    --primarycolor: rgb(255, 209, 47);
    --secondarycolor: rgb(230, 168, 44);
}

@media (prefers-color-scheme: light) {

    :root {        
        --panelcolor: #FFF;
        --backgroundcolor: rgba(0,0,0,0.02);
        --hashcolor: rgba(226, 213, 41, 0.2);
        --hashcolor_gray: rgba(0,0,0,0.04);
        --headercolor: #FFF;
        --hoverpanelback: #FEFEFE;
        --hoverpanelback_hover: #FFF;
        --offwhite: #FFF;
        --imageback: #fdfdfd;
        --shadowcolor: rgba(32, 32, 32, 0.10);
        --bordercolor: rgba(0,0,0,0.2);
        --textcolor: #000;    
        --formcolor: #000;
        --paneltextcolor: #000;
        --highlightcolor: #f0f;
        --selectedcolor: #655e55;
        --notificationtextcolor: #fff;
        --bubbledefaultcolor: #FFF;
        --titlebarcolor: rgba(246, 218, 74, 0.35);
        --input_backgroundcolor: rgba(0,0,0,0.01);
        --tabselectedcolor: #FFF;
    }

}

@media (prefers-color-scheme: dark) {
    
    :root {
        --panelcolor: #000;        
        --backgroundcolor: #030303;
        --hoverpanelback: #222;
        --hoverpanelback_hover: #333;
        --offwhite: #000;
        --imageback: #fdfdfd;
        --shadowcolor: rgba(0,0,0,0.05);
        --bordercolor: rgba(255,255,255,0.2);
        --textcolor: #FFF;    
        --formcolor: #000;
        --paneltextcolor: #000;
        --notificationtextcolor: #fff;
        --headercolor: #000;
        --selectedcolor: #655e55;
        --bubbledefaultcolor: #000;
        --titlebarcolor: rgba(83, 75, 35, 0.35);
        --input_backgroundcolor: rgba(255,255,255,0.01);        
    }

    .logo,
    .icon:not(.noinvert) {
        -webkit-filter: invert(100%); filter: invert(100%);
    }

    .banner > header {
        color: #000;
    }

}