@CHARSET "UTF-8";

:root {
    --maxwidth: 1560px;
    --gridwidth: 360px;
    --dialoggridwidth: 200px;
    --rounding: 8px;
    --bannercolor: #0e5f93;
}

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

    :root {        
        --panelcolor: #FFF;
        --backgroundcolor: #FFF;
        --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(0,0,0,0.15);
        --bordercolor: rgba(0,0,0,0.2);
        --textcolor: #000;    
        --formcolor: #000;
        --paneltextcolor: #000;
        --notificationtextcolor: #fff;
        --bubbledefaultcolor: #cde8c0;
    }

}

@media (prefers-color-scheme: dark) {
    
    :root {
        --backgroundcolor: #000;
        --hoverpanelback: #222;
        --hoverpanelback_hover: #333;
        --offwhite: rgba(255,255,255,0.04);
        --imageback: #fdfdfd;
        --shadowcolor: rgba(0,0,0,0.05);
        --bordercolor: #1f2328ff;
        --textcolor: #FFF;    
        --formcolor: #000;
        --paneltextcolor: #000;
        --notificationtextcolor: #fff;
        --headercolor: #000;
        --bubbledefaultcolor: #511;
    }

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

    .banner > header {
        color: #000;
    }

}