:root {
  --width: 55vw;
}

* {
  box-sizing: border-box;
}

.crt-background {
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  margin: 0;
}

.crt-scene {
  width: calc(var(--width)*1.5);
  height: calc(var(--width)*1.5);
  margin-left: calc(var(--width)*0.4);
  margin-top: 19vh;
  perspective: calc(var(--width)*4); 
  z-index: 2;
}

.crt-cube {
  width: var(--width);
  height: var(--width);
  position: relative;
  transform-style: preserve-3d;
  z-index: 2;
}

.crt-cube__face {
  position: absolute;
  width: var(--width);
  height: var(--width);
  border: 1px solid #d1d1d1;
  z-index: 2;
}

.crt-cube__face--front {
  transform: rotateY(0deg) translateZ(calc(var(--width)/2));
}

.crt-cube__face--right {
  transform: rotateY(90deg) translateZ(calc(var(--width)/2));
}

.crt-cube__face--back {
  transform: rotateY(180deg) translateZ(calc(var(--width)/2));
}

.crt-cube__face--left {
  transform: rotateY(-90deg) translateZ(calc(var(--width)/2));
}

.crt-cube.rotate {
  animation: rotateCube 15s infinite linear;
}

@keyframes rotateCube {
  0%  { transform: rotateY(360deg); }
  5%  { transform: rotateY(360deg); }
  20% { transform: rotateY(270deg); }
  30% { transform: rotateY(270deg); }
  45% { transform: rotateY(180deg); }
  55% { transform: rotateY(180deg); }
  70% { transform: rotateY(90deg);  }
  80% { transform: rotateY(90deg);  }
  95% { transform: rotateY(0deg);   }
  100% { transform: rotateY(0deg);  }
}

@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}