@font-face {
  font-family: 'UTMorph-variable';
  src: url('fonts/UTMorph-variable.woff2') format('woff2');
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: red;
}

.wrapper {
  font-family: 'UTMorph-variable';
  font-size: 10rem;
  line-height: 0.8;
  text-align: center; 
}

.line {
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center; 
}

.eins {
  color: red;
  animation: innerAnimation 4s infinite ease-in-out;
}

.zwei {
  color: red;
  animation: innerAnimation 4s infinite ease-in-out;
  animation-delay: 0.25s;
}

.drei {
  color: red;
  animation: innerAnimation 4s infinite ease-in-out;
  animation-delay: 0.5s;
}

.vier {
  color: red;
  animation: innerAnimation 4s infinite ease-in-out;
  animation-delay: 0.75s;
}

.mitte {
  color: red;
  animation: innerAnimation 4s infinite ease-in-out;
  animation-delay: 1s;
}

@keyframes innerAnimation {
  0%, 100% {
    font-variation-settings: 'PSTV' 100;
    color: red;
  }
  25% {
    color: white;
  }
  50% {
    color: red;
  }
  0.75s {
    color: white;
  }
}