:root{--page-padding:20px;--border-radius:2rem;--search-font-size:1rem;--search-padding:1em;--mainInfo-font-size:40px;--document-font-color:#fff;--WeatherAppMain-gap:24px;--WeatherAppContainer-gap:65px;--WeatherCard-bg-color:#0000005e;--button-bg-color:#0049af}*{box-sizing:border-box;color:var(--document-font-color);font-family:Roboto,sans-serif}body{background-image:linear-gradient(gray,#000);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;min-height:100vh;margin:0;transition:background-image .5s ease-in-out}.bg-sunny{background-image:url(/Weather-Dashboard/Images/Sunny.webp)}.bg-clear{background-image:url(/Weather-Dashboard/Images/Clear.webp)}.bg-cloudy{background-image:url(/Weather-Dashboard/Images/Cloudy.webp)}.bg-mist{background-image:url(/Weather-Dashboard/Images/Fog_Mist.webp)}.bg-rainy{background-image:url(/Weather-Dashboard/Images/Rainy.webp)}.bg-snowy{background-image:url(/Weather-Dashboard/Images/Snowy.webp)}.bg-thunder{background-image:url(/Weather-Dashboard/Images/Thunder.webp)}.errorMessage{color:red;background-color:#fff;display:inline-block}#loader{z-index:9999;background:#f4f7f6;flex-direction:column-reverse;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .5s;display:flex;position:fixed;top:0;left:0}.spinner{border:5px solid #e0e0e0;border-top-color:#3498db;border-radius:50%;width:50px;height:50px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.hidden{display:none!important}.TryAgain{padding:var(--search-padding) Calc(2 * var(--search-padding));border-radius:var(--border-radius);text-transform:capitalize;cursor:pointer;background-color:#3447d2;border:none;align-items:center;gap:8px;font-size:16px;display:flex}.WeatherAppContainer{-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);color:#fff;flex-direction:column;justify-content:center;width:100%;min-height:100vh;padding:0 5%;display:flex}.horizontal-flex-wrap{flex-wrap:wrap;gap:1rem;width:100%;padding:3rem 0;display:flex}.alignCenter{align-items:center}.location-info{flex-grow:1;width:50%}.location-info h1{text-transform:capitalize;margin:0;font-size:3.5rem;font-weight:800}.location-info h2{text-transform:capitalize;margin:0;font-size:2.75rem;font-weight:600}.location-info time{font-size:1.75rem}.location-info time span{text-transform:capitalize}#SearchContainer{flex-direction:column;flex-grow:1;display:flex}.search-form{align-items:center;gap:1rem;min-width:25rem;display:flex}.search-group{flex-grow:1;position:relative}#SearchIn{width:100%;padding:var(--search-padding);border-radius:var(--border-radius);color:#000;font-size:var(--search-font-size);border:none}#SearchIn::placeholder{color:gray}#SearchIn:focus::placeholder{color:#0000;transition:all .3s}.button{font-size:var(--search-font-size);background-color:var(--button-bg-color);border-radius:var(--border-radius);text-transform:capitalize;cursor:pointer;border:none}#SearchBtn{padding:var(--search-padding) Calc(2 * var(--search-padding));position:absolute;top:0;right:-1px}#LocationBtn{padding:var(--search-padding) var(--search-padding);justify-content:center;align-items:center;display:flex}.button:hover{background-color:#005eff}#Temp-Units-WeatherCondition{flex-grow:1;justify-content:center;align-items:center;display:flex}#Temp{margin-block:0;font-size:200px}#Units{font-size:var(--mainInfo-font-size);flex-wrap:nowrap;display:flex}#CelciusBtn,#FahrenheitBtn{font-size:var(--mainInfo-font-size);cursor:pointer;background-color:#0000;border:none}.deactive-unit{color:#979797}#WeatherCondition{text-transform:capitalize;max-width:12.5rem;margin:0;font-size:2.25rem}#WeatherIcon-ExtraWeatherInfo{flex-grow:1;justify-content:center;width:50%;min-width:360px;display:flex}ul,ol{margin:0;padding:0;list-style:none}#ExtraWeatherInfo{flex-direction:column;justify-content:center;display:flex}#ExtraWeatherInfo p{margin:.25em;font-size:1.5rem}#WeatherIcon{flex-shrink:0;align-self:center;width:230px}.HourltyDailyForcast{background-color:var(--WeatherCard-bg-color);border-radius:var(--border-radius);flex-grow:1;min-width:350px;padding:28px 18px}#TodayDetailedInfoContainer{width:60%}#NextDaysPredictionContainer{width:30%}.hight100{height:100%}.HourltyDailyForcast h3,.weather-quantity-card h3{text-transform:capitalize;margin-top:0;font-weight:400}.HourlyDailyCardSlider{scroll-behavior:smooth;gap:.5rem;display:flex;overflow-x:auto}.HourlyDailyCard{background-color:var(--button-bg-color);border-radius:var(--border-radius);flex-direction:column;align-items:center;gap:8px;padding:16px;display:flex}#NextDaysPrediction{justify-content:center;width:auto}.centerVertically{flex-wrap:wrap;align-items:center;display:flex}.weather-quantity-card{background-color:var(--WeatherCard-bg-color);border-radius:var(--border-radius);flex-direction:column;flex-grow:1;justify-content:space-between;width:30%;min-width:300px;padding:36px 18px;display:inline-flex}.weather-quantity-card h3{align-items:center;gap:4px;display:flex}.quantity-value{margin:0;font-size:3rem;font-weight:500;position:relative}.quantity-description{text-transform:capitalize;font-size:1.75rem;font-weight:500}.margin-0{margin:0}.quantity-meter{border-radius:var(--border-radius);width:100%;height:20px}#UVBar{background-image:linear-gradient(90deg,#289500 0%,#f7e400 27.3%,#f85900 54.6%,#d8001d 72.8%,#6b49c8 100%);position:relative}.bg-white{background-color:#fff}#HumidityBar2,#AQIBarFill{border-radius:var(--border-radius);height:20px;transition:width 4s ease-in-out}#HumidityBar2{background-color:#00d9ff}.AQIBar2_1{background-color:#00e100;width:16.7%}.AQIBar2_2{background-color:#ff0;width:33.33%}.AQIBar2_3{background-color:#ff7e00;width:50%}.AQIBar2_4{background-color:red;width:66.7%}.AQIBar2_5{background-color:#8f3f97;width:83.33%}.AQIBar2_6{background-color:#7e0023;width:100%}.AQIBar2_unknown{background-color:#5f5f5f;width:5%}#UVPointer{aspect-ratio:1;border:4px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;display:flex;position:absolute;top:50%;left:0%;transform:translate(-50%,-50%)}#AQIContainer details{border-radius:var(--border-radius);color:#fff;margin-top:16px;padding:.5rem}#AQIContainer details summary{cursor:pointer;text-transform:capitalize;margin-bottom:.5rem;font-size:1.25rem;font-weight:500}.aqi-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.75rem;margin-top:.75rem;display:grid}.aqi-item{background-color:var(--button-bg-color);border-radius:var(--border-radius);justify-content:space-evenly;align-items:center;gap:8px;padding:8px;font-size:1rem;display:flex}.dot{border-radius:50%;flex-shrink:0;width:12px;height:12px;display:inline-block}.dot--green{background-color:#00e100}.dot--orange{background-color:#ff7e00}.dot--darkred{background-color:#7e0023}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.position-relative{position:relative}.sun-moon-section{background-color:var(--WeatherCard-bg-color);border-radius:var(--border-radius);flex-grow:1;justify-content:space-evenly;padding:18px;display:inline-flex;position:relative}#MoonVisualize,#MoonContent,#SunContent{flex-direction:column;align-items:center;display:flex}#SunVisualize{justify-content:center;align-items:center;display:flex}#MoonVisualize,#SunVisualize{gap:12px;width:30%}#MoonContent,#SunContent{justify-content:center;gap:16px;width:20%}.sun-moon-section img{width:100%;max-width:260px;height:auto}.subtitle{font-size:1em;font-weight:400}.time{font-size:1.5rem;font-weight:500px}@media (width<=640px){.WeatherAppContainer{padding:0 2%}.horizontal-flex-wrap{gap:1rem;padding:2rem 0}.location-info h1{font-size:3rem}.location-info h2{font-size:2.25rem}.location-info time{font-size:1.25rem}.search-form{min-width:19rem}#Temp{font-size:125px}#Units,#CelciusBtn,#FahrenheitBtn{font-size:2rem}#WeatherCondition{font-size:1.5rem}#ExtraWeatherInfo p,#ExtraWeatherInfo p span{font-size:1.25rem}#WeatherIcon{width:170px}.quantity-value{font-size:2.25rem}.quantity-description{font-size:1.25rem}.HourltyDailyForcast h3,.weather-quantity-card h3{font-size:1rem}.time{font-size:1.25rem}}