@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Plus Jakarta Sans,sans-serif}.app{display:grid;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.weather{place-self:center;padding:2.5rem 2rem;border-radius:1.5rem;background:#ffffff26;-webkit-backdrop-filter:blur(.75rem);backdrop-filter:blur(.75rem);border:1px solid rgba(255,255,255,.2);box-shadow:0 .75rem 2.5rem #1f268759;display:flex;flex-direction:column;align-items:center;max-width:25rem;width:100%;transition:all .3s ease-in-out}.search-bar{width:100%;display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1.25rem}.search-bar input{flex:1;padding:.875rem 1.25rem;border-radius:2rem;border:none;outline:none;background:#fffc;-webkit-backdrop-filter:blur(.625rem);backdrop-filter:blur(.625rem);color:#222;font-size:1rem;box-shadow:0 .25rem 1.25rem #00000014;transition:all .2s ease-in-out}.search-bar input:focus{background:#fff}.search-bar input::placeholder{color:#666}.search-bar img{width:3rem;padding:.75rem;border-radius:50%;background:#fffc;cursor:pointer;transition:background .2s ease}.search-bar img:hover{background:#fff}.weather-info{margin-top:.5rem;text-align:center;animation:fadeIn .6s ease-in}.weather-icon{width:8.75rem;margin:2rem 0 .625rem;filter:drop-shadow(0 .25rem .5rem rgba(0,0,0,.2))}.temperature{font-size:4.5rem;font-weight:600;color:#fff;margin:0;line-height:1}.location{font-size:2rem;color:#eee;margin-top:.3125rem;letter-spacing:.03rem}.weather-data{width:100%;margin-top:2.5rem;color:#fff;display:flex;justify-content:space-between;padding:0 .625rem;gap:1.25rem}.weather-data .col{display:flex;align-items:center;gap:.75rem;font-size:1.125rem;flex:1}.weather-data .col p{font-size:1rem;margin:0}.weather-data .col span{font-size:.875rem;color:#ccc}.weather-data .col img{width:1.75rem;margin-top:.3125rem}@keyframes fadeIn{0%{transform:translateY(1.25rem);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 30rem){.weather{padding:2rem 1.5rem;max-width:90vw}.search-bar{flex-direction:row;align-items:center;justify-content:center;gap:.5rem}.search-bar input{flex:1;max-width:75%;font-size:.9rem;padding:.6rem .9rem}.search-bar img{width:2.3rem;padding:.5rem}.temperature{font-size:3.5rem}.location{font-size:1.5rem}.weather-data{flex-direction:column;align-items:center;gap:1rem;padding:0 1rem}.weather-data .col{justify-content:center;text-align:center}}