:root {
    --uvi-green: green;
    --uvi-yellow: gold;
    --uvi-orange: orangered;
    --uvi-red: crimson;
    --uvi-purple: darkviolet;

    --uvi-green-transparent: rgba(0, 128, 00, 0.2);
    --uvi-yellow-transparent: rgba(255, 215, 0, 0.2);
    --uvi-orange-transparent: rgba(255, 69, 0, 0.2);
    --uvi-red-transparent: rgba(220, 20, 60, 0.2);
    --uvi-purple-transparent: rgba(148, 0, 211, 0.2);
}

@media (prefers-color-scheme: light) {
    .uvi-low, .aqi-good {
        color: white;
        background-color: var(--uvi-green);
        font-weight: bold;
        border: 1px solid var(--uvi-green);
    }

    .uvi-moderate, .aqi-fair {
        color: white;
        background-color: var(--uvi-yellow);
        font-weight: bold;
        border: 1px solid var(--uvi-yellow);
    }

    .uvi-high, .aqi-moderate {
        color: white;
        background-color: var(--uvi-orange);
        font-weight: bold;
        border: 1px solid var(--uvi-orange);
    }

    .uvi-very-high, .aqi-poor {
        color: white;
        background-color: var(--uvi-red);
        font-weight: bold;
        border: 1px solid var(--uvi-red);
    }

    .uvi-extreme, .aqi-very-poor {
        color: white;
        background-color: var(--uvi-purple);
        font-weight: bold;
        border: 1px solid var(--uvi-purple);
    }

    .light-rain {
        color: white;
        background-color: lightblue;
        font-weight: bold;
        border: 1px solid lightblue;
    }

    .moderate-rain {
        color: white;
        background-color: skyblue;
        font-weight: bold;
        border: 1px solid skyblue;
    }

    .heavy-rain {
        color: white;
        background-color: blue;
        font-weight: bold;
        border: 1px solid blue;
    }

    .violent-rain {
        color: white;
        background-color: black;
        font-weight: bold;
        border: 1px solid black;
    }
}

@media (prefers-color-scheme: dark) {
    .uvi-low, .aqi-good {
        color: var(--uvi-green);
        background-color: var(--uvi-green-transparent);
        font-weight: bold;
        border: 1px solid var(--uvi-green);
    }

    .uvi-moderate, .aqi-fair {
        color: var(--uvi-yellow);
        background-color: var(--uvi-yellow-transparent);
        font-weight: bold;
        border: 1px solid var(--uvi-yellow);
    }

    .uvi-high, .aqi-moderate {
        color: var(--uvi-orange);
        background-color: var(--uvi-orange-transparent);
        font-weight: bold;
        border: 1px solid var(--uvi-orange);
    }

    .uvi-very-high, .aqi-poor {
        color: var(--uvi-red);
        background-color: var(--uvi-red-transparent);
        font-weight: bold;
        border: 1px solid var(--uvi-red);
    }

    .uvi-extreme, .aqi-very-poor {
        color: var(--uvi-purple);
        background-color: var(--uvi-purple-transparent);
        font-weight: bold;
        border: 1px solid var(--uvi-purple);
    }

    .light-rain {
        color: lightblue;
        background-color: rgba(173, 216, 230, 0.2);
        font-weight: bold;
        border: 1px solid lightblue;
    }

    .moderate-rain {
        color: skyblue;
        background-color: rgba(135, 206, 235, 0.2);
        font-weight: bold;
        border: 1px solid skyblue;
    }

    .heavy-rain {
        color: rgb(0, 115, 255);
        background-color: rgba(0, 0, 255, 0.2);
        font-weight: bold;
        border: 1px solid rgb(0, 115, 255);
    }

    .violent-rain {
        color: white;
        background-color: rgb(0, 0, 0, 0.2);
        font-weight: bold;
        border: 1px solid black;
    }
}