body {
  background-color: #f9f9f9;
  padding: 20px;
  font-family: sans-serif;
}

.game-config-editor h1 {
  text-align: center;
}

.game-config-editor .heading,
.menu .heading {
  font-size: x-large;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

.game-config-editor textarea {
  background-color: transparent;
  border: 1px solid black;
  display: block;
  margin: auto;
  min-width: 50%;
  max-width: 500px;
  font-size: x-large;
  line-height: 150%;
}

.game-config-editor input[type="number"] {
  background-color: transparent;
  border: 1px solid black;
  display: block;
  margin: auto;
  font-size: x-large;
}

.game-config-editor button,
.menu button {
  display: block;
  margin: auto;
  margin-top: 30px;
  font-size: large;
  border-radius: 5px;
  padding: 5px 15px;
}

.game-border-container {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}

.game-border-container .game-border {
  display: inline-block;
  border: 1px solid #aaaaaa;
  min-height: 500px;
}

.game {
  display: flex;
  justify-content: center;
  margin: 50px;
}

.game .scores-sidebar {
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin-right: 30px;
}

.game .scores-sidebar .scores-sidebar-turn-indicator {
  font-size: xx-large;
  text-align: center;
  margin-bottom: 20px;
}

.game .scores-sidebar .scores-sidebar-scores-heading {
  font-size: x-large;
  text-align: center;
  margin-bottom: 5px;
}

.game .scores-sidebar table {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  font-size: x-large;
}

.game .scores-sidebar td {
  padding: 5px 20px;
}

.game .scores-sidebar tr.current-player {
  background-color: #5ab1dc;
}

.game .scores-sidebar tr:not(.current-player) {
  background-color: #b1cedc;
}

.game .main-interface {
  padding-top: 50px;
  width: 600px;
}

.game .main-interface .prompt {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 20px;
  margin-bottom: 20px;
  min-height: 150px;
  font-size: x-large;
  text-align: center;
  vertical-align: middle;
}

.game .main-interface .prompt.covered {
  background-color: #aaaaaa;
}

.game .main-interface .prompt.covered:before {
  content: "??????????";
}

.game .main-interface .prompt.visible {
  background-color: #c9e9d8;
}

.game .main-interface .timer {
  position: relative;
  background-color: #dc7070;
  height: 50px;
}

.game .main-interface .timer .timer-remaining-bar {
  background-color: #70dc70;
  height: 100%;
}

.game .main-interface .timer .timer-remaining-text {
  position: absolute;
  top: 0px;
  right: 7px;
  height: 100%;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 40px;
}

.game .main-interface .turn-state-controls {
  height: 100px;
}

.game .main-interface .turn-state-controls .turn-state-controls-message {
  padding-top: 20px;
  text-align: center;
  font-size: x-large;
}

.game .main-interface .turn-state-controls .turn-state-controls-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}

.game .main-interface .turn-state-controls button {
  font-size: large;
  border-radius: 5px;
  padding: 5px 15px;
  margin-left: 10px;
  margin-right: 10px;
}

.game .main-interface .turn-state-controls button.start-button {
  width: 100%;
}