*{box-sizing:border-box;margin:0;padding:0}body{color:#e8f4f8;background:linear-gradient(135deg,#0f0f23 0%,#1a1a2e 30%,#16213e 60%,#0f3460 100%);min-height:100vh;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-weight:400;line-height:1.6;overflow-x:hidden}.app-container{flex-direction:column;align-items:center;max-width:500px;margin:0 auto;display:flex}body:before{content:"";pointer-events:none;z-index:-1;background-image:radial-gradient(2px 2px at 20px 30px,#fff5,0,#0000 50%),radial-gradient(2px 2px at 40px 70px,#fffc,0,#0000 50%),radial-gradient(1px 1px at 90px 40px,#fff,0,#0000 50%),radial-gradient(1px 1px at 130px 80px,#fff9,0,#0000 50%);background-repeat:repeat;background-size:200px 100px;width:100%;height:100%;animation:20s linear infinite float;position:fixed;top:0;left:0}@keyframes float{0%{transform:translateY(0)rotate(0)}to{transform:translateY(-100px)rotate(360deg)}}.wheatherForm{align-items:center;gap:12px;width:100%;margin-bottom:40px;display:flex}.inputDisplay{color:#e8f4f8;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#1a1a2ecc;border:2px solid #7877c666;border-radius:50px;outline:none;flex:1;padding:18px 24px;font-size:1rem;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 32px #0006,inset 0 1px #ffffff1a}.inputDisplay:focus{background:#1a1a2ef2;border-color:#74b9ff;transform:translateY(-2px);box-shadow:0 12px 40px #74b9ff4d,0 0 0 4px #74b9ff1a,inset 0 1px #fff3}button[type=submit]{cursor:pointer;color:#fff;background:linear-gradient(135deg,#74b9ff,#0984e3);border:none;border-radius:50px;padding:18px 28px;font-size:1rem;font-weight:600;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 8px 32px #74b9ff66,0 4px 12px #0000004d,inset 0 1px #fff3}button[type=submit]:hover{transform:translateY(-4px);box-shadow:0 16px 48px #74b9ff80,0 8px 24px #0006}button[type=submit]:active{transform:translateY(-2px)}.card{-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);text-align:center;background:#0f0f23d9;border:1px solid #7877c64d;border-radius:32px;width:100%;padding:48px 36px;transition:all .5s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 32px 80px #00000080,0 16px 40px #0000004d,0 8px 20px #0003,inset 0 1px #ffffff1a}.card:before{content:"";background:linear-gradient(90deg,#0000,#74b9ff80,#0000);height:1px;position:absolute;top:0;left:0;right:0}.card:hover{transform:translateY(-12px)scale(1.02);box-shadow:0 48px 120px #0009,0 24px 60px #0006,0 12px 30px #74b9ff33}.cityDisplay,.tempDisplay{color:#fff;text-shadow:0 4px 16px #00000080,0 2px 8px #74b9ff4d;letter-spacing:-1px;margin:24px 0;font-size:3.8rem;font-weight:800}.emojiDisplay{filter:drop-shadow(0 4px 12px #00000080);margin:28px 0;font-size:5rem}.humidityDisplay,.stateDisplay{color:#a4b0be;text-shadow:0 1px 4px #00000080;margin:12px 0;font-size:1.4rem;font-weight:500}.wind-info{border-top:1px solid #7877c633;margin-top:24px;padding-top:24px}.errorDisplay{color:#ff7675;text-shadow:0 2px 8px #ff767566;font-size:1.6rem;font-weight:600}@media (min-width:600px){.wheatherForm{gap:16px}.inputDisplay{font-size:1.1rem}}@media (min-width:1024px){.card{max-width:520px;padding:60px 48px}.cityDisplay,.tempDisplay{font-size:4.8rem}.emojiDisplay{font-size:6rem}}.welcome-message{text-align:center;opacity:.9;padding:60px 20px}.welcome-title{color:#fff;text-shadow:0 4px 16px #00000080,0 2px 8px #74b9ff4d;letter-spacing:-1px;margin:0 0 16px;font-size:3.2rem;font-weight:800}.welcome-subtitle{color:#a4b0be;text-shadow:0 1px 4px #00000080;max-width:300px;margin:0 auto;font-size:1.3rem;font-weight:400}@media (min-width:600px){.welcome-title{font-size:3.8rem}.welcome-subtitle{font-size:1.4rem}}@media (min-width:1024px){.welcome-title{font-size:4.5rem}}