/* Algemene body-stijlen */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 20px;
}

/* Weer-container */
.weather-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* Weer-box styling */
.weather-box {
    background-color: white;
    border: 2px solid #ddd;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Hover-effect voor weer-boxen */
.weather-box:hover {
    transform: translateY(-5px);
}

/* Windkracht styling */
.weather-box p {
    margin: 10px 0;
}

/* Toevoegen van zonprestatie-kleur (voorbeeld) */
.low-solar {
    border-color: blue;
    background-color: lightblue;
}

.medium-solar {
    border-color: green;
    background-color: lightgreen;
}

.high-solar {
    border-color: orange;
    background-color: lightyellow;
}

.very-high-solar {
    border-color: yellow;
    background-color: lightgoldenrodyellow;
}

/* Specifieke styling voor de dagen van de week */
.weather-box h2 {
    font-size: 1.2em;
    font-weight: bold;
}

/* Styling voor de zonnetjes (per zonne-rating) */
.sun-rating {
    font-size: 1.5em;
    color: gold;
}

/* Alternatief voor een duidelijker onderscheid tussen de dagen */
.weather-box:nth-child(odd) {
    background-color: #f9f9f9;
}