@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
body{
    background: radial-gradient(circle at top,#020617,#0f172a);
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    color:#fff;
}

.weather-app{
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(25px);
    padding:40px;
    border-radius:25px;
    width:350px;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
}

h1{color:#38bdf8;margin-bottom:25px;text-shadow:0 0 15px #38bdf8;}

.search-box{display:flex;flex-direction:column;gap:15px;margin-bottom:25px;}
.search-box input{
    padding:12px 15px;
    border-radius:50px;
    border:none;
    outline:none;
    font-size:1rem;
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.buttons{display:flex;gap:10px;justify-content:center;}

.btn{
    padding:12px 20px;
    border:none;
    border-radius:50px;
    background:linear-gradient(45deg,#38bdf8,#22c55e);
    color:#020617;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
    box-shadow:0 0 15px #38bdf8,0 0 30px #22c55e;
}

.btn:hover{
    transform:scale(1.05);
    box-shadow:0 0 25px #38bdf8,0 0 50px #22c55e;
}

.weather-info h2{margin-bottom:10px;}
.weather-info p{margin-bottom:8px;font-size:1rem;}
.error-msg{color:#f43f5e;margin-top:15px;font-weight:600;}