html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
body {
  color: red;
  background: black;
  overflow: hidden;
}
/* MENU */
.menu {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100vh;
  background: black;
  padding: 0;
  text-align: center;
  overflow: hidden;
  z-index: 1000000000;
}
.menu h2 {
  color: red;
  font-size: 50px;
  margin: 20px 0 40px 0;
  position: relative;
  left: -10px;
}
.menu a {
  color: red;
  font-size: 24px;
  text-decoration: none;
  position: relative;
  left: -10px;
}
/* VERTICAL RED DIVIDER */
.menu-divider {
  position: absolute;
  width: 100vh;
  height: 30px;
  right: calc(15px - 50vh);
  top: 50%;
  transform: rotate(90deg);
  z-index: 9999999999;
  pointer-events: none;
}
/* LEFT SIDE */
.left {
  position: fixed;
  left: 400px;
  top: 0;
  width: calc(50% - 100px);
  height: 100vh;
  background: url("images/hallway.jpg") no-repeat;
  overflow: hidden;
  z-index: 1;
}
/* RIGHT TOUCHME BACKGROUND */
.right {
  position: fixed;
  right: 0;
  top: 0;
  width: calc(50% - 100px);
  height: 100vh;
  background-image: url("images/touchme.gif");
  background-repeat: repeat;
  background-size: auto;
  z-index: 2;
}
/* MASO */
.maso2-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  pointer-events: none;
}
.maso2 {
  position: absolute;
  right: -50px;
  top: 510px;
  width: 700px;
  height: auto;
}
.eye-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  pointer-events: none;
}
/* SHOOT GIF */
.left-gif {
  position: fixed;
  right: 29.5%;
  top: 70%;
  transform: translateY(-50%);
  width: 1200px;
  height:1500px;
  background-image: url("images/shootcrop.gif");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  z-index: 200;
  pointer-events: none;
}
/* FLYING CONGRATULATIONS */
.flying-popup {
  position: fixed;
  width: 240px;
  z-index: 9999;
  pointer-events: none;
  animation: chaos 20s linear infinite;
}
.flying-popup2 {
  position: fixed;
  width: 230px;
  z-index: 9999;
  pointer-events: none;
  animation: chaos 20s alternate-reverse infinite;
}
@keyframes chaos {
  0% { left: 10%; top: 10%; }
  25% { left: 70%; top: 20%; }
  50% { left: 60%; top: 70%; }
  75% { left: 20%; top: 60%; }
  100% { left: 10%; top: 10%; }
}
/* LEFT COLLAGE IMAGES */
.scary {
  position: absolute;
  left: 80px;
  top: 300px;
  width: 150px;
  height: auto;
  z-index: 10;
}
.hotgirl {
  position: absolute;
  left: 0.1px;
  top: 600px;
  width: 300px;
  height: auto;
  z-index: 11;
}
.bin {
  position: absolute;
  left: 300px;
  top: 200px;
  width: 80px;
  height: auto;
  z-index: 12;
}
.clog {
  position: absolute;
  left: 300px;
  top: 600px;
  width: 350px;
  height: auto;
  z-index: 13;
}
.homo {
  position: absolute;
  left: 320px;
  top: 300px;
  width: 280px;
  height: auto;
  z-index: 14;
}