:root {
  font-size: 7vw;
  font-family: 'Sixtyfour Convergence'; /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
  
}

body {
  background-color: rgb(0, 0, 0);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

}

h2 {
  font-family: "Sixtyfour Convergence";
}

@font-palette-values --override-palette {
  font-family: "Sixtyfour Convergence";
  base-palette: 1;
  override-colors: 0 rgb(0 255 0);
}
.normal-palette {
  font-palette: --normal-palette;
  animation: my-anim2 1s infinite alternate ease-in-out;
  animation: loop 1s infinite;

}
.override-palette {
  font-palette: --override-palette;
  animation: my-anim1 1s infinite alternate ease-in-out;
  animation: loop 1s infinite;
}

span {display: inline-block}


@keyframes my-anim1 {
  from {  font-variation-settings: "BLED" 100, "SCAN" -53;}
  to {  font-variation-settings: "BLED" 100, "SCAN" 100;}
  0% { transform: translateY(0);}
  50% { transform: translateY(-10px);}
  100% {transform: translateY(0);}
}

@keyframes my-anim2 {
  from {  font-variation-settings: "BLED" 0, "SCAN" 100;}
  to {  font-variation-settings: "BLED" 100, "SCAN" -53;}
  0% { transform: translateY(0);}
  50% { transform: translateY(-10px);}
  100% {transform: translateY(0);}
}

@keyframes loop {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-50%);}
  }