:root {
    /* light */
    --page-background-light: white;
    --page-text-light: #333;
    --banner-background-light: #333;
    --banner-text-light: white;
    --header-background-light: #575757;
    --header-text-light: white;
    --menu-text-light: #797979;
    --menu-background-light: #ececec;
    --menu-active-text-light: white;
    --menu-active-background-light: #999;
    --lightbox-text-light: white;
    --button-background-light: grey;
    --button-text-light: white;

    /* dark */
    --page-background-dark: #333;
    --page-text-dark: white;
    --banner-background-dark: black;
    --banner-text-dark: #ddd;
    --header-background-dark: #575757; 
    --header-text-dark: white;
    --menu-text-dark: #ececec;
    --menu-background-dark: #797979;
    --menu-active-text-dark: #999;
    --menu-active-background-dark: white;
    --lightbox-text-dark: white;
    --button-background-dark: grey;
    --button-text-dark: white;
}

body {
    --page-background: var(--page-background-light);
    --page-text: var(--page-text-light);
    --banner-text: var(--banner-text-light);
    --banner-background: var(--banner-background-light);
    --header-background: var(--header-background-light);
    --header-text: var(--header-text-light);
    --menu-text: var(--menu-text-light);
    --menu-background: var(--menu-background-light);
    --menu-active-text: var(--menu-active-text-light);
    --menu-active-background: var(--menu-active-background-light);
    --lightbox-text: var(--lightbox-text-light);
    --button-background: var(--button-background-light);
    --button-text: var(--button-text-light);
}

@media (prefers-color-scheme: dark) {
    body {
        --page-background: var(--page-background-dark);
        --page-text: var(--page-text-dark);
        --banner-text: var(--banner-text-dark);
        --banner-background: var(--banner-background-dark);
        --header-background: var(--header-background-dark);
        --header-text: var(--header-text-dark);
        --menu-text: var(--menu-text-dark);
        --menu-background: var(--menu-background-dark);
        --menu-active-text: var(--menu-active-text-dark);
        --menu-active-background: var(--menu-active-background-dark);
        --lightbox-text: var(--lightbox-text-dark);
        --button-background: var(--button-background-dark);
        --button-text: var(--button-text-dark);
    }
}