*{padding:0;margin:0;box-sizing:border-box}html,body{width:100%;height:100vh;background-image:url(https://wallpapers.com/images/hd/chill-4k-mountain-vector-art-b8l8tewqavnq5pbl.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;overflow:hidden;display:flex;justify-content:center;align-items:center}form{width:450px;height:700px;border:1px solid black;border-radius:20px;font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif;box-shadow:#0e1e251f 0 2px 4px,#0e1e2552 0 2px 16px}form .inputdata{width:100%;height:150px;display:flex;justify-content:center;align-items:center}form .inputdata input{font-size:22px;padding:10px;background-color:transparent;outline:none;border-top-left-radius:10px;border-bottom-left-radius:10px;border:1px solid black;border-right:none}form .inputdata button{font-size:22px;padding:10px;background-color:transparent;outline:none;border:1px solid black;border-top-right-radius:10px;border-bottom-right-radius:10px;border-left:none}form .inputdata button:hover{cursor:pointer}form .inputdata .btn{margin-left:30px;cursor:pointer;font-size:25px}form figure{width:100%;display:flex;justify-content:center;align-items:center;gap:10px}form figure figcaption{font-size:30px}form figure img{width:30px}form .weathericon{width:100%;height:330px;display:flex;justify-content:center;align-items:center;flex-direction:column}form .weathericon img{width:250px;filter:drop-shadow(0 20px 50px black)}form .weathericon p{font-size:20px}form .otherdata{width:100%;height:182px;display:flex;padding-left:25px}form .otherdata ul{width:50%;height:100%;list-style-type:none;display:flex;justify-content:space-around;flex-direction:column}form .otherdata ul li{font-size:16px}form .otherdata ul li span{font-size:20px}.error{display:flex;justify-content:center;align-items:center}.light{background-color:#fff}.dark{background-color:#22223b;color:#fff}@media (max-width:480px){form{width:90vw;height:700px;border:1px solid black;border-radius:20px;font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif;box-shadow:#0e1e251f 0 2px 4px,#0e1e2552 0 2px 16px}form .inputdata input{font-size:4vw;padding:10px;background-color:transparent;outline:none;border-top-left-radius:10px;border-bottom-left-radius:10px;border:1px solid black;border-right:none}form .inputdata button{font-size:4vw;padding:10px;background-color:transparent;outline:none;border:1px solid black;border-top-right-radius:10px;border-bottom-right-radius:10px;border-left:none}form .inputdata button:hover{cursor:pointer}form figure figcaption{font-size:7vw}form figure img{width:6vw}form .weathericon img{width:50vw;filter:drop-shadow(0 20px 50px black)}form .weathericon h1{font-size:7vw}form .weathericon p{font-size:6vw}form .otherdata ul li{font-size:3vw}form .otherdata ul li span{font-size:4vw}}
