*{margin:0;padding:0;box-sizing:border-box}h1{color:#000}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#fff}#weather{background-image:url(../img/sunny.e45bdf39.webp);background-size:cover;background-position:bottom;min-height:100vh;transition:1s}#weather.cloudyimg{background-image:url(../img/cloudy.d98ee0ee.webp)}#weather.rainyimg{background-image:url(../img/rain.3f678414.webp)}#weather.graybgc{background-color:grey}.rainorsunny{background-color:transparent;margin-top:210px}.rainorsunny,input{font-size:20px;font-weight:900}input{margin:50px 0 0 0;height:40px;border-width:0;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 0 0;background-color:hsla(0,0%,100%,.25);color:#fff;transition:1s}input:focus{box-shadow:10px 10px 10px rgba(52,2,146,.5);border-radius:10px;background-color:rgba(227,230,233,.25);color:#fff}.temp{display:inline-block;width:292px;position:absolute;padding:25px 25px;background-color:hsla(0,0%,100%,.25);margin-left:-144px;font-size:100px;font-weight:900;box-shadow:12px 12px rgba(0,0,0,.25);text-shadow:3px 6px rgba(0,0,0,.25)}#firstdelimeter{font-size:7px;border-radius:50%}#seconddelimeter{font-size:20px;border-radius:50%}.section{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:17px auto auto auto}li{list-style-type:none}a{font-weight:900;font-size:20px;color:#fff;position:relative}.section li a:after{content:"";position:absolute;left:0;top:2px;width:100%;height:100%;background:grey;border-left:1px solid red;-webkit-animation:typing 3.6s steps(30) forwards;animation:typing 3.6s steps(30) forwards;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-delay:.5s;animation-delay:.5s}@-webkit-keyframes typing{to{left:103%;width:0}}@keyframes typing{to{left:103%;width:0}}button{margin:0 0 0 20px;background:hsla(0,0%,50.2%,.568);width:80px;height:40px;color:#fff;font-weight:900}