*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Arial,sans-serif;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;

    overflow-y:auto;
    overflow-x:hidden;

    padding:40px 20px;

    transition: background 0.8s ease;

    background:linear-gradient(135deg,#5ee7ff,#4a90e2);

    background-size:300% 300%;
    animation:bgMove 15s ease infinite;
}

.container{

    width:500px;

    padding:35px;

    border-radius:30px;

    text-align:center;

    position:relative;

    overflow:hidden;

    background:rgba(255,255,255,.22);

    backdrop-filter:blur(40px);

    -webkit-backdrop-filter:blur(28px);

    border:1px solid rgba(255,255,255,.25);

    box-shadow:

    0 25px 60px rgba(0,0,0,.22);

    transition:.4s;
}

.container::-webkit-scrollbar{
    width:0;
}


h1{
    text-align:center;
    margin-bottom:15px;
}

/* Date & Time */

.date-time{
    display:flex;
    justify-content:center;
    gap:10px;
    color:#666;
    margin-bottom:20px;
    font-size:16px;
}

/* Search */

.search-box{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:25px;
}

.search-box input{

    background:rgb(204, 203, 203);
    
    border:1px solid rgb(255, 252, 252);

    
    backdrop-filter:blur(15px);
    
    color:#ffffff;
    
    padding:15px;
    
    border-radius:16px;
    
    font-size:17px;
    
    outline:none;
    
    }
    
    .search-box input::placeholder{
    
        color:rgb(255, 255, 255);
    
    }

#searchBtn,
#darkBtn{
    width:50px;
    height:50px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-size:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.3s;
}

#searchBtn{

    width:60px;
    
    height:60px;
    
    border:none;
    
    border-radius:16px;
    
    background:
    
    linear-gradient(
    135deg,
    #3b82f6,
    #2563eb
    );
    
    font-size:24px;
    
    cursor:pointer;
    
    transition:.3s;
    
    }
    
    #searchBtn:hover{
    
    transform:scale(1.08);
    
    }

#searchBtn:hover{
    background:#1d4ed8;
}

#darkBtn{
    background:#222;
    color:#fff;
}

#darkBtn:hover{
    background:#444;
    transform:translateY(-2px);
}

/* Loading */

#loading{
    text-align:center;
    color:#2563eb;
    font-weight:bold;
    margin-bottom:10px;
}

/* Error */

#error{
    text-align:center;
    color:red;
    font-weight:bold;
    margin-bottom:10px;
}

/* Weather */

#weatherCard{
    text-align:center;
}

#weatherIcon{
    width:130px;
    height:110px;
}

#city{
    margin-top:5px;
}

#country{
    color:#777;
    margin-bottom:10px;
}

#temperature{

    font-size:68px;

    font-weight:bold;

    color:white;

    text-shadow:

    0 0 8px rgba(255,255,255,.6),

    0 0 20px rgba(255,255,255,.3);

}

#weather{
    font-size:22px;
    margin-bottom:15px;
}

.weather-info{
    margin-top:15px;
}

.weather-info p{
    margin:10px 0;
    font-size:18px;
}

/* ===========================
   Premium Dark Mode
*/

.dark{
    background:
    radial-gradient(circle at top,#334155 0%,#0f172a 45%,#020617 100%);
    transition:0.6s;
}

.dark .container{

    background:rgba(15,23,42,.60);

    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);

    border:1px solid rgba(255,255,255,.08);

    color:#f8fafc;

    box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);

}

/* Heading */

.dark h1,
.dark h2,
.dark h3{
    color:#ffffff;
}

/* Date */

.dark .date-time,
.dark #country{
    color:#cbd5e1;
}

/* Input */

.dark input{

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.08);

    color:white;

}

.dark input::placeholder{

    color:#94a3b8;

}

/* Search Button */

.dark #searchBtn{

    background:
    linear-gradient(135deg,#3b82f6,#2563eb);

}

.dark #searchBtn:hover{

    transform:translateY(-2px);

}

/* Dark Button */

.dark #darkBtn{

    background:#f8fafc;

    color:#111827;

}

/* Temperature */

.dark #temperature{

    color:#60a5fa;

    text-shadow:
    0 0 6px rgba(96,165,250,.5),
    0 0 12px rgba(59,130,246,.3);

}

/* Forecast */

.dark .forecast-card{

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    color:white;

    transition:.3s;

}

.dark .forecast-card:hover{

    transform:translateY(-5px);

    background:rgba(255,255,255,.12);

}

/* Paragraph */

.dark p{

    color:#e5e7eb;

}
/* Responsive */

@media(max-width:600px){

    .container{
        padding:20px;
    }

    .search-box{
        gap:8px;
    }

    .search-box input{
        font-size:15px;
    }

    h1{
        font-size:2rem;
    }

    #temperature{
        font-size:45px;
    }

    .weather-info p{
        font-size:16px;
    }
}


.forecast-title{
    margin-top:25px;
    margin-bottom:10px;
    text-align:center;
    font-size:22px;
}

.forecast-container{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:15px 0;
}

