.weather-app{min-height:100vh;background-image:url(/assets/images/day/clear.jpg);background-position:center;background-repeat:no-repeat;background-size:cover;color:#fff;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}.container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:space-between;align-items:flex-start;flex-direction:column;padding:2rem 3rem 4rem}.container>div{display:flex;justify-content:center;align-items:center}.brand{color:#fff}.city-time,.temp,.weather{margin:0 1rem}.city-time h1{margin:0;margin-bottom:.2rem;font-size:3rem}.temp{font-size:7rem;margin:0}.weather img{display:block;margin:0 .5rem}.panel{position:absolute;width:40%;height:100%;top:0;right:0;background:rgba(110,110,110,.25);box-shadow:0 8px 32px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1;padding:3rem 2rem;overflow-y:auto}.panel form{margin-bottom:3rem}.submit{position:absolute;top:0;right:0;padding:1.5rem;margin:0;border:0;outline:0;background:#fa6d1b;color:#fff;cursor:pointer;font-size:1.2rem;transition:.4s}.submit:hover{background:#fff!important;color:#000}.search{background:none;border:none;border-bottom:1px #ccc solid;padding:0 2rem .5rem 0;width:90%;color:#fff;font-size:1.1rem}.search:focus{outline:none}.search::placeholder{color:#ccc}.panel ul{padding:0 0 1rem;margin:2rem 0;border-bottom:1px #ccc solid}.panel ul li{color:#ccc;margin:2.5rem 0}.panel ul h4{color:#ccc;margin:3rem 0}.city{display:block;cursor:pointer}.city>.city-name{display:inline-block;transition:transform .2s}.city>.city-name:hover{color:#fff;transform:scale(1.1)}.details li{display:flex;justify-content:space-between;align-items:center}.text-capitalize{text-transform:capitalize}.text-uppercase{text-transform:uppercase}@media only screen and (max-width: 800px){.panel,.container{position:relative;width:100%;top:initial}}@media only screen and (max-width: 500px){html{font-size:12px}}@media only screen and (max-width: 300px){.weather-app{min-height:40rem}}