.row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  /* transform-style: preserve-3d; */
  /* perspective: 1000px; */
}

/*

.pixel {
  width: var(--unitSize);
  height: var(--unitSize);
  opacity: 1.0;
  background-color: rgba(255,0,0,0.1);
  background-color: #f6f6f6;
  transform: scale(0.9);
}
*/
.pixel {
  width: var(--unitSize);
  height: var(--unitSize);

  opacity: 0.75;
  opacity: 1.0;
  animation-duration: var(--animation-duration);
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-timing-function: cubic-bezier(0.5, 2, 0.6, 0.6);
  animation-timing-function: cubic-bezier(0.5, 1, 0.3, 0.3);
  animation-name: popIn;
  transform: scale(0.1);
  /* transform: scale(0.9); */
  animation-fill-mode:both;
  background-color: rgb(240, 240, 240);
}


@keyframes popIn {
  from {
    transform: scale(0.1);
    /* opacity: 0.0; */
  }

  to {
    transform: scale(0.9);
    /* opacity: 1.0; */
  }
}