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

div:hover {

font-weight: 100;
color: #FF8732;
font-size: 150%;


}





body {
  background-color: #f5ebdc;
}

.burger {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 1;
  line-height: 505px;
  color: #d62300;
  font-size: 100%;
  text-align:right;
  animation: breathe 1s 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: 100%;
  animation: breathe 1s 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);
    
  }

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

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