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

#grundflexbox {
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
  justify-content: center; 
  align-items: center; 
}

#gridcontainer {
  display: grid;
  grid-template-columns: 1vw 1.2vw 1.4vw 1.6vw 1.8vw 2vw 2.2vw 2.4vw 2.6vw 2.8vw 3vw 3.2vw 3.4vw 3.6vw 3.8vw 4vw;
  grid-template-rows: repeat(3, 25vh);
  position: relative;
  justify-items: center; 
  align-items: center; 
}

p {
  font-family: 'WhoaSpine';
  font-size: 40vw;
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 0;
  line-height: 0vw;
  animation-iteration-count: infinite;
}


/* Flatternde Buchstaben */

.buchstabe1 {
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 0;
  animation-name: buchstabe1animation;
  animation-duration: 2s;
}

.buchstabe2 {
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 66;
  animation-name: buchstabe1animation;
  animation-duration: 2s;
  animation-delay: 0.1s;
  opacity: 0.95;
}

.buchstabe3 {
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 132;
  animation-name: buchstabe1animation;
  animation-duration: 2s;
  animation-delay: 0.2s;
  opacity: 0.9;
}

.buchstabe4 {
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 198;
  animation-name: buchstabe1animation;
  animation-duration: 2s;
  animation-delay: 0.3s;
  opacity: 0.85;
}

.buchstabe5 {
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 264;
  animation-name: buchstabe1animation;
  animation-duration: 2s;
  animation-delay: 0.4s;
  opacity: 0.8;
}

.buchstabe6 {
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 330;
  animation-name: buchstabe1animation;
  animation-duration: 2s;
  animation-delay: 0.5s;
  opacity: 0.75;
}

.buchstabe7 {
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 396;
  animation-name: buchstabe1animation;
  animation-duration: 2s;
  animation-delay: 0.6s;
  opacity: 0.7;
}

.buchstabe8 {
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 462;
  animation-name: buchstabe1animation;
  animation-duration: 2s;
  animation-delay: 0.7s;
  opacity: 0.65;
}

.buchstabe9 {
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 538;
  animation-name: buchstabe1animation;
  animation-duration: 2s;
  animation-delay: 0.8s;
  opacity: 0.6;
}

.buchstabe10 {
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 594;
  animation-name: buchstabe1animation;
  animation-duration: 2s;
  animation-delay: 0.9s;
  opacity: 0.55;
}

.buchstabe11 {
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 660;
  animation-name: buchstabe1animation;
  animation-duration: 2s;
  animation-delay: 1s;
  opacity: 0.5;
}

.buchstabe12 {
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 693;
  animation-name: buchstabe1animation;
  animation-duration: 2s;
  animation-delay: 1.1s;
  opacity: 0.45;
}

.buchstabe13 {
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 759;
  animation-name: buchstabe1animation;
  animation-duration: 2s;
  animation-delay: 1.2s;
  opacity: 0.4;
}

.buchstabe14 {
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 825;
  animation-name: buchstabe1animation;
  animation-duration: 2s;
  animation-delay: 1.3s;
  opacity: 0.35;
}

.buchstabe15 {
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 891;
  animation-name: buchstabe1animation;
  animation-duration: 2s;
  animation-delay: 1.4s;
  opacity: 0.3;
}

.buchstabe16 {
  font-variation-settings: "hrzn" 1000, "vert" 0, "rota" 0, "zoom" 1000;
  animation-name: buchstabe1animation;
  animation-duration: 2s;
  animation-delay: 1.5s;
  opacity: 0.25;
}

.buchstabeC {
  margin-right: 30vw;
  color: #00a1de;
}

.buchstabeT {
  color: #e27ea6;
}

.buchstabeA {
  margin-left: 30vw;
  color: #f9e300;
}

@keyframes buchstabe1animation {
  0% {transform: translateY(0);}
  30% {transform: translateY(0);}
  35% {transform: translateY(-1vw);}
  40% {transform: translateY(1vw);}
  50% {transform: translateY(1.5vw);}
  70% {transform: translateY(-1.5vw);}
  80% {transform: translateY(1vw);}
  85% {transform: translateY(1.5vw);}
  90% {transform: translateY(-1vw);}
  95% {transform: translateY(1vw);}
  100% {transform: translateY(0);}
}


/* Fliegende Buchstaben */

.flugcontainer1 {
  position: absolute;
  bottom: 20vh;
  left: -3vw;
  animation-name: flug1animationtranslate;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.flug1 {
  font-family: 'WhoaTop';
  color: #00a1de;
  font-size: 5vw;
  animation-name: flug1animationrotate;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center center;
}

@keyframes flug1animationtranslate {
  0% {transform: translateX(0vw);}
  85% {transform: translateX(0vw);}
  100% {transform: translateX(110vw);}
}

@keyframes flug1animationrotate {
  0% {transform: rotate(0deg) ;}
  85% {transform: rotate(0deg) ;}
  100% {transform: rotate(720deg) ;}
}


.flugcontainer2 {
  position: absolute;
  bottom: 1vh;
  left: -3vw;
  animation-name: flug2animationtranslate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.flug2 {
  font-family: 'WhoaTop';
  color: #e27ea6;
  font-size: 5vw;
  animation-name: flug2animationrotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center center;
}

@keyframes flug2animationtranslate {
  0% {transform: translateX(0vw);}
  30% {transform: translateX(0vw);}
  50% {transform: translateX(110vw);}
  100% {transform: translateX(110vw);}
}

@keyframes flug2animationrotate {
  0% {transform: rotate(0deg) ;}
  30% {transform: rotate(0deg) ;}
  50% {transform: rotate(720deg) ;}
  100% {transform: rotate(720deg) ;}
}


.flugcontainer3 {
  position: absolute;
  top: 15vh;
  left: -3vw;
  animation-name: flug3animationtranslate;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.flug3 {
  font-family: 'WhoaTop';
  color: #f9e300;
  font-size: 5vw;
  animation-name: flug3animationrotate;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center center;
}

@keyframes flug3animationtranslate {
  0% {transform: translateX(0vw);}
  90% {transform: translateX(0vw);}
  100% {transform: translateX(110vw);}
}

@keyframes flug3animationrotate {
  0% {transform: rotate(0deg) ;}
  90% {transform: rotate(0deg) ;}
  100% {transform: rotate(720deg) ;}
}