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

.container {
  display: grid;
  grid-template-columns: repeat(4, 2fr);
  grid-template-rows: repeat(5, 1fr);
  column-gap: 3px;
  row-gap: 3px;
}

.burger {
  grid-column-start: 2;
  grid-row-start: 2;

  font-weight: bold;
  align-self: end;

  color: #d62300;
  font-size: 100%;

  animation: Test1 2s infinite alternate;
}

.king {
  grid-column-start: 2;
  grid-row-start: 3;
  line-height: 70px;

  font-weight: bold;
  align-self: start;

  color: #d62300;
  font-size: 150%;
  animation: test3 2s infinite; 
}

.burger1 {
  grid-column-start: 1;
  grid-row-start: 2;

  font-weight: bold;
  align-self: end;

  color: #d62300;
  font-size: 100%;

  animation: Test1 2s infinite alternate;
}

.king1 {
  grid-column-start: 1;
  grid-row-start: 3;
  line-height: 70px;

  font-weight: bold;
  align-self: start;

  color: #d62300;
  font-size: 150%;
  animation: Test2 2s infinite alternate;
}

.burger2 {
  grid-column-start: 3;
  grid-row-start: 2;

  font-weight: bold;
  align-self: end;

  color: #d62300;
  font-size: 100%;
  /*font-weight: 800; */
  animation: Test1 2s infinite alternate;
}

.king2 {
  grid-column-start: 3;
  grid-row-start: 3;
  line-height: 70px;

  font-weight: bold;
  align-self: start;

  color: #d62300;
  font-size: 150%;
  animation: Test2 2s infinite alternate;
}

.burger3 {
  grid-column-start: 2;
  grid-row-start: 4;

  font-weight: bold;
  align-self: end;

  color: #d62300;
  font-size: 100%;

  animation: Test1 2s infinite alternate;
}

.king3 {
  grid-column-start: 2;
  grid-row-start: 5;
  line-height: 70px;

  font-weight: bold;
  align-self: start;

  color: #d62300;
  font-size: 150%;
  animation: Test2 2s infinite alternate;
}

.burger4 {
  grid-column-start: 3;
  grid-row-start: 4;

  font-weight: bold;
  align-self: end;

  color: #d62300;
  font-size: 100%;
 
  animation: Test1 2s infinite alternate;
}

.king4 {
  grid-column-start: 3;
  grid-row-start: 5;
  line-height: 70px;

  font-weight: bold;
  align-self: start;

  color: #d62300;
  font-size: 150%;
  animation: test3 2s infinite; 
}

.burger5 {
  grid-column-start: 1;
  grid-row-start: 4;

  font-weight: bold;
  align-self: end;

  color: #d62300;
  font-size: 100%;

  animation: Test1 2s infinite alternate;
}

.king5 {
  grid-column-start: 1;
  grid-row-start: 5;
  line-height: 70px;

  font-weight: bold;
  align-self: start;

  color: #d62300;
  font-size: 150%;
  /*animation: Test2 2s infinite alternate;*/
  animation: test3 2s infinite; 

}




@keyframes Test1 {
  from {
    font-variation-settings: "slnt" 0, "CRSV" 0, "wght" 100;
  }
  to {
    font-variation-settings: "slnt" -25, "CRSV" 0, "wght" 900;
  }
}

@keyframes Test2 {
  from {
    font-variation-settings: "slnt" 0, "CRSV" 0, "wght" 100;
  }
  to {
    font-variation-settings: "slnt" -25, "CRSV" 0, "wght" 900;
  }
  
}

@keyframes test3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}