body {
  background-color: whitesmoke;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
h1,
h2,
.controls {
  display: flex;
  align-self: center;
  justify-self: center;
}

.gameboards {
  display: flex;
  justify-content: space-around;
}

#info-msg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 30px;
}

#player-board,
#cpu-board {
  display: grid;
  grid-template-columns: repeat(10, 30px);
  grid-template-rows: repeat(10, 30px);
  gap: 2px;
}

.cell {
  width: 30px;
  height: 30px;
  background: lightblue;
  border: 1px solid black;
  cursor: pointer;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
}

.cell.ship {
  background-color: red;
}

.cell.hit {
  background-color: green;
}
.miss {
  background-color: gray;
}