.board {
  display: grid;
  height: 250px;
  width: 250px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border: 1px solid black;
  gap: 4px;
  padding: 4px;
  background-color: rgb(138, 138, 90);
}

.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 3rem;
  border: 1px solid grey;
  background: lightyellow;
  cursor: pointer;
}

.turn {
  text-align: center;
}

body {
  display: grid;
  justify-items: center;
  gap: 10px;
}

#restart-button, #start-button {
  background-color: rgb(25, 146, 212);
  border: 1px solid rgb(25, 146, 212);
  box-shadow: 0px 3px rgb(25, 146, 212);
  color:#FFFFFF;
  border-radius: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all 100ms linear;
  padding: 10px 30px;
  cursor: pointer;
}

#restart-button:hover, #start-button:hover {
  background-color: rgb(30, 100, 255);
  border: 1px solid rgba(black, .5);
  transition: all 100ms linear;
}

#restart-button:active, #start-button:active {
  background-color: blue;
  box-shadow: 0px 3px blue;
  border: 1px solid blue;
  transform: translateY(1px);
}

button.cell {
  transition: filter 180ms ease; 
}

button.cell:hover {
  filter: brightness(0.8);
}

button.cell:active {
  filter: brightness(0.7);
}