:root {
  font-size: 400%;
  font-family: "Fraunces"; /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
}

.box {
  display: grid;
  position:absolute;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 3px;
  row-gap: 3px;
  width: 100vw;
  height: 1000px;
  z-index: -2;
  background-color: #FF8732;
 
}

.container2 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100vw;
  height: 1000px;
  position: absolute;
  z-index: 2;
  left: 10px;
  top: 10px;
  font-size: 50%;
  color: #f5ebdc;
  animation: cheese 12s alternate infinite;
  animation-delay: var(--delay);
 
}

.container {
  display: grid;
  position: relative;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 3px;
  row-gap: 3px;
  width: 100vw;
  height: 1000px;
  z-index: 1;
 
}

.container3 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100vw;
  height: 1000px;
  position: absolute;
  z-index: 3;
  left: 10px;
  top: 10px;
  font-size: 50%;
  color: #f5ebdc;
  animation: salad 8s alternate infinite;
  animation-delay: var(--delay);
 
}








/*div:hover {

opacity: 0.8;
/*animation: cheese 1s alternate infinite;
animation-delay: var(--delay);

}

/*.container2:hover {


  color: green;
  animation: cheese 1s alternate infinite;
  animation-delay: var(--delay);
 
}*/


body {
  background-color: #f5ebdc;
}




.Letter1 {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 1;
  line-height: 150px;
  color: rgb(52, 250, 91);
  font-size: 2900%;
  animation: breathe 12s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter2 {
  position: relative;
  grid-column-start: 2;
  grid-row-start: 1;
  line-height: 150px;
  font-style: italic;
  color: #98fff1;
  font-size: 2900%;
  /*font-weight: 800; */
  animation: breathe 15s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: start;
 
}


.Letter3 {
  position: relative;
  grid-column-start: 3;
  grid-row-start: 1;
  line-height: 250px;
  font-style: italic;
  color: #98fff1;
  font-size: 2950%;
  animation: breathe 9s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: end;
}

.Letter4 {
  position: relative;
  grid-column-start: 4;
  grid-row-start: 1;
  line-height: 350px;
  color: #98fff1;
  font-size: 2900%;
  /*font-weight: 800; */
  animation: breathe 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
}

.Letter5  {
  position: relative;
  grid-column-start: 5;
  grid-row-start: 1;
  line-height: 150px;
  color: #98fff1;
  font-size: 2980%;
  animation: breathe 12s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
}

.Letter6 {
  position: relative;
  grid-column-start: 6;
  grid-row-start: 1;
  line-height: 350px;
  font-style: italic;
  color: #98fff1;
  font-size: 2900%;
  animation: breathe 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
 
}

.Letter7  {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 2;
  line-height: 150px;
  font-style: italic;
  color: #98fff1;
  font-size: 2990%;
  animation: breathe 9s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter8  {
  position: relative;
  grid-column-start: 2;
  grid-row-start: 2;
  line-height: 350px;
  color: #98fff1;
  font-size: 2900%;
  /*font-weight: 800; */
  animation: breathe 2s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self:stretch;
}

.Letter9 {
  position: relative;
  grid-column-start: 3;
  grid-row-start: 2;
  line-height: 150px;
  font-style: italic;
  color: #98fff1;
  font-size: 2990%;
  animation: breathe 5s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
}

.Letter10 {
  position: relative;
  grid-column-start: 4;
  grid-row-start: 2;
  line-height: 350px;
  color: rgb(52, 250, 91);
  font-size: 2950%;
  animation: breathe 15s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
}

.Letter11 {
  position: relative;
  grid-column-start: 5;
  grid-row-start: 2;
  line-height: 150px;
  color: rgb(52, 250, 91);
  font-size: 2900%;
  animation: breathe 12s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter12 {
  position: relative;
  grid-column-start: 6;
  grid-row-start: 2;
  line-height: 150px;
  font-style: italic;
  color: #98fff1;
  font-size: 2900%;
  /*font-weight: 800; */
  animation: breathe 15s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: start;
 
}


.Letter13 {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 3;
  line-height: 250px;
  font-style: italic;
  color: #98fff1;
  font-size: 2950%;
  animation: breathe 9s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: end;
}

.Letter14 {
  position: relative;
  grid-column-start: 2;
  grid-row-start: 3;
  line-height: 350px;
  color: #98fff1;
  font-size: 2900%;
  /*font-weight: 800; */
  animation: breathe 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
}

.Letter15  {
  position: relative;
  grid-column-start: 3;
  grid-row-start: 3;
  line-height: 150px;
  color: #98fff1;
  font-size: 2980%;
  animation: breathe 12s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
}

.Letter16 {
  position: relative;
  grid-column-start: 4;
  grid-row-start: 3;
  line-height: 350px;
  font-style: italic;
  color: #98fff1;
  font-size: 2900%;
  animation: breathe 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
 
}

.Letter17 {
  position: relative;
  grid-column-start: 5;
  grid-row-start: 3;
  line-height: 150px;
  color: rgb(52, 250, 91);
  font-size: 2500%;
  animation: breathe 9s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: center;
}

.Letter18 {
  position: relative;
  grid-column-start: 6;
  grid-row-start: 3;
  line-height: 150px;
  font-style: italic;
  color: #98fff1;
  font-size: 3500%;
  /*font-weight: 800; */
  animation: breathe 5s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
  align-self: start;
 
}


@keyframes breathe {
  0% {
    font-variation-settings:  "opsz" 9, "wght" 100, "SOFT" 0, "WONK" 1;
    
  }

  60% {
    font-variation-settings:  "opsz" 9, "wght" 200, "SOFT" 0, "WONK" 1;
    color: blue;
    transform: rotate(360);
    

  
  }

  100% {
    font-variation-settings:  "opsz" 9, "wght" 900, "SOFT" 0, "WONK" 1;
    
    color:  rgb(52, 250, 91); 
    transform: rotate(0);
    

  }
}

@keyframes cheese {
  0% {
    font-variation-settings:  "opsz" 9, "wght" 100, "SOFT" 0, "WONK" 1;
    transform: translate(10px, 20px);
  }

  40% {
    font-variation-settings:  "opsz" 9, "wght" 1000, "SOFT" 0, "WONK" 1;
    transform: translate(90px, 270px);
  }

  70% {
    font-variation-settings:  "opsz" 9, "wght" 500, "SOFT" 0, "WONK" 1;
    transform: translate(350px, 410px);
  }

  100% {
    font-variation-settings:  "opsz" 9, "wght" 1000, "SOFT" 0, "WONK" 1;
    color:#f5ebdc;
    transform: translate(120px, 50px);
  }


} 

/*#FF8732

rgb(52, 250, 91)*/


@keyframes salad {
  0% {
    font-variation-settings:  "opsz" 9, "wght" 100, "SOFT" 0, "WONK" 1;
    transform: translate(0px, 0px);
    
  }

  40% {
    font-variation-settings:  "opsz" 9, "wght" 200, "SOFT" 0, "WONK" 1;
    transform: translate(90px, 170px);
    
  }

  70% {
    font-variation-settings:  "opsz" 9, "wght" 500, "SOFT" 0, "WONK" 1;
    transform: translate(250px, 310px);
    
  }

  100% {
    font-variation-settings:  "opsz" 9, "wght" 1000, "SOFT" 0, "WONK" 1;
    color:#f5ebdc;
    transform: translate(20px, 250px);
    
  }


}