.letter-box {
  width: 50px;
  height: 50px;
  font-size: 24px;
  font-weight: bold;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  background-color: #fff;
}

#install-button {
  visibility: hidden;
  position: fixed;
  color: #FF8340;
  cursor: pointer;
  top: 14px;
  right: 80px;
  z-index: 99999999;
  width: 120px;
}

.correct {
  background-color: #6aaa64;
  color: #fff;
}

.present {
  background-color: #c9b458;
  color: #fff;
}

.absent {
  background-color: #787c7e;
  color: #fff;
}

.theme-container {
  opacity: 0;
  transition: opacity 0.6s ease-in;
}

.theme-container.visible {
  opacity: 1;
}

#keyboard {
  width: 100%;
  max-width: 500px;
  margin: auto;
}

.keyboard-key {
  font-weight: bold;
  font-size: 1rem;
  border-radius: 0.5rem;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.keyboard-key.key-pressed {
  transform: scale(0.95);
  background-color: #6c757d;
}

@media (max-width: 768px) {
.keyboard-key {
  font-weight: bold;
  font-size: 0.80rem;
  border-radius: 0.5rem;
  padding-right: 0.65rem !important;
  padding-left: 0.65rem !important;
}
}