*,
*::before,
*::after {
  box-sizing: border-box;
  transition: all 0.6s ease-in-out;
}

body,
html {
  font-family: "Poppins", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 12pt;
  font-weight: 400;
  color: black;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background: dimgray;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
  perspective: 5000px;
  perspective-origin: 100%;
  background-color: #415c2b;
  background-image: url("../img/pool-table.png");
  animation: crisscross 120s linear infinite;
}

#video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  top: -1000px;
  left: 0;
  opacity: 0;
  z-index: -2;
}

#trigger {
  position: absolute;
  width: 400px;
  height: 300px;
  bottom: 25%;
  z-index: 2;
}

@media screen and (min-height: 0px) {
  #trigger {
    bottom: 10%;
  }
}

@media screen and (min-height: 370px) {
  #trigger {
    bottom: 20%;
  }
}

@media screen and (min-height: 500px) {
  #trigger {
    bottom: 30%;
  }
}

@media screen and (min-height: 600px) {
  #trigger {
    bottom: 35%;
  }
}

@media screen and (min-height: 700px) {
  #trigger {
    bottom: 40%;
  }
}

@media screen and (min-height: 900px) {
  #trigger {
    bottom: 42%;
  }
}

#plane {
  width: 4000px;
  height: 800px;
  transform-style: preserve-3d;
  transform: rotateX(50deg) rotateZ(40deg);
  position: fixed;
  background-color: #5c4f41;
  background-image: url("../img/asfalt-light.png");
  background-size: 7%;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px,
    rgba(0, 0, 0, 0.17) 0px 23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px 36px 30px 0px inset,
    rgba(0, 0, 0, 0.4) 0px 30px 90px;
  animation: crisscross 120s linear infinite;
}

@keyframes crisscross {
  0% {
    background-position: -18000px;
  }
  100% {
    background-position: 18000px;
  }
}

#background {
  position: absolute;
  background-color: #b3b3b3;
  background-image: url("../img/asfalt-dark.png");
  width: 600px;
  height: 600px;
  border-radius: 4000px;
  transform-style: preserve-3d;
  border-left: 10px solid Gold;
  border-bottom: 14px dashed DarkRed;
  transform: rotateX(-50deg) rotateZ(-40deg);
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  animation: float 5s linear infinite;
}

@keyframes float {
  0% {
    transform: rotateX(-50deg) rotateZ(-40deg);
  }
  33% {
    transform: rotateX(-30deg) rotateZ(0deg);
  }
  66% {
    transform: rotateX(30deg) rotateZ(-40deg);
  }
  100% {
    transform: rotateX(-50deg) rotateZ(-40deg);
  }
}

#background::after {
  position: absolute;
  top: 20%;
  left: 30%;
  content: "hover over the tile or else";
  font-size: 14pt;
  font-weight: 500;
  background: red;
  border-radius: 10px;
  padding: 10px;
  color: white;
  mix-blend-mode: overlay;
}

.rotator {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 200px;
  transform-style: preserve-3d;
  transition: all 0.7s ease-in-out;
  transition-delay: 0.5s;
}

.rotator::after {
  content: "what are you scared?";
  position: absolute;
  transform-style: preserve-3d;
  font-size: 12pt;
  font-weight: 600;
  letter-spacing: -5px;
  left: -10%;
  top: 95%;
  transform: rotateY(60deg) rotateX(25deg) rotateZ(30deg) translateY(-50px)
    translateZ(-20px);
  opacity: 0;
  transition: all 0.4s ease-in-out;
}

.riser {
  position: absolute;
  top: 15%;
  background: black;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  transform-style: preserve-3d;
  border-bottom: 10px solid red;
  border-left: 10px solid DarkRed;
  transform: rotateX(-50deg) rotateZ(-40deg);
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
    rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  animation: float 5s linear infinite;
}

.icon {
  position: absolute;
  font-size: 30pt;
  background: linear-gradient(
    300deg,
    #ff0000,
    #ee0001,
    #dd0002,
    #cc0002,
    #bb0002,
    #ab0002,
    #9b0002,
    #8b0000
  );
  border-radius: 30px;
  opacity: 1;
}

.text {
  position: relative;
  right: 8px;
  bottom: 0px;
  font-size: 20pt;
  line-height: 0;
  padding: 0;
  margin: 0;
  color: white;
  cursor: default;
  font-weight: 600;
  text-shadow: 1px 1px 3px #222;
  letter-spacing: -13px;
  white-space: nowrap;
  opacity: 0;
}

#expander {
  position: absolute;
  opacity: 0;
  bottom: 70%;
  left: 40%;
  width: 80px;
  height: 50px;
  background: red;
  color: white;
  font-size: 10pt;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  animation: float 5s linear infinite;
}

#expander:hover {
  background: white;
  color: red;
  border-radius: 40px;
}

