.card{max-width:400px;margin:10px auto;padding:20px;border-radius:20px;background:linear-gradient(135deg,#00feba,#5b548a);color:#fff;text-align:center;box-sizing:border-box}.card h1{height:50px}.search{display:flex;align-items:center;gap:10px;margin-top:15px}.search input{flex:1;min-width:0;padding:10px;border:1px solid #ccc;border-radius:30px;outline:none}.search input:focus-visible{outline:2px solid #6c63ff;outline-offset:2px}@media (max-width: 576px){.card{margin:20px}.search{margin-top:30px}}.search button{flex-shrink:0;inline-size:44px;block-size:44px;display:inline-grid;place-items:center;padding:0;border-radius:50%;border:none;background:#fff;cursor:pointer}.search button:focus-visible{outline:2px solid #6c63ff;outline-offset:2px}.search button img{width:20px}.weather-icon{width:170px;margin-top:30px}.weather h2{font-size:80px;font-weight:500}.weather h3{font-size:45px;font-weight:400;margin-top:-10px}.details{display:flex;align-items:center;justify-content:space-between;padding:0 20px;margin-top:50px}.col{display:flex;align-items:center;text-align:left}.col img{width:40px;margin-right:10px}.humidity,.wind{font-size:28px;margin-top:-6px}.weather{display:none}.error{text-align:left;margin-left:10px;font-size:14px;margin-top:10px;display:none}