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

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

#gridcontainer {
  width: 100%;
  display: grid;
  position: fixed;
  bottom: 0;
  left: 0;
  grid-template-columns: repeat(20, 5%);
  grid-template-rows: 6vw 4vw 6vw 6vw 4vw 6vw 6vw 4vw 6vw;
  place-items: center;
}

p {
  color: #522398;
  font-size: 20vw;
  font-weight: 800;
  animation-name: sabrinas-wasseranimation;
  animation-duration: 3s; 
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  transform-origin: center;
  animation-fill-mode: both;
}

.verzoegerung0 {
}

.verzoegerung1 {
  animation-delay: 0.5s;
}

.verzoegerung2 {
  animation-delay: 1s;
}

.verzoegerung3 {
  animation-delay: 1.5s;
}

.verzoegerung4 {
  animation-delay: 2s;
}

.verzoegerung5 {
  animation-delay: 2.5s;
}

.verzoegerung6 {
  animation-delay: 3s;
}

.verzoegerung7 {
  animation-delay: 3.5s;
}

.verzoegerung8 {
  animation-delay: 4s;
}

.verzoegerung9 {
  animation-delay: 4.5s;
}

.verzoegerung10 {
  animation-delay: 5s;
}

.verzoegerung11 {
  animation-delay: 5.5s;
}

@keyframes sabrinas-wasseranimation {
  from { transform: rotate(-30deg); color: #00a1de;}
  to { transform: rotate(30deg); }
}

.blur1 {
  filter: blur(1vw);
}

.blur2 {
  filter: blur(0.8vw);
}

.blur3 {
  filter: blur(0.6vw);
}

.blur4 {
  filter: blur(0.4vw);
}

.blur5 {
  filter: blur(0.3vw);
}

.blur6 {
  filter: blur(0.2vw);
}

.blur7 {
  filter: blur(0.1vw);
}