:root {
  font-size: 500%;
  font-family: 'flame'; /* 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;



align-self: end;

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



}

.king {

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


align-self: start;

color: #D62300;
font-size: 140%;
animation: breathe 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 breathe {
  0% {
    font-variation-settings: "wght" bold, "wdth" 100;
  }

  60% {
    font-variation-settings: "wght" 200, "wdth" 200;
  }

  100% {
    font-variation-settings: "wght" normal;
  }
}