.header{justify-content:space-between;display:flex}.units-dropdown-button{color:#fff;cursor:pointer;background-color:#272541;border-radius:.6rem;justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1rem;transition:background-color .3s;display:flex}.units-dropdown-button:hover{background-color:#3a3861}.units-dropdown-button img:last-child{transition:transform .3s}.units-dropdown-button.open img:last-child{transform:rotate(180deg)}.unit-dropdown{position:relative}.units-dropdown-content{z-index:1000;transform-origin:top;opacity:1;background-color:#272541;border-radius:.6rem;width:10rem;padding-top:.6rem;transition:all .3s ease-out;position:absolute;top:100%;right:0;transform:translateY(0)scaleY(1);box-shadow:0 4px 8px rgba(0,0,0,.1)}.units-dropdown-content.closing{opacity:0;transform:translateY(-10px)scaleY(.8)}.units-dropdown-content button{color:#fff;text-align:left;cursor:pointer;background-color:transparent;border:none;justify-content:space-between;align-items:center;width:90%;margin:0 auto;padding:.5rem;font-size:.7rem;transition:background-color .3s;display:flex}.units-dropdown-content button:hover{background-color:#312f4b;border-radius:.4rem}.units-dropdown-content button.selected{background-color:#312f4b}.units-dropdown-content div{padding:.5rem 0 .3rem}.units-dropdown-content div p{color:#aeaeb7;margin-bottom:.4rem;padding:0 .8rem;font-size:.7rem}hr{border:none;border-top:1px solid #312f4b;width:90%;margin:0 auto}@media (max-width:767px){.units-dropdown-content{width:12rem;right:0}}@media (min-width:601px) and (max-width:1024px){.units-dropdown-content{width:11rem;right:0}}
.search-container{margin-top:.1rem}.search-container h1{color:#fff;text-align:center;margin-bottom:1rem}.blahh{flex-direction:column;align-items:center;display:flex;position:relative}.search-input{gap:2%;display:flex}.search{background-color:#272541;border:1px solid transparent;border-radius:8px;width:300px;height:38px;transition:border .3s,box-shadow .3s;display:flex}.search:focus-within{border:1px solid #fff;box-shadow:0 0 6px rgba(255,255,255,.6)}.search img{width:15px;margin-left:.5rem;margin-right:.8rem}.search input{color:#fff;background:0 0;border:none;width:252px;height:38px}.search input:focus{color:#fff;border:none;outline:none}.search input::placeholder{color:#d5d4d9}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:none}input[type=search]::-moz-search-clear{display:none}.search-input button{color:#fff;cursor:pointer;background-color:#4455da;border:1px solid transparent;border-radius:8px;width:4rem;transition:all .3s}.search-input button:hover{outline-offset:2px;outline:1px solid #4455da;box-shadow:0 0 12px rgba(59,91,255,.5)}.searching-state{background-color:#272541;border-radius:8px;align-items:center;gap:8px;width:295px;margin-top:.5rem;margin-right:4.4rem;padding:.5rem;display:flex;position:absolute;top:100%}.searching-state img{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.search-results{background-color:#272541;border-radius:8px;width:300px;margin-top:.5rem;margin-right:4.4rem;position:absolute;top:100%}.input-error{color:#fff;justify-content:center;gap:10px;margin-top:1rem;display:flex}.city-result{cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:start;align-items:center;width:95%;height:1.7rem;margin-left:.5rem;padding:1rem .3rem;transition:background-color .3s ease-in;display:flex}.city-result:first-child{margin-top:.5rem}.city-result:last-child{margin-bottom:.5rem}.city-result:hover{background-color:#302f4a}.city-result strong,span{color:#d4d3d9}.city-result strong{margin-right:.5rem}@media (max-width:767px){.search-container h1{margin:1rem 0 2rem}.search-input{flex-direction:column}.search{width:100%}.search-input button{width:100%;height:38px;margin-top:1rem}.searching-state,.search-results{margin:.5rem auto 0}}@media (min-width:601px) and (max-width:1024px){.searching-state{margin-left:.5rem}}
.weather-report{justify-content:center;gap:4%;margin-top:1.5rem;display:flex}@media (max-width:767px){.weather-report{flex-direction:column}}@media (min-width:601px) and (max-width:1024px){.weather-report{flex-direction:column}}
.general-report{background-image:url(/images/bg-today-large.svg);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:.7rem;justify-content:space-between;align-items:center;width:35rem;height:11rem;padding:1rem;display:flex}.report-details-loading{text-align:center;color:#fff;background-color:#272541;border-radius:.7rem;flex-direction:column;justify-content:center;align-items:center;width:35rem;height:11rem;display:flex}.loading-report{gap:4px;display:inline-flex}.loading-report span{font-size:30px;animation:.6s infinite bounce}.loading-report span:first-child{animation-delay:0s}.loading-report span:nth-child(2){animation-delay:.2s}.loading-report span:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-3px)}}.report-details{color:#fff}.report-details h3{margin-bottom:.5rem}.weather-degree{justify-content:center;align-items:center;display:flex}.weather-degree img{width:60px}.weather-degree h1{color:#fff;font-size:3rem;font-style:italic}.metrics{flex-wrap:wrap;gap:2%;margin-top:.7rem;display:flex}.metrics-details{background-color:#272541;border-radius:.7rem;width:23.5%;padding:.7rem}.metrics-details p{color:#d5d4d9;margin-bottom:.5rem;font-size:.8rem}.metrics-details h2{color:#fff;font-size:1.1rem}@media (max-width:767px){.general-report{background-image:url(/images/bg-today-small.svg);flex-direction:column;justify-content:center;gap:2rem;width:100%;height:15rem}.report-details-loading{width:100%;height:15rem}.report-details{text-align:center}.report-details h3{font-size:2rem}.weather-degree{gap:2rem}.weather-degree h1{font-size:4rem}.weather-degree img{width:80px}.metrics-details{width:49%;margin-top:.8rem}}@media (min-width:601px) and (max-width:1024px){.general-report{width:100%}}
.daily-forecast-container{margin-top:1.5rem}.daily-forecast-container h5{color:#fff;margin-bottom:.7rem;font-size:1.1rem}.daily-forecast{flex-wrap:wrap;gap:2%;display:flex}.daily-forecast div{color:#fff;text-align:center;background-color:#272541;border-radius:.7rem;width:12.5%;height:5.5rem;padding:.4rem 0}.daily-forecast div p,span{font-size:.7rem}.daily-forecast div img{width:40px;margin:0 auto;display:block}.daily-forecast div span{margin:.4rem}@media (max-width:767px){.daily-forecast div{width:32%;margin-top:.5rem}}
.hourly-forecasts{color:#d4d3d9;background-color:#272541;border-radius:.7rem;width:20rem;padding:1rem}.hourly-forecasts-header{justify-content:space-between;align-items:center;display:flex}.days-dropdown{position:relative}.forecasts-dropdown-button{cursor:pointer;background-color:#3c3b5e;border-radius:.3rem;justify-content:center;width:5.5rem;padding:.3rem;display:flex}.forecasts-dropdown-button:hover{background-color:#3a3861}.forecasts-dropdown-button img{width:10px;margin-left:.4rem;transition:transform .3s}.forecasts-dropdown-button.open img{transform:rotate(180deg)}.days-dropdown-contents{z-index:10;transform-origin:top;opacity:1;background-color:#272541;border:1px solid #2c2c4d;border-radius:.3rem;width:10rem;margin-top:.3rem;padding:.5rem;transition:all .3s ease-out;position:absolute;right:0;transform:translateY(0)scaleY(1);box-shadow:0 4px 8px rgba(0,0,0,.1)}.days-dropdown-contents.closing{opacity:0;transform:translateY(-10px)scaleY(.8)}.days-dropdown-contents button{text-align:left;color:#d4d3d9;cursor:pointer;background:0 0;border:none;border-radius:.2rem;width:100%;padding:.3rem;transition:background-color .2s;display:block}.days-dropdown-contents button:hover{background-color:#4a4968}.days-dropdown-contents button:not(:last-child){margin-bottom:.5rem}.forecasts-day{background-color:#302f4a;border-radius:.5rem;justify-content:space-between;align-items:center;height:2.5rem;margin-top:.5rem;padding-right:.3rem;display:flex}.forecasts-day div{align-items:center;display:flex}.forecasts-day img{width:40px}@media (max-width:767px){.hourly-forecasts{width:100%;margin-top:1.5rem}}@media (min-width:601px) and (max-width:1024px){.hourly-forecasts{width:100%;margin-top:1.5rem}}