* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

#viewport {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #000;
  perspective: 372px;
}

#user-interface {
  position: absolute;
  top: 40%;
  width: 100vw;
  height: 100vh;
  z-index: 200;
}

#user-interface h1 {
  color: #fffc;
  font-family: sans-serif;
  font-size: 64px;
  font-weight: 400;
  width: 100%;
  text-align: center;
  text-shadow: black 0px 0px 20px;
}

#camera {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate3d(0px, 0px, 372px);
}

#scene {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.platform1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate3d(0px, 0px, 0px);
}

.platform2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate3d(0px, 0px, -1200px);
}

.platform3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate3d(-100px, 0px, -700px) rotateX(360deg)
    scale3d(0.5, 1, 0.25);
  animation-name: platformMoving;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

@keyframes platformMoving {
  0% {
    transform: translate3d(-100px, 0px, -700px) rotateX(360deg)
      scale3d(0.5, 1, 0.25);
  }
  25% {
    transform: translate3d(-100px, 0px, -500px) rotateX(360deg)
      scale3d(0.5, 1, 0.25);
  }
  50% {
    transform: translate3d(100px, 0px, -500px) rotateX(360deg)
      scale3d(0.5, 1, 0.25);
  }
  75% {
    transform: translate3d(100px, 0px, -700px) rotateX(360deg)
      scale3d(0.5, 1, 0.25);
  }
  100% {
    transform: translate3d(-100px, 0px, -700px) rotateX(360deg)
      scale3d(0.5, 1, 0.25);
  }
}

.platform3 .platform .ground {
  background-size: 800px 1600px;
}

.platform4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate3d(0px, 0px, -2000px) scale3d(2, 1, 1);
}

.platform4 .platform .ground {
  background-size: 200px 400px;
  background-position: 100px 400px;
}

.platform {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate3d(0px, 150px, 0px);
}

.platform .ground {
  position: absolute;
  width: 400px;
  height: 800px;
  background: url('./images/Brick.png');
  background-size: 400px 400px;
  backface-visibility: hidden;
  transform: translate3d(-200px, -400px, 0px) rotateX(90deg);
}

.platform .side1 {
  position: absolute;
  width: 400px;
  height: 50px;
  background: linear-gradient(#0000, #000c), url('./images/Rock.jpg');
  background-size: 400px;
  backface-visibility: hidden;
  transform: translate3d(-200px, 0px, 400px);
}

.platform .side2 {
  position: absolute;
  width: 800px;
  height: 50px;
  background: linear-gradient(#0000, #000c), url('./images/Rock.jpg');
  backface-visibility: hidden;
  transform: translate3d(-200px, 0px, 0px) rotateY(90deg);
}

.platform .side3 {
  position: absolute;
  width: 400px;
  height: 50px;
  background: linear-gradient(#0000, #000c), url('./images/Rock.jpg');
  backface-visibility: hidden;
  transform: translate3d(-200px, 0px, -400px) rotateY(180deg);
}

.platform .side4 {
  position: absolute;
  width: 800px;
  height: 50px;
  background: linear-gradient(#0000, #000c), url('./images/Rock.jpg');
  backface-visibility: hidden;
  transform: translate3d(-600px, 0px, 0px) rotateY(-90deg);
}

.cubeWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate3d(0px, 0px, -2000px);
}

.cube {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  animation-name: spin;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  0% {
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

.cube .up {
  position: absolute;
  width: 100px;
  height: 100px;
  background: radial-gradient(#0000, #f44c);
  backface-visibility: hidden;
  transform: translate3d(-50px, -100px, 0px) rotateX(90deg);
}

.cube .down {
  position: absolute;
  width: 100px;
  height: 100px;
  background: radial-gradient(#0000, #f44c);
  backface-visibility: hidden;
  transform: translate3d(-50px, 0px, 0px) rotateX(-90deg);
}

.cube .left {
  position: absolute;
  width: 100px;
  height: 100px;
  background: radial-gradient(#0000, #f44c);
  backface-visibility: hidden;
  transform: translate3d(-100px, -50px, 0px) rotateY(-90deg);
}

.cube .right {
  position: absolute;
  width: 100px;
  height: 100px;
  background: radial-gradient(#0000, #f44c);
  backface-visibility: hidden;
  transform: translate3d(0px, -50px, 0px) rotateY(90deg);
}

.cube .front {
  position: absolute;
  width: 100px;
  height: 100px;
  background: radial-gradient(#0000, #f44c);
  backface-visibility: hidden;
  transform: translate3d(-50px, -50px, 50px);
}

.cube .back {
  position: absolute;
  width: 100px;
  height: 100px;
  background: radial-gradient(#0000, #f44c);
  backface-visibility: hidden;
  transform: translate3d(-50px, -50px, -50px) rotateY(180deg);
}

.skybox {
  position: absolute;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: translate3d(-10000px, -8000px, 10000px);
}

.skybox .skybox-up {
  position: absolute;
  transform: translate3d(0px, -10000px, -10000px) rotateX(-90deg)
    rotateZ(270deg);
  width: 20000px;
  height: 20000px;
  background-image: url('./images/skybox/skybox_up.png');
  backface-visibility: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.skybox .skybox-down {
  position: absolute;
  transform: translate3d(0px, +10000px, -10000px) rotateX(90deg);
  width: 20000px;
  height: 20000px;
  background-image: url('./images/skybox/skybox_dn.png');
  backface-visibility: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.skybox .skybox-front {
  position: absolute;
  transform: rotateX(180deg) rotateZ(180deg);
  width: 20000px;
  height: 20000px;
  background-image: url('./images/skybox/skybox_ft.png');
  backface-visibility: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.skybox .skybox-back {
  position: absolute;
  transform: translate3d(0px, 0px, -20000px);
  width: 20000px;
  height: 20000px;
  background-image: url('./images/skybox/skybox_bk.png');
  backface-visibility: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.skybox .skybox-left {
  position: absolute;
  transform: translate3d(-10000px, 0px, -10000px) rotateY(90deg);
  width: 20000px;
  height: 20000px;
  background-image: url('./images/skybox/skybox_lf.png');
  backface-visibility: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.skybox .skybox-right {
  position: absolute;
  transform: translate3d(10000px, 0px, -10000px) rotateY(-90deg);
  width: 20000px;
  height: 20000px;
  background-image: url('./images/skybox/skybox_rt.png');
  backface-visibility: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}