styles.css

/* Layout */

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  padding: 1em;
}

.testResults {
  width: 33em;
}

.grid {
  width: 12.9em;
  letter-spacing: 10px;
}

.grid .arrowKeysPrompt {
  letter-spacing: 0px;
  font-size: large;
}

.btn-group {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.btn-group button {
  display: block;
  width: 100%;
  border: 0px solid #ffffff;
  padding: 0.3em 1.4em;
}

/* Colors and Styles */

body {
  background-color: #2e9bb6;
}

.container {
  font-family: Arial, Helvetica, sans-serif;
}

.testResults {
  border-radius: 1em;
  padding: 1em 1em;
  background-color: #02034f;
  color: white;
}

.grid {
  border-radius: 1em;
  padding: 1em 1em;
  background-color: #2a5d65;
  color: white;
  font-family: monospace;
  font-size: xx-large;
}

.btn-group button {
  border-radius: 10em;
  cursor: pointer;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
}

.btn-group .selectedButton {
  background-color: #a2bcff;
}

/* Darker color than .selectedButton*/
.btn-group button.selectedButton:hover {
  background-color: #83a4f7;
}

.btn-group button {
  background-color: #e7eeff;
}

/* Darker color than .button*/
.btn-group button:hover {
  background-color: #cfdbf8;
}