/* MARK: fonts */
@font-face {
  font-family: "Seraphs";
  src: url("font/SeraphsVF.woff2") format("woff2"); /* Modern Browsers */
}
/* MARK: items */

html {
  color-scheme: light dark;

  --color-dark: #940000;
  --color-light: #d8e2ff;

  --color-background: light-dark(var(--color-light), var(--color-dark));
  --color-text: light-dark(var(--color-dark), var(--color-light));
}

body {
  font-family: "Seraphs";
  display: grid;
  grid-template-columns: auto 1fr;
  background-color: var(--color-background);
  color: var(--color-text);
}

header {
  font-size: 100px;
  font-weight: 600;
  padding: 10px;
  writing-mode: sideways-rl;
  top: 5.5555vi;
}

main {
  font-weight: 150;
  display: grid;
  gap: 40px;
  padding-left: 60px;
  padding-right: 50px;
}

@keyframes --fade-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

p {
  font-size: 50px;

  animation-name: --fade-animation;
  animation-timeline: view();
}

h1 {
  font-weight: 150;
}

h2 {
  font-weight: 150;
}

h3 {
  font-weight: 150;
}

h4 {
  font-weight: 150;
}

h5 {
  padding: 2em;
}

#all {
  font-size: 80px;
  letter-spacing: 10px;
}

#noise {
  font-size: 80px;
  font-weight: 170;
  font-style: italic;
  font-variation-settings: "SRFS" 50;
}

@keyframes --loud-animation {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}

#loud {
  font-size: 120px;
  font-weight: 600;

  display: inline-block;
  animation-name: --loud-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

#happen {
  display: inline-block;
  font-style: italic;
  font-size: 70px;
  font-variation-settings:
    "wght" 100,
    "SRFS" 30;
}

#haakjes {
  font-size: 25px;
  font-style: italic;
}

#running {
  font-style: italic;
  letter-spacing: 3px;
  font-weight: 100;
}

@keyframes --shadow-animation {
  0% {
    transform: translateX(1em);
  }
  100% {
    transform: translateX(0em);
  }
}

#shadow {
  font-style: italic;
  font-size: 80px;
  letter-spacing: -10px;
  font-weight: 250;

  display: inline-block;
  animation-name: --shadow-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes --down-animation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(30px);
  }
}

#down {
  display: inline-block;
  animation-name: --down-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

#shoulders {
  font-size: 98px;
  letter-spacing: 3.5px;
  font-weight: 300;
}

#when {
  font-size: 60px;
  font-style: italic;
  font-weight: 100;
}