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

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

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

.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 {
  text-align: center;
}

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