:root {
  font-family: 'DynaPuff'; /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
  font-size: 200px;
}

.grid {
  background-color: white;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: 100px;
  /*  grid-gap: 10px;
  /* justify-items: center ;
  align-items: center;   */
   
}

.flex1 {
  display: flex;
  /* background-color: rgb(200, 255, 0); */
  justify-content: start;
  align-items: start; 
  animation: my-anim2 1.5s infinite alternate;

}

.flex2 {
  display: flex;
  /* background-color: rgb(200, 255, 0); */
  justify-content: center;
  align-items: start; 
  animation: my-anim1 1s infinite alternate;

}
.flex3 {
  display: flex;
  /* background-color: coral; */
  justify-content: end;
  align-items: start; 
  animation: my-anim1 2s infinite alternate;
  
}

.flex4 {
  display: flex;
  /* background-color: coral; */
  justify-content: start;
  align-items: start; 
  animation: my-anim2 0.5s infinite alternate;
  
}

.flex5 {
  display: flex;
  /* background-color: coral; */
  justify-content: start;
  align-items: start; 
  animation: my-anim1 2s infinite alternate;
  
}

@keyframes my-anim1 {
  from {font-variation-settings: 'wdth' 100, 'wght' 400;}
  to {font-variation-settings: 'wdth' 75, 'wght' 700;}
  from {justify-content: start;}
  to {justify-content: end;}
}

@keyframes my-anim2 {
  from {font-variation-settings: 'wdth' 100, 'wght' 400;}
  to {font-variation-settings: 'wdth' 100, 'wght' 700;}
  from {justify-content: start;}
  to {justify-content: center;}
}