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

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

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

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

body {
  background-color: #f5ebdc;
}

.burger {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 1;
  line-height: 505px;
  color: #d62300;
  font-size: 150%;
  text-align:right;
  animation: breathe 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;

}

.Queen {
  position: relative;
  grid-column-start: 2;
  grid-row-start: 1;
  line-height: 505px;
  color: #d62300;
  font-size: 150%;
  animation: breathe 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;

}

.burger1 {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 2;
  line-height: 505px;
  color: #d62300;
  font-size: 950%;
  text-align:right;
  animation: breathe 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;

}

.Queen1 {
  position: relative;
  grid-column-start: 2;
  grid-row-start: 2;
  line-height: 505px;
  color: #d62300;
  font-size: 950%;
  animation: breathe 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;

}

.burger2 {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 2;
  line-height: 505px;
  color: #FF8732;
  font-size: 950%;
  text-align:right;
  animation: bread 9s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;


}

.Queen2 {
  position: relative;
  grid-column-start: 2;
  grid-row-start: 2;
  line-height: 505px;
  color: #FF8732;
  font-size: 950%;
  animation: bread 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;
 

}


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

  60% {
    font-variation-settings: "ROND" 40, "wght" 600;
  }

  100% {
    font-variation-settings: "ROND" 0, "wght" 900;
  }
}

@keyframes bread {
  0% {
    font-variation-settings: "ROND" 0, "wght" 100;
    transform: translate(90px, 170px);
    transform: scale(0);
  }

  60% {
    font-variation-settings: "ROND" 40, "wght" 600;
    transform: translate(90px, 170px);
    transform: scale(2);
  }

  100% {
    font-variation-settings: "ROND" 0, "wght" 900;
    transform: translate(90px, 170px);
    transform: scale(5);
  }
}