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

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: white transparent;
}

body {
  height: 100dvh;
  display: flex;
  flex-wrap: wrap;
  place-content: start;
  overflow: hidden;
  transition: background-color 0.4s ease;
  animation: changeColor 0.5s linear infinite alternate both;

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

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

    &: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);
    }
  }
}

@keyframes changeColor {
  0% {
    --n1: #00ff87;
    --n2: #0061ff;
    --n3: #fff95b;
  }
  100% {
    --n6: #a18dce;
    --n5: #9bf8f4;
    --n4: #ff0f7b;
  }
}