*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{margin:0;min-height:100%;font-size:1rem}#root{height:100vh}.WeatherForm{margin:1rem 0;display:flex;justify-content:center;align-items:center}@media (min-width: 47.99rem){.WeatherForm{margin:2rem 0 1rem}}.WeatherForm input[type=text]{background-color:#ffffff50;height:2.8rem;width:12rem;margin:.5rem 0;padding:0 1rem;font-size:1.2rem;font-family:inherit;text-transform:uppercase;border:none;transition:background-color .6s ease}@media (min-width: 47.99rem){.WeatherForm input[type=text]{height:3.5rem;width:20rem;font-size:1.5rem}}.WeatherForm input[type=text]:required{box-shadow:none}.WeatherForm input[type=text]:invalid{box-shadow:0 0 3px #fff0}.WeatherForm input[type=text]:focus{outline:none;background-color:#ffffffb3}.WeatherForm input[type=text]::placeholder{color:#3b3b3b;opacity:1}.WeatherForm input[type=text]:focus:required:invalid{background-color:#ffffffb3}.WeatherForm input[type=text]:required:valid{background-color:#ffffffb3}.WeatherForm button{height:2.8rem;border:none;padding:0 1rem;font-size:1.1rem;font-family:inherit;text-transform:uppercase;color:#fff;cursor:pointer;font-weight:900;background-size:300% 100%;background-image:linear-gradient(to right,#3e0574,#d84494,#3e0574);transition:.5s}@media (min-width: 47.99rem){.WeatherForm button{height:3.5rem;font-size:1.5rem;padding:0 1.5rem}}.WeatherForm button:hover{background-position:right center}.WeatherTempToggle-btn{display:inline-block;padding:.46875rem;position:relative;font-size:1.2rem;text-align:center;transition:background-image .6s ease,color .6s ease;z-index:0}@media (min-width: 47.99rem){.WeatherTempToggle-btn{font-size:1.6rem}}input[type=radio]{display:none}input[type=radio]+label{cursor:pointer;min-width:3.75rem;color:#1a1a1a;background-color:#ffffff50;transition:background-color .6s ease}input[type=radio]+label:hover{background-color:#ffffffb3}input[type=radio]+label:after{background-size:300% 100%;background-image:linear-gradient(to right,#3e0574,#d84494,#3e0574);content:"";height:100%;position:absolute;top:0;transition:left .2s cubic-bezier(.77,0,.175,1);width:100%;z-index:-1}input[type=radio].WeatherTempToggle-left+label{border-right:0}input[type=radio].WeatherTempToggle-left+label:after{left:100%}input[type=radio].WeatherTempToggle-right+label:after{left:-100%}input[type=radio]:checked+label{cursor:default;color:#fff;z-index:1}input[type=radio]:checked+label:after{left:0}.WeatherInfo{display:flex;flex-direction:column;align-items:center;font-size:1.4rem;margin-top:1.5rem}@media (min-width: 47.99rem){.WeatherInfo{font-size:2rem}}.WeatherInfo i{color:#919191}.WeatherInfo-global{display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center;padding:1rem}.WeatherInfo-weather{display:flex;flex-direction:row;justify-content:space-around;align-items:flex-end;text-align:center;padding:1rem;width:100%}@media (min-width: 47.99rem){.WeatherInfo-weather{width:48rem}}.WeatherInfo-weather h1{font-size:4.5rem}@media (min-width: 47.99rem){.WeatherInfo-weather h1{font-size:6rem}}.WeatherInfo-weather h2{font-size:1.5rem}.WeatherInfo-weather i{font-size:6rem;margin:1rem 0;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}@media (min-width: 47.99rem){.WeatherInfo-weather i{font-size:10rem}}.WeatherInfo-details{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:1rem;text-align:center}.sun{background-image:linear-gradient(217deg,#f00c,#f000 71%),linear-gradient(127deg,#fffb0099,#0f00 71%),linear-gradient(336deg,#ffc400cc,#00f0 71%)}.moon{background-image:linear-gradient(217deg,#0059fdcc,#f000 71%),linear-gradient(336deg,#00fc,#00f0 71%)}.rain-sun{background-image:linear-gradient(200deg,#f00c,#f000 71%),linear-gradient(127deg,#fffb0099,#0f00 71%),linear-gradient(336deg,#00fc,#00f0 71%)}.rain-moon{background-image:linear-gradient(217deg,#0059fdcc,#f000 71%),linear-gradient(336deg,#00fc,#00f0 71%)}.day{background-image:linear-gradient(217deg,#00adfdcc,#f000 71%),linear-gradient(336deg,#00fc,#00f0 71%)}.night{background-image:linear-gradient(217deg,#0059fdcc,#f000 71%),linear-gradient(336deg,#00fc,#00f0 71%)}.bolt-day{background-image:linear-gradient(300deg,#e5e778cc,#f000 71%),linear-gradient(127deg,#0051ff99,#0f00 71%),linear-gradient(336deg,#fbff00cc,#00f0 71%)}.bolt-night{background-image:linear-gradient(300deg,#e7e987cc,#0000 71%),linear-gradient(127deg,#00a2ff99,#0000 71%),linear-gradient(336deg,#fbff00cc,#00f0 71%)}.Loading{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#a5a5a5;animation:fading 4s infinite ease;margin-top:3rem}.Loading i{font-size:10rem;animation:rotating 4s infinite ease}.Loading h3{margin:2rem}@keyframes rotating{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}@keyframes fading{0%{opacity:1}50%{opacity:.3}to{opacity:1}}.ErrorMessage{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#a5a5a5;margin-top:3rem}.ErrorMessage i{font-size:10rem}.ErrorMessage h3{margin:2rem 2rem 0}.MadeBy{position:absolute;top:2vh;margin-right:3rem;width:100%;text-align:end}.MadeBy a{color:#f3f3f3;text-shadow:0px 0px 10px rgba(255,255,255,.5);text-decoration:none;letter-spacing:2px;font-size:1rem;transition:color .3s ease-out}@media (min-width: 47.99rem){.MadeBy a{font-size:1.3rem}}.MadeBy a:hover{color:#26f3fa80}.WeatherApp{min-height:100%;font-family:Montserrat,sans-serif;font-size:1.8rem;font-weight:300}.WeatherApp-header{display:flex;flex-direction:column;justify-content:center;align-items:center;height:24rem;color:#fff;background-image:url(https://picsum.photos/id/1019/1000/400);background-color:#011d29;background-position:50% 0%;background-size:cover;background-repeat:no-repeat;clip-path:polygon(0 0,100% 0,100% 85%,50% 100%,0 85%)}@media (min-width: 47.99rem){.WeatherApp-header{background-image:url(https://picsum.photos/id/1019/1920/400)}}.WeatherApp-header-content{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:#00053099}.WeatherApp-header h1{font-size:3.3rem;text-align:center;margin-top:.5rem;text-shadow:0px 0px 10px rgba(255,255,255,.5)}@media (min-width: 47.99rem){.WeatherApp-header h1{font-size:4.5rem}}.App{text-align:center}