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

/* MARK: KLEUREN */

:root {
  --rood: #de0909;
  --blauw: blue;
  --groen: forestgreen;
  --zwart: rgb(30, 50, 35);
  --roze: rgb(178, 25, 78);
}

/* MARK: ALGEMEEN */

body {
  margin: clamp(2em, 5vw, 5em);
  background-color: rgb(250, 251, 211);
}

.grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(50, minmax(0, 3em));
  width: 100%;
}

p {
  display: contents;
  font-family: seraphs;
  margin: 0;
  text-transform: uppercase;
}

h1 {
  font-family: seraphs;
  position: absolute;
  top: -1em;
  left: 50%;

  margin: 0;
  z-index: 0;
  pointer-events: none;

  font-size: clamp(15em, 18vw, 18em);
  line-height: 0.65em;
  font-variation-settings: "wght" 200;

  color: --zwart;
  opacity: 0.09;
  text-shadow: 0.08em 0.03em 0 rgb(222, 9, 9);
  text-transform: uppercase;
  text-align: center;

  animation: achtergrond linear;
  animation-timeline: scroll();
  animation-range: 0vh 300vh;
}

@keyframes achtergrond {
  from {
    transform: scaley(0.5) rotate(-2deg);
  }

  to {
    transform: scaley(1.5) rotate(7deg);
  }
}

/* MARL: ALL */

all {
  grid-column: 3;
  grid-row: 3;
  font-size: clamp(10em, 20vw, 20em);
  line-height: 0;
  z-index: 1;
  color: var(--zwart);

  font-variation-settings: "wght" 10;

  transition: 0.5s;
}

all:hover {
  transform: scale(1.3);
  letter-spacing: 0.1em;
  color: var(--groen);

  font-variation-settings: "wght" 20;
}

/* MARK: THIS */

this {
  font-variation-settings: "wght" 20;
  grid-column: 1;
  grid-row: 6;
  font-size: clamp(5em, 9vw, 9em);
  line-height: 0;
  letter-spacing: 0.8em;
  z-index: 2;

  transition: 0.5s;
}

this:hover {
  transform: scale(1.3);
  color: var(--groen);
  font-variation-settings: "wght" 100;
}

/* MARK: RONDJE */

.rondje {
  font-family: seraphs;
  font-variation-settings:
    "wght" 120,
    "SRFS" 30;

  font-size: clamp(2em, 7vw, 7em);
  grid-column: 8;
  grid-row: 7;
  place-self: center;

  animation: --rondje 5s infinite linear;
  animation-delay: calc(sibling-index() * 0.34s - 5s);

  color: var(--blauw);
  text-transform: uppercase;

  transition: 0.5s;
}

.rondje:hover {
  font-size: 9em;
  font-variation-settings: "wght" 200;
  color: forestgreen;
}

@keyframes --rondje {
  0% {
    transform: rotate(0deg) translateY(1.5em);
  }

  100% {
    transform: rotate(360deg) translateY(1.5em);
  }
}

/* MARK: STUKJE1 */

stukje1 {
  font-variation-settings: "wght" 50;
  font-size: clamp(1em, 2vw, 2em);
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row: 13;
  line-height: 1em;
  opacity: 0.5;
  color: var(--zwart);

  transition: 0.5s;
}

stukje1:hover {
  font-variation-settings: "wght" 200;
  line-height: 1.5em;
  font-size: clamp(1.5em, 2vw, 2.5em);
  word-spacing: 0.5em;
  opacity: 1;
}

/* MARK: LONGER  */

span.longer {
  color: var(--zwart);
  font-size: 2em;
  letter-spacing: 0.5em;
  margin: 0.5em;
  transition: 0.5s;
}

span.longer:hover {
  font-size: 2.2em;
  color: var(--roze);
  letter-spacing: 0.8em;
}

/* MARK: CLOSER */

closer {
  font-size: clamp(2.5em, 7vw, 7em);
  grid-column-start: 4;
  grid-column-end: 10;
  grid-row: 16;

  font-variation-settings:
    "wght" 20,
    "SRFS" 0;

  color: var(--zwart);
  transition: 0.5s;
}

