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

*{
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;


}

p {
  font-family: 'Cheee', Helvetica, sans-serif;
}

.back {
  position: absolute;
  top: 20px;
  left: 25px;
  padding: 20px 30px 20px 20px;
  transition: 200ms;
  z-index: 1;
}
.back:hover {
  transform: translateX(-10px);
  transition: 200ms;
}
.long-arrow-left{
  display: block;
  width: 25px;
  height: 25px;
  border-top: 4px solid #000;
  border-left: 4px solid #000;
}
.long-arrow-left{
 transform: rotate(-45deg);
}
.long-arrow-left::after{
  content: "";
  display: block;
  width: 4px;
  height: 45px;
  background-color: black;
  transform: rotate(-45deg) translate(15px, 4px);
  left: 0;
  top: 0;
}

.container {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: 1fr;
  background-color: antiquewhite;
  align-items: center;
  perspective: 6000px;
  padding: 12% 0 8%;
}


.titel {
  overflow: hidden;
  line-height: 0;
  color: antiquewhite;
  -webkit-text-stroke: 4px rgb(25, 106, 192);
  /* text-shadow: -5px 5px rgb(25, 106, 192), -10px 10px 0px antiquewhite, -15px 15px 0px tomato, -20px 20px antiquewhite, -25px 25px rgb(25, 106, 192); */
}

.schmal, .breit, .mittel {
  font-variation-settings: 'yest' 100, 'grvt' 200;
  font-size: 28em;
  animation: 4000ms cubic-bezier(0.85, 0, 0.15, 1) fressen;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--animation-order)*250ms);
}


.row1 {
  grid-row: 1/2;
  grid-column: 1/2;
  justify-self: center;


}
 .row2 {
  grid-row: 2/4;
  grid-column: 1/2;
  justify-self: center;

} 



@keyframes fressen {
  0% {
    color: antiquewhite;
    font-variation-settings: 'yest' 100, 'grvt' 200;
    text-shadow: -0px 0px rgb(25, 106, 192), -0px 0px antiquewhite, -0px 0px rgb(25, 106, 192), -0px 0px antiquewhite, -0px 0px rgb(25, 106, 192);
  } 


  50% {
    color: tomato;
    font-variation-settings: 'yest' 700, 'grvt' 700;
    text-shadow: -5px 5px rgb(25, 106, 192), -10px 10px 0px antiquewhite, -15px 15px rgb(25, 106, 192), -20px 20px antiquewhite, -25px 25px rgb(25, 106, 192);
  }

  100% {
    color: antiquewhite;
    font-variation-settings: 'yest' 100, 'grvt' 200;
    text-shadow: -0px 0px rgb(25, 106, 192), -0px 0px antiquewhite, -0px 0px rgb(25, 106, 192), -0px 0px antiquewhite, -0px 0px rgb(25, 106, 192);
  }
}