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

*{
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;


}

p {
  font-family: 'Antarctica', 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(7, 1fr);
  grid-template-columns: 1fr;
  background-color: antiquewhite;
  align-items: center;
  perspective: 6000px;
  padding: 5% 0;
}


.titel {
  overflow: hidden;
  color: antiquewhite;
  -webkit-text-stroke: 4px rgb(25, 106, 192);
  text-shadow: 6px 6px rgb(25, 106, 192);
}

.schmal, .breit, .mittel {
  font-variation-settings: 'wght' 150, 'wdth' 150;
  font-size: 22em;
  animation: 2600ms 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/3;
  grid-column: 1/2;
  justify-self: center;
  position: relative;
  left: 60px;

}
 .row2 {
  grid-row: 2/4;
  grid-column: 1/2;
  justify-self: center;
  position: relative;
  right: 100px;
} 
.row3 {
  grid-row: 3/5;
  grid-column: 1/2;
  justify-self: center;
  position: relative;
  left: 150px;
} 
.row4 {
  grid-row: 4/6;
  grid-column: 1/2;
  justify-self: center;
  position: relative;
  left: 30px;
} 
.row5 {
  grid-row: 5/7;
  grid-column: 1/2;
  justify-self: center;
  position: relative;
  z-index: 5;
  right: 150px;
} 
.row6 {
  grid-row: 6/8;
  grid-column: 1/2;
  justify-self: center;
  z-index: 6;
  position: relative;
  left: 70px;
  
} 
/* 
@keyframes farbe {
  22% {
    color: antiquewhite;
  } 

  50% {
    color: tomato;
  }

  78% {
    color: antiquewhite;
  }
} */

@keyframes fressen {
  0% {
    color: antiquewhite;
    font-variation-settings: 'wght' 150, 'wdth' 150;
  } 
  25% {
    color: antiquewhite;
    font-variation-settings: 'wght' 150, 'wdth' 150;
  } 

  50% {
    color: tomato;
    font-variation-settings: 'wght' 700, 'wdth' 150;
  }

  75% {
    color: antiquewhite;
    font-variation-settings: 'wght' 150, 'wdth' 150;
  }

  100% {
    color: antiquewhite;
    font-variation-settings: 'wght' 150, 'wdth' 150;
  }
}