@font-face {
  font-family: "Seraphs";
  src: url(../type/SeraphsVF.woff2);
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Seraphs";
  src: url(../type/SeraphsVF.woff2);
  font-weight: 150;
  font-style: normal;
}

@font-face {
  font-family: "Seraphs";
  src: url(../type/SeraphsVF.woff2);
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Seraphs";
  src: url(../type/SeraphsVF.woff2);
  font-weight: 600;
  font-style: normal;
}

body {
  background-color: rgb(182, 209, 171);
}

main {
  text-transform: uppercase;
  font-family: Seraphs;
  font-weight: 100;
  font-size: 4vw;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-areas:
    "h1"
    "h21"
    "p1"
    "one"
    "two"
    "p2"
    "p3"
    "p4"
    "p5"
    "p6"
    "h22"
    "p7"
    "p8"
    "p9"
    "p10"
    "h23"
    "h24"
    "p11"
    "p12"
    "h25";
}

@media (width>30em) {
  main {
    grid-template-columns: 18vw 20vw 20vw 20vw 20vw;
    grid-template-rows: auto auto auto auto auto auto 1fr auto auto auto auto auto auto auto auto auto auto auto;
    grid-template-areas:
      ". p1 p1 p1 p1  "
      "h1 . one two .   "
      "h1 h21 h21 h21 . "
      "h1 . p2 p2 p2    "
      "h1 p3 p3 p3 p3    "
      "h1 p4 p4 p4 p4   "
      "h1 p5 . h22 h22  "
      "h1 p6 p6 p6 .    "
      ". . p7 p7 p7     "
      ". . p7 p7 p7     "
      "p8 p8 p8 p8 .    "
      "p9 p9 p9 . .     "
      ". . p10 p10 p10  "
      "h23 h23 . . .    "
      ". h24 h24 h24 .  "
      ". . p11 p11 p11  "
      ". . p12 p12 p12 "
      ". . . h25 h25   ";

    h1 {
      writing-mode: sideways-lr;
    }

    #p5 {
      @media (prefers-reduced-motion: no-preference) {
        animation:
          shake 0.4s ease-in-out 5,
          crash 1s ease-in forwards;
        animation-iteration-count: infinite;
      }
    }
  }
}

h1 {
  grid-area: h1;
  font-family: Seraphs;
  font-weight: 600;
  font-size: 13vw;
  margin: 0;
  writing-mode: horizontal-tb;
  transition: 1s;
}

h1:hover {
  color: rgb(10, 81, 10);
  @media (prefers-reduced-motion: no-preference) {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
    font-size: 14vw;
  }
}

@keyframes shake {
  0% {
    transform: translate(2px, 2px) rotate(0deg);
  }
  10% {
    transform: translate(-2px, -2px) rotate(-2deg);
  }
  20% {
    transform: translate(-4px, 0px) rotate(2deg);
  }
  30% {
    transform: translate(4px, 3px) rotate(0deg);
  }
  40% {
    transform: translate(2px, -2px) rotate(1deg);
  }
  50% {
    transform: translate(-2px, 3px) rotate(-1deg);
  }
  60% {
    transform: translate(-4px, 2px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-2deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(2deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(2px, 2px) rotate(0deg);
  }
}
/* bron: https://www.w3schools.com/howto/howto_css_shake_image.asp */

h2 {
  font-family: Seraphs;
  font-weight: 400;
  font-size: 7vw;
  margin: 0;
}

#h21 {
  grid-area: h21;
  transition: 0.5s;
}

#h21:hover {
  color: rgb(146, 9, 9);
  font-size: 9vw;
}

#h22 {
  grid-area: h22;
  font-size: 6vw;
  align-self: center;
  place-self: center;
}

#h23 {
  grid-area: h23;
  animation: variables 5s forwards;
  animation-iteration-count: infinite;
}

@keyframes variables {
  0% {
    font-variation-settings:
      "wght" 400,
      "SRFS" 45;
  }

  10% {
    font-variation-settings:
      "wght" 400,
      "SRFS" 60;
  }

  20% {
    font-variation-settings:
      "wght" 400,
      "SRFS" 38;
  }

  30% {
    font-variation-settings:
      "wght" 400,
      "SRFS" 20;
  }

  40% {
    font-variation-settings:
      "wght" 400,
      "SRFS" 42;
  }

  50% {
    font-variation-settings:
      "wght" 400,
      "SRFS" 45;
  }

  60% {
    font-variation-settings:
      "wght" 400,
      "SRFS" 60;
  }

  70% {
    font-variation-settings:
      "wght" 400,
      "SRFS" 38;
  }

  80% {
    font-variation-settings:
      "wght" 400,
      "SRFS" 20;
  }

  90% {
    font-variation-settings:
      "wght" 400,
      "SRFS" 42;
  }

  100% {
    font-variation-settings:
      "wght" 400,
      "SRFS" 43;
  }
}

#h24 {
  grid-area: h24;
}

#h25 {
  grid-area: h25;
  display: inline-block;
  margin-top: 3em;
}

p {
  font-size: 3vw;
  margin: 0;
}

#one {
  grid-area: one;
}

#two {
  grid-area: two;
}

#p1 {
  @media (prefers-reduced-motion: no-preference) {
    grid-area: p1;
    opacity: 0.7;
    font-size: 5vw;
    font-weight: 200;
    white-space: nowrap;
    animation: blink 5s forwards;
    animation-iteration-count: infinite;
  }
}
/* bron: https://www.w3schools.com/cssref/pr_text_white-space.php */

@keyframes blink {
  0% {
    color: black;
  }

  10% {
    color: transparent;
  }

  20% {
    color: rgb(146, 9, 9);
  }

  30% {
    color: transparent;
  }

  40% {
    color: black;
  }

  50% {
    color: transparent;
  }

  60% {
    color: rgb(10, 81, 10);
  }

  70% {
    color: transparent;
  }

  80% {
    color: black;
  }

  90% {
    color: transparent;
  }

  100% {
    color: black;
  }
}

#p2 {
  grid-area: p2;
}

#p3 {
  grid-area: p3;
}

#p4 {
  grid-area: p4;
}

#p5 {
  grid-area: p5;
  align-self: center;
  place-self: center;
  font-weight: 400;
  font-size: 5vw;
  transition: 0.5s;
}

@keyframes crash {
  0% {
    font-size: 5vw;
  }

  20% {
    color: rgb(212, 0, 0);
  }

  50% {
    font-size: 10vw;
  }

  80% {
    color: rgb(212, 0, 0);
  }

  100% {
    font-size: 5vw;
  }
}

#p6 {
  grid-area: p6;
  font-weight: 200;
}

#p7 {
  grid-area: p7;
}

#p8 {
  grid-area: p8;
}

#p9 {
  grid-area: p9;
}

#p10 {
  grid-area: p10;
}

#p11 {
  grid-area: p11;
  margin-top: 1em;
}

#p12 {
  grid-area: p12;
  margin-top: 1em;
}

#achtergrond {
  z-index: -1;
  writing-mode: sideways-rl;
  position: absolute;
  right: 5vw;
  top: 20vw;
  font-size: 20vw;
  font-weight: 600;
  opacity: 0.3;
  pointer-events: none; /* google gevraagd hoe ik de tekst genegeerd kan laten worden door de muis zodat die niet in de weg staat van hovers */
}

strong {
  text-shadow: 0 0.2em 0.5em;
  transition: 0.5s ease-in-out;
}

strong:hover {
  font-size: 5vw;
  text-shadow: 0 0.3em 0.7em;
}