body {
  font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;

  --button-gray: #d3d3d3;
  --button-dark-gray: color-mix(in srgb, var(--button-gray) 90%, black);
  --button-darker-gray: color-mix(in srgb, var(--button-gray) 75%, black);

  --correct: #3cb371;
  --in-word: #ffd700;
  --nowhere: #808080;
}

h1 {
  margin-bottom: 0;
}

h2 {
  margin-top: 0;
}

#game {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#board {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.row {
  display: flex;
}

.tile {
  width: 60px;
  height: 60px;
  border: 2px solid #d3d6da;
  margin: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  font-weight: bold;
}

#keyboard {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

button {
  margin: 2px;
  background: var(--button-gray);
  border: none;
  font-size: 18px;
  cursor: pointer;

  /*
  &:hover {
    background: var(--button-dark-gray);
  }
  &:active {
    background: var(--button-darker-gray);
  }
  */
}

.key {
  width: 40px;
  height: 50px;
  background: var(--button-gray);
}

[data-guess-color="correct"] {
  background: var(--correct);
}
[data-guess-color="in-word"] {
  background: var(--in-word);
}
[data-guess-color="nowhere"] {
  background: var(--nowhere);
}