#map-container {
  background: url('/assets/map/map-background.png');
  background-size: 40vw auto;
  position: absolute;
  aspect-ratio: 2360/1640;
  width: 40vw;
  top: 10vw;
  left: 15vw;
  border-radius: 1rem;
  box-shadow: 0 0 5rem #8eaa87;
}

body {
  background-color: #814d27;
}

main {
  position: relative;
}

.map-workstation {
  width: 100vw;
  height: min-content;
  position: relative;
}

/* Simialr code, just change png */
.map {
  position: relative;
  width: 40vw;
  aspect-ratio: 2360/1640;

  border-radius: 1rem;

  background: url('/assets/map/map-cloud-frame.png');
  background-size: 40vw auto;
}

.map-icon-container {
  position: absolute;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.map-icon-container:hover {
  transform: translate(-50%, -50%) scale(1.25); /* For some reason keep the center code */
}

.scrollPictureContainer {
  position: absolute;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
  z-index: 100;
  overflow: scroll;
}

.scrollPictureContainer:hover {
  transform: translate(-50%, -50%) scale(1.25); /* Keeps centering */
}

.scrollPictureContainerImg {
  width: 10vw;
  height: auto;
}

#LHA {
  left: 83%;
  top: 46%;
}

#CRC {
  left: 94%;
  top: 40%;
}

#CRCIMG {
  width: 9vw;
}

#Video {
  left: 71%;
  top: 50%;
}


.map-icon {
  width: 6vw;
  height: auto;
}

#fire-icon {
  top: 77%;
  left: 15%;
}

#water-icon {
  top: 22%;
  left: 13%;
}

#air-icon {
  top: 77%;
  left: 87%;
}

#earth-icon {
  top: 22%;
  left: 87%;
}

/* Islands */
/* Edit the 'img' to change the size */

.map-island {
  height: auto;
}

.map-island-container {
  position: absolute;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.map-island-container:hover {
  transform: translate(-50%, -50%) scale(1.1); /* For some reason keep the center code */
}

#fire-island {
  top: 52%;
  left: 30%;
  z-index: 6;
}

#fire-island-img {
  width: 12vw;
}

#air-island-br {
  top: 60%;
  left: 83%;
  z-index: 7;
}

#air-island-br-img {
  width: 3vw;
}

#air-island-lt {
  top: 37%;
  left: 27%;
  z-index: 7;
}

#air-island-lt-img {
  width: 6vw;
}

#air-island-bl {
  top: 65%;
  left: 43%;
  z-index: 7;
}

#air-island-bl-img {
  width: 8vw;
}

#earth-island {
  top: 48%;
  left: 60%;
}

#earth-island-img {
  width: 20vw;
}

#water-island-top {
  top: 15%;
  left: 50%;
}
#water-island-img-top {
  width: 8vw;
}

#water-island-bottom {
  top: 85%;
  left: 50%;
}

#water-island-img-bottom {
  width: 5vw;
}

.links-container {
  position: fixed;
  background-color: #e1b790;
  border-radius: 1rem;
  bottom: 1rem;
  left: 1rem;
}

.links-container a img {
  background-color: hsl(29, 57%, 50%);
  margin: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  height: 10vh;
  transition: scale 100ms ease;
}

.links-container a img:hover {
  scale: 110%;
}

@media (width < 144vh) {

  .scrollPictureContainer {
    display: none;
  }

  #map-container {
    background-size: auto 40vh;
    height: 40vh;
    width: min-content;
    top: 15vh;
    left: 20vh;
  }

  .map-workstation {
    height: 100vh;
    width: auto;
    overflow: hidden;
  }

  .map {
    height: 40vh;
    width: min-content;
    background-size: auto 40vh;
  }

  .map-icon {
    width: 9vh;
  }

  #fire-island-img {
    width: 18vh;
  }

  #air-island-br-img {
    width: 4.5vh;
  }

  #air-island-lt-img {
    width: 9vh;
  }

  #air-island-bl-img {
    width: 12vh;
  }

  #earth-island-img {
    width: 30vh;
  }

  #water-island-img-top {
    width: 12vh;
  }

  #water-island-img-bottom {
    width: 7.5vh;
  }
}