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


  .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}


.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;
}

.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;
}

.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;
}

.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;
}


.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;
}

.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;
}

.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;
}




@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;
  }
}