:root {
  font-size: 200%;
  background-color: black;
  text-align: center;
  font-family: 'muller next'; /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
}

body {
  height: 100vh;
  display:flex;
  line-height: 55px;
  justify-content: center;
  align-items: center;
  letter-spacing: 1px;
  text-align: left;
  font-size: 200%;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  transform: rotate(-180deg);
  /* letter-spacing: 200px; */
}

.prima {
  transform-origin: 50% 50%;
  animation-name: animation1;
  animation-duration: 1000ms; /* Dauer immer ein mehrfaches von 500ms */
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

@keyframes animation1 {
  from { transform: scale(1); font-variation-settings: 'wdth' 900, 'wght' 900;}
  to { transform: scale(4); font-variation-settings: 'wdth' 100, 'wght' 10;}
}

.seconda {
  transform-origin: 50% 50%;
  animation-name: animation2;
  animation-duration: 1000ms; /* Dauer immer ein mehrfaches von 500ms */
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

@keyframes animation2 {
  from { transform: scale(1); font-variation-settings: 'wdth' 900, 'wght' 10;}
  to { transform: scale(4); font-variation-settings: 'wdth' 100, 'wght' 900;}
}