body {
  overflow: hidden;
  height: 100vh;
  perspective: 25em;
  background: #373b44;
}

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

.a3d {
  animation: r 8s linear infinite;
}

@keyframes r {
  to {
    transform: rotateY(0.75turn);
  }
}
.s3d {
  animation: h 8s ease-in-out infinite;
}

.s3d:nth-child(1) .s4gon, .s3d:nth-child(1) .s3gon:nth-child(1), .s3d:nth-child(1) .s3gon:nth-child(4) {
  color: #dee1b6;
}

.s3d:nth-child(1) {
  color: #73c8a9;
  animation-name: hop1;
}
.s3d:nth-child(1) .rot {
  animation-name: rh1;
}
.s3d:nth-child(1) .s4gon {
  transform: rotateX(-90deg);
}

@keyframes hop1 {
  18%, 32% {
    transform: none;
  }
  25% {
    transform: translateY(-8.75vmin);
  }
}
@keyframes rh1 {
  22.5% {
    transform: none;
  }
  27.5%, 100% {
    transform: rotateY(-90deg);
  }
}
.s3d:nth-child(2) .s4gon, .s3d:nth-child(2) .s3gon:nth-child(3), .s3d:nth-child(2) .s3gon:nth-child(6) {
  color: #bd5532;
}

.s3d:nth-child(2) {
  color: #e1b866;
  animation-name: hop2;
}
.s3d:nth-child(2) .rot {
  animation-name: rh2;
}
.s3d:nth-child(2) .s4gon {
  transform: rotateX(90deg);
}

@keyframes hop2 {
  68%, 82% {
    transform: none;
  }
  75% {
    transform: translateY(8.75vmin);
  }
}
@keyframes rh2 {
  72.5% {
    transform: none;
  }
  77.5%, 100% {
    transform: rotateY(-90deg);
  }
}
.rot {
  animation: a 8s cubic-bezier(0.68, -0.56, 0.26, 1.56) infinite;
}

.s2d {
  backface-visibility: hidden;
  background: currentColor;
}

.s3gon {
  margin: -10.10363vmin;
  width: 20.20726vmin;
  height: 20.20726vmin;
  clip-path: url(#o3);
}
.s3d:nth-child(1) .s3gon:nth-child(1) {
  transform: rotateY(-90deg) rotateX(35.26439deg) translateZ(7.14435vmin);
}
.s3d:nth-child(1) .s3gon:nth-child(2) {
  transform: rotateY(-90deg) rotateX(35.26439deg) translateZ(7.14435vmin) rotate(-60deg) translateY(-10.10363vmin);
}
.s3d:nth-child(1) .s3gon:nth-child(3) {
  transform: rotateY(-90deg) rotateX(35.26439deg) translateZ(7.14435vmin) rotate(60deg) translateY(-10.10363vmin);
}
.s3d:nth-child(2) .s3gon:nth-child(1) {
  transform: rotateY(-90deg) rotateX(35.26439deg) translateZ(7.14435vmin) rotate(-180deg) translateY(-10.10363vmin);
}
.s3d:nth-child(1) .s3gon:nth-child(4) {
  transform: rotateY(90deg) rotateX(35.26439deg) translateZ(7.14435vmin);
}
.s3d:nth-child(1) .s3gon:nth-child(5) {
  transform: rotateY(90deg) rotateX(35.26439deg) translateZ(7.14435vmin) rotate(-60deg) translateY(-10.10363vmin);
}
.s3d:nth-child(1) .s3gon:nth-child(6) {
  transform: rotateY(90deg) rotateX(35.26439deg) translateZ(7.14435vmin) rotate(60deg) translateY(-10.10363vmin);
}
.s3d:nth-child(2) .s3gon:nth-child(2) {
  transform: rotateY(90deg) rotateX(35.26439deg) translateZ(7.14435vmin) rotate(-180deg) translateY(-10.10363vmin);
}
.s3d:nth-child(2) .s3gon:nth-child(3) {
  transform: rotate(0.5turn) rotateY(0deg) rotateX(35.26439deg) translateZ(7.14435vmin);
}
.s3d:nth-child(2) .s3gon:nth-child(4) {
  transform: rotate(0.5turn) rotateY(0deg) rotateX(35.26439deg) translateZ(7.14435vmin) rotate(-60deg) translateY(-10.10363vmin);
}
.s3d:nth-child(2) .s3gon:nth-child(5) {
  transform: rotate(0.5turn) rotateY(0deg) rotateX(35.26439deg) translateZ(7.14435vmin) rotate(60deg) translateY(-10.10363vmin);
}
.s3d:nth-child(1) .s3gon:nth-child(7) {
  transform: rotate(0.5turn) rotateY(0deg) rotateX(35.26439deg) translateZ(7.14435vmin) rotate(-180deg) translateY(-10.10363vmin);
}
.s3d:nth-child(2) .s3gon:nth-child(6) {
  transform: rotate(0.5turn) rotateY(180deg) rotateX(35.26439deg) translateZ(7.14435vmin);
}
.s3d:nth-child(2) .s3gon:nth-child(7) {
  transform: rotate(0.5turn) rotateY(180deg) rotateX(35.26439deg) translateZ(7.14435vmin) rotate(-60deg) translateY(-10.10363vmin);
}
.s3d:nth-child(2) .s3gon:nth-child(8) {
  transform: rotate(0.5turn) rotateY(180deg) rotateX(35.26439deg) translateZ(7.14435vmin) rotate(60deg) translateY(-10.10363vmin);
}
.s3d:nth-child(1) .s3gon:nth-child(8) {
  transform: rotate(0.5turn) rotateY(180deg) rotateX(35.26439deg) translateZ(7.14435vmin) rotate(-180deg) translateY(-10.10363vmin);
}

.s4gon {
  margin: -12.37437vmin;
  width: 24.74874vmin;
  height: 24.74874vmin;
  clip-path: url(#o4);
}