*{margin:0;padding:0;box-sizing:border-box}.weather-container{min-height:100vh;background:linear-gradient(135deg,#0f172a,#1e293b,#334155);display:flex;justify-content:center;align-items:center;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.weather{background:#0f172ab3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:32px;padding:50px 40px;width:100%;max-width:420px;border:1px solid rgba(148,163,184,.1);box-shadow:0 25px 50px -12px #00000080}.search-box{position:relative;margin-bottom:50px}.search-box input{width:100%;padding:18px 55px 18px 24px;border-radius:16px;border:1px solid rgba(148,163,184,.2);background:#1e293b80;color:#f1f5f9;font-size:16px;outline:none;transition:all .3s ease}.search-box input::placeholder{color:#94a3b8}.search-box input:focus{border:1px solid rgba(56,189,248,.5);background:#1e293bcc}.search-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;cursor:pointer;padding:4px;background:#38bdf833;border-radius:8px;transition:all .3s ease}.search-icon:hover{background:#38bdf84d}.weather-icon{text-align:center;margin-bottom:30px}.weather-icon img{width:140px;height:140px;filter:drop-shadow(0 20px 40px rgba(251,191,36,.3));animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.temperature{text-align:center;margin-bottom:12px}.temperature h1{font-size:72px;font-weight:300;color:#f1f5f9;margin:0;letter-spacing:-2px}.location{text-align:center;margin-bottom:40px}.location h2{font-size:32px;font-weight:400;color:#cbd5e1;margin:0}.weather-details{display:grid;grid-template-columns:1fr 1fr;gap:20px}.detail-box{background:#1e293b80;border-radius:16px;padding:20px;border:1px solid rgba(148,163,184,.1);display:grid;align-content:center;gap:16px;transition:all .3s ease}.detail-box:hover{background:#1e293bb3;transform:translateY(-2px)}.detail-box img{margin-left:30px;width:40px;height:40px;filter:brightness(0) saturate(100%) invert(72%) sepia(51%) saturate(491%) hue-rotate(163deg) brightness(99%) contrast(96%)}.detail-value{margin-left:30px;font-size:24px;font-weight:600;color:#f1f5f9;margin-bottom:4px}.detail-value-wind{font-size:24px;font-weight:600;color:#f1f5f9;margin-bottom:4px}.detail-label{font-size:13px;color:#94a3b8;font-weight:500;margin-left:25px}@media(max-width:480px){.weather{padding:40px 30px}.temperature h1{font-size:60px}.location h2{font-size:28px}.detail-value{font-size:20px}}.temperature button{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem 1rem;background-color:#33415599;color:#cbd5e1;border-radius:9999px;font-size:.875rem;font-weight:500;border:1px solid rgba(71,85,105,.5);box-shadow:0 1px 2px #0000000d;cursor:pointer;transition:all .2s ease}.temperature button:hover{background-color:#334155;color:#fff;border-color:#64748b;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.temperature button:active{transform:scale(.98)}.temperature button:focus{outline:none}