* {font-family: Ariel, Helvetica, sans-serif;}

#game {
  text-align: center;
  width: 95vw;
  margin: auto auto;
}

#board {
  display: grid;
  width: 95vw;
  max-width: 75vh;
  height: 95vw;
  max-height: 75vh;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  margin: 0 auto;
}

.square {
  color: #555;
  cursor: pointer;
  font-weight: bold;
  font-size: 10vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row1, .row2 {border-bottom: 1vw solid #aaa;}
.col1, .col2 {border-right: 1vw solid #aaa;}

#result {
  font-size: 2em;
  font-weight: bold;
  margin: 0.5em 0;
}

.button {
  cursor: pointer;
  font-size: 2em;
  font-weight: bold;
  border: 0.15em solid #aaa;
  border-radius: 0.5em;
  background-color: #ddd;
  margin: 0.5em 0;
  padding: 2vw;
}

.winning_square {
  background-color: #ffd53d;
}

.button:active {
  background-color: #aaa;
}

@media (orientation: portrait){
    .square {
      font-size: 25vw;
    }

    .button, #result {
      font-size: 10vw;
    }

    .button {
      padding: 5vw;
    }
}