.forecast-card{
    min-width:85px;
    background: linear-gradient(135deg,#f8fbff,#e7f3ff);
    border-radius:15px;    /* Clear Weather */
    .clear-bg {
        background: linear-gradient(135deg, #ff9a8b, #ff6a88, #ff99ac);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Cloudy Weather */
    .cloud-bg {
        background: linear-gradient(135deg, #d7d2cc, #304352);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Rainy Weather */
    .rain-bg {
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Snowy Weather */
    .snow-bg {
        background: linear-gradient(135deg, #e6f1ff, #b8c6db);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Thunderstorm */
    .storm-bg {
        background: linear-gradient(135deg, #232526, #414345);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Misty Weather */
    .mist-bg {
        background: linear-gradient(135deg, #bdc3c7, #2c3e50);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Default Background */
    .default-bg {
        background: linear-gradient(135deg, #4facfe, #00c6fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Animated Background Movement */
    @keyframes bgMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    
    /* Sun Animation */
    .sun {
        position: fixed;
        top: 80px;
        right: 120px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, #ffe66d, #ffb703);
        box-shadow: 0 0 50px #ffd54f, 0 0 120px #ffca28, 0 0 180px #ffb300;
        animation: sunGlow 3s ease-in-out infinite alternate, rotateSun 25s linear infinite;
        z-index: -2;
        display: none;
    }
    
    @keyframes sunGlow {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.08);
        }
    }
    
    @keyframes rotateSun {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    /* Cloud Animation */
    .cloud {
        position: fixed;
        width: 180px;
        height: 60px;
        transform: scale(0.75);
        background: rgba(255, 255, 255, 0.18);
        border-radius: 100px;
        filter: blur(2px);
        opacity: 0.28;
        z-index: -2;
        display: none;
    }
    
    .cloud1 {
        top: 120px;
        left: -250px;
        animation: moveCloud 40s linear infinite;
    }
    
    .cloud2 {
        top: 280px;
        left: -350px;
        animation: moveCloud 55s linear infinite;
    }
    
    .cloud3 {
        top: 430px;
        left: -300px;
        animation: moveCloud 48s linear infinite;
    }
    
    @keyframes moveCloud {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(1800px);
        }
    }
    
    /* Rain Animation */
    #rain {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
    }
    
    .drop {
        position: absolute;
        bottom: 100%;
        width: 2px;
        height: 20px;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
        border-radius: 50px;
        animation-name: rainFall;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes rainFall {
        from {
            transform: translate(-30px, -100px);
            opacity: 1;
        }
        to {
            transform: translate(30px, 120vh);
            opacity: 0.1;
        }
    }    /* Clear Weather */
    .clear-bg {
        background: linear-gradient(135deg, #ff9a8b, #ff6a88, #ff99ac);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Cloudy Weather */
    .cloud-bg {
        background: linear-gradient(135deg, #d7d2cc, #304352);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Rainy Weather */
    .rain-bg {
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Snowy Weather */
    .snow-bg {
        background: linear-gradient(135deg, #e6f1ff, #b8c6db);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Thunderstorm */
    .storm-bg {
        background: linear-gradient(135deg, #232526, #414345);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Misty Weather */
    .mist-bg {
        background: linear-gradient(135deg, #bdc3c7, #2c3e50);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Default Background */
    .default-bg {
        background: linear-gradient(135deg, #4facfe, #00c6fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Animated Background Movement */
    @keyframes bgMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    
    /* Sun Animation */
    .sun {
        position: fixed;
        top: 80px;
        right: 120px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, #ffe66d, #ffb703);
        box-shadow: 0 0 50px #ffd54f, 0 0 120px #ffca28, 0 0 180px #ffb300;
        animation: sunGlow 3s ease-in-out infinite alternate, rotateSun 25s linear infinite;
        z-index: -2;
        display: none;
    }
    
    @keyframes sunGlow {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.08);
        }
    }
    
    @keyframes rotateSun {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    /* Cloud Animation */
    .cloud {
        position: fixed;
        width: 180px;
        height: 60px;
        transform: scale(0.75);
        background: rgba(255, 255, 255, 0.18);
        border-radius: 100px;
        filter: blur(2px);
        opacity: 0.28;
        z-index: -2;
        display: none;
    }
    
    .cloud1 {
        top: 120px;
        left: -250px;
        animation: moveCloud 40s linear infinite;
    }
    
    .cloud2 {
        top: 280px;
        left: -350px;
        animation: moveCloud 55s linear infinite;
    }
    
    .cloud3 {
        top: 430px;
        left: -300px;
        animation: moveCloud 48s linear infinite;
    }
    
    @keyframes moveCloud {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(1800px);
        }
    }
    
    /* Rain Animation */
    #rain {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
    }
    
    .drop {
        position: absolute;
        bottom: 100%;
        width: 2px;
        height: 20px;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
        border-radius: 50px;
        animation-name: rainFall;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes rainFall {
        from {
            transform: translate(-30px, -100px);
            opacity: 1;
        }
        to {
            transform: translate(30px, 120vh);
            opacity: 0.1;
        }
    }    /* Clear Weather */
    .clear-bg {
        background: linear-gradient(135deg, #ff9a8b, #ff6a88, #ff99ac);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Cloudy Weather */
    .cloud-bg {
        background: linear-gradient(135deg, #d7d2cc, #304352);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Rainy Weather */
    .rain-bg {
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Snowy Weather */
    .snow-bg {
        background: linear-gradient(135deg, #e6f1ff, #b8c6db);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Thunderstorm */
    .storm-bg {
        background: linear-gradient(135deg, #232526, #414345);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Misty Weather */
    .mist-bg {
        background: linear-gradient(135deg, #bdc3c7, #2c3e50);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Default Background */
    .default-bg {
        background: linear-gradient(135deg, #4facfe, #00c6fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Animated Background Movement */
    @keyframes bgMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    
    /* Sun Animation */
    .sun {
        position: fixed;
        top: 80px;
        right: 120px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, #ffe66d, #ffb703);
        box-shadow: 0 0 50px #ffd54f, 0 0 120px #ffca28, 0 0 180px #ffb300;
        animation: sunGlow 3s ease-in-out infinite alternate, rotateSun 25s linear infinite;
        z-index: -2;
        display: none;
    }
    
    @keyframes sunGlow {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.08);
        }
    }
    
    @keyframes rotateSun {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    /* Cloud Animation */
    .cloud {
        position: fixed;
        width: 180px;
        height: 60px;
        transform: scale(0.75);
        background: rgba(255, 255, 255, 0.18);
        border-radius: 100px;
        filter: blur(2px);
        opacity: 0.28;
        z-index: -2;
        display: none;
    }
    
    .cloud1 {
        top: 120px;
        left: -250px;
        animation: moveCloud 40s linear infinite;
    }
    
    .cloud2 {
        top: 280px;
        left: -350px;
        animation: moveCloud 55s linear infinite;
    }
    
    .cloud3 {
        top: 430px;
        left: -300px;
        animation: moveCloud 48s linear infinite;
    }
    
    @keyframes moveCloud {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(1800px);
        }
    }
    
    /* Rain Animation */
    #rain {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
    }
    
    .drop {
        position: absolute;
        bottom: 100%;
        width: 2px;
        height: 20px;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
        border-radius: 50px;
        animation-name: rainFall;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes rainFall {
        from {
            transform: translate(-30px, -100px);
            opacity: 1;
        }
        to {
            transform: translate(30px, 120vh);
            opacity: 0.1;
        }
    }    /* Clear Weather */
    .clear-bg {
        background: linear-gradient(135deg, #ff9a8b, #ff6a88, #ff99ac);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Cloudy Weather */
    .cloud-bg {
        background: linear-gradient(135deg, #d7d2cc, #304352);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Rainy Weather */
    .rain-bg {
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Snowy Weather */
    .snow-bg {
        background: linear-gradient(135deg, #e6f1ff, #b8c6db);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Thunderstorm */
    .storm-bg {
        background: linear-gradient(135deg, #232526, #414345);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Misty Weather */
    .mist-bg {
        background: linear-gradient(135deg, #bdc3c7, #2c3e50);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Default Background */
    .default-bg {
        background: linear-gradient(135deg, #4facfe, #00c6fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Animated Background Movement */
    @keyframes bgMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    
    /* Sun Animation */
    .sun {
        position: fixed;
        top: 80px;
        right: 120px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, #ffe66d, #ffb703);
        box-shadow: 0 0 50px #ffd54f, 0 0 120px #ffca28, 0 0 180px #ffb300;
        animation: sunGlow 3s ease-in-out infinite alternate, rotateSun 25s linear infinite;
        z-index: -2;
        display: none;
    }
    
    @keyframes sunGlow {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.08);
        }
    }
    
    @keyframes rotateSun {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    /* Cloud Animation */
    .cloud {
        position: fixed;
        width: 180px;
        height: 60px;
        transform: scale(0.75);
        background: rgba(255, 255, 255, 0.18);
        border-radius: 100px;
        filter: blur(2px);
        opacity: 0.28;
        z-index: -2;
        display: none;
    }
    
    .cloud1 {
        top: 120px;
        left: -250px;
        animation: moveCloud 40s linear infinite;
    }
    
    .cloud2 {
        top: 280px;
        left: -350px;
        animation: moveCloud 55s linear infinite;
    }
    
    .cloud3 {
        top: 430px;
        left: -300px;
        animation: moveCloud 48s linear infinite;
    }
    
    @keyframes moveCloud {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(1800px);
        }
    }
    
    /* Rain Animation */
    #rain {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
    }
    
    .drop {
        position: absolute;
        bottom: 100%;
        width: 2px;
        height: 20px;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
        border-radius: 50px;
        animation-name: rainFall;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes rainFall {
        from {
            transform: translate(-30px, -100px);
            opacity: 1;
        }
        to {
            transform: translate(30px, 120vh);
            opacity: 0.1;
        }
    }    /* Clear Weather */
    .clear-bg {
        background: linear-gradient(135deg, #ff9a8b, #ff6a88, #ff99ac);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Cloudy Weather */
    .cloud-bg {
        background: linear-gradient(135deg, #d7d2cc, #304352);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Rainy Weather */
    .rain-bg {
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Snowy Weather */
    .snow-bg {
        background: linear-gradient(135deg, #e6f1ff, #b8c6db);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Thunderstorm */
    .storm-bg {
        background: linear-gradient(135deg, #232526, #414345);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Misty Weather */
    .mist-bg {
        background: linear-gradient(135deg, #bdc3c7, #2c3e50);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Default Background */
    .default-bg {
        background: linear-gradient(135deg, #4facfe, #00c6fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Animated Background Movement */
    @keyframes bgMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    
    /* Sun Animation */
    .sun {
        position: fixed;
        top: 80px;
        right: 120px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, #ffe66d, #ffb703);
        box-shadow: 0 0 50px #ffd54f, 0 0 120px #ffca28, 0 0 180px #ffb300;
        animation: sunGlow 3s ease-in-out infinite alternate, rotateSun 25s linear infinite;
        z-index: -2;
        display: none;
    }
    
    @keyframes sunGlow {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.08);
        }
    }
    
    @keyframes rotateSun {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    /* Cloud Animation */
    .cloud {
        position: fixed;
        width: 180px;
        height: 60px;
        transform: scale(0.75);
        background: rgba(255, 255, 255, 0.18);
        border-radius: 100px;
        filter: blur(2px);
        opacity: 0.28;
        z-index: -2;
        display: none;
    }
    
    .cloud1 {
        top: 120px;
        left: -250px;
        animation: moveCloud 40s linear infinite;
    }
    
    .cloud2 {
        top: 280px;
        left: -350px;
        animation: moveCloud 55s linear infinite;
    }
    
    .cloud3 {
        top: 430px;
        left: -300px;
        animation: moveCloud 48s linear infinite;
    }
    
    @keyframes moveCloud {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(1800px);
        }
    }
    
    /* Rain Animation */
    #rain {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
    }
    
    .drop {
        position: absolute;
        bottom: 100%;
        width: 2px;
        height: 20px;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
        border-radius: 50px;
        animation-name: rainFall;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes rainFall {
        from {
            transform: translate(-30px, -100px);
            opacity: 1;
        }
        to {
            transform: translate(30px, 120vh);
            opacity: 0.1;
        }
    }    /* Clear Weather */
    .clear-bg {
        background: linear-gradient(135deg, #ff9a8b, #ff6a88, #ff99ac);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Cloudy Weather */
    .cloud-bg {
        background: linear-gradient(135deg, #d7d2cc, #304352);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Rainy Weather */
    .rain-bg {
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Snowy Weather */
    .snow-bg {
        background: linear-gradient(135deg, #e6f1ff, #b8c6db);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Thunderstorm */
    .storm-bg {
        background: linear-gradient(135deg, #232526, #414345);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Misty Weather */
    .mist-bg {
        background: linear-gradient(135deg, #bdc3c7, #2c3e50);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Default Background */
    .default-bg {
        background: linear-gradient(135deg, #4facfe, #00c6fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Animated Background Movement */
    @keyframes bgMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    
    /* Sun Animation */
    .sun {
        position: fixed;
        top: 80px;
        right: 120px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, #ffe66d, #ffb703);
        box-shadow: 0 0 50px #ffd54f, 0 0 120px #ffca28, 0 0 180px #ffb300;
        animation: sunGlow 3s ease-in-out infinite alternate, rotateSun 25s linear infinite;
        z-index: -2;
        display: none;
    }
    
    @keyframes sunGlow {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.08);
        }
    }
    
    @keyframes rotateSun {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    /* Cloud Animation */
    .cloud {
        position: fixed;
        width: 180px;
        height: 60px;
        transform: scale(0.75);
        background: rgba(255, 255, 255, 0.18);
        border-radius: 100px;
        filter: blur(2px);
        opacity: 0.28;
        z-index: -2;
        display: none;
    }
    
    .cloud1 {
        top: 120px;
        left: -250px;
        animation: moveCloud 40s linear infinite;
    }
    
    .cloud2 {
        top: 280px;
        left: -350px;
        animation: moveCloud 55s linear infinite;
    }
    
    .cloud3 {
        top: 430px;
        left: -300px;
        animation: moveCloud 48s linear infinite;
    }
    
    @keyframes moveCloud {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(1800px);
        }
    }
    
    /* Rain Animation */
    #rain {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
    }
    
    .drop {
        position: absolute;
        bottom: 100%;
        width: 2px;
        height: 20px;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
        border-radius: 50px;
        animation-name: rainFall;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes rainFall {
        from {
            transform: translate(-30px, -100px);
            opacity: 1;
        }
        to {
            transform: translate(30px, 120vh);
            opacity: 0.1;
        }
    }    /* Clear Weather */
    .clear-bg {
        background: linear-gradient(135deg, #ff9a8b, #ff6a88, #ff99ac);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Cloudy Weather */
    .cloud-bg {
        background: linear-gradient(135deg, #d7d2cc, #304352);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Rainy Weather */
    .rain-bg {
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Snowy Weather */
    .snow-bg {
        background: linear-gradient(135deg, #e6f1ff, #b8c6db);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Thunderstorm */
    .storm-bg {
        background: linear-gradient(135deg, #232526, #414345);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Misty Weather */
    .mist-bg {
        background: linear-gradient(135deg, #bdc3c7, #2c3e50);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Default Background */
    .default-bg {
        background: linear-gradient(135deg, #4facfe, #00c6fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Animated Background Movement */
    @keyframes bgMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    
    /* Sun Animation */
    .sun {
        position: fixed;
        top: 80px;
        right: 120px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, #ffe66d, #ffb703);
        box-shadow: 0 0 50px #ffd54f, 0 0 120px #ffca28, 0 0 180px #ffb300;
        animation: sunGlow 3s ease-in-out infinite alternate, rotateSun 25s linear infinite;
        z-index: -2;
        display: none;
    }
    
    @keyframes sunGlow {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.08);
        }
    }
    
    @keyframes rotateSun {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    /* Cloud Animation */
    .cloud {
        position: fixed;
        width: 180px;
        height: 60px;
        transform: scale(0.75);
        background: rgba(255, 255, 255, 0.18);
        border-radius: 100px;
        filter: blur(2px);
        opacity: 0.28;
        z-index: -2;
        display: none;
    }
    
    .cloud1 {
        top: 120px;
        left: -250px;
        animation: moveCloud 40s linear infinite;
    }
    
    .cloud2 {
        top: 280px;
        left: -350px;
        animation: moveCloud 55s linear infinite;
    }
    
    .cloud3 {
        top: 430px;
        left: -300px;
        animation: moveCloud 48s linear infinite;
    }
    
    @keyframes moveCloud {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(1800px);
        }
    }
    
    /* Rain Animation */
    #rain {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
    }
    
    .drop {
        position: absolute;
        bottom: 100%;
        width: 2px;
        height: 20px;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
        border-radius: 50px;
        animation-name: rainFall;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes rainFall {
        from {
            transform: translate(-30px, -100px);
            opacity: 1;
        }
        to {
            transform: translate(30px, 120vh);
            opacity: 0.1;
        }
    }    /* Clear Weather */
    .clear-bg {
        background: linear-gradient(135deg, #ff9a8b, #ff6a88, #ff99ac);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Cloudy Weather */
    .cloud-bg {
        background: linear-gradient(135deg, #d7d2cc, #304352);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Rainy Weather */
    .rain-bg {
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Snowy Weather */
    .snow-bg {
        background: linear-gradient(135deg, #e6f1ff, #b8c6db);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Thunderstorm */
    .storm-bg {
        background: linear-gradient(135deg, #232526, #414345);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Misty Weather */
    .mist-bg {
        background: linear-gradient(135deg, #bdc3c7, #2c3e50);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Default Background */
    .default-bg {
        background: linear-gradient(135deg, #4facfe, #00c6fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Animated Background Movement */
    @keyframes bgMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    
    /* Sun Animation */
    .sun {
        position: fixed;
        top: 80px;
        right: 120px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, #ffe66d, #ffb703);
        box-shadow: 0 0 50px #ffd54f, 0 0 120px #ffca28, 0 0 180px #ffb300;
        animation: sunGlow 3s ease-in-out infinite alternate, rotateSun 25s linear infinite;
        z-index: -2;
        display: none;
    }
    
    @keyframes sunGlow {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.08);
        }
    }
    
    @keyframes rotateSun {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    /* Cloud Animation */
    .cloud {
        position: fixed;
        width: 180px;
        height: 60px;
        transform: scale(0.75);
        background: rgba(255, 255, 255, 0.18);
        border-radius: 100px;
        filter: blur(2px);
        opacity: 0.28;
        z-index: -2;
        display: none;
    }
    
    .cloud1 {
        top: 120px;
        left: -250px;
        animation: moveCloud 40s linear infinite;
    }
    
    .cloud2 {
        top: 280px;
        left: -350px;
        animation: moveCloud 55s linear infinite;
    }
    
    .cloud3 {
        top: 430px;
        left: -300px;
        animation: moveCloud 48s linear infinite;
    }
    
    @keyframes moveCloud {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(1800px);
        }
    }
    
    /* Rain Animation */
    #rain {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
    }
    
    .drop {
        position: absolute;
        bottom: 100%;
        width: 2px;
        height: 20px;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
        border-radius: 50px;
        animation-name: rainFall;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes rainFall {
        from {
            transform: translate(-30px, -100px);
            opacity: 1;
        }
        to {
            transform: translate(30px, 120vh);
            opacity: 0.1;
        }
    }    /* Clear Weather */
    .clear-bg {
        background: linear-gradient(135deg, #ff9a8b, #ff6a88, #ff99ac);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Cloudy Weather */
    .cloud-bg {
        background: linear-gradient(135deg, #d7d2cc, #304352);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Rainy Weather */
    .rain-bg {
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Snowy Weather */
    .snow-bg {
        background: linear-gradient(135deg, #e6f1ff, #b8c6db);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Thunderstorm */
    .storm-bg {
        background: linear-gradient(135deg, #232526, #414345);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Misty Weather */
    .mist-bg {
        background: linear-gradient(135deg, #bdc3c7, #2c3e50);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Default Background */
    .default-bg {
        background: linear-gradient(135deg, #4facfe, #00c6fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Animated Background Movement */
    @keyframes bgMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    
    /* Sun Animation */
    .sun {
        position: fixed;
        top: 80px;
        right: 120px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, #ffe66d, #ffb703);
        box-shadow: 0 0 50px #ffd54f, 0 0 120px #ffca28, 0 0 180px #ffb300;
        animation: sunGlow 3s ease-in-out infinite alternate, rotateSun 25s linear infinite;
        z-index: -2;
        display: none;
    }
    
    @keyframes sunGlow {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.08);
        }
    }
    
    @keyframes rotateSun {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    /* Cloud Animation */
    .cloud {
        position: fixed;
        width: 180px;
        height: 60px;
        transform: scale(0.75);
        background: rgba(255, 255, 255, 0.18);
        border-radius: 100px;
        filter: blur(2px);
        opacity: 0.28;
        z-index: -2;
        display: none;
    }
    
    .cloud1 {
        top: 120px;
        left: -250px;
        animation: moveCloud 40s linear infinite;
    }
    
    .cloud2 {
        top: 280px;
        left: -350px;
        animation: moveCloud 55s linear infinite;
    }
    
    .cloud3 {
        top: 430px;
        left: -300px;
        animation: moveCloud 48s linear infinite;
    }
    
    @keyframes moveCloud {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(1800px);
        }
    }
    
    /* Rain Animation */
    #rain {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
    }
    
    .drop {
        position: absolute;
        bottom: 100%;
        width: 2px;
        height: 20px;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
        border-radius: 50px;
        animation-name: rainFall;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes rainFall {
        from {
            transform: translate(-30px, -100px);
            opacity: 1;
        }
        to {
            transform: translate(30px, 120vh);
            opacity: 0.1;
        }
    }    /* Clear Weather */
    .clear-bg {
        background: linear-gradient(135deg, #ff9a8b, #ff6a88, #ff99ac);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Cloudy Weather */
    .cloud-bg {
        background: linear-gradient(135deg, #d7d2cc, #304352);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Rainy Weather */
    .rain-bg {
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Snowy Weather */
    .snow-bg {
        background: linear-gradient(135deg, #e6f1ff, #b8c6db);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Thunderstorm */
    .storm-bg {
        background: linear-gradient(135deg, #232526, #414345);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Misty Weather */
    .mist-bg {
        background: linear-gradient(135deg, #bdc3c7, #2c3e50);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Default Background */
    .default-bg {
        background: linear-gradient(135deg, #4facfe, #00c6fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Animated Background Movement */
    @keyframes bgMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    
    /* Sun Animation */
    .sun {
        position: fixed;
        top: 80px;
        right: 120px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, #ffe66d, #ffb703);
        box-shadow: 0 0 50px #ffd54f, 0 0 120px #ffca28, 0 0 180px #ffb300;
        animation: sunGlow 3s ease-in-out infinite alternate, rotateSun 25s linear infinite;
        z-index: -2;
        display: none;
    }
    
    @keyframes sunGlow {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.08);
        }
    }
    
    @keyframes rotateSun {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    /* Cloud Animation */
    .cloud {
        position: fixed;
        width: 180px;
        height: 60px;
        transform: scale(0.75);
        background: rgba(255, 255, 255, 0.18);
        border-radius: 100px;
        filter: blur(2px);
        opacity: 0.28;
        z-index: -2;
        display: none;
    }
    
    .cloud1 {
        top: 120px;
        left: -250px;
        animation: moveCloud 40s linear infinite;
    }
    
    .cloud2 {
        top: 280px;
        left: -350px;
        animation: moveCloud 55s linear infinite;
    }
    
    .cloud3 {
        top: 430px;
        left: -300px;
        animation: moveCloud 48s linear infinite;
    }
    
    @keyframes moveCloud {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(1800px);
        }
    }
    
    /* Rain Animation */
    #rain {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
    }
    
    .drop {
        position: absolute;
        bottom: 100%;
        width: 2px;
        height: 20px;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
        border-radius: 50px;
        animation-name: rainFall;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes rainFall {
        from {
            transform: translate(-30px, -100px);
            opacity: 1;
        }
        to {
            transform: translate(30px, 120vh);
            opacity: 0.1;
        }
    }    /* Clear Weather */
    .clear-bg {
        background: linear-gradient(135deg, #ff9a8b, #ff6a88, #ff99ac);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Cloudy Weather */
    .cloud-bg {
        background: linear-gradient(135deg, #d7d2cc, #304352);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Rainy Weather */
    .rain-bg {
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Snowy Weather */
    .snow-bg {
        background: linear-gradient(135deg, #e6f1ff, #b8c6db);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Thunderstorm */
    .storm-bg {
        background: linear-gradient(135deg, #232526, #414345);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Misty Weather */
    .mist-bg {
        background: linear-gradient(135deg, #bdc3c7, #2c3e50);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Default Background */
    .default-bg {
        background: linear-gradient(135deg, #4facfe, #00c6fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Animated Background Movement */
    @keyframes bgMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    
    /* Sun Animation */
    .sun {
        position: fixed;
        top: 80px;
        right: 120px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, #ffe66d, #ffb703);
        box-shadow: 0 0 50px #ffd54f, 0 0 120px #ffca28, 0 0 180px #ffb300;
        animation: sunGlow 3s ease-in-out infinite alternate, rotateSun 25s linear infinite;
        z-index: -2;
        display: none;
    }
    
    @keyframes sunGlow {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.08);
        }
    }
    
    @keyframes rotateSun {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    /* Cloud Animation */
    .cloud {
        position: fixed;
        width: 180px;
        height: 60px;
        transform: scale(0.75);
        background: rgba(255, 255, 255, 0.18);
        border-radius: 100px;
        filter: blur(2px);
        opacity: 0.28;
        z-index: -2;
        display: none;
    }
    
    .cloud1 {
        top: 120px;
        left: -250px;
        animation: moveCloud 40s linear infinite;
    }
    
    .cloud2 {
        top: 280px;
        left: -350px;
        animation: moveCloud 55s linear infinite;
    }
    
    .cloud3 {
        top: 430px;
        left: -300px;
        animation: moveCloud 48s linear infinite;
    }
    
    @keyframes moveCloud {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(1800px);
        }
    }
    
    /* Rain Animation */
    #rain {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
    }
    
    .drop {
        position: absolute;
        bottom: 100%;
        width: 2px;
        height: 20px;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
        border-radius: 50px;
        animation-name: rainFall;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes rainFall {
        from {
            transform: translate(-30px, -100px);
            opacity: 1;
        }
        to {
            transform: translate(30px, 120vh);
            opacity: 0.1;
        }
    }    /* Clear Weather */
    .clear-bg {
        background: linear-gradient(135deg, #ff9a8b, #ff6a88, #ff99ac);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Cloudy Weather */
    .cloud-bg {
        background: linear-gradient(135deg, #d7d2cc, #304352);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Rainy Weather */
    .rain-bg {
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Snowy Weather */
    .snow-bg {
        background: linear-gradient(135deg, #e6f1ff, #b8c6db);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Thunderstorm */
    .storm-bg {
        background: linear-gradient(135deg, #232526, #414345);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Misty Weather */
    .mist-bg {
        background: linear-gradient(135deg, #bdc3c7, #2c3e50);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Default Background */
    .default-bg {
        background: linear-gradient(135deg, #4facfe, #00c6fb);
        background-size: 300% 300%;
        animation: bgMove 15s ease infinite;
    }
    
    /* Animated Background Movement */
    @keyframes bgMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    
    /* Sun Animation */
    .sun {
        position: fixed;
        top: 80px;
        right: 120px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, #ffe66d, #ffb703);
        box-shadow: 0 0 50px #ffd54f, 0 0 120px #ffca28, 0 0 180px #ffb300;
        animation: sunGlow 3s ease-in-out infinite alternate, rotateSun 25s linear infinite;
        z-index: -2;
        display: none;
    }
    
    @keyframes sunGlow {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.08);
        }
    }
    
    @keyframes rotateSun {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    /* Cloud Animation */
    .cloud {
        position: fixed;
        width: 180px;
        height: 60px;
        transform: scale(0.75);
        background: rgba(255, 255, 255, 0.18);
        border-radius: 100px;
        filter: blur(2px);
        opacity: 0.28;
        z-index: -2;
        display: none;
    }
    
    .cloud1 {
        top: 120px;
        left: -250px;
        animation: moveCloud 40s linear infinite;
    }
    
    .cloud2 {
        top: 280px;
        left: -350px;
        animation: moveCloud 55s linear infinite;
    }
    
    .cloud3 {
        top: 430px;
        left: -300px;
        animation: moveCloud 48s linear infinite;
    }
    
    @keyframes moveCloud {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(1800px);
        }
    }
    
    /* Rain Animation */
    #rain {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
    }
    
    .drop {
        position: absolute;
        bottom: 100%;
        width: 2px;
        height: 20px;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
        border-radius: 50px;
        animation-name: rainFall;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes rainFall {
        from {
            transform: translate(-30px, -100px);
            opacity: 1;
        }
        to {
            transform: translate(30px, 120vh);
            opacity: 0.1;
        }
    }
    padding:10px;
    text-align:center;
    flex-shrink:0;
    transition:.3s;
}

.forecast-card:hover{
    transform:translateY(-5px);
}

.forecast-card img{
    width:45px;
}

.forecast-card h4{
    margin:8px 0;
}

.forecast-card p{
    margin:0;
    font-size:15px;
}


/* ========= Dynamic Background ========= */

body{
    transition:background 0.8s ease;
}

.default-bg{
    background:linear-gradient(135deg,#4facfe,#00c6fb);
}

/* Clear Weather */
.clear-bg {
    background: linear-gradient(135deg, #ff9a8b, #ff6a88, #ff99ac);
    background-size: 300% 300%;
    animation: bgMove 15s ease infinite;
}


/* Cloudy Weather */
.cloud-bg {
    background: linear-gradient(135deg, #d7d2cc, #304352);
    background-size: 300% 300%;
    animation: bgMove 15s ease infinite;
}

.rain-bg {
    background: linear-gradient(135deg, #4e54c8, #8f94fb);
    background-size: 300% 300%;
    animation: bgMove 15s ease infinite;
}


.snow-bg {
    background: linear-gradient(135deg, #e6f1ff, #b8c6db);
    background-size: 300% 300%;
    animation: bgMove 15s ease infinite;
}
.storm-bg {
    background: linear-gradient(135deg, #232526, #414345);
    background-size: 300% 300%;
    animation: bgMove 15s ease infinite;
}

.mist-bg {
    background: linear-gradient(135deg, #bdc3c7, #2c3e50);
    background-size: 300% 300%;
    animation: bgMove 15s ease infinite;
}



/*==============================
        Animated Background
===============================*/

body{

    overflow-x:hidden;

    background:linear-gradient(
        -45deg,
        #4facfe,
        #00c6fb,
        #6dd5fa,
        #2980b9
    );

    background-size:400% 400%;

    animation:skyMove 15s ease infinite;

}

@keyframes skyMove{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

.bg-animation{

    position:fixed;

    inset:0;

    z-index:-1;

    overflow:hidden;

}





body{

    background-size:300% 300%;

    animation:bgMove 15s ease infinite;

}

@keyframes bgMove{

0%{
background-position:left;
}

50%{
background-position:right;
}

100%{
background-position:left;
}

}

.container:hover{

    transform:
    
    translateY(-8px)
    
    scale(1.01);
    
    }

/* ========================= */
/* Animated Sun */
/* ========================= */

.sun{

    position:fixed;

    top:80px;
    right:120px;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
    radial-gradient(circle,#ffe66d,#ffb703);

    box-shadow:

    0 0 50px #ffd54f,

    0 0 120px #ffca28,

    0 0 180px #ffb300;

    animation:

    sunGlow 3s ease-in-out infinite alternate,

    rotateSun 25s linear infinite;

    z-index:-2;

    display:none;

}

@keyframes sunGlow{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

@keyframes rotateSun{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ========================= */
/* Clouds */
/* ========================= */

.cloud{

    position:fixed;

    width:180px;
    height:60px;
    transform:scale(.75);

    background:rgba(255,255,255,.18);

    border-radius:100px;

    filter:blur(2px);

    opacity:.28;

    z-index:-2;

    display:none;

}

.cloud::before{

    content:"";

    position:absolute;

    width:90px;
    height:90px;

    background:white;

    border-radius:50%;

    left:25px;
    top:-40px;

}

.cloud::after{

    content:"";

    position:absolute;

    width:110px;
    height:110px;

    background:white;

    border-radius:50%;

    right:25px;
    top:-55px;

}

.cloud1{

    top:120px;

    left:-250px;

    animation:

    moveCloud 40s linear infinite;

}

.cloud2{

    top:280px;

    left:-350px;

    animation:

    moveCloud 55s linear infinite;

}

.cloud3{

    top:430px;

    left:-300px;

    animation:

    moveCloud 48s linear infinite;

}

@keyframes moveCloud{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(1800px);

    }

}


/* ========================= */
/* Rain Animation */
/* ========================= */

{

    position:fixed;

    inset:0;

    pointer-events:none;

    display:none;

    z-index:-1;

    overflow:hidden;

}

..rain{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    display:none;

    z-index:-2;

}

.drop{

    position:absolute;

    width:1.2px;

    height:22px;

    background:rgba(255,255,255,.45);

    border-radius:999px;

    animation:drop linear infinite;

}

@keyframes drop{

    from{

        transform:
        translateY(-100px);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    to{

        transform:
        translateY(110vh);

        opacity:0;

    }

}


.cloud{

    position:fixed;

    opacity:.45;

    animation:cloudMove 45s linear infinite;
}

@keyframes cloudMove{

    from{

        transform:translateX(-250px);

    }

    to{

        transform:translateX(120vw);

    }

}


.fog{

    position:fixed;

    bottom:-120px;

    left:0;

    width:100%;

    height:260px;

    background:

    radial-gradient(circle,
    rgba(255,255,255,.18),
    transparent 70%);

    filter:blur(60px);

    animation:fogMove 14s ease-in-out infinite alternate;

    z-index:-2;
}

@keyframes fogMove{

    from{

        transform:translateX(-40px);

    }

    to{

        transform:translateX(40px);

    }

}


/* Rain Container */

#rain{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    overflow:hidden;

    pointer-events:none;

    z-index:-1;

}

/* One Rain Drop */

.drop{

    position:absolute;

    bottom:100%;

    width:2px;

    height:20px;

    background:

    linear-gradient(
    transparent,
    rgba(255,255,255,.9)
    );

    border-radius:50px;

    animation-name:rainFall;

    animation-timing-function:linear;

    animation-iteration-count:infinite;

}

@keyframes rainFall{

    from{

        transform:translate(-30px,-100px);

        opacity:1;

    }

    to{

        transform:translate(30px,120vh);

        opacity:.1;

    }

}