body{background:linear-gradient(90deg,#74ebd5,#acb6e5);justify-content:center;align-items:center;height:100vh;font-family:Arial,sans-serif;display:flex}.container{text-align:center;background:#fff;border-radius:10px;width:500px;height:300px;padding:10px}input{width:150px;margin-right:15px;padding:8px}button{cursor:pointer;padding:8px 12px}.weather-card{margin-top:-6px}.error{color:red;margin-top:10px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,Helvetica,sans-serif}.app{justify-content:center;align-items:center;width:100vw;height:100vh;transition:background .6s;display:flex;position:relative;overflow:hidden}.clear{background:linear-gradient(#f8b500,#fceabb)}.clouds{background:linear-gradient(#2c3e50,#bdc3c7)}.rain{background:linear-gradient(#283e51,#4b79a1)}.snow{background:linear-gradient(#274046,#e6dada)}.default{background:linear-gradient(90deg,#667eea,#764ba2)}.weather-box{z-index:10;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);text-align:center;color:#fff;background:#fff3;border-radius:25px;width:400px;max-width:90%;padding:40px;position:relative;box-shadow:0 20px 40px #0000004d}.weather-box h1{margin-bottom:20px}.search{gap:10px;margin-bottom:20px;display:flex}input{border:none;border-radius:12px;flex:1;padding:12px}button{cursor:pointer;color:#fff;background:#000;border:none;border-radius:12px;padding:12px 18px;transition:all .3s}button:hover{background:#333}.weather-card img{width:120px;margin:10px 0}.weather-card p{margin:6px 0;font-size:18px}.error{color:red;margin-bottom:10px}.clear:before{content:"";opacity:.5;background:radial-gradient(circle,#ff0,orange);border-radius:50%;width:250px;height:250px;animation:4s infinite pulse;position:absolute;top:80px;right:150px}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.clouds:before{content:"☁ ☁ ☁ ☁ ☁ ☁ ☁";white-space:nowrap;opacity:.25;font-size:80px;animation:60s linear infinite moveClouds;position:absolute;top:20%}@keyframes moveClouds{0%{transform:translate(-100%)}to{transform:translate(100%)}}.rain:before{content:"";background-image:repeating-linear-gradient(#0000,#0000 2px,#ffffff4d 3px 4px);animation:.4s linear infinite rainMove;position:absolute;inset:0}@keyframes rainMove{0%{background-position:0 0}to{background-position:0 30px}}.snow-container{pointer-events:none;z-index:1;position:absolute;inset:0}.snowflake{background:#fff;border-radius:50%;width:8px;height:8px;animation:linear infinite fall;position:absolute;top:-10px}@keyframes fall{0%{transform:translateY(0)translate(0)}to{transform:translateY(100vh)translate(20px)}}@media (width<=600px){.weather-box{width:90%;padding:25px}.weather-card p{font-size:16px}.clear:before{width:150px;height:150px;top:50px;right:20px}.clouds:before{font-size:50px}}