:root {
  
}

body {
  background-color: #f5f1e7; 
  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: 160px;
  line-height: 0.5;
  font-weight: 700;
}


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

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

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

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

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

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

@keyframes wght {
  from {font-variation-settings: "wght" 1000; letter-spacing: 2px;}
  to {font-variation-settings: "wght" 700; letter-spacing: 100px; line-height: 1.2; font-size: 60px;}
  }