:root {
    --color-active: rgb(240, 36, 216);
    --color-background: rgb(213, 140, 240);
    --color-font: rgb(255, 255, 255);
    --color-foreground: rgb(18, 70, 240);
    --color-keyboard-focus: rgb(0, 255, 255);
    --color-middleground: rgb(113, 102, 240);
    --color-sky: rgb(40, 5, 100);
    --color-sun: rgb(255, 248, 0);
    --color-transparent-glass: rgb(100, 0, 100, 0.5);

    --display-desktop: block;
    --display-mobile: none;
    --display-navigation: flex;
    --display-overflow: auto;

    --size-accent: 20px;
    --size-article-collapse-width: 40px;
    --size-article-height: 40dvh;
    --size-article-width: 35dvw;
    --size-blur-glass: 10px;
    --size-font-base: 16px;
    --size-header-height: 60px;
    --size-max-width: 1200px;
    --size-navigation-scale: 1.75;
    --size-navigation-size: 4px;
    --size-parallax: -150px;
    --size-scrollbar-expanded: 10vh;
    --size-width-background: 2000px;
    --size-width-scroll: 5px;

    --theme-star-opacity: 1;
    --theme-sun-rotation: -90deg;

    --time-active-transition: 350ms;
    --time-article-transition: 1000ms;
    --time-sky-transition: 3000ms;

    --z-index-background: -1;
    --z-index-content: 2;
    --z-index-foreground: 1;
    --z-index-navigation: 3;
}

:root:has(label[theme] input:checked) {
    --color-active: rgb(252, 180, 81);
    --color-background: rgb(0, 240, 200);
    --color-foreground: rgb(72, 157, 143);
    --color-keyboard-focus: rgb(255, 255, 0);
    --color-middleground: rgb(0, 200, 24);
    --color-sky: rgb(0, 132, 240);
    --color-transparent-glass: rgb(0, 50, 25, 0.5);

    --theme-star-opacity: 0;
    --theme-sun-rotation: 0deg;
}

@media only screen and (max-width: 800px) {
    :root {
        --display-desktop: none;
        --display-mobile: block;
        --display-navigation: none;
        --display-overflow: hidden;
        
        --size-article-height: 90dvh;
        --size-article-width: 90dvw;
    }
}

@media only screen and (max-width: 1000px) and (min-width: 800px) {
    :root {
        --size-article-height: 40dvh;
        --size-article-width: 60dvw;
    }
}

@media only screen and (min-width: 2000px) {
    :root {
        --size-width-background: 4000px;
    }
}