*{box-sizing:border-box;list-style:none;margin:0;outline:none;padding:0;text-decoration:none}body,html{height:100vh}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#132c33;font-family:Mulish,sans-serif}#root{display:grid;height:100vh;place-items:center}.locationForm{background-color:#fff;border:1px solid rgba(0,0,0,.5);border-radius:10px;box-shadow:0 0 10px hsla(0,0%,100%,.3);display:flex;flex-direction:column;justify-content:center;max-width:450px;width:90%}.locationForm h1{border-bottom:1px solid #ccc;color:#2389a0;font-size:1.6rem;font-weight:700;padding:15px;text-align:center}.locationForm .container{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:30px}.locationForm .container .status{background:#29adcb48;border:1px solid #29adcb72;border-radius:5px;color:#2389a0;font-size:1.2rem;margin-bottom:10px;padding:10px;text-align:center;width:100%}.locationForm .container .status.error{background:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.locationForm .container form{align-items:center;display:flex;overflow:hidden;position:relative;width:100%}.locationForm .container form input{border:1px solid rgba(0,0,0,.3);border-radius:5px;font-size:1rem;height:55px;overflow:hidden;padding:0 60px 0 10px;width:100%}.locationForm .container form input:focus{border:2px solid #2389a0}.locationForm .container form button{align-items:center;background-color:#2389a0;border:none;border-bottom-right-radius:5px;border-top-right-radius:5px;color:#fff;cursor:pointer;display:flex;font-size:1.6rem;font-weight:700;height:100%;justify-content:center;padding:10px;position:absolute;right:0;top:0;transition:all .3s ease-in-out;width:50px}.locationForm .container form button:hover{background-color:#51c4d3}.locationForm .container .seperator{align-items:center;background-color:#aaa;display:flex;height:1px;justify-content:center;margin:30px 0;width:100%}.locationForm .container .seperator:before{background-color:#fff;color:#aaa;content:"ya da";font-size:1.2rem;padding:0 10px}.locationForm .container .getLocation{align-items:center;background-color:#2389a0;border:none;border-radius:5px;color:#fff;cursor:pointer;display:flex;font-size:1.2rem;justify-content:center;padding:15px 0;transition:all .3s ease-in-out;width:100%}.locationForm .container .getLocation:hover{background-color:#51c4d3}.container{display:grid;padding:3rem 4rem;place-items:center;width:100%}.container .weather{background-color:#fff;border:1px solid rgba(0,0,0,.5);border-radius:10px;box-shadow:0 0 10px hsla(0,0%,100%,.3);display:grid;grid-template-rows:1fr;overflow:hidden;width:100%}.container .weather header{border-bottom:1px solid #cbe9f1;padding:.6rem 2rem}.container .weather header button{align-items:center;background:none;border:none;color:#2389a0;cursor:pointer;display:flex;font-size:1.4rem;font-weight:700}.container .weather header svg{margin-right:.5rem}.container .weather main{display:grid;grid-auto-flow:column}.container .weather main .sidebar{align-items:center;display:flex;flex-direction:column;max-width:20rem;padding:2rem}.container .weather main .sidebar h1{color:#2389a0;font-size:1.6rem;font-weight:700;max-width:240px;text-align:center;text-transform:capitalize}.container .weather main .sidebar .currentWeather{color:#2389a0;font-size:1.2rem;margin-bottom:1rem;text-align:center;text-transform:capitalize}.container .weather main .sidebar .currentWeatherIcon{align-items:center;display:flex;justify-content:center;width:80%}.container .weather main .sidebar .currentWeatherIcon img{width:100%}.container .weather main .sidebar .currentTemp{align-items:flex-start;border:1px solid #ccc;border-radius:999px;color:#2389a0;display:flex;font-size:3.5rem;font-weight:700;justify-content:center;line-height:2.8rem;padding:1rem 2rem;width:10rem}.container .weather main .sidebar .currentTemp span:nth-child(2){color:#919596;font-size:1.4rem;line-height:1}.container .weather main .sidebar .feelsTemp{color:#434343;font-size:1rem;line-height:1;margin-top:1rem;text-align:center}.container .weather main .sidebar .feelsTemp span{font-size:.8rem}.container .weather main .sidebar .currentDay{color:#2389a0;font-size:2rem;font-weight:700;margin-top:2rem;text-align:center}.container .weather main .sidebar .currentDay span{color:#919596;font-size:1.2rem}.container .weather main .sidebar .seperator{background-color:#ccc;height:1px;margin:30px 0;width:100%}.container .weather main .sidebar .sunmoon{align-items:flex-start;display:flex;flex-direction:column;font-size:1.2rem;width:100%}.container .weather main .sidebar .sunmoon div{align-items:center;display:flex;font-size:1rem;gap:5px;white-space:nowrap;width:95%}.container .weather main .sidebar .sunmoon div span{color:#434343;display:flex;justify-content:space-between;width:100%}.container .weather main .sidebar .sunmoon div span strong{color:#000}.container .weather main .sidebar .sunmoon div img{width:70px}.container .weather main .info{background:#e5f6fb;display:flex;flex-direction:column;justify-content:space-between;padding:2rem}.container .weather main .info h3{color:#2389a0;font-size:2rem;font-weight:700;margin-bottom:1rem}.container .weather main .info .weatherForecast{grid-gap:.5rem;display:grid;grid-template-columns:repeat(8,1fr);margin-bottom:1rem}.container .weather main .info .weatherForecast li{align-items:center;background-color:#fff;border:1px solid #e9e9e9;border-radius:10px;color:#000;display:flex;flex-direction:column;font-size:1.4rem;justify-content:center;padding:1rem 2rem;text-align:center}.container .weather main .info .weatherForecast li .day{font-weight:700}.container .weather main .info .weatherForecast li .hours{font-size:.8rem;font-weight:500}.container .weather main .info .weatherForecast li img{width:100%}.container .weather main .info .weatherForecast li .temp{color:#434343;font-size:1.2rem;margin-top:.4rem}.container .weather main .info .otherDetails{grid-gap:.5rem;display:grid;grid-template-columns:repeat(4,1fr)}.container .weather main .info .otherDetails li{background-color:#fff;border:1px solid #e9e9e9;border-radius:10px;color:#000;display:flex;flex-direction:column;padding:1rem 0}.container .weather main .info .otherDetails li h4{font-size:1.2rem;font-weight:700;text-align:center}.container .weather main .info .otherDetails li div{align-items:center;display:flex}.container .weather main .info .otherDetails li div span{color:#434343;font-size:1.2rem}.container .weather main .info .otherDetails li div span .humidity{color:#2389a0;font-size:3rem;margin-right:5px}.container .weather main .info .otherDetails li div img{width:5rem}@media screen and (max-width:1200px){.container .weather main .info .weatherForecast{grid-template-columns:repeat(4,1fr)}.container .weather main .info .otherDetails{grid-template-columns:repeat(2,1fr)}.container .weather main .info .otherDetails li div{justify-content:center}}@media screen and (max-width:768px){.container .weather main{grid-auto-flow:row}.container .weather main .sidebar{max-width:100%}.container .weather main .info h3{text-align:center}}@media screen and (max-width:425px){.container{padding:3rem 1rem}.container .weather main .info .weatherForecast{grid-template-columns:repeat(2,1fr)}.container .weather main .info .otherDetails{grid-template-columns:repeat(1,1fr)}}
/*# sourceMappingURL=main.3248cef3.css.map*/