stroll/style.css

body {
  background: #eee;
  font-family: Arial;
}

.game-area {
  display: flex;
  margin: auto;
}

@media (max-aspect-ratio: 1.2){
  .game-area {
    width: 100%
  }
}

@media (min-aspect-ratio: 16/9){
  .game-area {
    width: 75%
  }
}

#log-area {
  flex: 3;
}

#log {
  height: 600px;
  overflow: auto;
  background-color: #fff;
}

.stat-header-self {
  font-weight: bold;
  font-size: 150%;
  min-width:250px;
}

.stat-header {
  font-weight: bold;
  font-size: 150%;
  min-width:130px;
}

.stat-line {
  font-weight: normal;
  font-size: 12pt;
}

.stat-container {
  display: none;
  flex-wrap: wrap;
  flex-direction: column;
  text-align: right;
  flex: 1;
}

.button-container {
  flex-wrap: wrap;
  max-width: 300px;
  height: 400px;
  flex: 2;
}

#action-panel {
  display: none;
}

#option-panel {
  display: flex;
}

.option-button {
  font-size: 20px;
  width: 120px;
  height: 75px;
}

.option-form {
  font-size: 16px;
  width: 300px;
  height: 100px;
}
.action-button {
  font-size: 24px;
  width: 120px;
  height: 75px;
}