:root {
  --grid-cols: 40;
  --grid-rows: 20;
}

.game-title {
  text-align: center;
  margin-top: 2rem;
}

.game-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-block: 5rem;
}

.game-container > * + * {
  margin-top: 3rem;
}

.controls-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.controls-container > * + * {
  margin-left: 2rem;
}

.grid {
  display: grid;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  border: 1px solid black;
  width: 20px;
  height: 20px;
}