@CHARSET "UTF-8";

:root {
    --maxwidth: 1700px;
    --gridwidth: 340px;
    --rounding: 6px;
    --playercolor: #252930;
}

@media (prefers-color-scheme: light) {
    
    :root {
        --backgroundcolor: #FFF;
        --headercolor: #161b26;
        --gridheadercolor: #e7e7e7;
        --menuitem: #F1F1F1;
        --menuitem_hover: #ffca41;
        --shadowcolor: rgba(0,0,0,0.2);
        __ultralight: #fef3d8;
        --light: #ffda7a;
        --selectedcolor: #ffca41;
        --cellseparator: #cacaca;
        
        --input_backgroundcolor: #FFF;

        --offwhite: rgba(0,0,0,0.02);
        --hoverwhite: rgba(0,0,0,0.2);
        --imageback: #fdfdfd;

        --bordercolor: #444;
        --textcolor: rgba(0,0,0,0.8);    
        --headertextcolor: #fff;
        --notificationtextcolor: #fff;

        --codeback: #fffcd0;
    }

}

@media (prefers-color-scheme: dark) {
    
    :root {
        --backgroundcolor: #111;
        --headercolor: #222;
        --gridheadercolor: #222;
        --menuitem: #222;
        --menuitem_hover: #444;
        --shadowcolor: rgba(0,0,0,0.1);
        --selectedcolor: #ffca41;
        --cellseparator: rgba(255,255,255,0.1);

        --input_backgroundcolor: #111;

        --offwhite: #222;
        --hoverwhite: rgba(255,255,255,0.2);
        --imageback: #222;

        --bordercolor: rgba(255,255,255,0.2);
        --textcolor: rgba(255,255,255,1.0);    
        --headertextcolor: #fff;
        --notificationtextcolor: #fff;

        --codeback: rgba(255, 239, 0, 0.08);        
    }

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

}