/* Dark theme (default */

html {
    --dark-bg: rgba(8, 8, 8, 0.8);
    --dark-bg-blur: rgba(16, 16, 16, 0.6);

    --dark-hoverButtonBg: rgba(48, 48, 48, 0.4);

    --dark-glassBg: rgba(8, 8, 8, 0.9);
    --dark-glassBg-blur: rgba(8, 8, 8, 0.6);
    --dark-glassColor: rgba(255, 255, 255, 0.85);



    --light-bg: rgba(222, 222, 222, 0.7);
    --light-bg-blur: rgba(200, 200, 200, 0.3);

    --light-hoverButtonBg: rgba(90, 90, 90, 0.4);

    --light-glassBg: rgba(125, 125, 125, 0.9);
    --light-glassBg-blur: rgba(125, 125, 125, 0.5);
    --light-glassColor: white;




    --bg: var(--dark-bg);
    --bg-blur: var(--dark-bg-blur);

    --hoverButtonBg: var(--dark-hoverButtonBg);

    --glassBg: var(--dark-glassBg);
    --glassBg-blur: var(--dark-glassBg-blur);
    --glassColor: var(--dark-glassColor);
}

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

    html.dark {
        --bg: var(--dark-bg);
        --bg-blur: var(--dark-bg-blur);

        --hoverButtonBg: var(--dark-hoverButtonBg);

        --glassBg: var(--dark-glassBg);
        --glassBg-blur: var(--dark-glassBg-blur);
        --glassColor: var(--dark-glassColor);
    }

    /* --- light theme --- */


    html {
        --bg: var(--light-bg);
        --bg-blur: var(--light-bg-blur);

        --hoverButtonBg: var(--light-hoverButtonBg);

        --glassBg: var(--light-glassBg);
        --glassBg-blur: var(--light-glassBg-blur);
        --glassColor: var(--light-glassColor);
    }
}

html.light {
    --bg: var(--light-bg);
    --bg-blur: var(--light-bg-blur);

    --hoverButtonBg: var(--light-hoverButtonBg);

    --glassBg: var(--light-glassBg);
    --glassBg-blur: var(--light-glassBg-blur);
    --glassColor: var(--light-glassColor);
}