@font-face {
  font-family: "Seraphs";
  src: url("/fonts/SeraphsVF.woff2");
}

html {
  --fontsize: 50px;
  --fontlove: 40px;
  --rood: rgb(251, 4, 4);
  --gone1: white;
  --gone2: rgba(255, 255, 255, 0.51);
  --gone3: rgba(255, 255, 255, 0.114);
  --story1: rgba(255, 217, 0, 0.414);
  --story2: rgba(255, 217, 0, 0.681);
  --story3: rgba(255, 217, 0, 0.997);
  --boomblue: rgb(113, 113, 251);
}

@keyframes --laloving {
  0% {
    scale: 1;
    font-variation-settings:
      "wght" 100,
      "SRFS" 11;
  }
  20% {
    scale: 0.5;
    font-variation-settings:
      "wght" 50,
      "SRFS" 5;
  }
  40% {
    scale: 1.5;
    font-variation-settings:
      "wght" 400,
      "SRFS" 22;
  }
  60% {
    scale: 0.5;
    font-variation-settings:
      "wght" 100,
      "SRFS" 11;
  }
  /* 80% {
    scale: 0.5;
    font-variation-settings:
      "wght" 50,
      "SRFS" 5;
  } */
  100% {
    scale: 1.5;
    font-variation-settings:
      "wght" 800,
      "SRFS" 44;
    color: var(--rood);
  }
}

@keyframes --snake {
  0% {
    translate: 0 0;
  }

  25% {
    translate: 0 4.5em;
  }

  50% {
    translate: -8em 4.5em;
  }

  75% {
    translate: 0 4.5em;
  }
}

@keyframes --side {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 2em 0;
    color: var(--story3);
  }
}

@keyframes --boom {
  0% {
    color: var(--gone3);
  }
  50% {
    color: var(--boomblue);
  }
  100% {
    color: var(--gone3);
  }
}

@keyframes --gone {
  0% {
    color: var(--gone1);
  }

  25% {
    color: var(--gone2);
  }

  50% {
    color: var(--gone3);
  }

  75% {
    color: var(--gone2);
  }
}

@keyframes --aaaym {
  0% {
    translate: 0 0;
    scale: 1;
  }
  50% {
    translate: 0 -5.9em;
    scale: 1;
  }
  100% {
    translate: 0 0;
    scale: 1.5;
  }
}

@keyframes --story {
  0% {
    color: var(--story1);
  }

  25% {
    color: var(--story2);
  }

  50% {
    color: var(--story3);
  }

  75% {
    color: var(--story2);
  }

  100% {
    color: var(--story1);
  }
}

/* cookie button focus beter */

body {
  font-size: 20px;
  display: grid;
  /* section p { */
  grid-template-columns: 17em 10em 15em 10em;
  /* grid-auto-rows: 100px; */
  /* grid-template-rows: 80px 90px 80px auto 80px 80px; */
  align-items: start;
  grid-template-areas:
    ". one one one"
    ". two main1 three"
    ". four main2 ."
    ". . main3 five "
    ". . main4 ."
    ". . main5 ."
    ". six main6 seven"
    ". . main7 ."
    ". eight eight eight"
    ". main8 . main9"
    ". ten ten ten";
  @media (width < 60em) {
    grid-template-columns: 1em 10em 10em;
    /* grid-auto-rows: 100px; */
    /* grid-template-rows: 80px 90px 80px auto 80px 80px; */
    align-items: start;
    grid-template-areas:
      ". one one one"
      ". two main1 three"
      ". four main2 ."
      ". . main3 five "
      ". . main4 ."
      ". . main5 ."
      ". six main6 seven"
      ". . main7 ."
      ". eight eight eight"
      ". main8 . main9"
      ". ten ten ten";
  }
}

/* main lyric from 10 */

p:nth-of-type(1) {
  grid-area: one;
  text-decoration-line: overline underline;

  font-size: large;
  font-family: "Seraphs";
  font-weight: 100;
}

p:nth-of-type(2) {
  /* color: green; */
  font-family: "Seraphs";
  text-decoration-line: overline;
  font-weight: 100;
  grid-area: two;
}

p:nth-of-type(3) {
  /* color: red; */
  font-family: "Seraphs";
  text-decoration-line: underline;
  text-decoration-style: wavy;
  font-weight: 100;
  grid-area: three;
  animation-name: --snake;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

p:nth-of-type(4) {
  /* color: orange; */
  font-family: "Seraphs";
  font-weight: 100;
  grid-area: four;
  animation-name: --side;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

p:nth-of-type(5) {
  /* color: pink; */
  font-family: "Seraphs";
  font-weight: 100;
  grid-area: five;
  animation-name: --boom;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

p:nth-of-type(6) {
  /* color: blueviolet; */
  text-decoration-line: line-through;
  font-family: "Seraphs";
  font-weight: 100;
  grid-area: six;
}

p:nth-of-type(7) {
  /* color: white; */
  text-decoration-line: overline underline;
  font-family: "Seraphs";
  font-weight: 100;
  grid-area: seven;
}

p:nth-of-type(8) {
  /* color: lightseagreen; */
  font-family: "Seraphs";
  font-weight: 100;
  grid-area: eight;
  animation-name: --gone;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

p:nth-of-type(9) {
  /* color: lightsalmon; */
  font-family: "Seraphs";
  font-weight: 100;
  grid-area: ten;
}

/* start main lyric */

p:nth-of-type(10) {
  /* color: lightblue; */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  grid-area: main1;
  justify-self: center;
  font-family: "Seraphs";
  font-size: var(--fontsize);
}

p:nth-of-type(11) {
  /* color: lightsalmon; */
  grid-area: main2;
  justify-self: center;
  font-family: "Seraphs";
  font-size: var(--fontsize);
}

/* LOVING */
p:nth-of-type(12) {
  /* color: lightsalmon; */
  grid-area: main3;
  justify-self: center;
  text-decoration-line: underline;
  font-family: "Seraphs";
  font-size: var(--fontlove);
  transition: 1s;
  /* &:hover {
    transition: 1s;
    
  } */
  animation-name: --laloving;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

/* font-variation-settings:
      "wght" 800,
      "SRFS" 44; */

p:nth-of-type(13) {
  /* color: lightsalmon; */
  grid-area: main4;
  justify-self: start;
  text-decoration-line: underline;
  text-decoration-style: dashed;
  font-family: "Seraphs";
  font-size: var(--fontsize);
  writing-mode: sideways-rl;
}

p:nth-of-type(14) {
  /* color: lightsalmon; */
  grid-area: main5;
  font-family: "Seraphs";
  text-decoration-line: underline;
  text-decoration-style: dashed;
  justify-self: end;
  font-size: var(--fontsize);
  writing-mode: sideways-rl;
}

p:nth-of-type(15) {
  /* color: red; */
  grid-area: main6;
  justify-self: center;
  font-family: "Seraphs";
  font-size: var(--fontsize);
}

/* IM */
p:nth-of-type(16) {
  grid-area: main7;
  justify-self: center;
  font-family: "Seraphs";
  font-size: var(--fontsize);
  animation-name: --aaaym;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

p:nth-of-type(17) {
  /* color: red; */
  grid-area: main8;
  justify-self: center;
  font-family: "Seraphs";
  font-size: var(--fontsize);
}

p:nth-of-type(18) {
  /* color: red; */
  grid-area: main9;
  justify-self: center;
  /* text-decoration-line: overline;
  text-decoration-style: wavy; */
  font-family: "Seraphs";
  font-size: var(--fontsize);
  animation-name: --story;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}