:root {
  --tileSize: 100px;
  --gapSize: 10px;
  --borderSize: 2px;
  --tileColor: darkcyan;
  --borderColor: orange;
  --fontColor: black;
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background-color: var(--tileColor);
}

.board {
  display: grid;
  grid-template-columns: repeat(4, var(--tileSize));
  grid-template-rows: repeat(4, var(--tileSize));
  grid-gap: var(--gapSize);
  border: var(--gapSize) var(--borderColor) solid;
  background-color: var(--borderColor);
}

.tile {
  display: grid;
  place-items: center;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 2em;
  color: var(--fontColor);
  user-select: none;
  background-color: var(--tileColor);
  transition: background-color .5s;
}

.zero {
  border: var(--borderSize) var(--tileColor) solid;
  transition: background-color .5s;
}