*{
  padding: 0px;
  margin: 0px;
}

html, body{
  background-color: grey;
}

a{
  color: black;
  text-decoration: none;
  transition: all 1s ease;
}

a:hover{
  color: darkgreen;
}


/* Left side styles */
.left-side{
  float: left;
  width: 30%;
  padding: 10px;
  margin: 10px;
  background-color: lightgray;
  border-radius: 5px;
  min-height: 90vh;
  
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}

.data{
  text-align: center;
  font-family: 'Nunito', sans-serif;
}

.total{
  font-size: 40px;
  margin-bottom: 10px;
}

.per-sec{
  font-size: 20px;
  margin-bottom: 10px;
}

/* Right side styles */
.right-side{
  float: right;
  padding: 10px;
  margin: 10px;
  background-color: white;
  border-radius: 5px;
  width: 25%;
  min-height: 80vh;
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
}

.building{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
  border-bottom: white solid 1px;
}

.building-data {
  width: 100%;
  font-size: 40px;
  text-align: center;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.building-img{
  width: 50px;
  height: auto;
  justify-self: center;
}