:root {
    --moon-illumination: 50%;

    --body-color-center-dark: rgb(0, 0, 0);
    --body-color-center-light: rgb(77, 85, 106);

    --body-color-outer-dark: rgb(0, 0, 0);
    --body-color-outer-light: rgb(36, 35, 45);

    --banner-grad1-dark: rgb(28, 37, 39);
    --banner-grad1-light: rgb(79, 79, 79);

    --banner-grad2-dark: rgb(8, 8, 8);
    --banner-grad2-light: rgb(64, 64, 103);

    --banner-grad3-dark: rgb(26, 6, 17);
    --banner-grad3-light: rgb(91, 45, 69);
    
    --body-color-center: color-mix(
        in srgb,
        var(--body-color-center-dark),
        var(--body-color-center-light)
        var(--moon-illumination)
    );
    --body-color-outer: color-mix(
        in srgb,
        var(--body-color-outer-dark),
        var(--body-color-outer-light)
        var(--moon-illumination)
    );

    --banner-grad1: color-mix(
        in srgb,
        var(--banner-grad1-dark),
        var(--banner-grad1-light)
        var(--moon-illumination)
    );

    --banner-grad2: color-mix(
        in srgb,
        var(--banner-grad2-dark),
        var(--banner-grad2-light)
        var(--moon-illumination)
    );

    --banner-grad3: color-mix(
        in srgb,
        var(--banner-grad3-dark),
        var(--banner-grad3-light)
        var(--moon-illumination)
    );
}