cyb/src/pages/Portal/Map/Map.module.scss

.wrapper {
  z-index: 1;
  position: relative;

  a {
    $size: 6vw;

    position: absolute;
    border-radius: 50%;
    height: $size;
    width: $size;
    transform: translateX(calc(-50% + 0.3vw));

    // box-shadow: 0 0 20px 10px var(--primary-color);
    left: 50%;
    font-size: 0.1px;

    &:hover {
      opacity: 0.7;
      box-shadow: 0 0 20px 10px var(--primary-color);
      transition: all 0.3s;
    }
  }

  .gift,
  .sphere,
  .nebula,
  .senate {
    left: 4vw;
    transform: unset;
  }

  .oracle {
    top: 1vw;
  }

  .portal {
    top: 9.5vw;
  }

  .gift,
  .cyb {
    top: 21.6vw;
  }

  .teleport {
    top: 30vw;
  }

  .sphere {
    top: 40.5vw;
  }

  .senate {
    top: 49vw;
  }

  .nebula {
    top: 57.4vw;
  }

  .hfr {
    top: 53.8vw;
  }

  .cyberlink {
    top: 70.8vw;
  }

  .tweet {
    top: 79.3vw;
  }

  .grid {
    top: 87.7vw;
  }

  .boot,
  .millivolt,
  .cyberlink2,
  .milliampere,
  .hydrogen {
    $size: 1.5vw;

    width: $size;
    height: $size;
  }

  .hydrogen {
    top: 49.7vw;
  }

  .millivolt {
    top: 64.5vw;
  }

  .milliampere {
    top: 67vw;
  }

  .boot {
    left: 6.8vw;
    top: 36vw;
  }

  .cyberlink2 {
    top: 3vw;
    right: 7.5vw;
    left: unset;
  }
}

.mapImg {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);
}