*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%}body{min-height:100vh;font-family:sans-serif;background:#9393cf;color:#000;font-size:2rem}.main{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;padding:2rem}.header{height:10%;width:100%;display:flex;justify-content:space-between;padding:0 4rem;align-items:center}.header__logo{display:flex;justify-content:center;align-items:center;font-size:110%;font-weight:600}.header__search{height:100%;display:flex;justify-content:center;align-items:center;width:50rem}.header__search--input{padding:1rem 2rem;background:#a5a5d7;border:none;font-size:100%;border-radius:2rem;width:100%}.header__search--input:focus{outline:none}.header__time{display:flex;justify-content:center;align-items:center;font-size:110%;font-weight:600}.weather{background:#9393cf;width:100%;height:100%;border-radius:2rem;box-shadow:0 0 35rem .1rem #0006}.weather__heading{display:flex;justify-content:space-between;align-items:center;gap:10rem;height:40%;width:100%;padding:2rem 35rem}.weather__heading--wrapper{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:start}.weather__heading--location{font-size:200%}.weather__heading--riseset{display:flex;flex-direction:column;justify-content:center;align-items:start;gap:.4rem;width:100%}.weather__heading--riseset-item{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:30%}.weather__heading--riseset-sun{color:gold}.weather__heading--riseset-moon{color:silver}.weather__heading--temperature{display:flex;justify-content:center;align-items:start}.weather__heading--temperature-text{font-size:400%}.weather__heading--temperature-celsius{font-size:150%;font-weight:600;margin-top:.8rem}.weather__heading--details{height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:2rem;color:#fff}.weather__heading--details-icon{font-size:800%}.weather__heading--details-time{font-size:180%}.weather__week{padding:2rem;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2rem;height:50%;width:100%}.weather__day{border-radius:2rem;background:#a1a1d5;padding:2rem;display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:15%;aspect-ratio:1/1}.weather__day--date{width:100%;display:flex;justify-content:center;align-items:center;font-size:110%;font-weight:600}.weather__day--wrapper{width:100%;display:flex;justify-content:center;align-items:center}.weather__day--icon{font-size:300%;color:#fff;text-shadow:0rem 0rem .8rem rgba(0,0,0,.4)}.weather__day--temp{width:100%;display:flex;justify-content:center;align-items:center;font-weight:600;font-size:110%}.weather__error{width:100%;height:90%;display:flex;justify-content:center;align-items:center;flex-direction:column-reverse;gap:3rem;color:#7070bf}.weather__error--message{font-size:180%}.weather__error--icon{font-size:1100%}.darkmode{background:#070f2b;color:#fff}.header__search--input.darkmode{background:#0b1741}.weather.darkmode{background:#070f2b}.weather__day.darkmode{background:#0a153d}.weather__error.darkmode{color:#040919}@media screen and (max-width: 69rem){.weather__heading{gap:0;padding:2rem 22rem}}@media screen and (max-width: 62.5rem){.weather__day{width:18rem}}@media screen and (max-width: 55rem){.weather__heading{justify-content:center;gap:4rem}.weather__week{padding:0 4rem}}@media screen and (max-width: 48rem){.main{padding:0}.weather{border-radius:0;box-shadow:none}.header{display:flex;justify-content:center;align-items:center;padding:0}.header__logo,.header__time{display:none}}@media screen and (max-width: 44rem){.weather__week{height:auto}.weather__day{width:15rem}}@media screen and (max-width: 36rem){body{margin-bottom:20rem}.weather__week{display:flex;justify-content:center;align-items:center;flex-direction:column}.weather__day{width:100%;display:flex;flex-direction:row;aspect-ratio:0}}@media screen and (max-width: 32.5rem){.header{padding:0 2rem}.header__search{width:100%}.weather__heading{padding:5rem;gap:0;height:auto}.weather__heading--wrapper{width:100%;display:flex;justify-content:center;align-items:center}.weather__heading--riseset,.weather__heading--riseset-item{display:flex;justify-content:center;align-items:center}.weather__heading--details{display:none}}