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

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

#grund-flexbox {
  display: flex;
  height: 100vh;
  justify-content: flex-end;
  align-items: center;
}

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

/* Zaun hinten */

#gridcontainer-hinten {
  display: grid;
  grid-template-columns: repeat(21, 4.76vw);
  grid-template-rows: repeat(7, 10vh);
  justify-items: center; 
  align-items: center; 
  position: absolute;
  bottom: 0;
}

.text-hinten {
  color: #62361b;
  font-size: 18vh;
  line-height: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  animation-name: ani-text-hinten;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes ani-text-hinten {
  0% {font-variation-settings: "wght" 1000, "wdth" 25;
  }
  50% {  font-variation-settings: "wght" 100, "wdth" 25;
  }
  100% {  font-variation-settings: "wght" 200, "wdth" 25;
  }
}

.zaunspitze-hinten {
  animation-name: ani-zaunspitze-hinten;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes ani-zaunspitze-hinten {
  0% {font-variation-settings: "wght" 1000, "wdth" 151;
  }
  50% {  font-variation-settings: "wght" 100, "wdth" 151;
  }
  100% {  font-variation-settings: "wght" 200, "wdth" 151;
  }
}


/* Zaun mittel */

#gridcontainer-mittel {
  display: grid;
  grid-template-columns: repeat(18, 5.55vw);
  grid-template-rows: repeat(10, 9vh);
  justify-items: center; 
  align-items: center; 
  position: absolute;
  bottom: 0;
}

.text-mittel {
  color: #f9461c;
  font-size: 16vh;
  line-height: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  animation-name: ani-text-mittel;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes ani-text-mittel {
  0% {font-variation-settings: "wght" 150, "wdth" 25;
  }
  80% {font-variation-settings: "wght" 150, "wdth" 25;
  }
  100% {  font-variation-settings: "wght" 1000, "wdth" 25;
  }
}

.zaunspitze-mittel {
  animation-name: ani-zaunspitze-mittel;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes ani-zaunspitze-mittel {
  0% {font-variation-settings: "wght" 150, "wdth" 151;
  }
  80% {font-variation-settings: "wght" 150, "wdth" 151;
  }
  100% {  font-variation-settings: "wght" 1000, "wdth" 151;
  }
}


/* Zaun vorne */

#gridcontainer-vorne {
  display: grid;
  grid-template-columns: repeat(20, 5vw);
  grid-template-rows: repeat(6, 15.5vh);
  justify-items: center; 
  align-items: center; 
  position: absolute;
}

.text-vorne {
  color: #f9e300;
  font-size: 25vh;
  line-height: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  animation-name: ani-text-vorne;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes ani-text-vorne {
  0% {font-variation-settings: "wght" 100, "wdth" 25;
  }
  30% {  font-variation-settings: "wght" 1000, "wdth" 25;
  }
  60% {  font-variation-settings: "wght" 200, "wdth" 25;
  }
  100% {  font-variation-settings: "wght" 100, "wdth" 25;
  }
}

.zaunspitze-vorne {
  animation-name: ani-zaunspitze-vorne;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes ani-zaunspitze-vorne {
  0% {font-variation-settings: "wght" 100, "wdth" 130;
  }
  30% {font-variation-settings: "wght" 1000, "wdth" 130;
  }
  60% {  font-variation-settings: "wght" 200, "wdth" 130;
  }
  100% {  font-variation-settings: "wght" 100, "wdth" 130;
  }
}