@CHARSET "UTF-8";

:root {
    --maxwidth: 1400px;
    --gridwidth: 300px;
    --rounding: 6px;
}

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

    :root {
        --backgroundcolor: #fff;
        --darker: rgba(51, 48, 46);
        --offwhite: rgba(0,0,0,0.02);
        --hoverwhite: rgba(0,0,0,0.2);
        --imageback: #fdfdfd;
        --shadowcolor: rgba(0,0,0,0.05);
        --bordercolor: #1f23284b;
        --textcolor: rgba(0, 0, 0, 1.0);    
        --notificationtextcolor: #fff;
        --headercolor: #000;
        --footercolor: rgba(0,0,0,0.05);
    }

    .dialogbox_content {
        background-color: #FFF;
        color: #000;
    }

}

@media (prefers-color-scheme: dark) {
    
    :root {
        --backgroundcolor: #000;
        --darker: rgba(51, 48, 46, 1.0);
        --offwhite: #222;
        --hoverwhite: rgba(255,255,255,0.2);
        --imageback: #222;
        --shadowcolor: rgba(0,0,0,0.05);
        --bordercolor: rgba(255,255,255,0.1);
        --textcolor: rgba(255,255,255,1.0);    
        --notificationtextcolor: #fff;
        --headercolor: #FFF;
        --footercolor: #111;
    }

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

}