:root {
    --bg-crt-1: #0F0B0C;
    --fg-crt-1: #EF8315;
    --fg-crt-2: #CC6600;
    --fg-crt-3: #AA4400;

    --bg-dark-1: #262324;
    --fg-dark-1: #FFFFFF;
    --fg-dark-2: #A0A0CC;
    --fg-dark-3: #707099;

    --bg-light-1: #C0C0C0;
    --fg-light-1: #000000;
    --fg-light-2: #333333;
    --fg-light-3: #666666;

    &:has(option[value="crt"]:checked) {
        --bg: var(--bg-crt-1);
        --text: var(--fg-crt-1);
    }
    &:has(option[value="dark"]:checked) {
        --bg: var(--bg-dark-1);
        --text: var(--fg-dark-1);
    }
    &:has(option[value="light"]:checked) {
        --bg: var(--bg-light-1);
        --text: var(--fg-light-1);
    }
}

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

header div {
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: center;

    nav a {
        align-items: center;
        text-decoration: none;
        color: var(--text);
    }

    a img {
        align-self: left;
        width: 20px;
    }

    select {
        border: 2px;
        align-self: right;
    }
}