*{box-sizing:border-box}body{margin:0;font-family:Rubik,sans-serif;background:#111}h1,h3{font-weight:400}.weather-app{background-image:url(/images/clear.jpg);background-position:center;background-size:cover;background-repeat:no-repeat;color:#fff;min-height:100vh;position:relative;transition:.5s;opacity:1}.weather-app:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3);z-index:0}.box{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:space-between;align-items:flex-start;flex-direction:column;padding:3em 2em 4em 3em}.city-time,.temp,.weather{margin:0 1em}.city-time h1{margin-bottom:.2em;font-size:3em}.temp{font-size:8em;margin:0}.weather img{display:block;margin:0}.panel{position:absolute;top:0;right:0;width:40%;height:100%;background:rgba(110,110,110,.25);box-shadow:0 8px 30px #00000080;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);z-index:1;padding:3em 2em;overflow-y:scroll}.panel form{margin-bottom:3em}.submit{top:0;right:0;position:absolute;padding:1.5em;margin:0;border:none;outline:none;background:#000000;color:#fff;cursor:pointer;font-size:1.2em;transition:.4s}.submit:hover{background:#fff!important;color:#000}.search{background:none;border:none;border-bottom:1px #ccc solid;padding:0 1em .5em 0;width:80%;color:#fff;font-size:1.1em}.search:focus{outline:none}.search::placeholder{color:#ccc}.panel ul{padding:0 0 1em;margin:2em 0;border-bottom:1px solid #ccc}.panel ul li{color:#fff;padding:1em}.panel ul li:hover{background:#ecebeb;border-radius:1em;color:#000}.panel ul h4{margin:2em 0}.city{display:block;cursor:pointer}.city:hover{color:#fff}.details li{display:flex;justify-content:space-between;align-items:center}@media screen and (max-width:800px){.panel,.container{position:relative;width:100%;top:initial;margin-top:3em}.main{margin-top:5em}}@media screen and (max-width:500px){html{font-size:12px}.panel{margin-top:200px}}@media screen and (max-width:300px){.weather-app{min-height:40em}}