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

body {
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

.container {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  place-content: start;
  transition: background-color 0.4s ease;
  animation: changeColor 0.5s linear infinite alternate both;

  .square {
    width: 1.25vw;
    height: 1.25vw;
    border: 1px solid #0004;
    flex-grow: 1;

    @media (width <= 1111px) {
      width: 2vw;
      height: 2vw;
    }

    &:nth-child(9n + 0) {
      background-color: var(--n1);
    }
    &:nth-child(9n + 1) {
      background-color: var(--n2);
    }
    &:nth-child(9n + 2) {
      background-color: var(--n3);
    }
    &:nth-child(9n + 3) {
      background-color: var(--n4);
    }
    &:nth-child(9n + 4) {
      background-color: var(--n5);
    }
    &:nth-child(9n + 5) {
      background-color: var(--n6);
    }
    &:nth-child(9n + 6) {
      background-color: var(--n7);
    }
    &:nth-child(9n + 7) {
      background-color: var(--n8);
    }
    &:nth-child(9n + 8) {
      background-color: var(--n9);
    }
    &:nth-child(9n + 9) {
      background-color: var(--n10);
    }
  }
}

.container-1 {
  left: 1vw;
  top: -2vw;

  .square {
    border: 1px solid transparent;
  }
}

.container-2 {
  transform: rotateX(180deg);

  .square {
    border: 1px solid transparent;
  }
}

@keyframes changeColor {
  0% {
    --n1: #eca0ff;
    --n3: transparent;
    --n5: #eca0ff;
    --n7: transparent;
    --n9: #eca0ff;
  }
  100% {
    --n2: #aefb2a;
    --n4: #aefb2a;
    --n6: #aefb2a;
    --n8: #aefb2a;
    --n10: #aefb2a;
  }
}