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

body {
  background: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  
  min-height: 100vh;
}

span {
  animation-name: foo;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

@keyframes foo {
  from {font-variation-settings: 'wdth' 75, 'wght' 400;}
  to {font-variation-settings: 'wdth' 100, 'wght' 700;}
  from {color: whitesmoke;}
  to {color: #1D1D1D;}
}

#s2 { animation-delay: 0.3s; }
#s3 { animation-delay: 0.6s; }
#s4 { animation-delay: 0.9s; }
#s5 { animation-delay: 1.2s; }
#s11 { animation-delay: 1.5s; }
#s22 { animation-delay: 1.8s; }
#s33 { animation-delay: 2.1s; }
#s44 { animation-delay: 2.4s; }
#s55 { animation-delay: 2.7s; }