*{margin:0;padding:0;box-sizing:border-box;overflow-x:hidden}body{background-image:linear-gradient(to top,#09203f,#537895);min-height:100vh}.weather-app{max-width:500px;margin:40px auto;padding:2rem;background:linear-gradient(to bottom right,#e0f7fa,#fff);border-radius:16px;box-shadow:0 10px 25px #0000001a;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;transition:all .3s ease;color:#333}.weather-app .input-group{display:flex;justify-content:space-between;gap:12px;margin-bottom:1rem}.weather-app input{flex-grow:1;padding:10px;font-size:16px;border:2px solid #03a9f4;border-radius:6px;outline:none}.weather-app button{padding:10px 16px;background-color:#03a9f4;color:#fff;border:none;border-radius:6px;font-size:16px;cursor:pointer;transition:.3s ease}.weather-app button:hover{background-color:#0288d1}.loading,.error{text-align:center;font-weight:700;margin-top:1rem}.error{color:#e53935}.weather-info{text-align:center;margin-top:2rem}.weather-info h3{font-size:24px;margin-bottom:8px}.weather-info p{font-size:18px;margin:4px 0}.weather-info img{width:80px;height:80px}.forecast{margin-top:1rem}.forecast h4{text-align:center;font-size:20px;margin-bottom:1rem}.forecast-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;justify-items:center;overflow-y:hidden}.forecast-item{background-image:linear-gradient(to right,#74ebd5,#9face6);padding:.75rem;border-radius:10px;text-align:center;width:100%;box-shadow:0 4px 12px #0000000d;font-size:14px;transition:transform .2s ease}.forecast-item:hover{transform:scale(1.05)}.forecast-item img{width:40px;height:40px}.forecast-list>:nth-child(4){grid-column:1 / 2}.forecast-list>:nth-child(5){grid-column:2 / 3}.loader{width:120px;height:22px;border-radius:40px;color:#514b82;border:2px solid;position:relative;overflow:hidden;margin:20px auto}.loader:before{content:"";position:absolute;margin:2px;width:14px;top:0;bottom:0;left:-20px;border-radius:inherit;background:currentColor;box-shadow:-10px 0 12px 3px currentColor;clip-path:polygon(0 5%,100% 0,100% 100%,0 95%,-30px 50%);animation:l14 1s infinite linear}@keyframes l14{to{left:calc(100% + 20px)}}@media (max-width: 500px){.forecast-list{grid-template-columns:repeat(2,1fr)}.weather-app input{width:100%;margin-bottom:10px}.weather-app button{width:100%;margin-left:0}}