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

  

}

/*:hover {
font-weight:100;
  

} */


.burger { 

position:relative;
grid-column-start: 2;
grid-row-start: 2;
line-height: 50px;

font-weight: bolder;

align-self: end;

color: #D62300;
font-size: 98%;
/*font-weight: 800; */
animation: Test1 2s infinite alternate; 



}

.king {

position: relative;
grid-column-start: 2;
grid-row-start: 3; 
line-height: 120px;

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

color: #D62300;
font-size: 140%;
animation: Test2 2s infinite alternate;

} 


.bread  {

grid-column-start: 2;
grid-row-start: 2; 
line-height: 0px;

top: 60px;
left: 310px;
height: auto;
width: 17%;
z-index: -1;
animation: bounce 3s alternate infinite;

}

.bread2  {


position: absolute;
top: 290px;
left: 0px;
height: auto;
width: 17%;
z-index: -1;


}

@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-30px);
  }
}


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


}

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