/* *******     SPOTS    **** */

#spot_1 {
  top: 6%;
  left: 3%;
}

#spot_2 {
  top: 6%;
  left: 6%;
}

#spot_3 {
  top: 6%;
  left: 9%;
}

#spot_4 {
  top: 6%;
  left: 11.5%;
}

#spot_5 {
  top: 6%;
  left: 14%;
}

#spot_6 {
  top: 6%;
  left: 18%;
}

#spot_7 {
  top: 9%;
  left: 54%;
}

#spot_8 {
  top: 9%;
  left: 57%;
}

#spot_8 {
  top: 9%;
  left: 56%;
}

/* *******     AREAS    **** */

#area_1 {
  top: 31%;
  left: 54%;
}

#area_2 {
  top: 9%;
  left: 25%;
  width: 28px;
  height: 27px;
  border-color: var(--red2);
  border-width: 2px;
}

.ui-tooltip[data-index="area_2"] {
  background: var(--red2);
}

#area_3 {
  top: 9%;
  left: 27%;
  width: 31px;
  height: 27px;
  border-color: var(--blue2);
  border-width: 2px;
}

.ui-tooltip[data-index="area_3"] {
  background: var(--blue2);
}

#area_4 {
  top: 12%;
  left: 55%;
  width: 32px;
  height: 27px;
  border-color: var(--orange2);
  border-width: 2px;
}

.ui-tooltip[data-index="area_4"] {
  background: var(--orange2);
}

#area_5 {
  top: 15%;
  left: 84%;
  width: 121px;
  height: 27px;
  border-color: var(--purple3);
  border-width: 2px;
}

.ui-tooltip[data-index="area_5"] {
  background: var(--purple3);
}

/* ******************** */

#area_6 {
  top: 15%;
  left: 1%;
  width: 32px;
  height: 27px;
  border-color: var(--orange3);
  border-width: 2px;
}

#area_7 {
  top: 35%;
  left: 40%;
  width: 191px;
  height: 27px;
  border-color: var(--pink2);
  border-width: 2px;
}

#area_8 {
  top: 82%;
  left: 41%;
  width: 191px;
  height: 27px;
  border-color: var(--green2);
  border-width: 2px;
}

/* *******     SPOTS    **** */

#spot_9 {
  top: 9%;
  left: 58%;
}

#spot_10 {
  top: 12%;
  left: 60%;
}

/* *********PLAYER****************** */

#player {
  margin: 0 2%;
}

@media (min-width: 576px) {
  .spot {
    transform: scale(.45);
  }
}

@media (min-width: 1200px) {
  .spot {
    transform: scale(.9);
  }
}

@media (min-width: 300px) {
  #area_1 {
    transform: scale(.6) translate(-30%, -30%);
  }
}

@media (min-width: 576px) {
  #area_1 {
    transform: initial;
  }
}

#marker_2 {
  top: 4%;
  left: 24%;
  color: var(--blue3);
}

#marker_3 {
  top: 9%;
  left: 49%;
  color: var(--yellow3);
}

#marker_4 {
  top: 10%;
  left: 86%;
  color: var(--purple3);
}

#marker_5 {
  top: 10%;
  left: 3%;
  color: var(--red2);
}

#marker_6 {
  top: 38%;
  left: 39%;
  color: var(--orange2);
}

#marker_7 {
  top: 81%;
  left: 39%;
  color: var(--green2);
}

#marker_1 {
  top: 4%;
  left: 22%;
  color: var(--red2);
}

.marker {
  transform: scale(.5) translate(-44%, -50%);
  transform-origin: top;
}

@media (min-width: 768px) {
  .marker {
    transform: scale(1) translate(-4%, -50%);
    transform-origin: top;
  }
}

@media (min-width: 992px) {
  .marker {
    transform: scale(1) translate(-4%, -27%);
    transform-origin: top;
  }
}