@media (prefers-color-scheme: light) {
    :root {
        --text: black;
        --background: #98DFF3;
        --primaryFocus: #3ea1b1;
        --red: #c32222;
        --redBg: #f14e4e;
        --color1: #49B9CA;
        --color2: #ffffff;
        --color3: #d7d7d7;
        --color4: #0e0e0e;
        --color5: #3ea1b1;
        --color6: #54cbdd;
        --color8: #d8d8d8;
        --color9: #bcbcbc;
        --color10: #e7e7e7;
        --color11: #fafafa;
        --blurbg: #0000001c;
        --navbg: #49b9ca5c;
        --navmobiletext: #ffffff;
        --light: white;
        --dark: black;
        --footer-link: #ffffff;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --text: white;
        --background: #1c292d;
        --primaryFocus: #357a85;
        --red: #c23e3e;
        --redBg: #903131;
        --color1: #448e96;
        --color2: #243b3f;
        --color3: #506366;
        --color4: #3d3d3d;
        --color5: #26565e;
        --color6: #45a4b3;
        --color8: #4e4e4e;
        --color9: #487a81;
        --color10: #a5afaf;
        --color11: #0f2325;
        --blurbg: #0000001c;
        --navbg: #448e965c;
        --navmobiletext: #ffffff;
        --light: white;
        --dark: black;
        --footer-link: #ff7654ff;
    }
}