#top {
  color: #ffffff;
  font-size: 4.4vw;
  font-weight: bold;
  padding-top: 2vw;
  text-align: center;
}

#top button {
  font-size: 3vw;
}

button {
  font-size: 1.5vw;
}

#correctAnswer {
  color: #fbce0d;
  min-height: 12vw;
}
.incorrect {
  background-color: #d32119;
}
.correct {
  background-color: #fbce0d;
}

.city:after {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 1.5vw 1.5vw;
  display: inline-block;
  margin-left: 0.5vw;
  width: 1.5vw;
  height: 1.5vw;
  content: '';
}

.correct .city:after {
  background-image: url(assets/check.png);
}

.incorrect .city:after {
  background-image: url(assets/cross.png);
}

#optionButtons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

#optionButtons button {
  width: 16.66vw;
}

#optionButtons .city {
  font-size: 2.1vw;
}

#map {
  height: 400px;
}

.leaflet-popup-content {
  text-align: center;
}

/* @media only screen and (max-width: 799px) {
  #optionButtons {
    grid-template-columns: repeat(5, 1fr);
  }

  #optionButtons button {
    width: 20vw;
  }
} */

@media only screen and (max-width: 749px) {
  #optionButtons {
    grid-template-columns: repeat(4, 1fr);
  }

  #optionButtons button {
    width: 25vw;
  }

  #optionButtons .city {
    font-size: 2.7vw;
  }

  #optionButtons .state {
    font-size: 2vw;
  }

  .city:after {
    background-size: 2vw 2vw;
    width: 2vw;
    height: 2vw;
  }
}

@media only screen and (max-width: 559px) {
  #optionButtons {
    grid-template-columns: repeat(3, 1fr);
  }

  #optionButtons button {
    width: 33.33vw;
  }

  #optionButtons .city {
    font-size: 3.7vw;
  }

  .city:after {
    background-size: 3vw 3vw;
    width: 3vw;
    height: 3vw;
  }
}

@media only screen and (max-width: 399px) {
  #optionButtons {
    grid-template-columns: repeat(2, 1fr);
  }

  #optionButtons button {
    width: 50vw;
  }

  #optionButtons .city {
    font-size: 5vw;
  }

  #optionButtons .state {
    font-size: 3vw;
  }

  .city:after {
    background-size: 4vw 4vw;
    width: 4vw;
    height: 4vw;
  }
}
