body {
  margin: 0;
  background: url("home.png") no-repeat center center fixed;
  background-size: cover;
}
.fade-in {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  animation: fadeOut 2s forwards;
  z-index: 9999;
  pointer-events: none;
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.hotspot {
  position: absolute;
  display: block;
  width: 120px;
  height: 120px;
  background: rgba(0, 255, 0, 0.3);
  border: 2px solid red; 
  z-index: 10;
}


.b1 {
  top: 340px;
  left: 60px;
  width: 100px;
  height: 100px;
}

.b2 {
  top: 325px;
  left: 1350px;
  width: 100px;
  height: 100px;
}

.braids {
  top: 500px;
  left: 700px;
  width: 100px;
  height: 150px;
}

.spades {
  top: 250px;
  left: 1000px;
  width: 100px;
  height: 150px;
}

.combat {
  top: 40px;
  left: 700px;
  width: 100px;
  height: 150px;
}

.doc {
  top: 250px;
  left: 430px;
  width: 100px;
  height: 150px;
}

.crimp {
  top: 150px;
  left: 130px;
  width: 100px;
  height: 150px;
}

.zazab {
  top: 10px;
  left: 350px;
  width: 100px;
  height: 150px;
}

.yulia {
  top: 50px;
  left: 240px;
  width: 100px;
  height: 150px;
}
.jeane {
  top: 450px;
  left: 470px;
  width: 100px;
  height: 150px;
}

.soot {
  top: 30px;
  left: 1130px;
  width: 100px;
  height: 150px;
}

.salt {
  top: 30px;
  left: 1260px;
  width: 100px;
  height: 150px;
}

.bands {
  top: 30px;
  left: 999px;
  width: 100px;
  height: 150px;
}
.npc {
  top: 230px;
  left: 1200px;
  width: 100px;
  height: 150px;
}