body {
  background: black;
  display: flex;
  justify-content: center;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Add dots under the hoverable text */
  cursor: pointer;
}
/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 130px;
  background-color: black;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; /* Ensure tooltip is displayed above content */
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
#stage {
  position: relative;
  width: 1150px; 
  height: 750px;
}


.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#idleLayer,
#eyeLayer,
#starLayer,
#alienLayer,
#pointedLayer,
#flippingLayer {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.hotspot {
      position: relative;
      z-index: 1000000;
      cursor: pointer;
      background-color: rgba(0,0,0,.5); 
      
      border: 2px solid #ffffff;
      /*background-color: #ff0000; 
      border: 2px solid #ffffff;*/
    }
    
.hotspot[data-type="pickodd"],
.hotspot[data-type="pickeven"] { 
  display:none
}

/*.hotspot:hover {
  background-color: #ffff00;
}*/
#landingVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 9999;
  display: none;
  pointer-events: none;
}