:root {
font-family: "nickel-gothic-variable", sans-serif;  
}

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

.retro-text {
  font-size: 400px;
  line-height: 0.5;
}

.layer1 {
  color: #fdbe2d;
  display: inline-block;
  mix-blend-mode:difference;
  animation: wdth1 2s linear infinite alternate; 
}

.layer2 {
  color: #fdbe2d;
  display: inline-block;
  mix-blend-mode:difference;
  animation: wdth2 6s linear infinite alternate; 
}

.layer3 {
  color: #fdbe2d;
  display: inline-block;
  mix-blend-mode:difference;
  animation: wdth3 2s linear infinite alternate; 
}

@keyframes wdth1 {
  from {
    transform: translateX(-100vw); 
    font-variation-settings: "slnt" 0, "wdth" 0; letter-spacing: 20px;}
  
  to {
    transform: translateX(100vw);
    font-variation-settings: "slnt" 0, "wdth" 0; letter-spacing: 20px;}
  }


@keyframes wdth2 {
 from {
 transform: translateX(100vw); 
 font-variation-settings: "slnt" 0, "wdth" 100; letter-spacing: 20px;}
 
 to {
 transform: translateX(-100vw);
 font-variation-settings: "slnt" 100, "wdth" 0; letter-spacing: 20px; scale: 8;}
}

@keyframes wdth3 {
  from {
  transform: translateX(100vw); 
  font-variation-settings: "slnt" 0, "wdth" 0; letter-spacing: 20px;}
  
  to {
  transform: translateX(-100vw);
  font-variation-settings: "slnt" 0, "wdth" 0; letter-spacing: 20px;}
 }