* {
  box-sizing: border-box;
}

body {
  text-align: center;
  background-color: #eeeeee;
}

.Row {
  display: flex;
  justify-content: center;
}

.Row-letter {
  margin: 2px;
  border: 2px solid rgba(0, 0, 0, 0.4);
  width: 40px;
  height: 40px;
  font-size: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-weight: bold;
}

.Game-keyboard {
  display: flex;
  flex-direction: column;
}

.Game-keyboard-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.Game-keyboard-button {
  margin: 2px;
  background-color: #cdcdcd;
  padding: 4px;
  text-transform: capitalize;
  border-radius: 4px;
  min-width: 25px;
  color: inherit;
  text-decoration: inherit;
  border: inherit;
  cursor: pointer;
}

.Game-keyboard-button:focus {
  outline: none;
}

.letter-correct {
  border: none;
  background-color: rgb(87, 172, 87);
  color: white;
}

.letter-elsewhere {
  border: none;
  background-color: #e9c601;
  color: white;
}

.letter-absent {
  border: none;
  background-color: rgb(162, 162, 162);
  color: white;
}