#navbar{width:100vw;height:60px;position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:space-around;background-color:#ececec;z-index:100}#navbar .days-pick{display:flex;align-items:center;justify-content:center;gap:10px}#navbar .days-pick button{text-decoration:none;border:none;outline:none}#navbar .days-pick .active-day{background-color:gray;transition:background-color .3s}#navbar .navbar-btns{display:flex;align-items:center;justify-content:space-around;gap:30px}#navbar .navbar-btns .navbar-btn{width:200px;background-color:#000;color:#fff}@keyframes skeleton-loading{to{background-position:left}}#MainContainer{margin-top:50px;align-self:baseline}#MainContainer .area-selection span{font-size:12px}#MainContainer .area-selection input{padding:10px;font-size:large;background-color:#fff;color:#000;border-radius:5px}#MainContainer .area-selection .current-area-div{height:60px}#MainContainer .area-selection .current-area-div h3,#MainContainer .area-selection .current-area-div h2{margin:5px}#MainContainer #days{display:flex;justify-content:center;align-items:center;gap:20px;margin-bottom:10px}#MainContainer #days h3{margin:3px 0}#MainContainer #days .weatherDay{min-width:550px;height:400px;padding:10px;background-color:#fff;border-radius:10px;box-shadow:5px 5px 10px 1px #0000001a}#MainContainer #days .weatherDay .temp-div{display:flex;align-items:center;justify-content:center;padding-left:60px}#MainContainer #days .weatherDay .temp-div .weather-icon{width:400px;margin:-80px -100px -100px -10px}#MainContainer #days .weatherDay .wind{display:flex;align-items:center;justify-content:center;padding-left:60px;gap:70px;padding-right:90px}#MainContainer #days .weatherDay .wind img{width:130px}#MainContainer #days .weatherDay .wind span{font-size:30px;margin-left:-10px}#MainContainer #days .weatherDay .skeleton{padding-top:20px;width:100%;height:100%;display:flex;justify-content:start;align-items:center;flex-direction:column}#MainContainer #days .weatherDay .skeleton .skeleton-img{height:50%;width:80%;border-radius:10px;cursor:progress;background:linear-gradient(90deg,#ddda 40%,#efefefaa,#ddda 60%) right / 300% 100%;animation:skeleton-loading 1.5s linear infinite}#MainContainer #days .weatherDay .skeleton .title{margin-top:18px;width:80%;height:40px;border-radius:10px;background:linear-gradient(90deg,#ddda 40%,#efefefaa,#ddda 60%) right / 300% 100%;animation:skeleton-loading 1.5s linear infinite}#MainContainer #days .weatherDay .skeleton .info{margin-top:12px;width:80%;height:20px;border-radius:5px;background-color:#ddda}#MainContainer #days .weatherDay .temp{margin:-10px 0 0 20px;font-size:65px;z-index:30}#MainContainer #days .hourly-div{display:flex;align-items:center;justify-content:center;gap:20px}#MainContainer #days .hourly-div .hourly{min-width:200px;padding:10px;height:400px;background-color:#fff;border-radius:10px;box-shadow:5px 5px 10px 1px #0000001a}#MainContainer #days .hourly-div .hourly .temp-div{display:flex;align-items:center;justify-content:center;padding-left:60px}#MainContainer #days .hourly-div .hourly .hour-div{display:flex;align-items:center;justify-content:center}#MainContainer #days .hourly-div .hourly .hour-div .hour-time{padding-right:18px;font-weight:600}#MainContainer #days .hourly-div .hourly .hour-div p{font-size:19px;margin:0}#MainContainer #days .hourly-div .hourly .hour-div .hour-div-img{width:90px;margin:-20px -20px -20px 0}#MainContainer #days .advance{font-size:large}#MainContainer .advance-day{display:flex;justify-content:center;align-items:center;margin-top:10px;width:550px;height:500px;padding:10px;background-color:#fff;border-radius:10px;box-shadow:5px 5px 10px 1px #0000001a}#MainContainer .advance-day .left-div,#MainContainer .advance-day .right-div{width:50%;height:100%;padding:5px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px}#MainContainer .advance-day .left-div .advanced-item,#MainContainer .advance-day .right-div .advanced-item{display:flex;justify-content:center;align-items:center;flex-direction:column;width:220px;height:160px;font-size:20px;padding:7px 13px;border-radius:10px;box-shadow:5px 5px 10px 1px #0000001a;background-color:#f5f4f4}#MainContainer .advance-day .left-div .advanced-item p,#MainContainer .advance-day .right-div .advanced-item p{margin:0}#MainContainer .advance-day .left-div .advanced-item .advanced-item-icon,#MainContainer .advance-day .right-div .advanced-item .advanced-item-icon{width:80px;margin-bottom:10px}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;display:flex;align-items:center;justify-content:center}body{background-color:#ececec}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#111111de;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:initial;min-width:320px;min-height:100vh}h1{font-size:2.5em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#5f64b4}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}