@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap);*{margin:0;padding:0;box-sizing:border-box}body,button,input,textarea{font:400 14px Lato,sans-serif;-webkit-font-smoothing:antialised}button{cursor:pointer}img{max-width:100%}#sunny{background-color:#f3c683;color:#fff}#cloudy,#partlyCloudy{background-color:#b6c3c9;color:#fff}#clear{background-color:#91c9c8;color:#fff}#misty{background-color:azure;color:#333}#rainy{background-color:#718fab;color:#fff}#snowy{background-color:snow;color:#333}#undefined{background-color:#ccc}#mainContainer{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;background-color:#f7f7f7;transition:background-color .4s}#mainContainer.no{background-color:#070b34}#mainContainer.yes{background-color:#80b1c6}.mainTitle{font-size:18px;margin-bottom:20px;text-align:center;font-weight:400}.container{width:450px;background-color:#fff}.container,.weatherInfo{padding:20px;border-radius:8px}.weatherInfo{margin-top:20px;text-align:center;height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 10px rgba(0,0,0,.2)}.weatherInfo svg{width:20px;margin-top:12px;margin-bottom:12px;height:20px}.weatherDescription{font-size:16px;margin-bottom:8px}.cityName,.dayTime{text-transform:uppercase;font-size:10px}.dayTime{margin-top:12px}.weatherTemperature{font-size:50px;margin-top:8px;font-weight:300}form{display:flex;align-items:stretch;justify-content:space-between}input{box-shadow:0 0 5px rgba(0,0,0,.1);width:calc(100% - 115px)}button,input{padding:8px;border-radius:8px;border:0}button{outline:0;background-color:#333;color:#fff;font-size:11px;text-transform:uppercase}.loaderContainer{text-align:center}.loader{color:#333;font-size:90px;text-indent:-9999em;overflow:hidden;width:1em;height:1em;border-radius:50%;margin:72px auto;position:relative;transform:translateZ(0);-webkit-animation:load6 1.7s ease infinite,round 1.7s ease infinite;animation:load6 1.7s ease infinite,round 1.7s ease infinite}@-webkit-keyframes load6{0%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}5%,95%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}10%,59%{box-shadow:0 -.83em 0 -.4em,-.087em -.825em 0 -.42em,-.173em -.812em 0 -.44em,-.256em -.789em 0 -.46em,-.297em -.775em 0 -.477em}20%{box-shadow:0 -.83em 0 -.4em,-.338em -.758em 0 -.42em,-.555em -.617em 0 -.44em,-.671em -.488em 0 -.46em,-.749em -.34em 0 -.477em}38%{box-shadow:0 -.83em 0 -.4em,-.377em -.74em 0 -.42em,-.645em -.522em 0 -.44em,-.775em -.297em 0 -.46em,-.82em -.09em 0 -.477em}to{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}}@keyframes load6{0%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}5%,95%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}10%,59%{box-shadow:0 -.83em 0 -.4em,-.087em -.825em 0 -.42em,-.173em -.812em 0 -.44em,-.256em -.789em 0 -.46em,-.297em -.775em 0 -.477em}20%{box-shadow:0 -.83em 0 -.4em,-.338em -.758em 0 -.42em,-.555em -.617em 0 -.44em,-.671em -.488em 0 -.46em,-.749em -.34em 0 -.477em}38%{box-shadow:0 -.83em 0 -.4em,-.377em -.74em 0 -.42em,-.645em -.522em 0 -.44em,-.775em -.297em 0 -.46em,-.82em -.09em 0 -.477em}to{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}}@-webkit-keyframes round{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes round{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
/*# sourceMappingURL=main.f7b45d32.chunk.css.map */