body {
  background-color: #012e40;
  /* Use a system font, if none are available use an available sans-sarif */
  font-family: Helvetica, sans-serif;
  text-align: center;
  color: #f2e3d5;
}
.board {
  margin: auto auto;
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  aspect-ratio: 1/1;
  width: 325px;
  border: 5px solid #f2e3d5;
}
.buttons-grid {
  margin: auto auto;
  justify-content: center;
  width: 325px;
  display: flex;
}
.sqr {
  width: 100%;
  aspect-ratio: 1/1;
  border: 3px solid #333333;
  font-size: 64px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3ca6a6;
}
.top {
  border-top: none;
}
.bottom {
  border-bottom: none;
}

.left {
  border-left: none;
}
.right {
  border-right: none;
}

button {
  max-width: 325px;
  margin: 0.5em auto;
  /* padding: 0.75em; */
  width: 100%;
  text-align: center;
  font-size: 1.25em;
  font-weight: bold;
  background-color: red;
  border-radius: 50px;
  color: #f2e3d5;
}

.hidden {
  display: none;
}