.weatherCondition{display:flex;flex-direction:column;justify-content:center;align-items:center;width:9.2rem;height:9.2rem;background:#8080804d;border-radius:50%}.weatherCondition p{font-weight:600}.weatherCondition h4{font-size:1.6rem;font-weight:400}.container{height:100vh;width:100vw;overflow:auto;display:grid;place-content:center}::-webkit-scrollbar{background:#0006;width:1vw}::-webkit-scrollbar-thumb{background:#80808080;border-radius:1.6rem}header,main{width:36rem}h1{text-align:center;padding-top:2.4rem;font-size:4rem}form{margin-top:.8rem;display:flex;align-items:center;justify-content:center;padding:0 2.4rem}.srOnly{position:absolute;width:.1rem;height:.1rem;overflow:hidden;color:transparent}form input{border:none;border-radius:.4rem;font-size:2rem;padding:.8rem 1.2rem;background:#8080804d;color:#fff;width:100%}.searchIcon{color:gray;font-size:2.4rem;position:relative;left:-3.2rem}form button{border:none;border-radius:.4rem;color:#fff;background:#106cc4;padding:.8rem 1.2rem;font-size:2rem}form button:hover{cursor:pointer;background:#2f2f98}main{padding:1.6rem 2.4rem}.spinner{animation:spinnerRotate 1s linear;font-size:4.2rem;display:block;margin:50% auto}.blockCurrentTime{margin-top:1.6rem;display:flex;align-items:center;justify-content:center;gap:1.6rem;background:#8080804d;padding:.8rem;border-radius:1.6rem}.blockDegree{display:flex;align-items:center;justify-content:center}.iconThermometer{font-size:4.2rem}.degreeCurrent{font-size:6.4rem;padding:0 .8rem}.degreeMinMax{font-size:1.8rem;display:flex;flex-direction:column;border-left:2px solid gray;padding:.2rem .8rem}.degreeMin{color:gray}.blockSituation{display:flex;align-items:center;justify-content:center;gap:2.4rem;padding:0}.iconCurrentWeather{width:4.8rem;height:auto}.containerWeatherCondition{display:flex;align-items:center;justify-content:space-around;padding:1.6rem 0}.containerWeatherForecast ol{display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;list-style:none}footer p{text-align:center;padding:1.6rem 0}@keyframes spinnerRotate{to{transform:rotate(360deg)}}.blockWeatherForecast{display:flex;flex-direction:column;align-items:center;justify-content:center}.blockWeatherForecast h3{text-transform:capitalize}.blockIconDegree{display:flex;align-items:center;justify-content:center}.blockWeatherForecast img{padding:0 0 .8rem;width:4.2rem}.forecastDegreeMaxMin{display:flex;flex-direction:column;border-left:1px solid gray;padding-left:.4rem}.forecastDegreeMaxMin span:nth-child(2){color:gray}:root{font-size:62.5%}*{margin:0;padding:0;box-sizing:border-box}body{color:#fff;background:url(/assets/weather-rain-C3B6v5gZ.jpg);background-position:center;background-size:cover;background-repeat:no-repeat;backdrop-filter:brightness(30%);-webkit-backdrop-filter:brightness(30%)}body,input,button{font-size:1.6rem;font-family:Sofia Sans Semi Condensed,sans-serif}