#timer {
  color: #39e079;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 900px;
}

.typing-container {
  position: relative;
  max-width: 900px;
}

#typing-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#words-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 1.5rem;
  line-height: 1.6;
  user-select: none;
  letter-spacing: 0.05em;
}

.word {
  border-bottom: 2px solid transparent;
  display: flex;
  margin-bottom: 5px;
  margin-right: 5px;
}

.word.active {
  border-bottom: 2px solid #39e079;
}

#words-container span {
  font-size: 1.5rem;
  transition: color 0.2s;
  border-bottom: 2px solid transparent;
}

.correct {
  color: #39e079;
}

.incorrect {
  color: #ca4754;
  text-decoration: underline;
}

.space.correct {
  background-color: transparent;
}

.space.incorrect {
  background-color: rgba(202, 71, 84, 0.3);
  border-bottom: 2px solid #ca4754;
}

button.active {
  color: #39e079;
}