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

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

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

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

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

  animation: Test1 2s infinite alternate;
}

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

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

  color: #d62300;
  font-size: 150%;
  animation: Test2 500ms infinite alternate;
}

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

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

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

  animation: Test1 2s infinite alternate;
}

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

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

  color: #d62300;
  font-size: 150%;
  animation: Test2 500ms infinite alternate;
}

.burger2 {
  grid-column-start: 1;
  grid-row-start: 5;

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

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

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

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

  color: #d62300;
  font-size: 150%;
  animation: Test2 500ms infinite alternate;
}

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

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

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

  animation: Test1 2s infinite alternate;
}

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

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

  color: #d62300;
  font-size: 150%;
  animation: Test2 500ms infinite alternate;
}

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

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

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

.king4 {
  grid-column-start: 2;
  grid-row-start: 4;
  line-height: 70px;

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

  color: #d62300;
  font-size: 150%;
  animation: Test2 500ms infinite alternate;
}

.burger5 {
  grid-column-start: 2;
  grid-row-start: 5;

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

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

  animation: Test1 2s infinite alternate;
}

.king5 {
  grid-column-start: 2;
  grid-row-start: 6;
  line-height: 70px;

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

  color: #d62300;
  font-size: 150%;
  animation: Test2 500ms infinite alternate;

}

.burger6 {
  grid-column-start: 1;
  grid-row-start: 7;

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

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

  animation: Test1 2s infinite alternate;
}

.king6 {
  grid-column-start: 1;
  grid-row-start: 8;
  line-height: 70px;

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

  color: #d62300;
  font-size: 150%; 
  animation: Test2 500ms infinite alternate;

}

.burger7 {
  grid-column-start: 2;
  grid-row-start: 7;

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

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

  animation: Test1 2s infinite alternate;
}

.king7 {
  grid-column-start: 2;
  grid-row-start: 8;
  line-height: 70px;

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

  color: #d62300;
  font-size: 150%;
  animation: Test2 500ms infinite alternate;

}

.burger8 {
  grid-column-start: 3;
  grid-row-start: 7;

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

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

  animation: Test1 2s infinite alternate;
}

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

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

  color: #d62300;
  font-size: 150%;
  animation: Test2 500ms infinite alternate;

}

.burger9 {
  grid-column-start: 3;
  grid-row-start: 5;

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

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

  animation: Test1 2s infinite alternate;
}

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

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

  color: #d62300;
  font-size: 150%;
  animation: Test2 500ms infinite alternate;

}

.burger10 {
  grid-column-start: 3;
  grid-row-start: 3;

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

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

  animation: Test1 2s infinite alternate;
}

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

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

  color: #d62300;
  font-size: 150%;
  animation: Test2 500ms infinite alternate;

}

.burger11 {
  grid-column-start: 3;
  grid-row-start: 1;

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

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

  animation: Test1 2s infinite alternate;
}

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

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

  color: #d62300;
  font-size: 150%;
  animation: Test2 500ms infinite alternate;

}

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

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

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

  animation: Test1 2s infinite alternate;
}

.king12 {
  grid-column-start: 4;
  grid-row-start: 2;
  line-height: 70px;

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

  color: #d62300;
  font-size: 150%;
  animation: Test2 500ms infinite alternate;

}

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

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

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

  animation: Test1 2s infinite alternate;
}

.king13 {
  grid-column-start: 4;
  grid-row-start: 4;
  line-height: 70px;

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

  color: #d62300;
  font-size: 150%;
  animation: Test2 500ms infinite alternate;

}

.burger14 {
  grid-column-start: 4;
  grid-row-start: 5;

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

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

  animation: Test1 2s infinite alternate;
}

.king14 {
  grid-column-start: 4;
  grid-row-start: 6;
  line-height: 70px;

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

  color: #d62300;
  font-size: 150%;
  animation: Test2 500ms infinite alternate;

}

.burger15 {
  grid-column-start: 4;
  grid-row-start: 7;

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

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

  animation: Test1 2s infinite alternate;
}

.king15 {
  grid-column-start: 4;
  grid-row-start: 8;
  line-height: 70px;

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

  color: #d62300;
  font-size: 150%;
  animation: Test2 500ms infinite alternate;

}


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

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



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