html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.speaker-button {
  position: absolute;

    left: 49.4%;
    top: 4.2%;

    color: black;
    font-size: 37px;
    text-decoration: none;

    transition: all .2s ease;
}

.speaker-button:hover {
    color: #f0b73d;

    text-shadow:
        0 0 4px #ffd84d,
        0 0 8px #ffd84d,
        0 0 16px #ffd84d;
    transform: scale(1.1);

}
.maint-button {
  position: absolute;
  left: 49.5%;
    top: 9%;


  color: black;
  font-size: 40px;
  text-decoration: none;

  transition: all .2s ease;
}

.maint-button:hover {
  color: #f0b73d;

  text-shadow:
    0 0 4px #ffd84d,
    0 0 8px #ffd84d,
    0 0 16px #ffd84d;

  transform: scale(1.1);
}

.updates-button {
  position: absolute;
  left: 49.4%;
    top: 15%;


  color: black;
  font-size: 35px;
  text-decoration: none;

  transition: all .2s ease;
}

.updates-button:hover {
  color: #f0b73d;

  text-shadow:
    0 0 4px #ffd84d,
    0 0 8px #ffd84d,
    0 0 16px #ffd84d;

  transform: scale(1.1);
}
.directory {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.directory-map {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.hotspot {
    position: absolute;
    cursor: pointer;
}

.gang{
    left:1.9%;
    top:17.2%;
    width:16.49%;
    height:23.5%;

    background:transparent;
}
.gang:hover {
    background: rgba(161, 69, 162, 0.2);
}
.captain{
  left:18.3%;
    top:5%;
    width:15.4%;
    height:18.3%;

    background: transparent;
}
.captain:hover {
    background: rgba(107, 163, 66, 0.2);
   
}
.vr{
 left:39.9%;
    top:54.88%;
    width:16.4%;
    height:19%;
    background: transparent;
}
.vr:hover {
   
    background: rgba(26, 238, 250, 0.2);
  
}
.dijiin{
left:18.4%;
    top:23.3%;
    width:9.4%;
    height:25.19%;
 background:transparent
}
.dijiin:hover {
    background:rgba(16, 23, 41, 0.2);
  
}
.vampire{
left:71.8%;
    top:72.9%;
    width:22.4%;
    height:18.39%;
 background:transparent
}

.vampire:hover {
    background:rgb(240 8 8 / 20%);
  
}
.western{
left:68.1%;
    top:57.9%;
    width:17.5%;
    height:15%;
     background:transparent;
}
.western:hover {
    background:rgba(164, 101, 54, 0.2);
  
}
.cyberpunk{
left:39.88%;
    top:73.9%;
    width:23.3%;
    height:14.9%;
     background:transparent;
}
.cyberpunk:hover {
    background:rgba(221, 88, 214, 0.2);
}
.apocalypse{
left:85.7%;
    top:54.5%;
    width:12.3%;
    height:18.3%;
    background:#9f1a1a00;
}
.apocalypse:hover {
    background:rgba(255, 244, 99, 0.2);
}
.darklord{
   left:71.5%;
    top:42.4%;
    width:14.1%;
    height:15.7%;
    background:transparent;
}
.darklord:hover {
    background:rgb(181 49 49 / 20%);
}
.foodcourt{
left:39.9%;
    top:24.6%;
    width:10.2%;
    height:18%;
    background:transparent;
}
.foodcourt:hover {
    background:rgba(238, 117, 50, 0.2);
  
}
.info{
left:50.2%;
    top:24.6%;
    width:10.2%;
    height:18%;
    background:transparent;
}
.info:hover {
    background:rgba(238, 117, 50, 0.2);
  
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg {
    position: relative;
    width: 100vw;
    height: 100vh;
    
    
  }
  
.variants {
  position: absolute;
  left: 1.3%;
  top: 70%;
  width: 6%;
  height: 29%;
 
  background-color: transparent;
 

  
}
.partners {
  position: absolute;
  left: 8.4%;
  top: 70%;
  width: 6%;
  height: 29%;
 
  background-color: transparent;
 

  
}
.exrtas{
  position: absolute;
  left: 15.9%;
  top: 70%;
  width: 10%;
  height: 29%;
 text-decoration: none;
  background-color:transparent;
 

  
}
  .variants a,
.partners a,
.exrtas a {
  font-family: "Racing Sans One", sans-serif;
  font-size: 19px;
  color: black;

}


.variants a:hover,
.partners a:hover,
.exrtas a:hover {
  text-decoration: underline;
}