typingfreaks/dist/style.css

#container {
  --base-color: white;
  --highlight-color: red;

  position: relative;
  color: var(--base-color);
  height: 450px;
  width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

#container > div {
  display: grid;
  position: absolute;
  height: 100%;
  width: 100%;
}

#loading {
  align-items: center;
  justify-items: center;
  transition: opacity 0.5s;
}

#loading.finished {
  opacity: 0;
}

#background {
  background-color: black;
}

#background div {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s linear;
}

#background div.show {
  opacity: 1;
}

.kana {
  display: inline-block;
  position: relative;
  white-space: pre;
}

.kana::after {
  display: inline-block;
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--highlight-color);
  font-weight: bold;
  overflow: hidden;
  width: 0px;
  transition: width 0.1s;
}

.kana.half::after {
  width: 50%;
}

.kana.full::after {
  width: 100%;
}

.romaji {
  display: inline-block;
}

.romaji.error {
  animation-name: pulse;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

@keyframes pulse {
  0% {
    transform: scale(1, 1)
  }
  50% {
    transform: scale(2, 2)
  }
  100% {
    transform: scale(1, 1)
  }
}

.progress-bar {
  position: relative;
  height: 5px;
}

.progress-bar .bg {
  position: absolute;
  width: 100%;
  height: 5px;
  background-color: var(--base-color);
  opacity: 0.5;
}

.progress-bar .shade {
  position: absolute;
  height: 5px;
  background-color: var(--base-color);
  animation-timing-function: linear;
  animation-play-state: paused;
}

@keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.level-control.waiting span {
  opacity: 0.5;
}

.level-control.waiting .romaji {
  color: transparent;
}