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

h1 {
  justify-self: center;
  color: #FF352A;
  margin: -40px;
  font-size: 1000%;
  font-variation-settings: 'wdth' 75, 'wght' 700;
  animation: my-anim3 6s infinite alternate;
  transition: all .3s ease-out;
}

h2 {
  justify-self: center;
  color: #1D1D1D;
  margin: -40px;
  font-size: 1000%;
  font-variation-settings: 'wdth' 75, 'wght' 700;
  animation: my-anim3 6s infinite alternate;
  transition: all .3s ease-out;
}

h3 {
  justify-self: center;
  color: #FFC5F4;
  margin: -40px;
  font-size: 1000%;
  font-variation-settings: 'wdth' 75, 'wght' 700;
  animation: my-anim3 6s infinite alternate;
  transition: all .3s ease-out;
}

h4 {
  justify-self: center;
  color: #FF352A;
  margin: -40px;
  font-size: 1000%;
  font-variation-settings: 'wdth' 75, 'wght' 700;
  animation: my-anim3 6s infinite alternate;
  transition: all .3s ease-out;
}

h5 {
  justify-self: center;
  color: #1D1D1D;
  margin: -40px;
  font-size: 1000%;
  font-variation-settings: 'wdth' 75, 'wght' 700;
  animation: my-anim3 6s infinite alternate;
  transition: all .3s ease-out;
}

h6 {
  justify-self: center;
  color: #FFC5F4;
  margin: -40px;
  font-size: 1000%;
  font-variation-settings: 'wdth' 75, 'wght' 700;
  animation: my-anim3 6s infinite alternate;
  transition: all .3s ease-out;
}

@keyframes my-anim3 {
  from {font-variation-settings: 'wdth' 100, 'wght' 450;}
  to {font-variation-settings: 'wdth' 75, 'wght' 450;}
}

h1:hover {
  animation: my-anim3 0.2s infinite alternate;
  font-size: 1500%;
}

h2:hover {
  animation: my-anim3 0.2s infinite alternate;
  font-size: 1500%;
}

h3:hover {
  animation: my-anim3 0.2s infinite alternate;
  font-size: 1500%;
}

h4:hover {
  animation: my-anim3 0.2s infinite alternate;
  font-size: 1500%;
}

h5:hover {
  animation: my-anim3 0.2s infinite alternate;
  font-size: 1500%;
}

h6:hover {
  animation: my-anim3 0.2s infinite alternate;
  font-size: 1500%;
}