section#map {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-evenly;
}

#map-container {
  width: 80vw;
  height: 54vw;
  position: relative;
  background-image: url(../img/map.png);
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 3/2;
}

#controls {
  width: 15%;
}

.place {
  position: absolute;
  width: 8.5%;
  cursor: pointer;
}
.place:hover {
  transform: translateY(-2%);
}

.place img {
  width: 100%;
}

.place:nth-child(1) {
  left: 32.7%;
  top: 17.7%;
}

.place:nth-child(2) {
  right: 27%;
  top: 28%;
}

.place:nth-child(3) {
  left: 20%;
  bottom: 24%;
}

#player {
  position: absolute;
  width: 8vw;
  height: 12vw;
  pointer-events: none;
  transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
}

#player img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}