*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  background-color: #000;
  perspective: 10000px;
  transform-style: preserve-3d;
  overflow: hidden;
}

.container {
  width: 130px;
  height: 130px;
  position: relative;
  perspective: 10000px;
  transform-style: preserve-3d;
  animation: rotar 20s linear infinite alternate both;

  @media (width <= 1111px) {
    zoom: 0.5;
  }

  &.pause {
    animation-play-state: paused;
  }

  .base {
    width: 100%;
    height: 100%;
    position: absolute;
    clip-path: polygon(
      0% 25%,
      25% 0,
      75% 0,
      100% 25%,
      100% 75%,
      75% 100%,
      25% 100%,
      0% 75%
    );
    transform-origin: 50% 0;
    transform: rotateX(-90deg);
    background-image: repeating-conic-gradient(
      from 0deg at 50% 50%,
      springgreen 0 5deg,
      magenta 5deg 10deg
    );

    &.base-top {
      top: 0;
    }
    &.base-bottom {
      top: 180%;
    }
  }

  .side {
    position: absolute;
    width: 50%;
    height: 180%;
    left: 50%;
    top: 0;
    background-image: repeating-conic-gradient(
      from 0deg at 50% 50%,
      springgreen 0 5deg,
      magenta 5deg 10deg
    );

    &.side-1 {
      transform: translateX(-50%) translateZ(-130px);
    }

    &.side-2 {
      width: 35%;
      transform-origin: 100% 0%;
      transform: translateX(-28%) translateZ(-130px) rotateY(135deg);
    }

    &.side-3 {
      width: 35%;
      transform-origin: 0% 0%;
      transform: translateX(-71%) translateZ(-130px) rotateY(-135deg);
    }

    &.side-4 {
      transform: translateX(50%) translateZ(-65px) rotateY(90deg);
    }

    &.side-5 {
      transform: translateX(-150%) translateZ(-65px) rotateY(90deg);
    }

    &.side-6 {
      width: 35%;
      transform-origin: 100% 0%;
      transform: translateX(-28%) rotateY(-135deg);
    }

    &.side-7 {
      width: 35%;
      transform-origin: 0% 0%;
      transform: translateX(-71%) rotateY(135deg);
    }

    &.side-8 {
      transform: translateX(-50%);
    }
  }
}

@keyframes rotar {
  0% {
    transform: rotateX(-369deg) rotateY(-369deg);
  }
  100% {
    transform: rotateX(369deg) rotateY(369deg);
  }
}