*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}body{font-family:montserrat,sans-serif}#app{background-image:url(../img/app.2e22d896.png);background-position:50%;-webkit-transition:.4s;transition:.4s}#app,#app.warm{background-size:cover}#app.warm{background-image:url(../img/warm.b3357d35.svg)}#app.cold{background-image:url(../img/snow.ee7418ad.svg)}#app.cold,#app.error{background-size:cover}#app.error{background-image:url(../img/error.77325724.svg)}main{min-height:100vh;padding:25px;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.2)),to(rgba(0,0,0,.35)));background-image:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.35))}.searchbox{width:100%;margin-bottom:30px}.searchbox .searchbar{display:block;width:100%;padding:15px;color:#313131;font-size:20px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;background:none;-webkit-box-shadow:0 0 8px rgba(0,0,0,.25);box-shadow:0 0 8px rgba(0,0,0,.25);background-color:hsla(0,0%,100%,.5);border-radius:0 16px 0 16px;-webkit-transition:.4s;transition:.4s}.searchbox .searchbar:focus{-webkit-box-shadow:0 0 16px rgba(0,0,0,.25);box-shadow:0 0 16px rgba(0,0,0,.25);background-color:hsla(0,0%,100%,.75);border-radius:16px 0 16px 0}.locationbox .location{color:#fff;font-size:32px;font-weight:500;text-align:center;text-shadow:1px 3px rgba(0,0,0,.25)}.locationbox .date{color:#fff;font-size:20px;font-weight:300;text-align:center;font-style:italic}.errorbox,.weatherbox{text-align:center}.weatherbox .temp,.weatherbox .wind{display:inline-block;padding:10px 25px;color:#fff;font-size:102px;font-weight:900;text-shadow:3px 6px rgba(0,0,0,.25);background-color:rgba(107,99,255,.568);border-radius:16px;margin:30px 0;-webkit-box-shadow:3px 6px rgba(0,0,0,.25);box-shadow:3px 6px rgba(0,0,0,.25)}p{text-align:center;color:#fff;font-size:40px;font-style:italic}.errorbox .error{padding:10px 25px;color:#e74b4b;font-size:60px;font-weight:900;background-color:hsla(0,0%,100%,.25);border-radius:16px;margin:30px 0;-webkit-box-shadow:3px 6px rgba(0,0,0,.25);box-shadow:3px 6px rgba(0,0,0,.25)}.weatherbox .weather{color:#fff;font-size:48px;font-weight:700;font-style:italic;text-shadow:3px 6px rgba(0,0,0,.25)}@media only screen and (max-width:600px){.weatherbox .temp,.weatherbox .wind{font-size:60px;font-weight:900}p{text-align:center;color:#fff;font-size:30px;font-style:italic}}