* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #ff9400;
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}

canvas {
  position: absolute;
  z-index: -1;
}

h1, h2, p {
  color: #FFF;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  text-align: center;
}

#city {
  color: #FFF;
  font-size: 8vw;
  padding-top: 8vh;
}

#date {
  color: #FFF;
}

#temp {
  font-size: 8vw;
  margin-top: 12vh;
  margin-left: 6vw;
}

.temp p {
  font-size: 4vw;
}

.info {
  display: flex;
  flex-direction: row;
  font-size: 3vw;
  font-weight: 0;
  width: 100%;
  margin-top: 12vh;
}

.info p {
  font-weight: 0;
  width: 33vw;
}

.stat {
  font-size: 2vw;
}

@media screen and (max-width: 800px) {
  #city {
    font-size: 14vw;
  }

  #date {
    font-size: 6vw;
  }

  #temp {
    font-size: 18vw;
  }

  .temp p {
    font-size: 12vw;
  }

  .info {
    font-size: 6vw;
  }

  .stat {
    font-size: 5vw;
  }
}