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;
  display:none;
}

#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;
}

.preset-selector {
  height: 25px;
}

.option-container {
  margin: auto;
}

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

#action-panel {
  display: none;
}

.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;
}

#victim-table {
  margin: auto;
  width: 80%;
}

.victim-table-cell {
  width: 10%;
}

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

input[type="radio"]:checked ~ .reveal-if-active,
input[type="checkbox"]:checked ~ .reveal-if-active {
  opacity: 1;
  max-height: 200px; /* little bit of a magic number :( */
  overflow: visible;
}

.flex-outer li,
.flex-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 120px;
  max-width: 220px;
}

.flex-outer > li > label + *,
.flex-inner {
  flex: 1 0 220px;
}

.has-tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}