@font-face {
  font-family: 'D-DIN';
  src: url(../fonts/d-din/D-DINCondensed-Bold.otf) format('truetype');
  font-stretch: condensed;
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'D-DIN';
  src: url(../fonts/d-din/D-DIN-Bold.otf) format('truetype');
  font-stretch: normal;
  font-weight: bold;
  font-style: normal;
}

html {
  font-size: 6.5vmin;
}

.main {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.main > * + * {
  margin-left: 2rem;
}

.proun-words {
  font-family: 'D-DIN';
  font-weight: bold;
  color: #0000ff;
  font-size: 1rem;
}

.initial-word {
  writing-mode: vertical-lr;
  text-orientation: upright;
  vertical-align: top;
  display: inline-block;
}

.letter {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 1000ms;
  transition-timing-function: ease-out;
}
.visible .letter {
  opacity: 1;
  transition-timing-function: ease-in;
}