@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";*{margin:0;padding:0;box-sizing:border-box}.container{width:100%;height:100vh;background-color:#60a0ff;display:flex;justify-content:center}@media (min-width: 1200px){.container{width:100%;display:flex;justify-content:center;align-items:center}}.weather-app-container{display:flex;flex-direction:column;align-items:center;padding:2rem;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f4f7f6;border-radius:12px;box-shadow:0 4px 12px #0000001a;width:600px;margin:2rem auto}input[type=text]{padding:1rem;margin-bottom:1.5rem;border:1px solid #ddd;border-radius:8px;font-size:1rem;width:100%;box-sizing:border-box;transition:border-color .3s ease}input[type=text]:focus{outline:none;border-color:#5cb85c}.current-weather{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;margin-bottom:2rem;padding:1.5rem;background-color:#fff;border-radius:10px;box-shadow:0 2px 6px #0000000d}.weather-location{margin-bottom:1rem}.weather-city{font-size:2rem;font-weight:500;color:#333;margin-bottom:.2rem}.weather-state{font-size:1.1rem;color:#777}.temperature{font-size:3rem;font-weight:700;color:#2c3e50;margin-bottom:.5rem}.weather-img{width:80px;height:80px;margin-bottom:1rem}.weather-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:1rem;width:100%}.info-item{display:flex;flex-direction:column;align-items:center;padding:.8rem;background-color:#f9f9f9;border-radius:6px}.info-icon{display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#5cb85c;margin-bottom:.3rem}.info-item p{font-size:.9rem;color:#555}p{font-size:.9rem;color:#666;text-align:center}p a{color:#3498db;text-decoration:none;transition:color .3s ease}p a:hover{color:#1e87f0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}p:first-child{animation:fade-in .5s ease-in-out}@media (max-width: 600px){.weather-app-container{margin:1rem;border-radius:8px;box-shadow:0 2px 8px #00000014}.weather-city{font-size:1.75rem}.temperature{font-size:2.5rem}.weather-img{width:60px;height:60px}.weather-info{grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:.8rem}.info-icon{font-size:1.2rem}.info-item p{font-size:.8rem}}