:root {
  font-family: 'Roboto Flex', sans-serif;
}

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

.retro-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  font-variation-settings: "wght" 1000;
  font-size: 250px;
  line-height: 0.5;
  font-weight: 700;
}


.layer1 {
  color: #12a3e7; 
  animation: wght 1.5s infinite alternate; animation-delay: 1.5s;
}

.layer2 {
  color: #25b046; 
  animation: wght 1.5s infinite alternate; animation-delay: 1.2s;
}

.layer3 {
  color: #fdbe2d;
  animation: wght 1.5s infinite alternate; animation-delay: 0.9s;
}

.layer4 {
  color: #ff8000;
  animation: wght 1.5s infinite alternate; animation-delay: 0.6s;
}

.layer5 {
  color: #e62011;
  animation: wght 1.5s infinite alternate;animation-delay: 0.3s;
}

.layer6 {
  color: white; 
  animation: wght 1.5s infinite alternate;
}

@keyframes wght {
  from {font-variation-settings: "wght" 1000; transform: scale(0); opacity: 0;}
  to {font-variation-settings: "wght" 700; }
  }