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

html, body {
  margin: 0;
  background-color: red;
}

body {
  display: grid;
  justify-items: center;
  align-items: center;
  height: 100vh;
}

.wrapper {
  margin-top: -100px; 
  position: relative;
  font-size: 48rem;
  font-family: 'MillingTriplexTrialVAR';
  display: flex;
  justify-content: center;
  align-items: center;
}

.letter {
  position: absolute;
  color: white;
  opacity: 0; 
  animation: fadeInOut 3s; 
}

.letter1 {
  animation-delay: 0s;
  
}

.letter2 {
  animation-delay: 2s;
}

.letter3 {
  animation-delay: 4s;
}

.letter4 {
  animation-delay: 6s;
}

.letter5 {
  animation-delay: 8s;
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0; 
    font-variation-settings: "wght" 100;

  }
  50% {
    opacity: 1;
    font-variation-settings: "wght" 500;
  }
}