*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  overflow: hidden;
}

body {
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  background-color: #000;
}

.container {
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  perspective: 10000px;
  transform: rotateX(40deg) rotateY(90deg);
  animation: girar 10s linear infinite;

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

  .block {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    perspective: 10000px;

    .rectangle {
      width: 100%;
      height: 40px;
      position: absolute;
      transform-style: preserve-3d;
      perspective: 10000px;

      .side {
        width: 100%;
        height: 100%;
        position: absolute;

        &:nth-child(1) {
          background-color: #ffa50011;
          transform: rotateX(0deg);
        }
        &:nth-child(2) {
          background-color: #ffa50011;
          transform: rotateX(0deg) translateZ(-40px);
        }

        &:nth-child(3) {
          background-color: #ffa50011;
          transform-origin: 50% 0;
          transform: rotateX(-90deg);
        }

        &:nth-child(4) {
          background-color: #ffa50011;
          transform-origin: 50% 100%;
          transform: rotateX(90deg);
        }
      }
    }

    .rectangle-1 {
      left: 40px;
    }

    .rectangle-2 {
      transform: translateZ(-200px);
    }

    .rectangle-3 {
      transform-origin: 100% 0%;
      transform: rotateY(-90deg) translateX(-40px);
    }
    .rectangle-4 {
      left: 40px;
      transform-origin: 0% 0%;
      transform: rotateY(90deg);
    }
  }
  .second-block {
    bottom: 50%;
    left: -60px;
    transform: rotate(90deg);
  }

  .third-block {
    bottom: -40px;
    transform: rotateX(-90deg) translateY(200px);
  }

  .fourth-block {
    bottom: -40px;
    transform: rotateX(-90deg) translateY(100px);
  }

  .fifth-block {
    bottom: -40px;
    transform: rotateX(-90deg) translateY(290px);
  }

  .sixth-block {
    bottom: 50%;
    left: -160px;
    transform: rotate(90deg);
  }

  .seventh-block {
    bottom: 50%;
    left: 40px;
    transform: rotate(90deg);
  }
}

@keyframes girar {
  0% {
    transform: rotateX(15deg) rotateY(15deg);
  }
  100% {
    transform: rotateX(375deg) rotateY(375deg);
  }
}