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

body {
  background-color: #00a1de;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#flexbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100vh;
  width: 100vw;
}

.schriftcontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 50vh;
  bottom: 31vh;
  margin: 0;
  padding: 0;
}


p {
  color: #c60c30;
  mix-blend-mode: color-dodge;
  font-size: 150vh;
  line-height: 0;
  letter-spacing: -5vh;
  text-align: center;
  animation-name: schriftanimation;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes schriftanimation {
  0% {font-weight: 100;}
  100% {font-weight: 1000;}
}

.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;
}