.weather-block{
  text-align: center;
  padding: 20px;
  color: #333;
}

.weather-block svg{
  fill: #333;
}

.weather-block.dark{
  color: #fff;
}

.weather-block.dark svg{
  fill: #fff;
}

.w-icon svg{
  display: inline-block;
  width: 32px;
  margin: 0 auto;
}

.w-te-h-td-1{ background: linear-gradient(180deg, #a445c7 10%, #fb4085 90%); }
.w-te-h-td-2{ background: linear-gradient(180deg, #9f57bb 10%, #f596ac 90%); }
.w-te-h-td-3{ background: linear-gradient(180deg, #d75158 10%, #fed442 90%); }
.w-te-h-td-4{ background: linear-gradient(180deg, #f94826 10%, #ffb93d 90%); }
.w-te-h-td-5{ background: linear-gradient(180deg, #e84522 10%, #fd983c 90%); }
.w-te-h-td-6{ background: linear-gradient(180deg, #dc464f 10%, #f96e43 90%); }
.w-te-h-td-7{ background: linear-gradient(180deg, #c64677 10%, #e56451 90%); }
.w-te-h-td-8{ background: linear-gradient(180deg, #543873 10%, #b74f6a 90%); }
.w-te-h-td-9{ background: linear-gradient(180deg, #100e33 10%, #68249b 90%); }

.w-te-m-td-1{ background: linear-gradient(180deg, #f04c30 10%, #f09932 90%); }
.w-te-m-td-2{ background: linear-gradient(180deg, #a858bb 10%, #ee5e7f 90%); }
.w-te-m-td-3{ background: linear-gradient(180deg, #7176d4 10%, #b78fc1 90%); }
.w-te-m-td-4{ background: linear-gradient(180deg, #1ca3f5 10%, #1bcff2 90%); }
.w-te-m-td-5{ background: linear-gradient(180deg, #1e9dee 10%, #15c2ed 90%); }
.w-te-m-td-6{ background: linear-gradient(180deg, #417cca 10%, #1897da 90%); }
.w-te-m-td-7{ background: linear-gradient(180deg, #5c5ba1 10%, #1d71c9 90%); }
.w-te-m-td-8{ background: linear-gradient(180deg, #4e3876 10%, #214cb5 90%); }
.w-te-m-td-9{ background: linear-gradient(180deg, #130e37 10%, #222aa7 90%); }

.w-te-l-td-1{ background: linear-gradient(180deg, #eeecf1 10%, #d58cf5 90%); }
.w-te-l-td-2{ background: linear-gradient(180deg, #86cfef 10%, #bcb0fa 90%); }
.w-te-l-td-3{ background: linear-gradient(180deg, #8ccfe9 10%, #a2c2fb 90%); }
.w-te-l-td-4{ background: linear-gradient(180deg, #9acade 10%, #e3e9f7 90%); }
.w-te-l-td-5{ background: linear-gradient(180deg, #8fb2d2 10%, #e2e9f3 90%); }
.w-te-l-td-6{ background: linear-gradient(180deg, #697bb9 10%, #c5d5ee 90%); }
.w-te-l-td-7{ background: linear-gradient(180deg, #49469d 10%, #a8c4e9 90%); }
.w-te-l-td-8{ background: linear-gradient(180deg, #252377 10%, #89b1e2 90%); }
.w-te-l-td-9{ background: linear-gradient(180deg, #11103a 10%, #72a3de 90%); }

.w-forecast{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 4px;
}

.w-forecast-day{
  background-color: rgba(255,255,255,0.1);
  margin: 0px;
  padding: 0px;
  border-radius: 4px;
  width: calc(100% / 6);
  transition: all .2s ease;
}

.w-forecast-day:hover{
  transform: scale(1.1);
  transition: all .2s ease;
}

.w-forecast-day-dow{
  font-weight: bold;
  font-size: 80%;
  text-transform: uppercase;
  background-color: rgba(255,255,255,0.1);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.w-forecast-day-icon{
  margin-top: 4px;

}

.w-forecast-day-icon svg{
  width: 32px;
  margin: 0 auto;
}

.w-forecast-day-max{
  font-size: 75%;
}

.w-forecast-day-min{
  font-size: 75%;
}

.w-misc{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: stretch;
  gap: 4px;
  margin-bottom: 1em;
}

.w-misc-item{
  width: 25%;
  transition: all .2s ease;
  background-color: rgba(255,255,255,0.1);
  border-radius: 4px;
  padding-bottom: 4px; 
}

.w-misc-item:hover{
  transform: scale(1.1);
  transition: all .2s ease;
}

.w-misc-item-data{
  font-size: 90%;
  vertical-align: middle;
  display: inline-block; 
  line-height: 110%; 
}

.w-misc-item-data span{
  width: 100%;
  font-size: 70%;
  margin-top: 0px;
  display: block;
  line-height: 100%;
  text-overflow: ellipsis;
}

.w-misc-item-label{
  font-weight: bold;
  font-size: 110%;
  height: 30px;
  line-height: 30px;
  margin-bottom: 4px;
}

.w-misc-item-label svg{
  vertical-align: middle;
  display: inline-block;
}

.w-current-weather-icon{
  margin-bottom: -10px;
}

.w-current-weather-icon svg{
  width: 150px;
}

.w-current-temp{
  font-size: 50px;
  line-height: 60px;
  vertical-align: middle;
  position: relative;
  display: inline-block;
}

.w-current-temp svg{
  height: 60px;
  width: 60px;
}

.w-current-temp-text{
  letter-spacing: 2px;
  font-weight: bolder;
}

.w-current-temp-unit{
  position: absolute;
  display: inline-block;
  top: 0;
  right: -50px;
}

.w-current-weather-text{
  font-weight: 100;
  letter-spacing: 2px;
  margin-bottom: 1em;
  opacity: 0.8;
}