grit.css

#words .active {
  text-decoration: underline;
  color: blue;
}

#words .active.error {
  color: red;
}

#words .correct.error {
  color: #AA0000;
}

#words .error {
  color: #FF3333;
}

#words.finished {
  color: #006600;
}

.symbols > div {
  display: inline-block;
  text-align: center;
  vertical-align: center;
}

.symbols .symbol-enable {
  width: 1.8em;
  height: 1.8em;
  margin: 2px;
  border-color: gray;
  border-style: solid;
  border-width: 1px;
  vertical-align: center;
}

.symbols .low-stat {
  color: red;
}

.symbols .letter-accuracy {
  margin: 2px;
}

.symbols div.active {
  background-color: #AAAAFF;
}

.button {
  background-color: #CCCCCC;
  border-color: gray;
  border-style: solid;
  border-width: 1px;
  padding: 4px;
  margin: 4px;
  cursor: pointer;
  border-radius: 6px;
}

.button-wrapper {
  margin: 4px;
}

#wrong-letter {
  color: red;
  margin-left: 10px;
  font-size: 120%;
}

#twiddler-container {
  display: flex;
}

#twiddler-display {
  display: flex;
  flex-direction: column;
}

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

.twiddler-cell {
  width: 10px;
  height: 18px;
  margin: 4px;
  border-radius: 4px;
  background-color: #CCCCCC;
}
.twiddler-row:first-child .twiddler-cell { height: 10px; }
.twiddler-row:first-child .twiddler-cell:nth-child(2) { margin-top: 12px; }
.twiddler-row:first-child .twiddler-cell:nth-child(3) { margin-top: 12px; }

#twiddler-display.hidden {
  display: none;
}
#twiddler-display.rotated .twiddler-cell {
  width: 18px;
  height: 10px;
}
#twiddler-display.rotated .twiddler-row:first-child .twiddler-cell { width: 10px; }
#twiddler-display.rotated .twiddler-row:first-child .twiddler-cell:nth-child(2) { margin-top: 4px; margin-left: 12px; }
#twiddler-display.rotated .twiddler-row:first-child .twiddler-cell:nth-child(3) { margin-top: 4px; margin-left: 12px; }

.twiddler-cell.active {
  background-color: blue;
}
#twiddler-display.new-character .twiddler-cell.active {
  background-color: purple;
}

#twiddler-display.rotated { flex-direction: row; }
#twiddler-display.rotated .twiddler-row { flex-direction: column-reverse; }

#twiddler-display.mirrored .twiddler-row { flex-direction: row-reverse; }

#twiddler-display.rotated.mirrored .twiddler-row { flex-direction: column; }

#twiddler-display.flipped { transform: scaleY(-1); }
#twiddler-display.rotated.flipped { transform: scaleX(-1); }

#dummy-input { margin-left: 6em; width: 3em; }
#dummy-input.hidden { display: none; }