.col1 {
    background-color: var(--color-1);
    color: var(--color-2);
}

.col2, label:has(input:checked) {
    background-color: var(--color-2);
    color: var(--color-1);
}

button, select, label {
    background-color: var(--color-1);
    color: var(--color-2);
    border: 2px solid var(--color-1);
}

@media (any-hover: hover) {
    button:hover, select:hover, label:hover {
        background-color: var(--color-2);
        color: var(--color-1);
    }
}

body {
    background-color: var(--bg-color);
}

noscript {
    background-color: var(--noscript-bg, #640606);
    color: var(--noscript-text, #f0dabf);
}

@media (prefers-color-scheme: dark) {
    [data-theme='system'] {
        --color-1: #505050;
        --color-2: #000000;
        --bg-color: #808080;
        --noscript-bg: #640606;
        --noscript-text: #f0dabf;
    }
}

@media (prefers-color-scheme: light) {
    [data-theme='system'] {
        --color-1: #bfbfbf;
        --color-2: #f2f2f2;
        --bg-color: #ffffff;
        --noscript-bg: #913636;
        --noscript-text: #f0dabf;
    }
}
  
[data-theme='dark'] {
    --color-1: #505050;
    --color-2: #000000;
    --bg-color: #808080;
}

[data-theme='light'] {
    --color-1: #bfbfbf;
    --color-2: #f2f2f2;
    --bg-color: #ffffff;
}

[data-theme='pumpkin'] {
    --color-1: #ff9900;
    --color-2: #1da31b;
    --bg-color: #27db24;
}