@font-face {
  font-family: "Seraphs";
  src: url(font/SeraphsVF.woff2) format("woff2");
  font-weight: 100 200;
}
body {
  font-family: "Seraphs";
  line-height: 1.2;
  margin: 2rem;
}
h1 {
  font-size: 2rem;
}
p {
  font-variation-settings:
    "wght" 100,
    "SRFS" 2;
  font-size: 2rem;
  letter-spacing: 0.1em;
}
.around {
  font-variation-settings:
    "wght" 150,
    "SRFS" 0;
  font-size: clamp(4rem, 15vw, 9rem);
}

.shadow {
  font-variation-settings:
    "wght" 196,
    "SRFS" 1;
  font-size: clamp(5rem, 13vw, 9rem);
  color: darkgray;
  display: inline-block;
  writing-mode: vertical-rl;
  vertical-align: top;
}

.growing {
  font-variation-settings:
    "wght" 100,
    "SRFS" 41;
  font-size: clamp(4rem, 12vw, 8rem);
  display: inline-block;
  letter-spacing: -0.05em;
}

.running {
  font-variation-settings:
    "wght" 192,
    "SRFS" 37;
  font-size: clamp(2rem, 6vw, 3.5rem);
}

.cover {
  font-variation-settings:
    "wght" 200,
    "SRFS" 60;
  font-size: clamp(2.5rem, 8vw, 4.5rem);
}

.shallow {
  font-variation-settings:
    "wght" 100,
    "SRFS" 60;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}
.down {
  font-variation-settings:
    "wght" 188,
    "SRFS" 52;
  display: inline-block;
  translate: 0 0.8em;
  font-size: clamp(2.5rem, 8vw, 4rem);
}
.alarm {
  font-variation-settings:
    "wght" 200,
    "SRFS" 60;
  font-size: clamp(5rem, 18vw, 12rem);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .alarm {
    animation-name: trilling;
    animation-duration: 0.3s;
    animation-iteration-count: 15;
    animation-timing-function: linear;
  }
}
@keyframes trilling {
  0% {
    translate: 0em 0em;
  }
  25% {
    translate: -0.03em -0.03em;
  }
  50% {
    translate: 0.05em 0.05em;
  }
  75% {
    translate: -0.03em -0.03em;
  }
  100% {
    translate: 0 0;
  }
}

.whirlwind {
  font-variation-settings:
    "wght" 102,
    "SRFS" 40;
  font-size: clamp(2rem, 9vw, 5rem);
  white-space: nowrap;
}

.happens {
  font-variation-settings:
    "wght" 126,
    "SRFS" 60;
  font-size: clamp(2.5rem, 9vw, 5rem);
}

.witruimte {
  margin-bottom: 20rem;
}
.whirlwind span {
  display: inline-block;
}
.laag {
  translate: 0 0.25em;
}
.hoog {
  translate: 0 -0.25em;
}