body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}body{background-color:#222841;color:#fff;font-family:Calibri;height:100vh;margin:0;padding:0}*{box-sizing:border-box}main .cardSec{align-items:center;display:flex;height:100vh;justify-content:center}main .cardSec .allContent{border-radius:8px;display:flex;flex-direction:row;gap:20px;max-width:1000px;overflow:hidden;transition:all .5s linear;width:100%}main .cardSec .allContent .top{align-items:center;background-color:#131522;border-radius:8px;box-shadow:9px 7px 40px -6px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:20px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:25px 20px;position:relative;width:100%}main .cardSec .allContent .top .searchCity{width:100%}main .cardSec .allContent .top .searchCity .labelSearchBar{align-items:center;border:1px solid #2a2e4b;border-radius:7px;display:flex;flex-direction:row;font-size:1.2em;gap:20px;width:100%}main .cardSec .allContent .top .searchCity .labelSearchBar .searchBtn{align-items:center;background-color:#183153;border:none;border-radius:7px;color:#fff;cursor:pointer;display:flex;font-size:1.2em;height:59px;justify-content:center;outline:none;width:60px}main .cardSec .allContent .top .searchCity .labelSearchBar .searchBar{background:transparent;border:none;color:#8caede;font-size:1.3em;font-weight:100;outline:none;padding:15px 10px;width:100%}main .cardSec .allContent .top .searchCity .labelSearchBar .searchBar::-webkit-input-placeholder{color:#24487b}main .cardSec .allContent .top .searchCity .labelSearchBar .searchBar::placeholder{color:#24487b}main .cardSec .allContent .top .weatherInfo{align-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:8px;color:#8caede;display:flex;flex-direction:column;font-weight:100;gap:20px;padding:15px;position:relative;z-index:10;z-index:100}main .cardSec .allContent .top .weatherInfo .cityImg{border-radius:8px;opacity:1;width:100%}main .cardSec .allContent .top .weatherInfo i{color:#24487b}main .cardSec .allContent .top .weatherInfo .cityContent{font-size:5em;text-transform:capitalize}main .cardSec .allContent .top .weatherInfo .temperature-wind-drop{align-items:center;display:flex;flex-direction:row;gap:20px}main .cardSec .allContent .top .weatherInfo .temperature-wind-drop .temperature{font-size:6em}main .cardSec .allContent .top .weatherInfo .temperature-wind-drop .temperature:after{content:"°"}main .cardSec .allContent .top .weatherInfo .temperature-wind-drop .wind-drop{display:flex;flex-direction:column;gap:20px}main .cardSec .allContent .top .weatherInfo .temperature-wind-drop .wind-drop .wind{font-size:1.5em}main .cardSec .allContent .top .weatherInfo .temperature-wind-drop .wind-drop .wind:after{content:"m/h";margin-left:3px}main .cardSec .allContent .top .weatherInfo .temperature-wind-drop .wind-drop .droplet{font-size:1.5em}main .cardSec .allContent .top .weatherInfo .temperature-wind-drop .wind-drop .droplet:after{content:"%";margin-left:3px}main .cardSec .allContent .top .weatherAnimation{height:100%;height:calc(100% - 250px);position:relative;width:100%}main .cardSec .allContent .top .weatherAnimation .forecast{background:transparent;display:flex;height:400px;justify-content:center;position:relative;width:100%}main .cardSec .allContent .top .weatherAnimation .forecast__cloudy__cloud,main .cardSec .allContent .top .weatherAnimation .forecast__fog__cloud,main .cardSec .allContent .top .weatherAnimation .forecast__rainy__cloud,main .cardSec .allContent .top .weatherAnimation .forecast__snow__cloud{border:1px solid #7ccafa;border-bottom-left-radius:10%;border-bottom-right-radius:10%;border-top-left-radius:50%;border-top-right-radius:50%;height:200px;width:250px}main .cardSec .allContent .top .weatherAnimation .forecast__cloudy__cloud:after,main .cardSec .allContent .top .weatherAnimation .forecast__fog__cloud:after,main .cardSec .allContent .top .weatherAnimation .forecast__rainy__cloud:after,main .cardSec .allContent .top .weatherAnimation .forecast__snow__cloud:after{border-left:1px solid #7ccafa;border-radius:50%;border-top:1px solid #7ccafa;content:"";display:block;height:150px;left:-50px;position:absolute;top:50px;width:150px}main .cardSec .allContent .top .weatherAnimation .forecast__cloudy__cloud:before,main .cardSec .allContent .top .weatherAnimation .forecast__fog__cloud:before,main .cardSec .allContent .top .weatherAnimation .forecast__rainy__cloud:before,main .cardSec .allContent .top .weatherAnimation .forecast__snow__cloud:before{border-radius:50%;border-right:1px solid #7ccafa;border-top:1px solid #7ccafa;content:"";display:block;height:100px;position:absolute;right:-40px;top:100px;width:100px}main .cardSec .allContent .top .weatherAnimation .forecast__rainy,main .cardSec .allContent .top .weatherAnimation .forecast__snow{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;position:relative}main .cardSec .allContent .top .weatherAnimation .forecast__cloudy__moon{color:#ffc82d;font-size:10em;margin-left:10px}main .cardSec .allContent .top .weatherAnimation .fog .forecast__fog__cloud{background:linear-gradient(180deg,#eceff2,#cbd0d6);border:0;margin-left:15px}main .cardSec .allContent .top .weatherAnimation .fog .forecast__fog__cloud:after{background:linear-gradient(180deg,#eceff2,#cbd0d6);border-left:1px solid #eceff2;border-top:1px solid #eceff2}main .cardSec .allContent .top .weatherAnimation .fog .forecast__fog__cloud:before{background:linear-gradient(180deg,#eceff2,#cbd0d6);border-right:1px solid #eceff2;border-top:1px solid #eceff2}main .cardSec .allContent .top .weatherAnimation .fog .inner:before{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:fogAnimationBefore;animation-name:fogAnimationBefore;top:70%}main .cardSec .allContent .top .weatherAnimation .fog .inner:after,main .cardSec .allContent .top .weatherAnimation .fog .inner:before{-webkit-animation-duration:6s;animation-duration:6s;color:#fff;content:"⌇";font-size:10em;left:45%;position:absolute;-webkit-transform:translate(-50%) rotate(-90deg);transform:translate(-50%) rotate(-90deg)}main .cardSec .allContent .top .weatherAnimation .fog .inner:after{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:fogAnimationAfter;animation-name:fogAnimationAfter;top:90%}main .cardSec .allContent .top .weatherAnimation .rain .forecast__rainy__cloud--grey{background:linear-gradient(180deg,#7f868d,#466d98);border:0}main .cardSec .allContent .top .weatherAnimation .rain .forecast__rainy__cloud--grey:after{background:linear-gradient(180deg,#7f868d,#466d98);border-left:1px solid #7f868d;border-top:1px solid #7f868d}main .cardSec .allContent .top .weatherAnimation .rain .forecast__rainy__cloud--grey:before{background:linear-gradient(180deg,#7f868d,#466d98);border-right:1px solid #7f868d;border-top:1px solid #7f868d}main .cardSec .allContent .top .weatherAnimation .rain .forecast__rainy__rain{background:#689edb;border-radius:50% 50% 40% 40%;bottom:-100px;height:32px;position:absolute;width:15px;z-index:1}main .cardSec .allContent .top .weatherAnimation .rain .forecast__rainy__rain--one{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:raining;animation-name:raining;left:0}main .cardSec .allContent .top .weatherAnimation .rain .forecast__rainy__rain--two{-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:raining;animation-name:raining;left:30px}main .cardSec .allContent .top .weatherAnimation .rain .forecast__rainy__rain--three{-webkit-animation-delay:.7s;animation-delay:.7s;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:raining;animation-name:raining;left:60px}main .cardSec .allContent .top .weatherAnimation .rain .forecast__rainy__rain--four{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:raining;animation-name:raining;left:120px}main .cardSec .allContent .top .weatherAnimation .rain .forecast__rainy__rain--five{-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:raining;animation-name:raining;left:160px}main .cardSec .allContent .top .weatherAnimation .rain .forecast__rainy__rain--six{-webkit-animation-delay:.8s;animation-delay:.8s;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:raining;animation-name:raining;left:200px}main .cardSec .allContent .top .weatherAnimation .rain .forecast__rainy__rain--seven{-webkit-animation-delay:.1s;animation-delay:.1s;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:raining;animation-name:raining;left:230px}main .cardSec .allContent .top .weatherAnimation .snow .forecast__snow__cloud--grey{background:linear-gradient(180deg,#eceff2,#cbd0d6);border:0;margin-left:15px}main .cardSec .allContent .top .weatherAnimation .snow .forecast__snow__cloud--grey:after{background:linear-gradient(180deg,#eceff2,#cbd0d6);border-left:1px solid #eceff2;border-top:1px solid #eceff2}main .cardSec .allContent .top .weatherAnimation .snow .forecast__snow__cloud--grey:before{background:linear-gradient(180deg,#eceff2,#cbd0d6);border-right:1px solid #eceff2;border-top:1px solid #eceff2}main .cardSec .allContent .top .weatherAnimation .snow .forecast__snow__snow{position:absolute;z-index:1}main .cardSec .allContent .top .weatherAnimation .snow .forecast__snow__snow--first{-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:snowing;animation-name:snowing;left:0}main .cardSec .allContent .top .weatherAnimation .snow .forecast__snow__snow--second{-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:snowing;animation-name:snowing;left:30px}main .cardSec .allContent .top .weatherAnimation .snow .forecast__snow__snow--third{-webkit-animation-delay:.2s;animation-delay:.2s;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:snowing;animation-name:snowing;left:60px}main .cardSec .allContent .top .weatherAnimation .snow .forecast__snow__snow--fourth{-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:snowing;animation-name:snowing;left:120px}main .cardSec .allContent .top .weatherAnimation .snow .forecast__snow__snow--five{-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:snowing;animation-name:snowing;left:180px}main .cardSec .allContent .top .weatherAnimation .snow .forecast__snow__snow--six{-webkit-animation-delay:.2s;animation-delay:.2s;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:snowing;animation-name:snowing;left:200px}main .cardSec .allContent .top .weatherAnimation .snow .forecast__snow__snow--seven{-webkit-animation-delay:.6s;animation-delay:.6s;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:snowing;animation-name:snowing;left:240px}main .cardSec .allContent .top .weatherAnimation .clear .forecast__cloudy__sun{position:relative}main .cardSec .allContent .top .weatherAnimation .clear .forecast__cloudy__sun:before{-webkit-animation-duration:2.6s;animation-duration:2.6s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:fadeIn;animation-name:fadeIn;background:#fdf6c6;border:1px solid #faeb7c;border-radius:50%;content:"";display:block;height:250px;width:250px}main .cardSec .allContent .top .weatherAnimation .clear .forecast__cloudy__sun:after{background:#faeb7c;border:1px solid #f5d76a;border-radius:50%;content:"";display:block;height:180px;left:35px;position:absolute;top:35px;width:180px}main .cardSec .allContent .top .weatherAnimation .cloudy .forecast__cloudy__sun{background:#faeb7c;border:1px solid #f5d76a;border-radius:50%;height:180px;margin-left:10px;width:180px}main .cardSec .allContent .top .weatherAnimation .cloudy .forecast__cloudy__cloud{background:#fff;border:1px solid #7ccafa;bottom:50%;height:150px;position:absolute;width:150px}main .cardSec .allContent .top .weatherAnimation .cloudy .forecast__cloudy__cloud:after{background:#fff;border-left:1px solid #7ccafa;border-radius:50%;border-top:1px solid #7ccafa;content:"";display:block;height:120px;position:absolute;top:30px;width:120px}main .cardSec .allContent .top .weatherAnimation .cloudy .forecast__cloudy__cloud:before{background-color:#fff;border-radius:50%;border-right:1px solid #7ccafa;border-top:1px solid #7ccafa;content:"";display:block;height:100px;position:absolute;top:50px;width:100px}main .cardSec .allContent .top .weatherAnimation .cloudy .forecast__cloudy__cloud--normal{-webkit-animation-duration:6s;animation-duration:6s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:moveRight;animation-name:moveRight}main .cardSec .allContent .top .weatherAnimation .cloudy .forecast__cloudy__cloud--small{-webkit-animation-duration:8s;animation-duration:8s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:moveLeft;animation-name:moveLeft;left:50px;margin-top:-20px;-webkit-transform:scale(.5);transform:scale(.5)}main .cardSec .allContent .top .weatherAnimation .storm .bowie{-webkit-animation:lightning 3s linear 1s infinite;animation:lightning 3s linear 1s infinite;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-color:#daa520 transparent transparent #daa520;border-style:solid;border-width:52px 16px 8px 25px;opacity:0;position:absolute;top:200px;-webkit-transform:skewX(-18deg) translateZ(0);transform:skewX(-18deg) translateZ(0);z-index:100}main .cardSec .allContent .top .weatherAnimation .storm .bowie:before{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-bottom:60px solid transparent;border-left:28px solid #daa520;content:"";display:block;left:-8px;position:absolute;top:-12px;-webkit-transform:skewY(-16deg) rotate(6deg) translateZ(0);transform:skewY(-16deg) rotate(6deg) translateZ(0)}main .cardSec .allContent .top .weatherAnimation .storm .forecast__cloudy__cloud{-webkit-animation:thunder 3s linear 1s infinite!important;animation:thunder 3s linear 1s infinite!important;background-color:#fff;border:none;bottom:50%;height:200px;left:50%;position:absolute;-webkit-transform:translate(-50%);transform:translate(-50%);width:250px}main .cardSec .allContent .top .weatherAnimation .storm .forecast__cloudy__cloud:after{height:150px;top:50px;width:150px}main .cardSec .allContent .top .weatherAnimation .storm .forecast__cloudy__cloud:after,main .cardSec .allContent .top .weatherAnimation .storm .forecast__cloudy__cloud:before{-webkit-animation:thunder 3s linear 1s infinite!important;animation:thunder 3s linear 1s infinite!important;background-color:#fff;border:none;border-radius:50%;content:"";display:block;position:absolute}main .cardSec .allContent .top .weatherAnimation .storm .forecast__cloudy__cloud:before{height:120px;top:80px;width:120px}main .cardSec .allContent .top .futureWeather{background-color:#131522;border-radius:8px;display:flex;flex-direction:row;gap:10px;height:250px;padding:10px;width:100%}main .cardSec .allContent .top .futureWeather .futureWeatherdays{align-items:center;background-color:#0d0e17;border-radius:8px;color:#8caede;display:flex;flex-direction:column;flex-grow:1;gap:10px;height:100%;justify-content:center;justify-content:space-evenly;width:33%}main .cardSec .allContent .top .futureWeather i{color:#24487b}main .cardSec .allContent .top .futureWeather .day{font-size:1.7em}main .cardSec .allContent .top .futureWeather .futureWeatherinfo{display:flex;flex-direction:row;font-size:1.7em;gap:40px}main .cardSec .allContent .top .futureWeather .futureWeatherBox{display:flex;font-size:4.5em;justify-content:center;width:100%}@-webkit-keyframes thunder{0%{background-color:#fff}1%{background-color:#333}2%{background-color:#fff}5%{background-color:#fff}6%{background-color:#333}12%{background-color:#fff}}@keyframes thunder{0%{background-color:#fff}1%{background-color:#333}2%{background-color:#fff}5%{background-color:#fff}6%{background-color:#333}12%{background-color:#fff}}@-webkit-keyframes lightning{0%{opacity:0}1%{opacity:1}5%{opacity:0}6%{opacity:1}16%{opacity:0}}@keyframes lightning{0%{opacity:0}1%{opacity:1}5%{opacity:0}6%{opacity:1}16%{opacity:0}}@-webkit-keyframes raining{0%{top:200px}40%{top:390px}60%{margin-left:20px;top:370px}70%{opacity:.6}80%{opacity:.3}to{margin-left:20px;opacity:0;top:500px}}@keyframes raining{0%{top:200px}40%{top:390px}60%{margin-left:20px;top:370px}70%{opacity:.6}80%{opacity:.3}to{margin-left:20px;opacity:0;top:500px}}@-webkit-keyframes snowing{0%{top:200px}70%{opacity:.6}80%{opacity:.3}to{margin-left:20px;opacity:0;top:500px}}@keyframes snowing{0%{top:200px}70%{opacity:.6}80%{opacity:.3}to{margin-left:20px;opacity:0;top:500px}}@-webkit-keyframes fadeIn{0%{opacity:.4}50%{opacity:0}to{opacity:.4}}@keyframes fadeIn{0%{opacity:.4}50%{opacity:0}to{opacity:.4}}@-webkit-keyframes moveRight{0%{left:60px}50%{left:60%}to{left:60px}}@keyframes moveRight{0%{left:60px}50%{left:60%}to{left:60px}}@-webkit-keyframes moveLeft{0%{left:-100px}50%{left:-10px}to{left:-100px}}@keyframes moveLeft{0%{left:-100px}50%{left:-10px}to{left:-100px}}@-webkit-keyframes fogAnimationBefore{0%{left:45%}50%{left:55%}to{left:45%}}@keyframes fogAnimationBefore{0%{left:45%}50%{left:55%}to{left:45%}}@-webkit-keyframes fogAnimationAfter{0%{left:55%}50%{left:45%}to{left:55%}}@keyframes fogAnimationAfter{0%{left:55%}50%{left:45%}to{left:55%}}@media(max-height:1190px){main{-webkit-transform:scale(.78);transform:scale(.78)}}@media(max-height:880px){main{-webkit-transform:scale(.68)!important;transform:scale(.68)!important}}@media(max-height:750px){main{-webkit-transform:scale(.58)!important;transform:scale(.58)!important}}@media(max-height:610px){main{-webkit-transform:scale(.5)!important;transform:scale(.5)!important}}@media(max-width:600px){main{justify-content:start!important;-webkit-transform:scale(1)!important;transform:scale(1)!important}main,main .cardSec{height:100vh!important;width:100vw!important}main .cardSec{align-items:start!important;height:-webkit-fit-content!important;height:-moz-fit-content!important;height:fit-content!important}main .cardSec .allContent{max-height:100vh;max-width:none;width:100vw!important}main .cardSec .allContent .top{font-size:8px;gap:10px!important;height:-webkit-fit-content!important;height:-moz-fit-content!important;height:fit-content!important;height:100vh!important;width:100vw!important}main .cardSec .allContent .top .middle{margin-top:-40px;-webkit-transform:scale(.7);transform:scale(.7)}main .cardSec .allContent .top .middle .forecast__cloudy__moon{color:#ffc82d;font-size:20em!important;margin-left:10px}main .cardSec .allContent .top .weatherInfo{margin-top:-40px}main .cardSec .allContent .top .weatherInfo .temperature-wind-drop .wind-drop{font-size:1.3em;gap:10px}main .cardSec .allContent .top .futureWeather{flex-direction:column!important}main .cardSec .allContent .top .futureWeather .futureWeatherdays{flex-direction:row!important;padding:10px 15px!important;width:100%}}
/*# sourceMappingURL=main.6f6b7a2f.css.map*/