:root {
  font-size: 10vw;
  font-family: 'Bodoni Moda'; /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
  font-style: normal;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 9;
  
}

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

}

.s1 {
  color: white;
  justify-self: center;
  animation: my-anim1 1s infinite alternate ease-in-out;
}

.s2 {
  color: white;
  justify-self: center;
  animation: my-anim2 1s infinite alternate ease-in-out;
}

@keyframes my-anim1 {
  from { font-variation-settings: 'wght' 400, 'opsz' 5;}
  to { font-variation-settings: 'wght' 900, 'opsz' 100;}
  0% { transform: translateY(0);}
  50% { transform: translateY(-10px);}
  100% {transform: translateY(0);}
}

@keyframes my-anim2 {
  from { font-variation-settings: 'wght' 900, 'opsz' 100;}
  to { font-variation-settings: 'wght' 400, 'opsz' 5;}
  0% { transform: translateY(0);}
  50% { transform: translateY(-10px);}
  100% {transform: translateY(0);}
}