:root {
  font-size: 300%;
  background-color: rgb(255, 255, 255);
  text-align: center;
  font-family: 'balken'; /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
}

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

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  font-size: 60px;
}

.flex-container div {
height: flex;
}


.item1 {
  color:white;
  animation: my-super-slant 2s infinite alternate ease-in-out;
  animation-delay: 0.6s;
  /* display: flex; */
  background-color:black;
  padding: 10px;
  margin: 8px;
}

.item2 {
  color:white;
  animation: my-super-slant 2s infinite alternate ease-in-out;
  animation-delay: 0.10;
  /* display: flex; */
  background-color:black;
  padding: 10px;
  margin: 8px;
}

.item3 {
  color:white;
  animation: my-super-slant 2s infinite alternate ease-in-out;
  animation-delay: 0.6s;
  /* display: flex; */
  background-color:black;
  padding: 10px;
  margin: 8px;
}

.item4 {
  color:white;
  animation: my-super-slant 2s infinite alternate ease-in-out;
  animation-delay: 0.10s;
  /* display: flex; */
  background-color:black;
  padding: 10px;
  margin: 8px;
}

.item5 {
  color:white;
  animation: my-super-slant 2s infinite alternate ease-in-out;
  animation-delay: 0.6s;
  /* display: flex; */
  background-color:black;
  padding: 10px;
  margin: 8px;
}

.item6 {
  color:white;
  animation: my-super-slant 2s infinite alternate ease-in-out;
  animation-delay: 0.10s;
  /* display: flex; */
  background-color:black;
  padding: 10px;
  margin: 8px;
}

.item7 {
  color:white;
  animation: my-super-slant 2s infinite alternate ease-in-out;
  animation-delay: 0.6s;
  /* display: flex; */
  background-color:black;
  padding: 10px;
  margin: 8px;
}
.item8 {
  color:white;
  animation: my-super-slant 2s infinite alternate ease-in-out;
  animation-delay: 0.10s;
  /* display: flex; */
  background-color:black;
  padding: 10px;
  margin: 8px;
}
.item9 {
  color:white;
  animation: my-super-slant 2s infinite alternate ease-in-out;
  animation-delay: 0.6s;
  /* display: flex; */
  background-color:black;
  padding: 10px;
  margin: 8px;
}
.item10 {
  color:white;
  animation: my-super-slant 2s infinite alternate ease-in-out;
  animation-delay: 0.10s;
  /* display: flex; */
  background-color:black;
  padding: 10px;
  margin: 8px;
}

.item11 {
  color:white;
  animation: my-super-slant 2s infinite alternate ease-in-out;
  animation-delay: 0.6s;
  /* display: flex; */
  background-color:black;
  padding: 10px;
  margin: 8px;
}

.item12 {
  color:white;
  animation: my-super-slant 2s infinite alternate ease-in-out;
  animation-delay: 0.10s;
  /* display: flex; */
  background-color:black;
  padding: 10px;
  margin: 8px;
}

.item13 {
  color:white;
  animation: my-super-slant 2s infinite alternate ease-in-out;
  animation-delay: 0.6s;
  /* display: flex; */
  background-color:black;
  padding: 10px;
  margin: 8px;
}

@keyframes my-super-slant{
  from {  font-variation-settings: "wdth" 0; }
  to {  font-variation-settings:  "wdth" 100; }
}