*{color:#fff;margin:0;padding:0;box-sizing:border-box}body{font-family:montserrat,sans-serif}#app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;background-color:#000;background-size:cover;background-repeat:no-repeat;background-position:top;transition:.4s;position:relative}#app.bgc-0{background-image:url(/vue-weather-cartoons/img/bgc-0.f9aacfb8.jpg)}#app.bgc-1{background-image:url(/vue-weather-cartoons/img/bgc-1.532b403b.jpg)}#app.bgc-2{background-image:url(/vue-weather-cartoons/img/bgc-2.c4c59d55.jpg)}#app.bgc-3{background-image:url(/vue-weather-cartoons/img/bgc-3.d0258947.jpg)}#app.bgc-4{background-image:url(/vue-weather-cartoons/img/bgc-4.2e17daeb.jpg)}main{min-height:100vh;padding:25px;background-image:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.75))}.search-box{width:100%;margin-bottom:30px}.search-box .search-bar{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;box-shadow:0 0 8px rgba(0,0,0,.25);background-color:hsla(0,0%,100%,.5);border-radius:0 16px 0 16px;transition:.4s}.search-box .search-bar::-moz-placeholder{color:#f5f5f5;opacity:1}.search-box .search-bar::placeholder{color:#f5f5f5;opacity:1}.search-box .search-bar:focus{box-shadow:0 0 16px hsla(0,0%,100%,.25);background-color:hsla(0,0%,100%,.75);border-radius:16px 0 16px 0}.weather-wrap{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;padding:25px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content;max-height:-webkit-max-content;max-height:-moz-max-content;max-height:max-content;text-shadow:3px 6px rgba(0,0,0,.25);background-color:hsla(0,0%,100%,.25);border-radius:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:3px 6px rgba(0,0,0,.25)}.location-box .location{color:#fff;font-size:32px;font-weight:500;text-align:center;text-shadow:1px 3px rgba(0,0,0,.25)}.location-box .date{color:#fff;font-size:20px;font-weight:300;font-style:italic;text-align:center}.weather-box{text-align:center}.temp{margin:25px 0}.weather-box .temp{display:inline-block;padding:10px 25px;font-size:64px;font-weight:900;background-color:hsla(0,0%,100%,.25);border-radius:16px;margin:30px 0;box-shadow:3px 6px rgba(0,0,0,.25)}.weather-box .temp,.weather-box .weather{color:#fff;text-shadow:3px 6px rgba(0,0,0,.25)}.weather-box .weather{font-size:32px;font-weight:700;font-style:italic}.cartoon{color:#fff;font-size:50px;font-weight:500;text-align:center;text-shadow:1px 3px rgba(0,0,0,.25);margin:25px 0;text-transform:uppercase;background:linear-gradient(90deg,#fff 0,pink);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}