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





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

.container2 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 100vw;
height: 1200px;
position: absolute;
z-index: 2;
left: 140px;
top: 10px;
font-size: 350%;

color: #FF8732;


}


.container2:hover {


  color: green;
  animation: cheese 2s alternate;
  animation-delay: var(--delay);
 
}

div:hover {

  color: #FF8732;

}


body {
  background-color: #f5ebdc;
}


.burger {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 1;
  line-height: 150px;
  color: #d62300;
  font-size: 200%;
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
}

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

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

.king2 {
  position: relative;
  grid-column-start: 3;
  grid-row-start: 1;
  line-height: 350px;
  font-style: italic;
  color: #d62300;
  font-size: 500%;
  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: 390%;
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
}

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

.king4 {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 2;
  line-height: 350px;
  color: #d62300;
  font-size: 200%;
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
}

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

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

.burger6 {
  position: relative;
  grid-column-start: 3;
  grid-row-start: 2;
  line-height: 150px;
  font-style: italic;
  color: #d62300;
  font-size: 390%;
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
}

.king6 {
  position: relative;
  grid-column-start: 3;
  grid-row-start: 2;
  line-height: 350px;
  color: #d62300;
  font-size: 200%;
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
}

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

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

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

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

.king10 {
  position: relative;
  grid-column-start: 3;
  grid-row-start: 3;
  line-height: 350px;
  font-style: italic;
  color: #d62300;
  font-size: 500%;
  animation: breathe 5s infinite both;
  animation-delay: var(--delay);
  overflow: hidden;
 
}

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

.king11 {
  position: relative;
  grid-column-start: 4;
  grid-row-start: 3;
  line-height: 350px;
  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:  "hrzn" 174.86, "vert" 17.00, "rota" 0, "zoom" 0
  }

  60% {
    font-variation-settings:  "hrzn" 174.86, "vert" 988.4, "rota" 0, "zoom" 0
  }

  100% {
    font-variation-settings:  "hrzn" 174.86, "vert" 17.00, "rota" 0, "zoom" 0
  }
}

@keyframes cheese {
  0% {
    font-variation-settings:  "hrzn" 0, "vert" 0, "rota" 0, "zoom" 0
  }

  100% {
    font-variation-settings:  "hrzn" 600, "vert" 200, "rota" 40, "zoom" 0
  }


}