body {
    font-family: 'Inter', sans-serif;
    transition: background 0.8s ease-in-out;
}

.sunny { background: linear-gradient(to top, #6DD5FA, #2980B9); }
.cloudy { background: linear-gradient(to top, #BCCACC, #757F9A); }
.rainy, .thunderstorm { background: linear-gradient(to top, #304352, #2c3e50); }
.snowy { background: linear-gradient(to top, #E6DADA, #bdc3c7); }
.night { background: linear-gradient(to top, #232526, #0f2027); }

.raindrop {
    position: absolute;
    bottom: 100%;
    width: 2px;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
    animation: fall 1.5s linear infinite;
}

@keyframes fall { 
    to { 
        transform: translateY(100vh); 
    } 
}

.snowflake {
    position: absolute;
    top: -10px;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    opacity: 0.7;
    animation: drift linear infinite;
}

@keyframes drift {
    0% {
        transform: translateY(-10px) translateX(0px);
    }
    100% {
        transform: translateY(100vh) translateX(150px);
    }
}

/* --- New Star Animation --- */
.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle linear infinite;
    box-shadow: 0 0 5px #fff, 0 0 10px #fff;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.8; }
}