.game-area {
  border: thin solid lightgray !important;
  background-color: white !important;
  color: black !important;
  font-size: 1em !important;
  padding: 2em;
  box-shadow: 5px 5px 10px 2px gray;

  h1 {
    color: black;
    font-size: 2em;
  }

  h2 {
    color: black !important;
  }
}

.game_stats_area {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  margin-bottom: 2em;
}

.display {
  border: thick solid gray;
  box-shadow: 5px 5px 10px 2px gray;
  padding: 1em;
  text-align: center;

  .icon {
    font-size: 5em;
  }
  .label {
    font-size: 1.5em;
  }

}

.player {
  background-color: lightblue;
}

.computer {
  background-color: pink;
}

.winner {
  border-color: gold;
}

.tie {
  border-color: red;
}

.leaderboard {
  font-size: 1em;
  table {
    margin: 0.5em;
    border: thin solid lightgray;
    border-style: collapse;
    width: 100%;
  }

  th, td {
    border: thin solid lightgray;
    border-style: collapse;
  }

  th {
    color: darkblue;
    background-color: bisque;
  }

  td {
    text-align: center;
  }
}

.tournament_results {
  font-size: 5em;
  font-weight: bold;
  text-align: center;
}

fieldset {
  .field {
    margin: 0.2em;
  }

  input {
    width: auto !important;
    min-width: auto !important;
  }

  input[type=submit] {
    font-weight: bold;
    background-color: greenyellow;

  }

  input[type=reset] {
    background-color: purple;
    color: white;
  }
}