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

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

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

/* Wolke T */

.wolkencontainer-t {
  display: flex;
  height: 70vh;
  width: 50vw;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  animation-name: ani-wolke-t;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.wolke-t {
  font-size: 100vw;
  line-height: 0;
  color: #e27ea6;
  margin: 0;
  filter: blur(7vw);
}

@keyframes ani-wolke-t {
  0% {}
  30% {transform: translateY(40vh) translateX(30vw);}
  60% {transform: translateY(-10vh) translateX(40vw);}
  100% {transform: translateY(70vw) translateX(10vw);}
}

/* Wolke A */

.wolkencontainer-a {
  display: flex;
  height: 70vh;
  width: 50vw;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  right: 0;
  animation-name: ani-wolke-a;
  animation-duration: 22s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.wolke-a {
  font-size: 100vw;
  line-height: 0;
  color: #e27ea6;
  margin: 0;
  filter: blur(7vw);
}

@keyframes ani-wolke-a {
  0% {}
  20% {transform: translateY(-30vh) translateX(-10vw);}
  70% {transform: translateY(20vh) translateX(20vw);}
  100% {transform: translateY(50vw) translateX(30vw);}
}




#gridcontainer {
  width: auto;
  display: grid;
  position: absolute;
  bottom: 6.5vw;
  grid-template-columns: repeat(20, 3vw);
  grid-template-rows: 5vw 6vw;
}

.textgross {
  font-size: 40vw;
  color: #00a1de;
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  justify-self: center;
  align-self: center; 
  grid-row: 1 / 2;
  transition-property: all;
  transition-duration: 5s;
  transition-timing-function: ease;
  animation-fill-mode: forwards;
}

.textklein {
  font-size: 20vw;
  color: #00a1de;
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  justify-self: center;
  align-self: center; 
  grid-row: 2 / 3;
  transition-property: all;
  transition-duration: 5s;
  transition-timing-function: ease;
  animation-fill-mode: forwards;
}

.textgross:hover {
  animation-name: farbwechsel-gross;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  transition-timing-function: ease;
  }

.textklein:hover {
animation-name: farbwechsel-klein;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
transition-timing-function: ease;
}

@keyframes farbwechsel-gross {
  0% {color: #00a1de}
  20% {color: #522398; filter: blur(1vw)}
  50% {color: #f9e300; filter: blur(1vw)}
  100% {color: #00a1de}
}

@keyframes farbwechsel-klein {
  0% {color: #00a1de}
  20% {color: #e27ea6; filter: blur(1vw)}
  50% {color: #f9e300; filter: blur(1vw)}
  100% {color: #00a1de}
}


/* Verschiebungen */

.buchstabe1 {
  transform: translateY(0);
}

.buchstabe2 {
  transform: translateY(-3vw);
}

.buchstabe3 {
  transform: translateY(-5vw);
}

.buchstabe4 {
  transform: translateY(-7vw);
}

.buchstabe5 {
  transform: translateY(-8.5vw);
}

.buchstabe6 {
  transform: translateY(-9.5vw);
}

.buchstabe7 {
  transform: translateY(-10.5vw);
}

.buchstabe8 {
  transform: translateY(-11vw);
}

.buchstabe9 {
  transform: translateY(-11.1vw);
}

.buchstabe10 {
  transform: translateY(-11.2vw);
}

.buchstabe11 {
  transform: rotate(180deg) translateY(5.6vw);
}

.buchstabe12 {
  transform: rotate(180deg) translateY(5.5vw);
}

.buchstabe13 {
  transform: rotate(180deg) translateY(5.4vw);
}

.buchstabe14 {
  transform: rotate(180deg) translateY(4.9vw);
}

.buchstabe15 {
  transform: rotate(180deg) translateY(3.9vw);
}

.buchstabe16 {
  transform: rotate(180deg) translateY(2.9vw);
}

.buchstabe17 {
  transform: rotate(180deg) translateY(1.4vw);
}

.buchstabe18 {
  transform: rotate(180deg) translateY(-0.6vw);
}

.buchstabe19 {
  transform: rotate(180deg) translateY(-2.6vw);
}

.buchstabe20 {
  transform: rotate(180deg) translateY(-5.6vw);
}


.buchstabe11klein {
  transform: rotate(180deg) translateY(8.3vw);
}

.buchstabe12klein {
  transform: rotate(180deg) translateY(8.2vw);
}

.buchstabe13klein {
  transform: rotate(180deg) translateY(8.1vw);
}

.buchstabe14klein {
  transform: rotate(180deg) translateY(7.6vw);
}

.buchstabe15klein {
  transform: rotate(180deg) translateY(6.6vw);
}

.buchstabe16klein {
  transform: rotate(180deg) translateY(5.6vw);
}

.buchstabe17klein {
  transform: rotate(180deg) translateY(4.1vw);
}

.buchstabe18klein {
  transform: rotate(180deg) translateY(2.1vw);
}

.buchstabe19klein {
  transform: rotate(180deg) translateY(-0.1vw);
}

.buchstabe20klein {
  transform: rotate(180deg) translateY(-3.1vw);
}
/* 
#boden {
  height: 20vh;
  width: 100%;
  background-color: #f9e300;
  position: absolute;
  bottom: 0;
} */