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



/*.container {

  width: 100vw;
  height:100vh;

} */



.container2 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(1, 1fr);
  width: 600px;
  height: 50vh;
  margin-left: 35vw;
  margin-top: -150px;
  z-index: 1;
} 

.container3 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(1, 1fr);
  width: 600px;
  height:50vh;
  margin-left: 30vw;
  margin-top: -300px;
  z-index: 2;
} 

.container4 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(1, 1fr);
  width: 600px;
  height:50vh;
  margin-left: 35vw;
  margin-top: -300px;
  z-index: 3;
} 

.container5 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(1, 1fr);
  width: 600px;
  height:50vh;
  margin-left: 30vw;
  margin-top: -300px;
  z-index: 3;
} 

.container6 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(1, 1fr);
  width: 600px;
  height:50vh;
  margin-left: 35vw;
  margin-top: -300px;
  z-index: 3;
} 

.container7 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(1, 1fr);
  width: 600px;
  height:50vh;
  margin-left: 30vw;
  margin-top: -300px;
  z-index: 3;
} 

.container8 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(1, 1fr);
  width: 600px;
  height:50vh;
  margin-left: 35vw;
  margin-top: -300px;
  z-index: 3;
} 

.container9 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(1, 1fr);
  width: 600px;
  height:50vh;
  margin-left: 30vw;
  margin-top: -300px;
  z-index: 3;
} 

.container10 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(1, 1fr);
  width: 600px;
  height:50vh;
  margin-left: 35vw;
  margin-top: -300px;
  z-index: 3;
} 

.container11 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(1, 1fr);
  width: 600px;
  height:50vh;
  margin-left: 30vw;
  margin-top: -300px;
  z-index: 3;
} 


body {
  background-color: #f5ebdc;
}

.Letter1 {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter2 {
  position: relative;
  grid-column-start: 2;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
 
}

.Letter3 {
  position: relative;
  grid-column-start: 3;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter4 {
  position: relative;
  grid-column-start: 4;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 4s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter5  {
  position: relative;
  grid-column-start: 5;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 4s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter6 {
  position: relative;
  grid-column-start: 6;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 4s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
 
}

.Letter7  {
  position: relative;
  grid-column-start: 7;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 5s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter8  {
  position: relative;
  grid-column-start: 8;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 5s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter9 {
  position: relative;
  grid-column-start: 9;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 6s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter10 {
  position: relative;
  grid-column-start: 10;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 6s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter11 {
  position: relative;
  grid-column-start: 11;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 6s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter12 {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter13 {
  position: relative;
  grid-column-start: 2;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
 
}

.Letter14 {
  position: relative;
  grid-column-start: 3;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter15 {
  position: relative;
  grid-column-start: 4;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 4s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter16  {
  position: relative;
  grid-column-start: 5;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 4s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter17 {
  position: relative;
  grid-column-start: 6;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 4s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
 
}

.Letter18  {
  position: relative;
  grid-column-start: 7;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 5s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter19  {
  position: relative;
  grid-column-start: 8;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 5s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter20 {
  position: relative;
  grid-column-start: 9;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 6s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter21 {
  position: relative;
  grid-column-start: 10;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 6s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter22 {
  position: relative;
  grid-column-start: 11;
  grid-row-start: 1;
  font-size: 100%;
  animation: variant 6s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}


/*.BQ1 {
  position: absolute;
  line-height: 100px;
  color: #d62300;
  font-size: 100%;
  z-index: 1;
  margin-top: 20px;
  margin-left: 300px;

  animation: breathe 8s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;

}

.BQ2 {
  position: relative;
  line-height: 0px;
  color: #d62300;
  font-size: 300%;
  z-index: 1;

  animation: breathe 8s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;

}


.BQ3 {
  position: relative;
  line-height: 0px;
  color: #d62300;
  font-size: 300%;
  z-index: 1;

  animation: breathe 8s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;

} */

/*@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-30px);
  }
} */


@keyframes variant {
  0% {
    font-variation-settings: 'wght' 100, 'wdth' 100.6, 'opsz' 13.44, 'slnt' 0;
  }

  30% {
    font-variation-settings: 'wght' 300, 'wdth' 100.6, 'opsz' 13.44, 'slnt' 0;
  }

  55% {
    font-variation-settings: 'wght' 500, 'wdth' 100.6, 'opsz' 13.44, 'slnt' 0;
  }

  60% {
    font-variation-settings: 'wght' 500, 'wdth' 100.6, 'opsz' 13.44, 'slnt' 0;
  }

  100% {
    font-variation-settings: 'wght' 900, 'wdth' 100.6, 'opsz' 13.44, 'slnt' 0;
  }
}