*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*{transition: all .1s ease-in;}

body{
  background: #5085D1;
  border: 10px solid #4471B0;
  height: 100vh;
  padding: 5% 0 10% 0;
  box-sizing: border-box;
}
.wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-sizing: border-box;
    max-width: 800px;
    min-width: 400px;
    margin: auto;
    text-align: left; 
    max-height: 85%;
}
.weather__title{
  color: white;
  margin: 10px 0;
}

   .weather__list{
    text-align: center;
    font-size: 0;
    border: 2px solid white;
    background-color: white;
  
}

  .weather__item{
    display: inline-block;
    box-sizing: border-box;
    color: white;
    list-style-type: none;
    font-size: 20px;
    height: 100px;
    border: 2px solid white;
    margin: 0;
    line-height: 1.2;
    padding:  20px 0;
    }
/* First Row */
    #weather__item1{
      width: 50%;
      background-color: rgb(80, 133, 209);
    }
    #weather__item2{
      width: 25%;
      background-color: rgb(62, 209, 206);
    }
    #weather__item3{
      width: 25%;
      background-color: rgb(156, 68, 155);
    }
    /* Second Row*/
    #weather__item4{
      width: 25%;
      background-color: rgb(191, 50, 63);
    }
    #weather__item5{
      width: 25%;
      background-color: rgb(222, 95, 58);
    }
    #weather__item6{
      width: 25%;
      background-color: rgb(243, 219, 73);
    }
    #weather__item7{
      width: 25%;
      background-color: rgb(144, 220,147);
    }
    /* Third row */
    #weather__item8{
      width: 25%;
      background-color: rgb(103, 155, 153);
    }
    #weather__item9{
      width: 50%;
      background-color: rgb(205, 55, 152);
    }
    #weather__item10{
      width: 25%;
      background-color: rgb(35, 169, 98);
    }
    /* Las row */
    #weather__item11{
      width: 100%;
      background-color: rgb(111, 75, 156);
    }

i.wi {
  margin:  0 10px;
  opacity: 0.7;
}
/* blocks transparency */
ul:hover li{
  opacity: 0.7;
}

li.weather__item:hover {
  opacity: 1;
}