.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8px;
    height: 8px;
  }
  
  /* cube */
  .cube {
    position: relative;
    right: 40px;
    top: 44px;
    width: 1px;
    height: 1px;
    margin: 0 8px 0 0;
    transform-style: preserve-3d;
  }
  .wall {
    width: 8px;
    height: 8px;
    position: absolute;
    left: calc(-8px / 2);
    top: calc(-8px / 2);
    text-align: center;
    line-height: 80px;
    border: solid 1px rgb(255, 255, 255);
  }
  .front {
    transform: translateZ(calc(8px / 2));
  }
  .back {
    transform: translateZ(calc(-8px / 2)) rotateY(180deg);
  }
  .right {
    transform: translateX(calc(8px / 2)) rotateY(90deg);
  }
  .left {
    transform: translateX(calc(-8px / 2)) rotateY(-90deg);
  }
  .top {
    transform: translateY(calc(-8px / 2)) rotateX(90deg);
  }
  .bottom {
    transform: translateY(calc(8px / 2)) rotateX(-90deg);
  }
  
  /* animation */
  
  
  .flex:nth-of-type(4) .cube:nth-of-type(1) {
    animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s infinite;
  }
  
  
  .flex:nth-of-type(3) .cube:nth-of-type(1) {
    animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s infinite ;
  }
  .flex:nth-of-type(4) .cube:nth-of-type(2) {
    animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s infinite;
  }
  
  
  .flex:nth-of-type(2) .cube:nth-of-type(1) {
    animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s infinite;
  }
  .flex:nth-of-type(3) .cube:nth-of-type(2) {
    animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s infinite;
  }
  .flex:nth-of-type(4) .cube:nth-of-type(3) {
    animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s infinite;
  }
  
  
  .flex:nth-of-type(1) .cube:nth-of-type(1) {
    animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s infinite;
  }
  .flex:nth-of-type(2) .cube:nth-of-type(2) {
    animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s infinite;
  }
  .flex:nth-of-type(3) .cube:nth-of-type(3) {
    animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s infinite;
  }
  .flex:nth-of-type(4) .cube:nth-of-type(4) {
    animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s infinite;
  }
  
  
  .flex:nth-of-type(1) .cube:nth-of-type(2) {
    animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s infinite;
  }
  .flex:nth-of-type(2) .cube:nth-of-type(3) {
    animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s infinite;
  }
  .flex:nth-of-type(3) .cube:nth-of-type(4) {
    animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s infinite;
  }
  
  
  .flex:nth-of-type(1) .cube:nth-of-type(3) {
    animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s infinite;
  }
  .flex:nth-of-type(2) .cube:nth-of-type(4) {
    animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s infinite;
  }
  
  
  .flex:nth-of-type(1) .cube:nth-of-type(4) {
    animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1.1s infinite;
  }
  
  @keyframes rotation {
    100% {
      transform: rotateX(270deg) rotateY(270deg);
    }
  }
  
  .wall{
    animation: color 2s linear 1.5s forwards;
  }
  
  @keyframes color {
    100% {
      background-color: indigo  ;
    }
  }

  @media screen and (max-width: 770px) {
    .cube {
        left: 390px;
        top: 42px;
      }
  }