:root {
    
    /* Font Stuff - stays the same for both light and dark mode */
    --displayFontFamily: 
        "Microsoft YaHei",
        "PingFang SC",
        "Hiragino Sans GB",
        "STHeiti",
        sans-serif;
        
    --displayFont: normal bolder 1rem var(--displayFontFamily);
    --normalFont: normal bolder 0.8rem 'Verdana', sans-serif;
    
    --inputFont: normal bolder 15px 'Verdana', sans-serif;
    --selectFont: normal bolder 16px 'Verdana', sans-serif;
    
    /* NEW STYLING */
    
    --mainColor:  rgba(227, 227, 227, 0.8);
    --pageTitleColor: rgba(227, 227, 227, 0.8);
    --mainColorLight: rgba(227, 227, 227, 0.7);
    --iconColor: rgba(227, 227, 227, 0.8);
    
    --mainBG: rgba(0, 2, 10, 1);
    --elementBG: rgba(0, 9, 51, 1);
    --elementBGLight: rgba(0, 9, 51, .6);
    
    --highlightBG: rgba(148, 124, 3, 0.7);
    
    
    
    
    
    
    --highlightBorder: 2px solid rgba(148, 124, 3, 0.7);
    
    --defaultBorder: 1px solid rgba(25, 75, 201, 0.7);
    
    --fiftyPercentMainBG: rgba(0, 2, 10, 5);
    --relaxedElementBG: rgba(0, 9, 51, .6);
    
    
    
    
    --highlightBG: rgba(148, 124, 3, 0.3);
    /*--highlightBG: rgba(115, 96, 0, 0.7);*/
    
    --inputBG: rgba(25, 75, 201, 0.7);
    
    --bodyTextColor: rgba(227, 227, 227, 0.9);
    --lightTextColor: rgba(227, 227, 227, 0.2);
    
    --lightTransparencyBlack: rgba(0, 0, 0, 0.35);
    
    --buttonBG: rgba(0, 9, 51, 1);

    
    --textShadowDashboard: 3px 3px 5px rgba(0, 9, 51, 1),
                      -3px 3px 5px rgba(0, 9, 51, 1),
                       3px -3px 5px rgba(0, 9, 51, 1),
                      -3px -3px 5px rgba(0, 9, 51, 1);
    
    
    
    
    
    
    
    
    
    
    
    
    --inputTextColor: rgba(227, 227, 227, 0.8);
    --selectTextColor: rgba(227, 227, 227, 0.6);
    --lightTransparencyWhite: rgba(200, 200, 200, 0.35);
    
    /* Backgrounds */
    --mainBGTransparent: rgba(0, 2, 10, 0);
    --lightTransparencyMainBG: rgba(0, 2, 10, 0.9);
    /*--mainBG: rgba(0, 9, 31, 1.0);*/
    /*--elementBG: rgba(0, 50, 176, 7.0);*/
    --inputBG: rgba(25, 75, 201, 0.7);
    /*--buttonBG: rgba(0, 50, 176, 1.0);*/
    --selectedBG: gold;
    /*--savedCharacterBG: rgba(255, 240, 133, 0.8);*/
    --savedCharacterBG: gold;
    --knownCharacterBG: rgba(0, 204, 0, 0.9);
    /*--sidebarBG: rgba(0, 50, 176, 0.8);*/
    /*--buttonBG: #186a3b;*/
    
    /*  */
    --link: #FFC300;
    --linkHover: #00c600;
    
    /*--heavyBorder: 3px solid black;*/
    /*--defaultBorder: 1px solid rgba(227, 227, 227, 0.7);*/
    --buttonBorder: 1px solid rgba(227, 227, 227, 0.7);
    --spanBorder: 3px solid gold;
    
    
    --activeBorder: 2px solid #EC9E16;
    --blackBorder: 2px solid black;
    
    --saveIconBorder: 5px solid rgba(255, 240, 133, 0.8);
    --saveIconBorder: 5px solid gold;

    
    --displayWidth: 300px;
    
    --textShadow: 1px 1px 4px #000000, /* Horizontal offset, vertical offset, blur radius, color */
                 -1px 1px 4px #000000,
                  1px -1px 4px #000000,
                 -1px -1px 4px #000000;
    --textShadowLight: 1px 1px 2px #000a63,
                      -1px 1px 2px #000a63,
                       1px -1px 2px #000a63,
                      -1px -1px 2px #000a63;
                      
    --boxShadow: 0px 5px 8px 2px rgba(227, 227, 227, 0.2)
}

@media (max-width: 768px) {
    :root {
        /*--containerWidth: 90%;*/
    }
}