.weather-widget{border:1px solid #ccc;border-radius:10px;padding:20px;max-width:600px;margin:0 auto;background-color:#f9f9f9}.current-weather{text-align:center;margin-bottom:20px;position:relative;overflow:hidden;background-size:cover;background-position:center;color:#fff;width:calc(100% - 40px);margin-right:auto;margin-left:auto;border-radius:10px;padding:10px}.current-weather h2{margin-top:0;font-size:2rem}.current-weather img{width:80px;height:80px;margin-bottom:5px}.current-weather .current-temperature{font-size:3rem;margin-bottom:0}.current-weather .current-description{font-size:1.5rem;margin-bottom:5px}.current-weather .weather-info{display:flex;justify-content:space-around;margin-top:5px}.current-weather .weather-info .info-item{display:flex;flex-direction:column;align-items:center}.current-weather .weather-info .info-item p{font-size:1rem}.current-weather .forecast-item{display:flex;flex-direction:column;align-items:center}.forecast-days{display:flex;overflow-x:auto;border:1px solid #ccc;transition:200ms ease;border-radius:10px;padding:10px;background:linear-gradient(135deg,#85d8ff,#0077ff)}.weather-item{width:120px;flex:0 0 auto;padding:10px;border-right:1px solid #ccc;text-align:center;color:#fff}.weather-item:last-child{border-right:none}.weather-item img{width:50px;height:50px;margin-bottom:10px}.weather-item p{margin:0}.future-day{background-color:#1f567c}@media only screen and (max-width:600px){.forecast-days{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}.current-weather .weather-info .info-item p{font-size:.5rem}}.weather-item{width:120px;flex:0 0 auto;padding:10px;border-right:1px solid #ccc;text-align:center;color:#fff}.weather-item:last-child{border-right:none}}