:root {
  font-family: 'Roboto Flex';
}

body {
  background-color: #62361b;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

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


p {
  color: #f9e300;
  font-size: 3vh;
  font-variation-settings: "wdth" 130;
  text-align: center;
  position: absolute;
  animation: vergroesserung_text 8s ease-in infinite backwards, 
  blur 8s ease-in infinite backwards; 
  transform-origin: center;
  will-change: transform, opacity, filter;
}


.text_delay1 {
  animation-delay: 0.5s;
}

.text_delay2 {
  animation-delay: 1s;
}

.text_delay3 {
  animation-delay: 1.5s;
}

.text_delay4 {
  animation-delay: 2s;
}

.text_delay5 {
  animation-delay: 2.5s;
}

.text_delay6 {
  animation-delay: 3s;
}

.text_delay7 {
  animation-delay: 3.5s;
}

.text_delay8 {
  animation-delay: 4s;
}

.text_delay9 {
  animation-delay: 4.5s;
}

.text_delay10 {
  animation-delay: 5s;
}

.text_delay11 {
  animation-delay: 5.5s;
}

.text_delay12 {
  animation-delay: 6s;
}

.text_delay13 {
  animation-delay: 6.5s;
}

.text_delay14 {
  animation-delay: 7s;
}

.text_delay15 {
  animation-delay: 7.5s;
}




/* Keyframes */


@keyframes vergroesserung_text {
  0% {opacity: 0; font-weight: 100; transform: scale(1);}
  1% {opacity: 1;}
  99% {opacity: 1;}
  100% {opacity: 0; font-weight: 500; transform: scale(300);}
  }
 
  @keyframes blur {
    0% { filter: blur(0); }
    50% { filter: blur(1px); }
    90% { filter: blur(0); }
    100% { filter: blur(0); }
  }