@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{min-height:100vh;color:#fff}.app{min-height:100vh;display:grid}.weather-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;position:relative;z-index:2;background-size:cover;background-position:center;background-repeat:no-repeat;transition:background-image 1s ease-in-out}.weather-container:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#0000004d;z-index:-1}.weather-container.clear:before{background:linear-gradient(to bottom,#0003,#0006)}.weather-container.cloudy:before{background:linear-gradient(to bottom,#0000004d,#00000080)}.weather-container.rainy:before{background:linear-gradient(to bottom,#0006,#0009)}.weather-container.stormy:before{background:linear-gradient(to bottom,#00000080,#000000b3)}.weather-container.snowy:before{background:linear-gradient(to bottom,#0003,#0006)}.weather-container.misty:before{background:linear-gradient(to bottom,#0000004d,#00000080)}.weather-card{width:100%;max-width:450px;background:#ffffff26;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-radius:24px;padding:30px;box-shadow:0 8px 32px #0003;transition:all .3s ease;overflow:hidden;border:1px solid rgba(255,255,255,.18);z-index:10}.search-container{display:flex;align-items:center;gap:10px;margin-bottom:25px;position:relative}.search-container input{flex:1;height:55px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:0 25px;font-size:16px;color:#fff;outline:none;transition:all .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.search-container input::placeholder{color:#ffffffb3}.search-container input:focus{background:#ffffff26;box-shadow:0 0 15px #ffffff1a}.search-button{width:55px;height:55px;border-radius:50%;background:#ffffff1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.search-button:hover{background:#fff3;transform:scale(1.05)}.search-button img{width:24px;height:24px;filter:brightness(0) invert(1)}.weather-content{display:flex;flex-direction:column;gap:25px}.weather-header{display:flex;align-items:center;justify-content:space-between}.weather-icon{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255,255,255,.4));animation:float 3s ease-in-out infinite}.temperature-container{text-align:right}.temperature{font-size:72px;font-weight:700;color:#fff;line-height:1;margin:0;text-shadow:0 2px 10px rgba(0,0,0,.2)}.feels-like{color:#fffc;font-size:16px;margin-top:5px}.weather-info{text-align:center;padding:15px 0;border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}.location{font-size:28px;font-weight:600;color:#fff;margin-bottom:5px}.weather-description{color:#fffc;font-size:18px;text-transform:capitalize}.weather-details{display:flex;justify-content:space-between;gap:15px}.detail-card{flex:1;display:flex;align-items:center;gap:15px;background:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:15px;transition:all .3s ease;border:1px solid rgba(255,255,255,.1)}.detail-card:hover{background:#ffffff1f;transform:translateY(-3px)}.detail-card img{width:32px;height:32px;filter:brightness(0) invert(1)}.detail-value{font-size:20px;font-weight:600;color:#fff;margin:0}.detail-label{display:block;font-size:14px;color:#ffffffb3}.error-message{color:#ff6b6b;background:#ff6b6b1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:8px;padding:12px;text-align:center;margin-bottom:20px;border:1px solid rgba(255,107,107,.3)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;padding:40px 0}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.1);border-radius:50%;border-top:4px solid #fff;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@media (max-width: 480px){.weather-card{padding:20px}.temperature{font-size:60px}.location{font-size:24px}.weather-icon{width:100px;height:100px}.detail-card{padding:12px}}.footer{position:absolute;bottom:20px;left:50%;transform:translate(-50%);font-size:16px;color:#fff;opacity:.8}