@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800;900&display=swap);*{box-sizing:border-box;margin:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-family:Montserrat,sans-serif;margin:0;padding:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:focus{outline:none}.App{background-color:#b5d8ff;height:100vh;justify-content:center;padding:50px}.App,.container{align-items:center;display:flex;width:100%}.container{height:100%}.leftContainer{align-items:center;background-color:#5c9ce5;border-radius:50px 0 0 50px;color:#fff;gap:20px;padding:30px 20px;position:relative;width:400px}.leftContainer,.rightContainer{display:flex;flex-direction:column;height:100%}.rightContainer{background-color:#e4f1ff;border-radius:0 50px 50px 0;gap:30px;padding:30px 50px;width:calc(100% - 350px)}.topBar{align-items:center;display:flex;justify-content:space-between;width:100%}.topBar a{color:#fff;text-decoration:none}.topBar h3{align-items:center;background-color:#5c9ce5;border-radius:20px;color:#fff;cursor:pointer;display:flex;font-weight:400;gap:3px;justify-content:center;padding:5px 8px}.topBar h3,.topBar h3 span{font-size:18px}.material-symbols-rounded{font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 24}.showDate{font-size:16px;font-weight:400}.weatherType{flex-direction:column;margin-top:-20px}.cityName,.weatherType{align-items:center;display:flex;justify-content:center}.cityName{font-size:20px;font-weight:600;margin-top:10px}.cityName img{height:auto;width:50px}.whatWeather{font-size:24px}.weatherType p{font-size:16px;font-weight:400;text-transform:capitalize}.degreeValue{font-size:100px;font-weight:400;position:relative}.degreeValue span{font-size:50px;font-weight:400;position:absolute;right:-25px;top:10px}.today-content{flex-direction:column;justify-content:space-around}.today-content,.weather-Img{align-items:center;display:flex;height:50%;width:100%}.weather-Img{justify-content:center}.weather-Img img{align-self:flex-end;height:90%;width:100%}.hourlyWeather{background-color:#fff;border-radius:25px;height:100%;padding:20px;width:100%}.weatherDetails{display:flex;flex-direction:column;gap:20px;width:100%}.weatherDetails p{font-size:18px;font-weight:500}.allWeatherDetails{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;display:flex;flex-wrap:nowrap;gap:20px;overflow:hidden;overflow-x:auto;scrollbar-width:none;white-space:nowrap;width:auto}.allWeatherDetails::-webkit-scrollbar{display:none}.detailContainer{background-color:#fff;display:inline-block;flex-direction:column;height:120px;justify-content:space-between;max-width:180px;min-width:170px;padding:15px}.detailContainer,.weatherIcon{border-radius:15px;display:flex}.weatherIcon{align-items:center;background-color:#5c9ce5;color:#fff;font-weight:100;height:30px;justify-content:center;-webkit-user-select:none;user-select:none;width:30px}.align{align-items:center;display:flex;justify-content:space-between}.align span{font-size:22px;font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 24}.detailContainer p{font-size:16px;font-weight:500}.valueContainer{align-items:center;display:flex;height:100%;justify-content:center}.valueContainer .value{font-size:35px;font-weight:600;text-align:center}.valueContainer .value span{font-size:20px;font-weight:600;margin-left:3px}.detailsHandler{align-items:center;display:flex;flex-direction:row;justify-content:space-between}.slidebtns{display:flex;gap:10px}.slidebtns span{cursor:pointer}@media only screen and (max-width:1100px){.leftContainer{width:300px}.rightContainer{width:calc(100% - 300px)}}@media only screen and (max-width:1000px){.App{padding:50px 20px}.leftContainer{border-radius:30px 0 0 30px;padding:30px 10px;width:230px}.rightContainer{border-radius:0 30px 30px 0;padding:30px;width:calc(100% - 230px)}.detailContainer{border-radius:12px;max-width:180px;min-width:140px}.weatherIcon{border-radius:8px;height:25px;width:25px}.detailContainer p{font-size:14px;font-weight:500}.align span{font-size:18px;font-variation-settings:"FILL" 0,"wght" 200,"GRAD" 0,"opsz" 24}.valueContainer .value{font-size:30px}.valueContainer .value span{font-size:18px}.showDate{font-size:14px;font-weight:400}.weatherType{margin-top:-20px}.cityName{font-size:18px;font-weight:600;margin-top:10px}.whatWeather{font-size:22px}.degreeValue{font-size:80px}.degreeValue span{font-size:50px;font-weight:400;position:absolute;right:-25px;top:10px}}@media only screen and (max-width:768px){.App{height:100%;padding:50px 30px;width:100%}.container{flex-direction:column}.leftContainer{border-radius:30px 30px 0 0;flex-direction:row;height:300px;justify-content:space-between;padding:30px;width:100%}.today-content{height:90%;justify-content:space-around;width:50%}.weather-Img{height:100%;width:50%}.rightContainer,.weather-Img img{height:100%;width:100%}.rightContainer{border-radius:0 0 30px 30px;padding:30px}}@media only screen and (max-width:550px){.App{padding:0}.App,.leftContainer{height:100%;width:100%}.leftContainer{border-radius:0 0 0 0;flex-direction:column;padding:30px 20px}.today-content{gap:10px;justify-content:space-between}.today-content,.weather-Img{height:50%;width:100%}.weather-Img img{height:100%;width:70%}.showDate{font-size:15px;margin-top:15px}.weatherType{margin-top:-15px}.cityName{font-size:18px;font-weight:600;margin-top:10px}.cityName img{width:35px}.whatWeather{font-size:20px}.weatherType p{font-size:15px;margin-top:5px}.degreeValue{font-size:70px;font-weight:400}.degreeValue span{font-size:35px;font-weight:500;right:-15px}.rightContainer{border-radius:0 0 0 0;gap:30px;height:100%;padding:30px 20px;width:100%}.topBar{flex-direction:column;gap:20px}.topBar h3{border-radius:15px;font-size:18px;font-weight:500;padding:5px 10px}.topBar h3 span{font-size:20px}.hourlyWeather{background-color:#fff;border-radius:12px;padding:20px 15px}.weatherDetails{gap:20px}.weatherDetails p{font-size:16px;font-weight:500}.allWeatherDetails{gap:15px}.detailContainer{border-radius:10px;height:110px;min-width:150px;padding:10px 12px}.weatherIcon{border-radius:15px;height:25px;width:25px}.align span{font-size:18px}.detailContainer p{font-size:16px;font-weight:500}.valueContainer .value{font-size:30px}.valueContainer .value span{font-size:18px}.detailsHandler{gap:20px}}@media only screen and (max-height:749.8px){.App{height:750px}}@media only screen and (min-width:1550px){.App{height:100vh;padding:50px}.container{width:1400px}}@media only screen and (min-height:750px){.container{height:700px}}.modal{background-color:rgba(0,0,0,.556);height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%}.modal,.modal-content{align-items:center;display:flex}.modal-content{background-color:#fff;border-radius:20px;flex-direction:column;height:400px;justify-content:space-between;position:relative;width:450px}.closeBtn{cursor:pointer;font-size:35px;font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24;position:absolute;right:8px;top:8px;-webkit-user-select:none;user-select:none}.modal-content p{bottom:20px;font-size:24px;font-weight:600;left:50%;position:absolute;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.svgContain{height:90%;-webkit-user-select:none;user-select:none}.svgContain img{height:100%;width:100%}@media only screen and (max-width:700px){.modal-content{border-radius:12px;height:320px;position:relative;width:350px}.modal-content p{font-size:22px;font-weight:600}}@media only screen and (max-width:550px){.modal-content{border-radius:12px;height:300px;width:80%}.modal-content p{bottom:15px;font-size:18px;white-space:nowrap;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}}.searchbar{align-items:center;display:flex;justify-content:center;position:relative;width:280px}.searchbar input{border:none;border-radius:5px;border-radius:50px;box-shadow:0 0 10px hsla(210,8%,62%,.39);font-size:16px;height:45px;outline:none;padding:0 20px;width:280px}.searchbar button:hover{box-shadow:inset 0 2 3px rgba(0,0,0,.704)}.searchbar button{align-items:center;background-color:initial;background-color:#5c9ce5;border:none;border-radius:50px;cursor:pointer;display:flex;height:35px;justify-content:center;outline:none;padding:5px;position:absolute;right:5px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-user-select:none;user-select:none;width:35px}.searchbar button img{height:25px;width:25px}@media only screen and (max-width:550px){.searchbar{width:90%}.searchbar input{width:100%}}.hourDetails{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:0 5px;width:50px}.hourDetails img{height:35px;width:35px}.hourDetails .weatherName{margin-top:7px}.graphContainer{display:flex;flex-direction:column;gap:20px;height:100%;justify-content:space-between;width:100%}.graph{height:100px;padding:0 20px;width:100%}.graphContent{flex-direction:column;gap:10px;height:100%;width:100%}.graphContent,.hourWeatherDetails{display:flex;justify-content:space-between}.hourDetails p{font-size:14px;font-weight:500}.hourDetails{font-family:Montserrat,sans-serif}.hourDetails .month{font-size:10px;margin-top:2px}.hourDetails .time{font-size:12px}.graphHandler .nextday{align-items:center;background-color:#f1f1f1;border-radius:10px;cursor:pointer;display:flex;font-size:14px;font-weight:500;justify-content:center;padding:2px 3px 2px 7px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.graphHandler .prevday{padding:2px 7px 2px 3px}.graphHandler .nextday span{font-size:20px;margin-top:2px}.graphHandler{align-items:center;display:flex;justify-content:space-between}.graphHandler p{font-weight:500}.btns{display:flex;gap:10px;-webkit-user-select:none;user-select:none}@media only screen and (max-width:550px){.graphHandler{gap:20px}.graphHandler p{font-size:14px}.graphHandler .nextday{align-items:center;background-color:#f1f1f1;border-radius:10px;display:flex;font-size:10px;justify-content:center;padding:2px 3px 2px 7px}.graphHandler .prevday{padding:2px 7px 2px 3px}.graphHandler .nextday span{margin-top:0}.graph{height:80px;padding:0 12px}.hourWeatherDetails{display:flex;justify-content:space-between;margin:0 -5px}.hourDetails p{font-size:12px;font-weight:500}.hourDetails .month{font-size:9px}.hourDetails .time{font-size:10px}.hourDetails{width:42px}}@media only screen and (min-height:750px){.hourDetails p{font-size:16px}.hourDetails .month{font-size:12px}.hourDetails .time{font-size:14px}.hourDetails{width:60px}.graph{height:130px;padding:0 25px}}
/*# sourceMappingURL=main.4da5f55c.css.map*/