#trigger:hover ~ .rotator {
  transition: all 0.7s ease-in-out;
  transition-delay: 0.5s;
}

#trigger:hover ~ .rotator > .riser {
  box-shadow: -1px 1px 0px red, -2px 2px 0px red, -3px 3px 0px red,
    -4px 4px 0px red, -5px 5px 0px red, -6px 6px 0px red, -7px 7px 0px red,
    -8px 8px 0px red, -9px 9px 0px red, -10px 10px 0px red, -11px 11px 0px red,
    -12px 12px 0px red, -13px 13px 0px red, -14px 14px 0px red,
    -15px 15px 0px red, -16px 16px 0px red, -17px 17px 0px red,
    -18px 18px 0px red, -19px 19px 0px red, -20px 20px 0px red,
    -21px 21px 0px red, -22px 22px 0px red, -23px 23px 0px red,
    -24px 24px 0px red, -25px 25px 0px red, -26px 26px 0px red,
    -27px 27px 0px red, -28px 28px 0px red, -29px 29px 0px red,
    -30px 30px 0px red, -31px 31px 0px red, -32px 32px 0px red,
    -33px 33px 0px red, -34px 34px 0px red, -35px 35px 0px red,
    -36px 36px 0px red, -37px 37px 0px red, -38px 38px 0px red,
    -39px 39px 0px red, -40px 40px 0px red, -41px 41px DarkRed,
    -42px 42px DarkRed, -43px 43px DarkRed, -44px 44px DarkRed,
    -45px 45px DarkRed, rgba(0, 0, 0, 1) 0px -20px 100px 10px;
  top: -20%;
  padding: 80px 40px;
  border: 0px solid transparent;
}

#trigger:hover ~ .rotator > .riser > .icon {
  opacity: 0;
  font-size: 75pt;
  transform: rotateZ(200deg);
  transition: all 0.5s linear;
}

#trigger:hover ~ .rotator > .riser > .text {
  letter-spacing: 0px;
  bottom: 35px;
  opacity: 1;
}

#trigger:hover > #expander {
  opacity: 1;
  width: 120px;
  font-size: 14pt;
  bottom: 47%;
}

@media screen and (min-height: 0px) {
  #trigger:hover > #expander {
    bottom: 30%;
  }
}

@media screen and (min-height: 250px) {
  #trigger:hover > #expander {
    bottom: 40%;
  }
}

@media screen and (min-height: 320px) {
  #trigger:hover > #expander {
    bottom: 48%;
  }
}

@media screen and (min-height: 480px) {
  #trigger:hover > #expander {
    bottom: 46%;
  }
}

@media screen and (min-height: 600px) {
  #trigger:hover > #expander {
    bottom: 43%;
  }
}

@media screen and (min-height: 800px) {
  #trigger:hover > #expander {
    bottom: 38%;
  }
}

#trigger:hover ~ .rotator::after {
  content: "press the button or else";
  position: absolute;
  transform: translateZ(170px);
  font-size: 12pt;
  font-weight: 600;
  letter-spacing: 1px;
  background: white;
  left: -10%;
  top: 95%;
  padding: 0px 10px;
  opacity: 1;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
  transition: all 0.6s ease-in-out;
  transition-delay: 0.5s;
}

#trigger:hover ~ #background::after {
  content: "haha yes keep going";
}

.dropdown {
  position: fixed;
  top: -400px;
  left: 20%;
  width: auto;
  height: auto;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 26pt;
  padding: 25px;
  text-align: center;
  line-height: 30pt;
  z-index: 1;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  border-radius: 20px;
  border: 1px solid red;
}

.dropdown p {
  margin: 0;
  padding: 0;
}

#expander:focus + .dropdown {
  top: 20%;
}

#kill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  font-size: 20pt;
  background: red;
  color: white;
  text-decoration: none;
  line-height: 40pt;
  padding: 0px 20px;
  margin-top: 15px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

#kill:hover {
  background: black;
  transform: translateY(-10px);
}

#kill:focus + #video {
  opacity: 1;
  top: 0;
  z-index: 10;
  transition: none;
}

.youdied {
  position: fixed;
  display: flex;
  opacity: 0;
  transform: scale(0.1);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: -50%;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  color: red;
  font-size: 50pt;
  letter-spacing: 0px;
  width: 100%;
  height: 30%;
  z-index: 11;
}

#kill:focus ~ .youdied {
  display: flex;
  top: 30%;
  opacity: 1;
  transform: scale(1);
  letter-spacing: 6px;
}

.youdied::after {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  content: "CLICK ANYWHERE TO RESET. or else.";
  width: 400px;
  height: auto;
  font-size: 14pt;
  color: white;
  bottom: 0;
  letter-spacing: 0px;
  opacity: 0.7;
}

/*
I
WANT
IT
TO
BE
500
LINES
OMG
*/