@import"https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Open+Sans&family=Roboto:wght@300;400;500;700&display=swap";@primary : #11998e;@secondary : #38ef7d;@white : #fff;@gray : #9b9b9b;*{box-sizing:border-box}body{background-color:#8ec5fc!important;background-image:radial-gradient(circle farthest-corner at 22.4% 21.7%,rgb(220,220,220) 0%,rgb(11,39,73) 100.2%)!important}.form__group{position:relative;margin-top:10px;width:50%;display:flex;padding:11px;border-radius:40px;border-width:thin;text-align:center;align-items:center;justify-content:center;align-content:center;box-shadow:#0000001a 0 4px 12px}.form__group.small{position:absolute;margin-top:10px;width:50px;display:flex;padding:11px;border-radius:40px;border-width:thin;text-align:center;align-items:center;justify-content:center;align-content:center;box-shadow:#0000001a 0 4px 12px;top:40px;right:130px;fill:#609dbb;background-color:#fff}.form__group.small:hover{cursor:pointer;box-shadow:0 0 8px #a3c3f4}*{font-family:Inter,sans-serif}.header{font-size:2rem;color:#a3a3a3}.main-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;box-sizing:border-box}.main-search-box{width:400px;height:300px;background-color:#417bb9;border-radius:10px;color:#fff;margin:auto;display:flex;flex-direction:column}.main-search-box button{width:100px}.weather-icon{width:115px;height:115px}.current-weather-container{display:flex;flex-direction:column;align-items:center}.forecast-container{width:100%;display:flex;justify-content:space-between}.forecast-days-container,.hourly-container{display:flex;width:100%;justify-content:space-evenly;margin:50px 0;overflow:auto;min-height:140px}.forecast-days-container li,.hourly-container li{display:flex;flex-direction:column;align-items:center;margin:7px}.forecast-selector{width:100%;display:flex;justify-content:space-between}.hour-block{display:flex;flex-direction:column;margin:20px;align-items:center}.hour-block li{list-style:none}#rainfallChart,#windChart,#hourlyRainfallChart,#hourlyWindChart{width:700px;height:500px;margin-top:50px}.search-icon{position:absolute;top:0}.form__field{width:100%;border:0;border-width:thin;outline:0;padding:7px 0;background:transparent;transition:border-color .2s;color:#273051;font-size:1.7rem;margin-left:15px}.form__field::placeholder{color:transparent}.form__field:placeholder-shown~.form__label{font-size:1.3rem;cursor:text;top:25%}.form__group_searched{position:absolute;right:17%;top:25%}.form__group_searched input,.form__group_searched label{display:none}.form__group_renewed{position:relative;width:40%;height:10%;margin:10px;display:flex;padding:11px;border-radius:40px;border-width:thin;text-align:center;align-items:center;justify-content:center;align-content:center;box-shadow:#0000001a 0 4px 12px;background:white}.form__label{position:absolute;top:0;display:block;transition:.2s;font-size:1rem;color:#fff}.form__field:focus{padding-bottom:6px;font-weight:700;border-width:3px;border-image-slice:1}.form__field:focus~.form__label{position:absolute;top:0;display:block;transition:.2s;font-size:1rem;color:primary;font-weight:700}.form__field:required,.form__field:invalid{box-shadow:none}.min-max-temps{width:115px;display:flex;justify-content:space-around;font-size:1.1rem}.min-max-temps span{margin:5px}.min-temp{color:#a8a8e5;font-weight:100}.max-temp{font-weight:600;color:#fff}.current-weather-location{font-size:1.7rem;font-weight:700;color:#fff}.weather-body{padding:100px;border-radius:20px;background-image:linear-gradient(to right,#485367,#0f2743);display:flex;flex-direction:column;align-items:center;color:#fff;height:auto;width:70%;justify-content:space-between;overflow:auto}body{background:#00b4ff;color:#333;font:100% Arial,Sans Serif;height:100vh;margin:0;padding:0;overflow-x:hidden}#background-wrap{bottom:0;left:0;padding-top:50px;position:fixed;right:0;top:0;z-index:-1}@-webkit-keyframes animateCloud{0%{margin-left:-1000px}to{margin-left:100%}}@-moz-keyframes animateCloud{0%{margin-left:-1000px}to{margin-left:100%}}@keyframes animateCloud{0%{margin-left:-1000px}to{margin-left:100%}}.x1{-webkit-animation:animateCloud 60s linear infinite;-moz-animation:animateCloud 60s linear infinite;animation:animateCloud 60s linear infinite;-webkit-transform:scale(.65);-moz-transform:scale(.65);transform:scale(.65)}.x2{-webkit-animation:animateCloud 30s linear infinite;-moz-animation:animateCloud 30s linear infinite;animation:animateCloud 30s linear infinite;-webkit-transform:scale(.3);-moz-transform:scale(.3);transform:scale(.3)}.x3{-webkit-animation:animateCloud 30s linear infinite;-moz-animation:animateCloud 30s linear infinite;animation:animateCloud 30s linear infinite;-webkit-transform:scale(.5);-moz-transform:scale(.5);transform:scale(.5)}.x4{-webkit-animation:animateCloud 18s linear infinite;-moz-animation:animateCloud 18s linear infinite;animation:animateCloud 18s linear infinite;-webkit-transform:scale(.4);-moz-transform:scale(.4);transform:scale(.4)}.x5{-webkit-animation:animateCloud 25s linear infinite;-moz-animation:animateCloud 25s linear infinite;animation:animateCloud 25s linear infinite;-webkit-transform:scale(.55);-moz-transform:scale(.55);transform:scale(.55)}.cloud{background:#fff;background:-moz-linear-gradient(top,#fff 5%,#f1f1f1 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(5%,#fff),color-stop(100%,#f1f1f1));background:-webkit-linear-gradient(top,#fff 5%,#f1f1f1 100%);background:-o-linear-gradient(top,#fff 5%,#f1f1f1 100%);background:-ms-linear-gradient(top,#fff 5%,#f1f1f1 100%);background:linear-gradient(top,#fff 5%,#f1f1f1 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff",endColorstr="#f1f1f1",GradientType=0);-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-box-shadow:0 8px 5px rgba(0,0,0,.1);-moz-box-shadow:0 8px 5px rgba(0,0,0,.1);box-shadow:0 8px 5px #0000001a;height:120px;position:relative;width:350px}.cloud:after,.cloud:before{background:#fff;content:"";position:absolute;z-indeX:-1}.cloud:after{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;height:100px;left:50px;top:-50px;width:100px}.cloud:before{-webkit-border-radius:200px;-moz-border-radius:200px;border-radius:200px;width:180px;height:180px;right:50px;top:-90px}.current-weather-container{width:100%;text-align:center;font-size:1.8rem}.loader-container{display:flex;align-items:center;justify-content:center;height:100vh}.loader{border:8px solid #f3f3f3;border-top:8px solid #3498db;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-device-pixel-ratio: 2){.forecast-days-container,.hourly-container{flex-direction:column;min-height:500px;width:300px}.weather-body{width:100vw}.current-weather-container{width:95vw}.form__group_searched{top:5%;right:5%}.forecast-container{width:90vw;display:flex;justify-content:space-between;flex-direction:column;align-items:center;padding:50px}.chakra-tabs{margin:20px}.forecast-days-container,.hourly-container{font-size:2rem}.form__group{width:90%}.form__group_renewed{width:70%}}