body {
  background: #000;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 400px;
}

div {
  position: absolute;
  transform-style: preserve-3d;
}

#window {
  width: 300px;
  height: 400px;
}

#window .panel_frame {
  top: -150px;
  left: -150px;
  width: 75px;
  height: 98px;
  border: 150px solid black;
  box-sizing: content-box;
  transform: translate3d(112.5px, 151px, 300px);
  border-radius: 152px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3) inset;
}

#window .panel_back {
  width: 1000px;
  height: 1200px;
  background: linear-gradient(220deg, white 0%, #969696 100%);
  transform: translate3d(-50%, -50%, -250px);
}
#window .pillar {
  width: 100px;
  height: 400px;
  background: linear-gradient(220deg, #f0f0f0 0%, #969696 100%);
  overflow: hidden;
}

#window .pillar::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    270deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.1) 10%,
    rgba(255, 255, 255, 0) 50%
  );
}

#window .pillar::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(300deg, black 0%, rgba(0, 0, 0, 0) 31%);
}

#window .wall {
  width: 159px;
  height: 400px;
  background: linear-gradient(220deg, #f0f0f0 0%, #646464 100%);
  transform: translate(100px, 256px);
}

#window .wall::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    270deg,
    rgba(100, 100, 100, 0.1) 0%,
    rgba(255, 255, 255, 0) 5%
  );
}

#window .step {
  transform: rotateY(-50deg);
}

#window .step_inner {
  transform: translateX(99.4px);
}

#window .step_top {
  width: 150px;
  height: 37px;
  background: linear-gradient(220deg, #f0f0f0 0%, #969696 100%);
  transform-origin: 0 100%;
  transform: translateY(-37px) rotateX(90deg);
}

#window .step_top::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    -20deg,
    rgba(200, 200, 200, 0.4) 0%,
    rgba(100, 100, 100, 0.6) 100%
  );
  clip-path: polygon(0 0, 100% 0, 92% 60%, 30% 100%, 0 100%);
}

#window .step_top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  opacity: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
  transform: translate3d(-100%, 0, -1px);
}

#window .step_side {
  width: 150px;
  height: 20px;
  background: linear-gradient(195deg, #c8c8c8 0%, #646464 100%);
}

#window .step_side::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 1;
  transform: translateZ(1px);
}

#window .step_side::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  opacity: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );

  transform: translate3d(-100%, 0, -1px);
}

/* animation frames */
@keyframes stepAnimation {
  0% {
    transform: translateY(0) rotateY(90deg);
  }
  100% {
    transform: translateY(400px) rotateY(-90deg);
  }
}

@keyframes stepColor {
  0% {
    background-color: #bbb;
  }

  100% {
    background-color: #666;
  }
}

@keyframes stepRefrection {
  0% {
    background-color: #ddd;
  }

  100% {
    background-color: #555;
  }
}

@keyframes stepShadow {
  0% {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }

  100% {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  }
}

h1 {
  position: absolute;
  top: 140px;
  color: white;
  font-family: cursive;
  text-align: center;
  width: 100%;
  z-index: 99;
}