button#shuffle::after {
  content: "Shuffle";
}

table#guesses_and_entry td {
  width: 3.5vw;
}
input.lock {
  display: none;
  text-align: center;
}
input.lock:checked + div > label::after {
  content: '\2744'; /* snowflake symbol */
}
input.lock + div > label::after {
  content: '\1f31e'; /* sun symbol */
}
input.lock + div {
  text-align: center;
}
input.lock + div > label {
  font-size: 4ex;
}
div.letter {
  width: 100%;
  height: 100%;
  text-align: center;
  border: solid black 1px;
}
div.letter.focused {
  background: yellow;
  border-color: goldenrod;
}
span.letter {
  width: 100%;
  font-size: 3ex;
  text-align: center;
  padding: 0;
}
input.lock:checked ~ div.letter {
  background: #ccf;
}

#submit_buttons, button {
  font-size: 2ex;
  margin: 1vw;
}

#available_letters button {
  font-size: 4ex;
  text-align: center;
  width: 12.5vw;
  margin: 2.5vw;
  background: lightgrey;
}
#available_letters button.unknown, #available_letters button.space {
  background: lightgrey;
}
#available_letters button.unknown.not_here, #available_letters button.not_here {
  background: grey;
}

#settings_toggle {
  display: none;
}
#settings_toggle_label {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 3ex;
}
#settings {
  display: none;
  background: lightgrey;
}
#settings_toggle:checked + #settings {
  display: block;
}

input:invalid {
  background-color: pink;
  border-color: #c00000;
}