:root {
    --default-color-rgb: 75, 75, 75;      /* #4b4b4b */
    --warm-color-rgb: 170, 76, 76;        /* #aa4c4c */
    --cool-color-rgb: 50, 60, 110;        /* #323c6e */
    --nature-color-rgb: 60, 110, 50;      /* #3c6e32 */
    --gold-color-rgb: 170, 150, 50;       /* #aa9632 */
    --brick-color-rgb: 176, 94, 23;       /* #b05e17 */
    --lavender-color-rgb: 110, 60, 110;   /* #6e3c6e */
    --coffee-color-rgb: 62, 39, 35;       /* #3E2723 */
    --gray-color-rgb: 44, 53, 57;         /* #2C3539 */
    --sakura-color-rgb: 216, 123, 123;    /* #D87B7B */
    --lagoon-color-rgb: 61, 142, 149;     /* #3D8E95 */


    --theme-color-rgb: var(--default-color-rgb);
}

html#warm {
    --theme-color-rgb: var(--warm-color-rgb);
}

html#cool {
    --theme-color-rgb: var(--cool-color-rgb);
}

html#nature {
    --theme-color-rgb: var(--nature-color-rgb);
}

html#gold {
    --theme-color-rgb: var(--gold-color-rgb);
}

html#brick {
    --theme-color-rgb: var(--brick-color-rgb);
}

html#lavender {
    --theme-color-rgb: var(--lavender-color-rgb);
}

html#coffee {
    --theme-color-rgb: var(--coffee-color-rgb);
}

html#gray {
    --theme-color-rgb: var(--gray-color-rgb);
}

html#sakura {
    --theme-color-rgb: var(--sakura-color-rgb);
}

html#lagoon {
    --theme-color-rgb: var(--lagoon-color-rgb);
}


html {
    --theme-color: rgb(var(--theme-color-rgb, 75, 75, 75));
}


:root {
    --default-aspect-ratio: 100svh;
    --full-aspect-ratio: 100svh;
    --square-aspect-ratio: 100vw;
    --adjust-aspect-ratio: 66.7vw;
    --top-image-aspect-ratio: var(--default-aspect-ratio);
}

[data-top-image="full"] {
    --top-image-aspect-ratio: var(--full-aspect-ratio);
}

[data-top-image="square"] {
    --top-image-aspect-ratio: var(--square-aspect-ratio);
}

[data-top-image="adjust"] {
    --top-image-aspect-ratio: var(--adjust-aspect-ratio);
}