*{margin:0;padding:0;box-sizing:border-box}.weather-app{padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;transition:all .3s ease;min-height:100vh}.dark-mode{background-color:#2c2c2c;color:#fff}.light-mode{background-color:#f5f5f5;color:#333}.loading,.error-message{text-align:center;padding:20px;margin:20px 0;border-radius:10px}.loading{background-color:#0000001a}.error-message{background-color:#ff00001a;color:#d32f2f;border:1px solid rgba(255,0,0,.3)}.top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}.dark-mode-toggle{display:flex;align-items:center;gap:10px}.switch{position:relative;display:inline-block;width:50px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#333}input:checked+.slider:before{transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.search-bar{flex-grow:1;position:relative;max-width:500px}.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#888}.search-bar input{width:100%;padding:12px 12px 12px 40px;border-radius:25px;border:none;background-color:#444;color:#fff}.location-button{display:flex;align-items:center;gap:5px;background-color:#4caf50;color:#fff;border:none;padding:10px 20px;border-radius:25px;cursor:pointer;font-weight:700}.content-container{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.city-time-card,.current-weather-card{background-color:#3a3a3a;padding:20px;border-radius:15px}.city-time-card{flex:1;min-width:250px;display:flex;flex-direction:column;justify-content:center}.city{font-size:28px;margin-bottom:10px;text-transform:capitalize}.time{font-size:48px;font-weight:700;margin-bottom:5px}.date{color:#aaa}.current-weather-card{flex:2;min-width:300px;display:flex;flex-wrap:wrap;justify-content:space-between}.temperature-container{flex:1;min-width:120px}.main-temp{font-size:42px;font-weight:700}.feels-like{color:#aaa}.sun-info{flex:1;min-width:120px}.sunrise,.sunset{margin-bottom:10px;color:#aaa;display:flex;align-items:center;gap:5px}.weather-icon-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:120px}.weather-icon{font-size:48px;margin-bottom:10px;color:#ffc107}.weather-description{text-transform:capitalize}.weather-details{width:100%;display:flex;justify-content:space-between;margin-top:20px;flex-wrap:wrap}.detail{text-align:center;min-width:80px}.detail-icon{font-size:24px;margin-bottom:5px}.detail-value{font-weight:700}.detail-label{color:#aaa;font-size:12px}.forecast-container{display:flex;gap:20px;flex-wrap:wrap}.days-forecast,.hourly-forecast{background-color:#3a3a3a;padding:20px;border-radius:15px}.days-forecast{flex:1;min-width:250px}.hourly-forecast{flex:2;min-width:300px}h3{margin-top:0;margin-bottom:15px}.day-forecast{display:flex;align-items:center;margin-bottom:10px}.day-weather-icon{margin-right:15px;min-width:30px;display:flex;align-items:center}.day-temp{margin-right:15px;width:50px}.day-name{color:#aaa}.hourly-forecast-items{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}.hour-forecast{text-align:center;padding:15px 10px;background-color:#444;border-radius:10px;min-width:80px;flex:1}.hour-time{font-weight:700;margin-bottom:10px}.hour-weather-icon{font-size:24px;margin-bottom:10px;color:#ffc107}.hour-temp{margin-bottom:10px}.wind-direction-icon{color:#4f9eff;font-size:24px}.hour-wind-speed{font-size:14px;color:#aaa}.light-mode .city-time-card,.light-mode .current-weather-card,.light-mode .days-forecast,.light-mode .hourly-forecast{background-color:#fff;box-shadow:0 2px 10px #0000001a}.light-mode .search-bar input{background-color:#e9e9e9;color:#333}.light-mode .hour-forecast{background-color:#f0f0f0}.light-mode .sunrise,.light-mode .sunset,.light-mode .day-name,.light-mode .feels-like,.light-mode .detail-label,.light-mode .hour-wind-speed{color:#666}.light-mode .error-message{background-color:#ff00000d}@media (max-width: 768px){.top-bar{flex-direction:column;align-items:flex-start}.search-bar{max-width:100%;width:100%;margin:10px 0}.content-container,.forecast-container{flex-direction:column}.city-time-card,.current-weather-card,.days-forecast,.hourly-forecast{width:100%}.hourly-forecast-items{justify-content:center}}@media (max-width: 500px){.weather-details{flex-direction:column;align-items:center}.detail{margin-bottom:15px}}