*{margin:0;padding:0;box-sizing:border-box}body,html{width:100%;height:100%;font-family:Poppins,sans-serif;background-color:#101820}.app{position:relative;width:100%;height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center;color:#fff}.background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden}.bg-media{width:100%;height:100%;object-fit:cover;animation:fadeIn 2s ease-in-out}.weather-card{position:relative;z-index:2;background:#0000008c;height:600px;width:400px;padding:30px 20px;border-radius:20px;text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:popup 1s ease forwards;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 20px #0006}.searchbar{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;gap:10px;width:100%}.searchbar input{padding:12px;border-radius:10px;border:none;width:70%;outline:none;font-size:18px;background:#fff3;color:#fff;box-shadow:0 4px 10px #0003}.searchbar input::placeholder{color:#ffffffb3}.search-icon{width:60px;height:60px;background-color:#fff;border-radius:50%;padding:15px;filter:invert(1);cursor:pointer;transition:transform .2s ease,background .3s ease}.search-icon:hover{transform:scale(1.1);background-color:#f0f0f0}.city{font-size:40px;margin-top:1rem}.latlong{font-size:16px;color:#ddd;margin-bottom:10px;font-style:italic}.temp{font-size:60px;font-weight:700}.condition{font-size:22px;margin-top:.5rem}.description{font-size:16px;margin-bottom:1rem;font-style:italic;color:#ffffffd9}.weather-info{width:100%;display:flex;justify-content:space-around;margin-top:60px;animation:fadeIn .8s ease forwards}.weather-info .col{background:#ffffff1a;padding:15px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:6px;width:100px}.col .icon{width:40px;height:40px}.weather-info .col span{display:block;font-size:15px;color:#ccc}.error{color:#ff6b6b;font-weight:700;font-size:18px;margin-top:1.5rem}.placeholder{margin-top:20px;display:flex;flex-direction:column;align-items:center;animation:fadeIn 1s ease-in}.placeholder-img{width:300px;height:350px;object-fit:cover;padding-bottom:10px}@keyframes fadeIn{0%{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes popup{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.city,.temp,.condition,.description,.weather-info{animation:fadeIn .8s ease forwards}@media (max-width: 480px){.weather-card{width:90%;height:auto;padding:20px}.placeholder-img{width:80%;height:auto}.searchbar input{width:100%}.searchbar{flex-direction:column}.weather-info{flex-direction:column;gap:20px;align-items:center}.weather-info .col{width:80%}}