@import"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css";@import"https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap";*,*:after,*:before{padding:0;margin:0;box-sizing:border-box;font-family:work sans,Arial,Helvetica,sans-serif}body{background-image:url(/Weather-App/assets/background-Cggmn5_u.jpg);background-position:center;background-repeat:no-repeat;background-size:100% 100%;-webkit-backdrop-filter:brightness(60%);backdrop-filter:brightness(60%);width:100%;min-height:100vh;color:#fff}section{padding:1rem clamp(1rem,6vw,6rem)}#root{display:inline-block;position:relative;width:100%}#search-engine{min-width:10rem;max-width:30rem;position:relative;margin:auto;z-index:1}#search-engine input{color:#fff;font-size:1rem;font-weight:300;width:100%;border-radius:1rem;padding:.3rem 2rem;outline:none;background:#ffffff1a;border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 12px #ffffff2e}#search-engine label,#search-engine button{pointer-events:none;position:absolute;font-size:1rem;top:.3rem;pointer-events:visible;-webkit-user-select:none;user-select:none;z-index:2;color:#fff}#search-engine label i:hover,#search-engine button i:hover{color:#acacac!important}#search-engine label i:active,#search-engine button i:active{filter:brightness(10%)}#search-engine label{left:.4rem}#search-engine button{background:transparent;border:none;outline:none;right:.6rem;cursor:pointer}.error{font-size:small;font-weight:600;text-align:center;margin:.2rem auto 0;color:#ff2424}.red-border{border:1px solid rgb(255,36,36)!important;animation:shake .3s ease}@keyframes shake{0%,20%,40%,60%,80%{transform:translateY(6px)}10%,30%,50%,70%,90%{transform:translateY(-6px)}}.top-grid-layout{width:100%;border-radius:1rem;padding:1.5rem 1.5rem .8rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 12px #ffffff2e}.top-grid-layout .country{padding-bottom:2rem}.top-grid-layout .condition{width:100%;display:grid;grid-template-columns:repeat(2,1fr);align-items:end}.top-grid-layout .condition .left{justify-self:start}.top-grid-layout .condition .left h1{font-size:clamp(4rem,7vw,8rem);padding-right:.2rem;color:#ffb731}.top-grid-layout .condition .left h1,.top-grid-layout .condition .left p{display:inline-block}.top-grid-layout .condition .right{justify-self:end;text-align:right}.top-grid-layout .condition .right .degree-C span:nth-child(1){padding:0 .8rem}.top-grid-layout .condition .right p{padding:.3rem 0}.bottomGrid{display:grid;width:100%;margin:1.5rem 0;grid-template-columns:1fr 2fr;gap:2rem}.bottomGrid h2{padding-bottom:1rem}.bottomGrid .weather-details{width:100%;grid-column:1/2;border-radius:1rem;padding:1.5rem 1rem .8rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 12px #ffffff2e}.bottomGrid .weather-details .details-container{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.bottomGrid .weather-details .details-container .card{width:100%;max-height:auto;aspect-ratio:1;border-radius:1rem;padding:.7rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;text-wrap:nowrap;gap:10px;font-size:.8rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 12px #ffffff2e;background:#0009}.bottomGrid .weather-details .details-container .card .title{opacity:30%}.bottomGrid .weather-forecast{grid-column:2/-1;border-radius:1rem;padding:1.5rem 1rem .8rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 12px #ffffff2e}.bottomGrid .weather-forecast .forecast-container{width:100%;display:grid;grid-template-columns:2fr 1fr;place-items:center;gap:.4rem}.bottomGrid .weather-forecast .forecast-container .canvas{width:100%!important;height:100%!important;grid-column:1/-2}.bottomGrid .weather-forecast .forecast-container .today-forecast{width:100%;height:auto;display:grid;grid-column:2/-1;grid-template-columns:repeat(2,1fr);gap:.4rem}.bottomGrid .weather-forecast .forecast-container .today-forecast .card{border-radius:1rem;padding:.7rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;text-wrap:nowrap;gap:.4rem;font-size:.6rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 12px #ffffff2e;background:#0009}.bottomGrid .weather-forecast .forecast-container .today-forecast .card .title{opacity:30%}@media screen and (max-width: 70rem){.details-container{grid-template-columns:repeat(2,1fr)!important}.forecast-container{grid-template-rows:2fr}.forecast-container .canvas{grid-column:1/-1!important;grid-row:1/2}.forecast-container .today-forecast{display:flex!important;flex-wrap:wrap;grid-column:1/-1!important}.forecast-container .today-forecast .card{flex-grow:1;width:8rem}}@media screen and (max-width: 47rem){.top-grid-layout{text-align:center}.top-grid-layout .condition{display:block;grid-template-columns:1fr}.condition .left,.condition .right{justify-self:center!important;text-align:center!important;padding:.2rem 0}.bottomGrid{grid-template-columns:1fr;text-align:center}.bottomGrid .weather-details,.bottomGrid .weather-forecast{grid-column:1/-1}.bottomGrid .weather-details .details-container{grid-template-columns:repeat(3,1fr)!important}}@media screen and (max-width: 22rem){.bottomGrid .details-container{display:flex!important;flex-wrap:wrap}.bottomGrid .details-container .card{flex-grow:1;width:6rem!important}}.loading{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100%;background-color:#000c;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:1000}.loading .circle{position:relative;width:50px;height:auto;aspect-ratio:1;animation:rotate 2s ease infinite}.loading .circle .dot:nth-child(1){width:10px;height:10px;background-color:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg) translateY(25px)}.loading .circle .dot:nth-child(2){width:10px;height:10px;background-color:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg) translateY(25px)}.loading .circle .dot:nth-child(3){width:10px;height:10px;background-color:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(135deg) translateY(25px)}.loading .circle .dot:nth-child(4){width:10px;height:10px;background-color:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(180deg) translateY(25px)}.loading .circle .dot:nth-child(5){width:10px;height:10px;background-color:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(225deg) translateY(25px)}.loading .circle .dot:nth-child(6){width:10px;height:10px;background-color:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(270deg) translateY(25px)}.loading .circle .dot:nth-child(7){width:10px;height:10px;background-color:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(315deg) translateY(25px)}.loading .circle .dot:nth-child(8){width:10px;height:10px;background-color:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(360deg) translateY(25px)}@keyframes rotate{to{transform:rotate(360deg)}}