: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: 100px;
  justify-content: center;
  align-items: center;
  display:flex;
  /* transform: rotate(-90deg); */
}

h1 {
  /* justify-self: center; */
  color: white;
  line-height: 200px;
  margin: -40px;
  font-size: 600%;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  animation: animation 6s infinite alternate;
  transition: all .3s ease-out;
}

h2 {
  /* justify-self: center; */
  color: white;
  margin: -40px;
  font-size: 200%;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  animation: animation 6s infinite alternate;
  transition: all .3s ease-out;
}

h3 {
  /* justify-self: center; */
  color: white;
  margin: -40px;
  font-size: 200%;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  animation: animation 6s infinite alternate;
  transition: all .3s ease-out;
}

h4 {
  /* justify-self: center; */
  color: white;
  margin: -40px;
  font-size: 200%;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  animation: animation 6s infinite alternate;
}

@keyframes animation {
  from {font-variation-settings: 'wdth' 100, 'wght' 900;}
  to {font-variation-settings: 'wdth' 900, 'wght' 900;}
}


h1:hover {
  animation: animation 0.2s infinite alternate;
  font-size: 1500%;
  line-height: 500px;
}

h2:hover {
  animation: animation 0.2s infinite alternate;
  font-size: 1500%;
  line-height: 500px;
}

h3:hover {
  animation: animation 0.2s infinite alternate;
  font-size: 1500%;
  line-height: 500px;
}

h4:hover {
  animation: animation 0.2s infinite alternate;
  font-size: 1500%;
  line-height: 500px;
}