@import"https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&family=Playfair+Display:wght@600&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Nunito,sans-serif;min-height:100vh;overflow-x:hidden}.page-background{min-height:100vh;background:linear-gradient(145deg,#d4f5c0,#a8e6cf 25%,#81d4f7 60%,#f9f871);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px}.title-container{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center}.app-title{font-family:Playfair Display,serif;font-size:2.8rem;font-weight:700;color:#1a5c3a;letter-spacing:.02em;line-height:1;text-shadow:0 2px 12px rgba(45,106,79,.15)}.app-slogan{font-family:Nunito,sans-serif;font-size:.88rem;font-weight:600;color:#48b0d5;letter-spacing:.12em;text-transform:uppercase;margin-top:6px}.container{width:100%;display:flex;justify-content:center;align-items:center}.weather-card{background:#ffffff8c;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1.5px solid rgba(255,255,255,.75);border-radius:24px;padding:28px;width:100%;max-width:340px;text-align:center;box-shadow:0 12px 40px #64c88233,0 3px 12px #00000014}.card-header{margin-bottom:16px}.date-text{font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#5a9e72;margin-bottom:4px}.city-name{font-family:Playfair Display,serif;font-size:1.65rem;font-weight:600;color:#2d6a4f;letter-spacing:.01em}.weather-image-wrapper{display:flex;justify-content:center;align-items:center;margin:6px 0 14px}.weather-image{width:100px;height:100px;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(80,180,120,.25))}.weather-info{margin-bottom:22px}.temperature{font-family:Playfair Display,serif;font-size:3.2rem;font-weight:600;color:#1a5c3a;line-height:1;margin-bottom:6px;letter-spacing:-.02em}.condition{font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#48b0d5}.search-form{width:100%}.input-wrapper{display:flex;gap:8px;width:100%}.city-input{flex:1;min-width:0;padding:9px 13px;border-radius:10px;border:1.5px solid rgba(129,212,247,.6);background:#ffffffa6;color:#2d6a4f;font-family:Nunito,sans-serif;font-size:.82rem;outline:none;transition:border-color .2s ease,background .2s ease}.city-input::placeholder{color:#9ecfb0}.city-input:focus{border-color:#48b0d5;background:#ffffffd9}.search-btn{padding:9px 16px;border-radius:10px;border:none;background:linear-gradient(135deg,#52c97a,#38b2ac);color:#fff;font-family:Nunito,sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;transition:opacity .2s ease,transform .15s ease;white-space:nowrap;letter-spacing:.03em;flex-shrink:0}.search-btn:hover{opacity:.9;transform:translateY(-1px)}.search-btn:active{transform:translateY(0)}@media(min-width:1200px){.weather-card{max-width:360px;padding:32px}.temperature{font-size:3.6rem}.city-name{font-size:1.8rem}.app-title{font-size:3.2rem}}@media(max-width:768px){.weather-card{padding:24px 22px;max-width:310px}.city-name{font-size:1.45rem}.temperature{font-size:2.8rem}.weather-image{width:88px;height:88px}.app-title{font-size:2.5rem}}@media(max-width:480px){.page-background{justify-content:flex-start;align-items:center;padding:40px 16px 20px;gap:14px}.title-container{text-align:center;align-items:center}.app-title{font-size:2.2rem}.app-slogan{font-size:.78rem;letter-spacing:.09em}.weather-card{padding:22px 18px;border-radius:20px;max-width:100%;width:100%}.city-name{font-size:1.3rem}.temperature{font-size:2.5rem}.weather-image{width:78px;height:78px}.date-text{font-size:.65rem}.condition{font-size:.7rem}.city-input,.search-btn{font-size:.78rem;padding:8px 12px}}@media(max-width:400px){.page-background{padding:32px 12px 16px}.app-title{font-size:2rem}.app-slogan{font-size:.75rem}.weather-card{padding:20px 16px;border-radius:18px}.city-name{font-size:1.2rem}.temperature{font-size:2.3rem}.weather-image{width:72px;height:72px}.weather-info{margin-bottom:18px}.card-header{margin-bottom:12px}.city-input{font-size:.75rem;padding:7px 10px}.search-btn{font-size:.75rem;padding:7px 12px}}@media(max-width:360px){.page-background{padding:28px 10px 14px}.app-title{font-size:1.9rem}.app-slogan{font-size:.72rem;letter-spacing:.07em}.weather-card{padding:18px 14px;border-radius:16px}.city-name{font-size:1.1rem}.temperature{font-size:2.1rem}.weather-image{width:65px;height:65px}.date-text{font-size:.6rem;letter-spacing:.1em}.condition{font-size:.65rem;letter-spacing:.12em}.input-wrapper{gap:6px}.city-input{font-size:.72rem;padding:7px 9px}.search-btn{font-size:.72rem;padding:7px 10px}}@media(max-width:320px){.page-background{padding:22px 10px 12px}.app-title{font-size:1.7rem}.app-slogan{font-size:.68rem}.weather-card{padding:16px 12px;border-radius:14px}.city-name{font-size:1rem}.temperature{font-size:1.9rem}.weather-image{width:58px;height:58px}.city-input{font-size:.7rem;padding:6px 8px}.search-btn{font-size:.7rem;padding:6px 9px}}