body {
  background: #111;
  color: #eee;
  height: 100%;
  width: 100%;
  font-family: Arial;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

a {
  color: #7777FF;
  text-decoration: none;
}

body.combat {
  background: #311;
}

body.explore {
  background: #111;
}

body.eaten {
  background: #500;
}

button {
  background: #222;
  color: #eee;
}

#selector-combat {
  display: none;
}

.active-button {

}

.inactive-button {
  background: #111;
}

.disabled-button {
  background: repeating-linear-gradient(
    45deg,
    #111,
    #111 10px,
    #622 10px,
    #622 20px
    );
}

.stat-button {
  width: 100px;
  height: 50px;
  font-size: 18px;
  user-select: none;
}

.compass-button {
  width: 100px;
  height: 100px;
  font-size: 18px;
  user-select: none;
}

.action-button {
  width: 100px;
  height: 100px;
  font-size: 18px;
  user-select: none;
}

.combat-button {
  width: 200px;
  height: 50px;
  font-size: 18px;
  user-select: none;
}

.eaten-button {
  width: 200px;
  height: 50px;
  font-size: 18px;
  user-select: none;
}

#combat-desc {
  width: 200px;
  height: 400px;
  background: #222;
}

.dialog-button {
  width: 300px;
  height: 75px;
  font-size: 18px;
  user-select: none;
}

#dialog {
  list-style-type: none;
}

#combat {
  list-style-type: none;
}

#eaten {
  list-style-type: none;
}

#log {
  background: #222;
  width: 100%;
  height: 100%;
  flex: 3;
  overflow: auto;
}

.stats {
  float: right;
  flex: 1;
}

#player-stats {
  height: 65%;
}

#foe-stats {
  display: none;
  height: 50%;
}

.stat-line {

}

#game-and-stats {
  margin: auto;
  height: 500px;
  width: 700px;
  display: flex;
}

#footer {
  width: 500px;
  margin: auto;
}

.selector {
  display: flex;
}

#game {
  display: none;
}

#create {
  color: #eee;
  padding: 25px;
  text-align: center;
}

#character-form-list {
  margin: auto;
  list-style-type: none;
}

#character-form {
  font-size: 20pt;
}

.pref-radio {
  display: none;
}

.pref-radio + label {
  color: #666;
  width: 150px;
}

.pref-gray {
  background: #111 !important;
  color: #333 !important;
}

.pref-radio:checked + label.pref-disable {
  background: #711;
  color: #eee;
}

.pref-radio:checked + label.pref-avoid {
  background: #a41;
  color: #eee;
}

.pref-radio:checked + label.pref-enable {
  background: #3a3;
  color: #eee;
}

.pref-radio:checked + label.pref-prefer {
  background: #44a2c7;
  color: #eee;
}

.pref-select {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pref-list {
  text-align: center;
  margin: auto;
  user-select: none;
}

.pref-type {
  width: 150px;
}