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

.container {
  display: flex;
  grid-template-columns: repeat(4, 2fr);
  grid-template-rows: repeat(5, 1fr);
  height: 15px;
  column-gap: 3px;
  row-gap: 3px;

}


.container2 {
  display: grid;
  grid-template-columns: repeat(4, 2fr);
  grid-template-rows: repeat(5, 1fr);
  height: 500px;
  column-gap: 3px;
  row-gap: 3px;
  font-size: 30%;
  z-index: -1;
}


.container3 {
  display: flex;
  grid-template-columns: repeat(4, 2fr);
  grid-template-rows: repeat(5, 1fr);
  height: 15px;
  column-gap: 3px;
  row-gap: 3px;

}


body {
  background-color: #f5ebdc;
}

.burger {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 1;
  line-height: 205px;
  font-style: italic;
  color: #d62300;
  font-size: 550%;
  /*font-weight: 800; */
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
  animation: rotate 6s infinite;
}

.burger1 {
  position: relative;
  grid-column-start: 2;
  grid-row-start: 1;
  line-height: 205px;
  font-style: italic;
  color: #d62300;
  font-size: 550%;
  /*font-weight: 800; */
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
  animation: rotate 6s infinite;
}

.burger2 {
  position: relative;
  grid-column-start: 3;
  grid-row-start: 1;
  line-height: 205px;
  font-style: italic;
  color: #d62300;
  font-size: 550%;
  /*font-weight: 800; */
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
  animation: rotate 6s infinite;
}

.burger3 {
  position: relative;
  grid-column-start: 4;
  grid-row-start: 1;
  line-height: 205px;
  font-style: italic;
  color: #d62300;
  font-size: 550%;
  /*font-weight: 800; */
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
  animation: rotate 6s infinite;
}

.burger4 {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 2;
  line-height: 205px;
  font-style: italic;
  color: #d62300;
  font-size: 550%;
  /*font-weight: 800; */
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
  animation: rotate 6s infinite;
}

.burger5 {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 2;
  line-height: 205px;
  font-style: italic;
  color: #d62300;
  font-size: 550%;
  /*font-weight: 800; */
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
  animation: rotate 6s infinite;
}

.burger6 {
  position: relative;
  grid-column-start: 2;
  grid-row-start: 2;
  line-height: 205px;
  font-style: italic;
  color: #d62300;
  font-size: 550%;
  /*font-weight: 800; */
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
  animation: rotate 6s infinite;
}

.burger7 {
  position: relative;
  grid-column-start: 3;
  grid-row-start: 2;
  line-height: 205px;
  font-style: italic;
  color: #d62300;
  font-size: 550%;
  /*font-weight: 800; */
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
  animation: rotate 6s infinite;
}

.burger8 {
  position: relative;
  grid-column-start: 4;
  grid-row-start: 2;
  line-height: 205px;
  font-style: italic;
  color: #d62300;
  font-size: 550%;
  /*font-weight: 800; */
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
  animation: rotate 6s infinite;
}

.burger9 {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 3;
  line-height: 205px;
  font-style: italic;
  color: #d62300;
  font-size: 550%;
  /*font-weight: 800; */
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
  animation: rotate 6s infinite;
}

.burger10 {
  position: relative;
  grid-column-start: 2;
  grid-row-start: 3;
  line-height: 205px;
  font-style: italic;
  color: #d62300;
  font-size: 550%;
  /*font-weight: 800; */
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
  animation: rotate 6s infinite;
}

.burger11 {
  position: relative;
  grid-column-start: 3;
  grid-row-start: 3;
  line-height: 205px;
  font-style: italic;
  color: #d62300;
  font-size: 550%;
  /*font-weight: 800; */
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
  animation: rotate 6s infinite;
}

.burger12 {
  position: relative;
  grid-column-start: 4;
  grid-row-start: 3;
  line-height: 205px;
  font-style: italic;
  color: #d62300;
  font-size: 550%;
  /*font-weight: 800; */
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
  animation: rotate 6s infinite;
}


@keyframes breathe {
  0% {
    font-variation-settings: "wght" 100, "wdth" 100;
  }

  60% {
    font-variation-settings: "wght" 500, "wdth" 200;
  }

  100% {
    font-variation-settings: "wght" 100, "wdth" 50;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0) ;
    font-variation-settings: "wght" 100, "wdth" 100;
  }

  60% {
  transform: rotate(180) ;
  font-variation-settings: "wght" 500, "wdth" 200;

}

  100% {
    transform: rotate(360deg);
    font-variation-settings: "wght" 100, "wdth" 50;
  }

  
}