html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.board {
  width: 600px;
  height: 600px;
}

.board div {
  width: 100px;
  height: 100px;
  border: 1px #ccc dotted;
  margin: 5px;
  border-radius: 10%;
  background-color: #eee;
  display: inline-block;
}

.board div:hover {
  background-color: #ccc;
}

div.mine, div.mine:hover {
  background: no-repeat center/60% url("bomb.svg") crimson;
}

div.mine.hidden {
  background: #eee;
}

div.mine.hidden:hover {
  background: #ccc;
}

div.mark, div.mark:hover {
  background: no-repeat center/60% url("mark.svg") deepskyblue;
}

div.clear, div.clear:hover {
  background-color: white;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.board {
  width: 440px;
  height: 440px;
}

.board div {
  width: 75px;
  height: 75px;
  border: 1px #ccc dotted;
  margin: 2px;
  border-radius: 10%;
  background-color: white;
  display: inline-block;
}

.board div:hover {
  background-color: white;
}

div.mine, div.mine:hover {
  background: no-repeat center/60% url("bomb.svg") crimson;
}

div.hidden {
  background: #eee;
}

div.hidden:hover {
  background: #ccc;
}

div.marked, div.marked:hover {
  background: no-repeat center/60% url("mark.svg") deepskyblue;
}

Add css changes from solution
Add css changes from solution
