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

body {
  background-color: #009b3a;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


#gridcontainer {
  display: grid;
  grid-template-columns: repeat(6, 16.6vw);
  grid-template-rows: repeat(3, 33.3vh);
  justify-items: center; 
  align-items: center; 
  position: absolute;
}

.textcontainer {
  display: flex;
  justify-content: center; 
  align-items: center;
  position: relative;
}


p {
  font-size: 30vh;
  line-height: 5vw;
  margin: 0;
  text-align: center;
  position: absolute;
  animation-name: schriftanimation;
  animation-duration: 4s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

@keyframes schriftanimation {
  0% { font-variation-settings: "SCAN" -53, "BLED" 0, "XELA" -100, "YELA" -100;}
  100% { font-variation-settings: "SCAN" 100, "BLED" 100, "XELA" 100, "YELA" 100;}
}

.verzoegerung1 {
  animation-delay: 0.2s;
}

.verzoegerung2 {
  animation-delay: 0.4s;
}

.verzoegerung3 {
  animation-delay: 0.6s;
}

.verzoegerung4 {
  animation-delay: 0.8s;
}

.verzoegerung5 {
  animation-delay: 1s;
}

.verzoegerung6 {
  animation-delay: 1.2s;
}

.verzoegerung7 {
  animation-delay: 1.4s;
}

.verzoegerung8 {
  animation-delay: 1.6s;
}

.verzoegerung9 {
  animation-delay: 1.8s;
}

.verzoegerung10 {
  animation-delay: 2s;
}

.verzoegerung11 {
  animation-delay: 2.2s;
}

.verzoegerung12 {
  animation-delay: 2.4s;
}

.verzoegerung13 {
  animation-delay: 2.6s;
}

.verzoegerung14 {
  animation-delay: 2.8s;
}

.verzoegerung15 {
  animation-delay: 3s;
}

.verzoegerung16 {
  animation-delay: 3.2s;
}

.verzoegerung17 {
  animation-delay: 3.4s;
}