:root {
  font-size: 320%;
  font-family: "Purplehaze"; /* 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;
  width: 100vw;
  height: 1600px;
  
}


body {
  background-color: #f5ebdc;
}

.burger {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 1;
  line-height: 150px;
  font-style: italic;
  color: #d62300;
  font-size: 200%;
  /*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: 150px;
  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: 150px;
  font-style: italic;
  color: #d62300;
  font-size: 200%;
  /*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: 150px;
  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: 150px;
  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: 4;
  grid-row-start: 3;
  line-height: 150px;
  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: 150px;
  font-style: italic;
  color: #d62300;
  font-size: 200%;
  /*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: 150px;
  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: 1;
  grid-row-start: 3;
  line-height: 150px;
  font-style: italic;
  color: #d62300;
  font-size: 200%;
  /*font-weight: 800; */
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
}

.burger9 {
  position: relative;
  grid-column-start: 2;
  grid-row-start: 3;
  line-height: 150px;
  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: 3;
  grid-row-start: 3;
  line-height: 150px;
  font-style: italic;
  color: #d62300;
  font-size: 200%;
  /*font-weight: 800; */
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
}

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




@keyframes breathe {
  0% {
    font-variation-settings: "wtun" 100, "wtsp" 300;
  }

  60% {
    font-variation-settings: "wtun" 100, "wtsp" 600;
  }

  100% {
    font-variation-settings: "wtun" 900, "wtsp" 100;
  }
}