*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}#app,body,html{height:100%;background:linear-gradient(to bottom right,#57c1eb,#246fa8);color:#fff}.app{display:flex;flex-direction:column;min-height:100vh}.header{text-align:center;padding:20px;background-color:hsla(0,0%,100%,.1);backdrop-filter:blur(5px)}.title{font-size:2rem;margin-bottom:10px}.search-box{display:flex;justify-content:center;gap:10px}.search-box input{width:200px;outline:none}.search-box button,.search-box input{padding:10px 14px;border:none;border-radius:6px}.search-box button{background-color:#fff;color:#246fa8;cursor:pointer;font-weight:700;transition:.3s}.search-box button:hover{background-color:#e0e0e0}.main{flex:1;display:flex;justify-content:center;align-items:center;padding:20px}.weather-card{text-align:center;background-color:hsla(0,0%,100%,.15);padding:30px;border-radius:16px;backdrop-filter:blur(10px);box-shadow:0 8px 20px rgba(0,0,0,.2);width:300px;transition:transform .3s ease}.weather-card:hover{transform:translateY(-5px)}.temp-section{display:flex;flex-direction:column;align-items:center}.temp-section img{width:100px;height:100px}.temp-section h1{font-size:3rem;margin-top:-10px}.condition{font-size:1.4rem;font-weight:600;margin:10px 0}.placeholder{text-align:center;font-size:1.2rem;opacity:.8}.footer{text-align:center;padding:10px;background-color:hsla(0,0%,100%,.1)}.footer a{color:#fff;text-decoration:underline}