html {
  font-size: 62.5%;
}

body {
  text-align: center;
  font-size: 7rem;
  background: #d9eeff;
  color: #0b3454;
  font-family: 'Space Mono', monospace;
}

#title {
  font-weight: 700;
}

#title,
#reset {
  font-size: 5rem;
  margin: 3rem 0;
}

.row,
.grid {
  display: flex;
}

#board {
  display: inline-block;
}

.row,
.grid {
  justify-content: center;
  align-items: center;
}

.grid {
  font-family: 'Radio Canada', sans-serif;
  width: 15rem;
  height: 15rem;
  background: #1a659e;
  margin: .3rem;
  border-top: .8rem solid #2487d3;
  border-right: .8rem solid #0d4066;
  border-bottom: .8rem solid #0b3454;
  border-left: .8rem solid #004e89;
}

.grid:hover {
  background: linear-gradient(135deg, #266ea5 10%, #0a4b7c 80%);
}

#reset {
  display: block;
  font-size: 3rem;
  color: #ff6b35;
}