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

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

div:hover {

font-weight: 100;
color: #FF8732;
font-size: 150%;


}



body {
  background-color: #f5ebdc;
}

.Letter1{
  position: relative;
  grid-column-start: 1;
  grid-row-start: 1;
  line-height: 150px;
  color: #d62300;
  font-size: 300%;
  text-align:right;
  animation: breathe 2s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;

}

.Letter2 {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 2;
  line-height: 150px;
  color: #d62300;
  font-size: 300%;
  text-align:right;
  animation: breathe 8s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;

}

.Letter3 {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 3;
  line-height: 150px;
  color: #d62300;
  font-size: 300%;
  text-align:right;
  animation: breathe 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;

}

.Letter4 {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 4;
  line-height: 150px;
  color: #d62300;
  font-size: 300%;
  text-align:right;
  animation: breathe 8s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;

}

.Letter5 {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 5;
  line-height: 150px;
  color: #d62300;
  font-size: 300%;
  text-align:right;
  animation: breathe 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;

}

.Letter6 {
  position: relative;
  grid-column-start: 1;
  grid-row-start: 6;
  line-height: 150px;
  color: #d62300;
  font-size: 300%;
  text-align:right;
  animation: breathe 5s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;

}

.Letter7 {
  position: relative;
  grid-column-start: 2;
  grid-row-start: 1;
  line-height: 150px;
  color: #d62300;
  font-size: 300%;
  animation: breathe 1s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;

}

.Letter8 {
  position: relative;
  grid-column-start: 2;
  grid-row-start: 2;
  line-height: 150px;
  color: #d62300;
  font-size: 300%;
  animation: breathe 3s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;

}

.Letter9 {
  position: relative;
  grid-column-start: 2;
  grid-row-start: 3;
  line-height: 150px;
  color: #d62300;
  font-size: 300%;
  animation: breathe 8s alternate infinite;
  animation-delay: var(--delay);
  overflow: hidden;

}

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

}



@keyframes breathe {
  0% {
    font-variation-settings: "ROND" 0, "wght" 100;
  }

  60% {
    font-variation-settings: "ROND" 40, "wght" 600;
  }

  100% {
    font-variation-settings: "ROND" 0, "wght" 900;
  }
}

@keyframes bread {
  0% {
    font-variation-settings: "ROND" 0, "wght" 100;
    transform: translate(90px, 170px);
    
  }

  60% {
    font-variation-settings: "ROND" 40, "wght" 600;
    transform: translate(90px, 170px);
    
  }

  100% {
    font-variation-settings: "ROND" 0, "wght" 900;
    transform: translate(90px, 170px);
    
  }
}