.weather-widget{font-family:'Rubik',sans-serif;max-width:1000px;margin:20px auto;padding:20px;border-radius:35px;box-shadow:0 10px 30px rgb(0 0 0 / .3);position:relative;overflow:hidden;background:linear-gradient(135deg,rgb(255 255 255 / .4),rgb(0 0 0 / .1));animation:fadeIn 1s ease-out;border:3px solid rgb(255 255 255 / .5)}.weather-widget.sunny{background:linear-gradient(135deg,#ffca28,#f57c00);color:#333}.weather-widget.partly-cloudy{background:linear-gradient(135deg,#81d4fa,#0288d1);color:#333}.weather-widget.cloudy{background:linear-gradient(135deg,#90a4ae,#37474f);color:#fff}.weather-widget.rain{background:linear-gradient(135deg,#4fc3f7,#01579b);color:#fff}.weather-widget.snow{background:linear-gradient(135deg,#e1f5fe,#64b5f6);color:#333}.weather-widget.thunderstorm{background:linear-gradient(135deg,#546e7a,#1c2526);color:#fff}.weather-widget.fog{background:linear-gradient(135deg,#b0bec5,#607d8b);color:#333}.weather-widget.unknown{background:linear-gradient(135deg,#e0e0e0,#9e9e9e);color:#333}.weather-widget::before{content:'';position:absolute;top:-40%;left:-40%;width:180%;height:180%;background:radial-gradient(circle,rgb(255 255 255 / .6),transparent);opacity:.25;z-index:0;animation:shimmer 6s infinite alternate}.weather-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;position:relative;z-index:1}.weather-city{font-size:22px;font-weight:500;text-transform:capitalize}.weather-date{font-size:16px;opacity:.9}.weather-container{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}.weather-current{display:flex;align-items:center;padding:10px;background:rgb(255 255 255 / .25);border-radius:20px;max-width:200px;transition:transform 0.4s ease,box-shadow 0.4s ease}.weather-current:hover{transform:scale(1.05);box-shadow:0 5px 15px rgb(0 0 0 / .4)}.weather-icon img{width:50px;height:50px;margin-right:10px;filter:drop-shadow(0 4px 8px rgb(0 0 0 / .5));animation:float 3s infinite ease-in-out}.weather-info{display:flex;flex-direction:column;align-items:flex-start}.weather-temp{font-size:32px;font-weight:500;margin-bottom:5px;animation:tempPulse 2s infinite}.weather-range{font-size:16px;opacity:.9;margin-bottom:5px;background:rgb(0 0 0 / .3);padding:2px 8px;border-radius:10px}.weather-desc{font-size:14px;opacity:.9}.weather-forecast{display:flex;flex:1;justify-content:space-around}.forecast-day{display:flex;flex-direction:column;align-items:center;padding:8px;background:rgb(255 255 255 / .2);border-radius:15px;transition:all 0.4s ease;margin:0 5px}.forecast-day:hover{transform:translateY(-8px);background:rgb(255 255 255 / .4);box-shadow:0 5px 15px rgb(0 0 0 / .3)}.forecast-day img{width:35px;height:35px;margin-bottom:5px;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .5));animation:bounce 2s infinite}.day-name{font-size:12px;font-weight:400;margin-bottom:5px}.day-temp{font-size:12px;font-weight:500;white-space:nowrap}@media (max-width:768px){.weather-widget{max-width:100%;padding:15px;border-radius:25px}.weather-header{flex-direction:column;align-items:flex-start;margin-bottom:10px}.weather-city{font-size:18px}.weather-date{font-size:14px}.weather-container{flex-direction:column;align-items:flex-start}.weather-current{max-width:100%;margin-bottom:15px;padding:8px}.weather-icon img{width:40px;height:40px;margin-right:8px}.weather-temp{font-size:28px}.weather-range{font-size:14px;padding:2px 6px}.weather-desc{font-size:12px}.weather-forecast{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;width:100%;-webkit-overflow-scrolling:touch}.forecast-day{flex:0 0 auto;padding:6px;margin:0 3px}.forecast-day img{width:30px;height:30px}.day-name{font-size:10px}.day-temp{font-size:10px}}@media (max-width:480px){.weather-widget{padding:10px;border-radius:20px}.weather-city{font-size:16px}.weather-date{font-size:12px}.weather-current{padding:6px}.weather-icon img{width:35px;height:35px}.weather-temp{font-size:24px}.weather-range{font-size:12px}.weather-desc{font-size:11px}.forecast-day{padding:5px}.forecast-day img{width:25px;height:25px}}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{opacity:.25;transform:scale(1)}100%{opacity:.4;transform:scale(1.15)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes tempPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}60%{transform:translateY(-3px)}}