:root {
  
}

body {
  background-color: black; 
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100vh;
}

.retro-text {
  font-family: 'Roboto Flex', sans-serif;
  font-variation-settings: "wght" 1000;
  font-size: 250px;
  line-height: 0.0;
  font-weight: 700;
}


.layer1 {
  color: white; 
  animation: wght 1s infinite alternate-reverse; animation-delay: 0.6s
}

.layer2 {
  color: white; 
  animation: wght 1s infinite alternate-reverse; animation-delay: 0.5s
}

.layer3 {
  color: white;
  animation: wght 1s infinite alternate-reverse; animation-delay: 0.4s
}

.layer4 {
  color: white;
  animation: wght 1s infinite alternate-reverse; animation-delay: 0.3s
}

.layer5 {
  color: white;
  animation: wght 1s infinite alternate-reverse; animation-delay: 0.2s
}

.layer6 {
  color: white; 
  animation: wght 1s infinite alternate-reverse; animation-delay: 0.1s
}

@keyframes wght {
  from {font-variation-settings: "wght" 900; color: rgba(255, 255, 255, 0)}
  to {font-variation-settings: "wght" 900; line-height: 2; color: rgba(255, 255, 255, 1)}
  }