.grid {
  display: grid;
  grid-template-columns: repeat(200, 10px);
  grid-template-rows: repeat(6, 10px);
}

.cell {
  --speed: 0.2s;
  aspect-ratio: 69 / 69;
  animation: appear var(--speed) linear forwards;
  transform: translateY(12px);
  opacity: 0;
}
.cell-color-1 {
  background: var(--cell-color-1, #f8ca08);
}
.cell-color-2 {
  background: var(--cell-color-2, #d3b427);
}
.cell-color-3 {
  background: #f26a23;
}
.cell-color-4 {
  background: #6c9aaf;
}
.cell-color-5 {
  background: #a5a7a9;
}

.cell {
  grid-column-start: random(0, 200);
  grid-row-start: random(0, 6);
  animation-delay: calc(random(0s, 10s) / 40);
}


body {
  background: linear-gradient(
    to bottom,
    #0f171f,
    #0f171f 50%,
    #35637f 50%,
    #35637f
  );
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin: 0;
}

@keyframes appear {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}