/* weather info window */
.weatherInfo {
 display: none;
 position: fixed;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
 width: 95%;
 max-width: 500px;
 border: 2px solid red;
 background-color: cadetblue;
 border-radius: 10px;
 -webkit-box-shadow: 0 0 4px 4px black;
         box-shadow: 0 0 4px 4px black;
}

/* active class for weatherInfo */
.weatherInfo.active {
 display: block;
}

.weatherInfo__title {
 margin: 5px;
 padding-top: 10px;
 font-size: 1.2rem;
 text-align: center;
}

.weather__info-p {
 padding: 10px;
 word-spacing: 4px;
}

.weather__info-p span {
 font-weight: 800;
}

.weather__closeBtn {
 display: block;
 margin: 10px auto;
 width: 180px;
 height: 50px;
 border-radius: 5px;
 background-color: rgb(69, 255, 69);
 cursor: pointer;
}

.icon {
 position: absolute;
 width: 10px;
 height: 100px;
}

.iconWeather {
 top: 50%;
 right: 35%;
}

.iconTemperature {
 top: 20%;
 right: 30%;
}

.icon img {
 height: 100%;
}

@media(min-width:540px) {
 .weather__info-p {
  padding-left: 40px;
 }
}