:root {
  font-size: 500%;
  font-family: 'EB Garamond'; 
  /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
}

.wrapper {
  padding: 0.5rem;
  display: grid; 
  grid-template-columns: repeat(1,1fr);
  column-gap: 0rem;
  justify-content: center;
  align-items: center;

}

body {
  background: linear-gradient(270deg, #f61772, #fcadd4);
  background-size: 400% 400%;
  margin-top: 3rem;



  /* display: flex; */
  /* justify-content: center; */
}

div {
  height: 2.3rem;
}

span:hover {
  color: #fe5892; /* Color change on hover */
  transform: rotateY(360deg);

  /* animation-name: wenden; */

}



.longtext {
  vertical-align: middle;
}


h2 {
  /* justify-self: center; */
  font-size: 0.5rem;
  line-height: 0.6rem;
  font-weight: 400;
  text-align: center;
  
  span {
    animation-name: my-pumpen;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(linear(2, 0.75 25%, 1));
    animation-direction: alternate;
  }



  /* font-variation-settings: 'slnt'-2; */
}
#zitat {
  color: rgb(2, 2, 2)
}


@keyframes my-pumpen {
  from { font-size: 0.6; font-weight: 400; }
  to { font-size: 0.6; font-weight: 800;}
  /*font-weight: <weight>*/
}

@keyframes wenden {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(90deg);}
  /*font-weight: <weight>*/
}