:root {
    --sun: url("../assets/black/weather/BlackSun.svg");
    --moon: url("../assets/black/weather/BlackMoon.svg");
    --cloud: url("../assets/black/weather/BlackCloud.svg");
    --rainy: url("../assets/black/weather/BlackRainy.svg");
}

:root.dark {
    --sun: url("../assets/white/weather/WhiteSun.svg");
    --moon: url("../assets/white/weather/WhiteMoon.svg");
    --cloud: url("../assets/white/weather/WhiteCloud.svg");
    --rainy: url("../assets/white/weather/WhiteRainy.svg");
}

.weather-icon,
.hour-icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.weather-icon {
    width: 100px;
    height: 100px;
}

.hour-icon {
    width: 40px;
    height: 40px;
}

.icon-sun {
    background-image: var(--sun);
}

.icon-moon {
    background-image: var(--moon);
}

.icon-cloud {
    background-image: var(--cloud);
}

.icon-rainy {
    background-image: var(--rainy);
}