#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  color: #FFF;
  font-family: monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

body.ready #loading {
  display: none;
}


.stage {
    position: relative;
    width: 100%;
}

#UI {
    position: absolute;
    inset: 0;
    z-index: 3;

}

#tvshow,
.scene {
    position: absolute;
    inset: 0;
}


.scene img, .stage img,
#tvshow img {
    width: 100%;
    display: block;
    object-fit: cover; 
}

.hotspot {
    position: absolute;
    display: block;
    /*background-color: rgba(255, 0, 255, 0.3);*/

    z-index: 10;
}

/* Break the TV into chunks */
.tv1 {
  top: 20%;
  left: 49%;
  width: 24%;
  height: 32%;
}

.hat1 {
    top: 3%;
    left:12%;
    width:7%;
    height:8%;
}
.hat2 {
    top: 5%;
    left:8%;
    width:7%;
    height:6%; 
}
.hat3 {
    top: 11%;
    left:8%;
    width:14%;
    height:6%; 
}
.hat4 {
    top: 17%;
    left:8%;
    width:11%;
    height:6%; 
}


.hatposter1 {
    top: 11%;
    left:31%;
    width:4%;
    height:6.5%; 
}
.hatposter2 {
    top: 17.5%;
    left:30%;
    width:6%;
    height:3%; 
}


.hatdoll1 {
    top: 30%;
    left:84%;
    width:3%;
    height:5%; 
}


.greg {
    top: 2%;
    left:55%;
    width:3.5%;
    height:16%; 
}

.adam {
    top: 1.5%;
    left:59.5%;
    width:3.7%;
    height:16.5%; 
}

.seth {
    top: 1.5%;
    left:63.7%;
    width:3.5%;
    height:16.5%; 
}

.nik {
    top: 2%;
    left:68%;
    width:3.5%;
    height:16%; 
}