:root {
  --bg-color: #380011;
  --tile-color: #06673D;
  --untile-color: #799108;
  --side-length: 5;
  --margin-top: 0;
}

html,
body {
  margin: 0px;
  background-color: var(--bg-color);
  overflow: hidden;
}

#container {
  max-width: 100vh;
  max-height: 100vh;

  display: grid;
  grid-template-columns: repeat(var(--side-length), 1fr);

  margin: auto;
  margin-top: var(--margin-top);
}

.tile,
.untile {
  background-color: var(--tile-color);

  aspect-ratio: 1;
  margin-top: 1px;
  margin-left: 1px;

  cursor: pointer;
}

.untile {
  background-color: var(--untile-color);
}

.tile-to-untile,
.untile-to-tile {
  animation-duration: .25s;
  margin-top: 1px;
  margin-left: 1px;
}

.tile-to-untile {
  animation-name: tile-to-untile;
}

@keyframes tile-to-untile {
  from {
    background-color: var(--tile-color);
  }

  to {
    background-color: var(--untile-color);
  }
}

.untile-to-tile {
  animation-name: untile-to-tile;
}

@keyframes untile-to-tile {
  from {
    background-color: var(--untile-color);
  }

  to {
    background-color: var(--tile-color);
  }
}

.restart-p1 {
  animation-duration: .5s;
  animation-name: restart-p1;
}

@keyframes restart-p1 {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(100vw, 0);
  }
}

.restart-p2 {
  animation-duration: .5s;
  animation-name: restart-p2;
  animation-direction: reverse;
}

@keyframes restart-p2 {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(-100vw, 0);
  }
}