@import"https://fonts.googleapis.com/css2?family=Delius&family=Delius+Unicase:wght@400;700&display=swap";*,html{margin:0;padding:0}body{margin:0;padding:0;background-color:#ccdfdf4c}@media (max-width: 550px){.search-box{width:360px!important}.inp-box{width:240px!important}}.box{height:60vh;background-size:cover;background-position:center;transition:background-image .2s ease-in-out;display:flex;justify-content:center;align-items:center}.content{display:grid;row-gap:30px;background:transparent}.title{cursor:grab;font-size:xx-large;font-family:Delius,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif;letter-spacing:2px;font-weight:bolder;color:#fff;background:transparent;text-align:center}.search-box{padding:10px;display:flex;justify-content:space-between;align-items:center;border-radius:5px;box-sizing:border-box;box-shadow:2px -2px #20202026;width:500px;height:50px;background-color:#fff}.btn{border:none;background:transparent}svg{background:transparent}.inp-box{border:none;width:380px;padding:6px 4px;background:#fff;outline:none;box-shadow:none}.search-box:hover,.search-box:focus{box-shadow:0 4px 10px 10px #10749f51}.inp-box:focus{outline:none}.action-btn-box{display:flex;column-gap:5px;justify-content:center;align-items:center;background:transparent}.notification-popup{position:fixed;top:32px;right:32px;z-index:9999;background:linear-gradient(90deg,#900c0c,#e2570c);color:#fff;padding:14px 28px;border-radius:8px;box-shadow:0 4px 18px #00000021;font-size:1.1rem;font-family:Segoe UI,Roboto,Arial,sans-serif;animation:notif-fade-in .4s ease,notif-fade-out .4s 2.2s ease forwards}@keyframes notif-fade-in{0%{opacity:0;transform:translateY(-24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes notif-fade-out{to{opacity:0;transform:translateY(-24px) scale(.97)}}.heading{font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif;margin:40px 20px 0 0;display:flex;justify-content:center;font-size:xx-large;font-weight:700;background:transparent}.flexbox{margin:auto;display:flex;justify-content:center;flex-wrap:wrap;column-gap:10px;width:80%;align-items:center}.gridbox{margin:20px;display:grid;gap:14px 12px;justify-items:center;background:transparent}ul{list-style:none}.states-btn{font-family:Segoe UI,Roboto,Arial,"sans-serif";font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(90deg,#8f5eff,#6446b4cb);border:none;border-radius:8px;padding:10px;width:238px;margin:6px 4px;cursor:pointer;box-shadow:0 2px 8px #5f2eea1a;transition:all .4s ease-in-out;display:inline-block}.states-btn:hover{background:linear-gradient(90deg,#48cae4,#00b4d8);color:#fff;outline:2px solid #00b4d8;box-shadow:0 4px 16px #0099ff26;border-radius:10px;letter-spacing:1px}.footer{background-color:#0009;color:#fff;text-align:center;padding:20px 10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin-top:auto}.footer-content{margin:0;font-size:1.5rem;background:none;display:grid;row-gap:10px;font-size:medium}h3,p{background:transparent}@media (max-width: 550){.weather-card{width:350px!important}}.weather-card{font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif;margin:25px auto;background-color:#fff;border-radius:10px;box-shadow:0 3px 10px #0000001a;padding:20px;width:400px;box-sizing:border-box;animation:fadeInCard .5s cubic-bezier(.4,0,.2,1);transition:box-shadow .3s}.weather-card.weather-card-animate{animation:popInCard .5s cubic-bezier(.4,0,.2,1)}@keyframes fadeInCard{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes popInCard{0%{opacity:0;transform:scale(.95)}80%{opacity:1;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}.states-btn,.search.btn{position:relative;overflow:hidden;transition:transform .1s cubic-bezier(.4,0,.2,1)}.states-btn:active,.search.btn:active{transform:scale(.93);box-shadow:0 2px 8px #00000014}.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-effect .5s linear;background:#0099ff40;pointer-events:none}.aqi-good{color:#2ecc40;font-weight:700}.aqi-fair{color:#3498db;font-weight:700}.aqi-moderate{color:#f39c12;font-weight:700}.aqi-poor{color:#e74c3c;font-weight:700}.aqi-very-poor{color:#8e24aa;font-weight:700}@keyframes ripple-effect{to{transform:scale(3.5);opacity:0}}.header{display:flex;justify-content:space-between;font-weight:700;font-size:14px;padding:5px;border-bottom:1px solid rgba(90,87,87,.762)}.weather-main{text-align:left;background:transparent;display:flex;justify-content:space-between;column-gap:15px}.temp-section{display:flex;align-items:center;margin-bottom:10px;background:transparent}.weather-icon{font-size:40px;margin-right:10px;background:transparent}.temp{font-size:36px;font-weight:700;background:transparent}.temp-unit{font-size:20px;margin-left:4px;background:transparent}.description{font-size:16px;margin:10px 0;font-weight:500;background:transparent}.more-details{font-size:13px;color:#007bff;text-decoration:none;font-weight:700;background:transparent}.weather-details{margin-top:20px;font-size:14px;color:#333;background:transparent}.detail{display:flex;justify-content:space-between;margin:6px 0;width:200px;background:transparent}.poor{color:#f4a742;font-weight:700;background:transparent}.canvas{background-color:#abd5d782}.home-btn{background:linear-gradient(90deg,#c1ef65,#21b0ba);border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001f;transition:background .2s}.home-btn:hover{background:linear-gradient(90deg,#37e0bc,#62d714)}.details-box{font-family:Delius,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif;display:grid;align-items:center;justify-content:center;font-size:1.2rem}.flex-row{display:flex;align-items:center;justify-content:center;padding:5px}.details-box h1{font-size:40px;font-weight:bolder;text-decoration:underline;color:#f69a05;text-shadow:2px 2px 4px rgba(69,188,22,.442);-webkit-text-stroke:1px rgb(218,126,7)}@keyframes fadeIn{0%{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.forecast-section{margin:24px 0;padding:18px 18px 10px}.forecast-section h3{color:#110a00;font-size:1.3rem;margin-bottom:10px;font-weight:900;text-align:left}.forecast-list{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}.forecast-item{background:#1a1d22;border-radius:8px;padding:12px 10px;min-width:72px;text-align:center;color:#fff;box-shadow:0 1px 6px #00000014;font-size:.98rem}.forecast-time{font-size:.98rem;color:#ffb347;margin-bottom:4px}.forecast-icon{margin-bottom:2px}.forecast-temp{font-weight:700;margin-bottom:2px}.forecast-desc{font-size:.95rem;color:#cfcfcf}