:root {
  font-size: 200%;
  background-color: black;
line-height: 1;
text-align: center;
text-transform:uppercase;
}

body{
  margin: -40px 0;
}

.box1{
  display:grid;
  grid-template-columns: repeat(60, 42px);
  grid-template-rows: repeat(2, 267px);
  justify-items: top;
  grid-auto-flow: column; 
  align-items: top;
  background-color: rgb(0, 0, 0);
  /* height: 55.5vh; */
} 


h1 {
  font-family: "GT-Flexa-VF"; /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
  color: rgb(255, 255, 255);
  animation: my-growth 4s ease-in infinite alternate;
  line-height: 0.7;
  text-wrap: wrap;
}

.myrotation{
  display: inline-block;
  animation: my-rotation 4s ease-in infinite alternate;
  line-height: 0;
}


@keyframes my-growth {
  from {
    font-variation-settings:"wdth" 25, "wght" 120;
  }
  20% {
    font-variation-settings:"wdth" 25, "wght" 120;
  }
  88% {
    font-variation-settings:"wdth" 200, "wght" 180;
  }
  to {
    font-variation-settings:"wdth" 200, "wght" 180;
  }
}


@keyframes my-rotation {
  from {
    transform:rotate(0deg);
    color: rgb(94, 255, 0);
  }
  20% {
    transform:rotate(0deg);
    color: rgb(94, 255, 0);
  }
 88% {
    transform:rotate(180deg) translateY(6px);
    color: rgb(94, 255, 0);
  }
  to {
    transform: rotate(180deg) translateY(6px);
    color: rgb(94, 255, 0);
    
  }
}