closer:hover {
  font-variation-settings:
    "wght" 200,
    "SRFS" 30;

  color: var(--rood);
}

/* MARK: STUKJE2 */

stukje2 {
  font-variation-settings: "wght" 50;
  font-size: clamp(1em, 2vw, 2em);
  grid-column-start: 2;
  grid-column-end: -1;
  grid-row: 20;
  line-height: 2.5em;
  opacity: 0.35;
  word-spacing: 0.2em;
  color: var(--zwart);

  transition: 0.5s;
}

stukje2:hover {
  font-variation-settings: "wght" 200;
  opacity: 1;
}

/* MARK: FAILS */

.fails {
  display: inline-block;
  font-size: 2em;
  color: var(--rood);
  font-variation-settings: "wght" 200;
  rotate: -12deg;
  transition: 0.5s;
}

.fails:hover {
  transform: rotate(12deg) scale(1.3);
}

/* MARK: BACK */

.back {
  display: inline-block;
  font-size: 2.5em;
  color: var(--groen);
  font-variation-settings: "wght" 200;
  transition: 0.5s;
}

.back:hover {
  transform: scaleY(2) scale(1.3);
  font-variation-settings: "wght" 100;
}

/* MARK: SORRY */

.sorry {
  display: inline-block;
  font-size: 3em;
  color: var(--roze);
  font-variation-settings: "wght" 150;
  opacity: 0.3;
  transition: 0.5s;
}

.sorry:hover {
  opacity: 1;
  font-variation-settings: "wght" 20;
  transform: scale(1.3);
}

/* MARK: STUKJE3 */

stukje3 {
  grid-column: 6 / 11;
  grid-row: 28;
  font-size: clamp(0.9em, 1.2vw, 1.2em);
  line-height: 1.5;
  opacity: 0.5;
  transition: 0.3s;
}

stukje3:hover {
  opacity: 1;
}

/* MARK: STORY1 */

.story1 {
  display: inline-block;
  font-size: 1.5em;
  transition: 0.5s;
  color: var(--blauw);
  transform: scaleX(1.3);
}

.story1:hover {
  font-size: 3em;

  transform: rotate(5deg) scale(1.3);
}

/* MARK: SCARE ME */

.scare {
  font-size: 1.5em;

  display: inline-block;

  transition: 0.5s;
}

.scare:hover {
  font-size: 3em;
  color: var(--roze);
  transform: scaleY(1.9) scale(1.3);
}

/* MARK: TO IT */

.toit {
  font-size: 1.5em;

  display: inline-block;

  transition: 0.5s;
}

.toit:hover {
  font-size: 3em;
  color: var(--groen);
  transform: skew(18deg) scale(1.3);
}

/* MARK: DO IT */

.doit {
  font-size: 1.5em;

  display: inline-block;
  transition: 0.5s;
}

.doit:hover {
  font-size: 3em;
  color: var(--rood);
  transform: skew(-18deg) scale(1.3);
}

.story {
  display: inline-block;
  font-size: 1.5em;
  transition: 0.5s;
}

.story:hover {
  font-size: 3em;
  color: var(--blauw);
  transform: rotate(5deg) scale(1.3);
}

/* MARK: TRAIN */

.train {
  display: inline-block;
  font-size: 1.5em;
  transition: 0.5s;
}

.train:hover {
  font-size: 3em;
  color: var(--roze);
  transform: skew(18deg) scale(1.3);
}

/* MARK: THINK THAT */

.think {
  display: inline-block;
  font-size: 1.5em;
  transition: 0.5s;
}

.think:hover {
  font-size: 3em;
  color: var(--rood);
  transform: skew(-18deg) scale(1.3);
}

stukje4 {
  grid-column: 2 / 8;
  grid-row: 35;
  font-size: clamp(0.9em, 1.2vw, 1.2em);
  line-height: 1.5;
  opacity: 0.5;
  transition: 0.3s;
  color: var(--zwart);
}

stukje4:hover {
  opacity: 1;
}