/* ===== Weather Themes ===== */

body.sunny{
    background: linear-gradient(135deg,#1f1c2c,#f9a826);
}

body.clouds{
    background: linear-gradient(135deg,#0f2027,#3f4c6b);
}

body.rain{
    background: linear-gradient(135deg,#141E30,#243B55);
}

body.drizzle{
    background: linear-gradient(135deg,#1e3c72,#2a5298);
}

body.thunderstorm{
    background: linear-gradient(135deg,#0f0c29,#302b63,#24243e);
}

body.snow{
    background: linear-gradient(135deg,#5d9fff,#dbefff);
    color:#111;
}

body.mist,
body.fog,
body.haze{
    background: linear-gradient(135deg,#485563,#29323c);
}

body.clear-night{
    background: linear-gradient(135deg,#020111,#191621,#0b132b);
}

.effects{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:-1;
}

.sun{
    position:absolute;

    width:220px;
    height:220px;

    border-radius:50%;

    top:8%;
    right:8%;

    background:#FFD54A;

    box-shadow:
    0 0 80px #FFD54A,
    0 0 150px orange,
    0 0 250px gold;

    animation:pulse 5s ease-in-out infinite;
}
.raindrop{

    position:absolute;

    width:2px;
    height:18px;

    background:cyan;

    top:-20px;

    opacity:.7;

    animation:rain linear infinite;

}
.snowflake{

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:white;

    top:-20px;

    animation:snow linear infinite;

}
.cloud{

    position:absolute;

    width:220px;
    height:70px;

    border-radius:100px;

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

    filter:blur(10px);

    animation:cloudMove 35s linear infinite;

}
.lightning{

    position:fixed;
    inset:0;

    background:
    radial-gradient(circle,
    rgba(255,255,255,.45),
    rgba(180,220,255,.12),
    transparent);

    opacity:0;

    pointer-events:none;

    transition:opacity .08s;
}
.star{

    position:absolute;

    border-radius:50%;

    background:white;

    box-shadow:
        0 0 8px white,
        0 0 12px #8ecfff;

    animation:twinkle 3s ease-in-out infinite;

}
.moon{

    position:absolute;

    top:8%;
    right:10%;

    width:120px;
    height:120px;

    border-radius:50%;

    background:#F8F8F2;

    box-shadow:
        0 0 40px white,
        0 0 100px #7ec8ff;
}

.aqi-box.good{
    border:1px solid #00ff88;
    box-shadow:0 0 20px rgba(0,255,136,.5);
}

.aqi-box.fair{
    border:1px solid #ffe600;
    box-shadow:0 0 20px rgba(255,230,0,.5);
}

.aqi-box.moderate{
    border:1px solid orange;
    box-shadow:0 0 20px rgba(255,165,0,.5);
}

.aqi-box.poor{
    border:1px solid #ff4444;
    box-shadow:0 0 20px rgba(255,68,68,.5);
}

.aqi-box.very-poor{
    border:1px solid #c84cff;
    box-shadow:0 0 20px rgba(200,76,255,.5);
}