#app {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.game {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  outline: none;
}

.grid {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-direction: column;
}

.grid-row {
  display: flex;
  flex-direction: row;
}

.grid-square {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;

  background-color: #fafafa;
}

.grid-image {
  position: absolute;
}

.emoji-subject {
  font-size: 55px;
}

.emoji-word {
  font-size: 20px;
  font-family: mono, Courier, monospace;
}

.emoji-word.desc {
  font-weight: bold;
}

.emoji-word.baba, .you {
  color: #e64b6e;
}

.wall, .stop {
  color: #4d561d;
}

.rock, .push {
  color: #c79c42;
}

.flag, .win {
  color: #d1d134;
}

.bush {
  color: #33352d;
}

.grass {
  color: #33352d;
}

.water, .sink, .melt {
  color: #519ad5;
}

.lava, .hot {
  color: #ed9d4c
}

.skull {
  color: #5a2b1d;
}

.violet {
  color: #948cd6;
}

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

#status-word {
  font-size: 50px;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.controls li {
  padding: 3px;
}

.controls .controls-explanation {
  padding-left: 8px;
}

.controls .key {
  font-weight: bold;
  font-family: mono, Courier, monospace;
  background-color: white;

  border: 1px solid #eee;
  border-bottom: 6px solid #666;
  border-left: 4px solid #999;
  border-radius: 0.2em;

  padding-left: 4px;
  padding-right: 4px;
  margin-bottom: 10px;
}