*{margin:0;padding:0;box-sizing:border-box}body{font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;color:#2c3e50;padding:1rem}.container{max-width:100%;margin:0 auto;padding:1.5rem}.app-tittle{text-align:center;color:#fff;font-size:2rem;margin-bottom:2rem;text-shadow:2px 2px 4px rgb(0,0,0,.2)}.search-form{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.search-input{padding:1rem;font-size:1rem;border:none;border-radius:12px;outline:none;transition:all .3s ease}.search-input::placeholder{color:#95a5a6;opacity:1}.search-input:focus{box-shadow:0 6px 12px #00000026;transform:translateY(-2px);outline:5px solid #3498db}.search-button{padding:1rem;font-size:1rem;font-weight:700;color:#fff;background:#3498db;border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #0003}.search-button:hover:not(:disabled){background:#2980b9;transform:translateY(-2px);box-shadow:0 6px 12px #0003}.search-button:disabled{opacity:.05;cursor:not-allowed}.search-button:disabled:after{content:"";display:inline-block;width:14px;height:14px;margin-left:8px;border:2px solid white;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.weather-card{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000001a;text-align:center;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.weather-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px #00000026;transition:all .3s ease}.weather-city{font-size:1.8rem;margin-bottom:1rem;color:#2c3e50}.weather-icon{width:120px;height:120px;margin:0 auto;display:block}.weather-temp{font-size:3rem;font-weight:700;color:#3498db;margin:1rem 0}.weather-details{display:flex;justify-content:space-around;flex-wrap:wrap;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #ecf0f1;gap:1rem}.detail-item{display:flex;flex-direction:column;gap:.5rem;min-width:120px}.detail-item span{font-size:.9rem;color:#7f8c8d}.detail-item strong{font-size:1.2rem;color:#2c3e50}.error-message{background:#e74c3c;color:#fff;padding:1px;border-radius:12px;text-align:center;margin-bottom:1rem;animation:shake .5s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.error-message p{margin:0;font-weight:700}.loading{text-align:center;color:#fff;font-size:1.2rem;padding:2rem}@media screen and (min-width:768px){.container{max-width:600px;padding:2rem}.app-tittle{font-size:2.5rem}.search-form{flex-direction:row}.search-input{flex:1}.search-button{width:auto;padding:1rem 2rem}.weather-details{gap:2rem}}@media screen and (min-width:1024px){.container{max-width:700px}.app-tittle{font-size:3rem}.weather-card{padding:3rem}.weather-city{font-size:2.2rem}.weather-temp{font-size:3.5rem}.weather-icon{width:140px;height:140px}}