/* MARK: fonts */
html {
  max-height: 100dvh;
  background-color: white;
}
@font-face {
  font-family: "megrim";
  src: url("fonts/SeraphsVF.woff2") format("truetype");
}
@font-face {
  font-family: audio;
  src: url("fonts/Audiowide-Regular.ttf") format("truetype");
}

a {
  position: fixed;
  font-family: "megrim";
  font-weight: bolder;
  color: red;
}

header {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
body {
  font-family: "megrim", sans-serif;
  overflow-x: scroll;
  overflow-y: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, 20em);
}

h1 {
  font-family: "audio", sans-serif;
  font-size: 6rem;
  letter-spacing: 0.5em;
  margin: 0%;
}

h2 {
  transform: rotate(-20deg) translateY(1em) translateX(-2em);
  font-size: 300%;
  text-align: end;
  line-height: 0.7;
  margin-left: 2em;
  animation-name: --anotherdimention-animatie;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}
@keyframes --anotherdimention-animatie {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(-40deg);
  }
}

dm1 {
  font-size: 80%;
  margin-right: 0.3em;
  br {
    margin-right: 0.3em;
  }
}
dm2 {
  font-size: 110%;
  font-weight: 1000;
  letter-spacing: 0.2em;
}
DM3H {
  font-size: 170%;
  font-weight: 10;
  letter-spacing: -0.08em;
  font-style: italic;
  margin-right: 0.2em;
  font-variation-settings:
    "wght" 100,
    "SRFS" 43;
}
DM4L {
  font-size: 100%;
  font-weight: 10;
  letter-spacing: 0.3em;
  font-style: italic;
  font-weight: 1000;
}

main {
  width: max-content;
  display: flex;
  margin: 0;
  padding: 0;
}
article {
  width: 100%;
  max-width: 60vw;
  max-height: 40vh;
  margin: 0;
}
p {
  padding: 0;
  margin: 0em;
}
em {
  font-size: 300%;
  color: greenyellow;
  animation-name: titel-animatie;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}
@keyframes titel-animatie {
  0% {
    font-weight: 100;
  }
  100% {
    font-weight: 900;
  }
}

biga {
  font-size: 160%;
  z-index: 2;
}
footer {
  align-content: end;
  text-align: end;
  animation-name: --footer-animatie;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}
@keyframes --footer-animatie {
  0% {
    width: 85dvw;
  }
  100% {
    width: 140dvw;
  }
}
@media (width < 675px) {
  h1 {
    font-size: 4rem;
    letter-spacing: 0.1em;
    margin: 3em 3em 2em 1em;
  }

  h2 {
    font-size: 300%;
    margin-top: 5dvh;
  }

  .intergalactic {
    font-size: 200%;
    letter-spacing: 0.2em;
  }

  article {
    margin-top: 10dvh;
    font-size: 100%;
    position: left;
  }

  em {
    font-size: 200%;
  }

  biga {
    font-size: 130%;
  }
}

@media (width < 400px) {
  h1 {
    font-size: 15dvw;
    letter-spacing: 0.1em;
    margin: 0.5em;
    padding: 0;
    position: center;
  }

  h2 {
    font-size: 20dvw;
    margin-top: 1dvh;
  }

  article {
    font-size: 1em;
    width: 90%;
    max-width: 10rem;

    height: auto;
  }

  em {
    font-size: 3dvh;
  }

  biga {
    font-size: 5dvh;
  }
}

@media (height < 700px) {
  html {
    overflow-y: hidden;
  }

  h1 {
    font-size: 7dvh;
    letter-spacing: 0.1em;
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    padding: 0;
    position: center;
  }

  h2 {
    font-size: 7dvw;
    margin: 1dvh;
    margin-right: 2dvw;
  }

  article {
    margin: 1dvh;
    font-size: 3dvh;
    height: 60%;
  }

  em {
    font-size: 3dvh;
  }

  biga {
    font-size: 5dvh;
  }
  .inter {
    margin: 0;
    padding: 0;
    font-size: 2dvh;
    z-index: 5;
    letter-spacing: 1em;
    font-weight: 800;
    color: red;
    transform: rotate(45deg);
  }
}

.drop {
  z-index: 20;
  size: 200%;
  animation-name: drop-animation;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}
@keyframes drop-animation {
  25% {
    font-size: 300%;
  }

  100% {
    font-size: 0%;
  }
}
.steam {
  animation-name: steam-animation;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}
@keyframes steam-animation {
  0% {
    opacity: 100;
  }

  100% {
    color: aliceblue;
    font-size: 400%;
    opacity: 0;
  }
}

.inter {
  margin: 0;
  padding: 0;
  font-size: 400%;

  letter-spacing: 1em;
  font-weight: 800;
  color: red;
  transform: rotate(45deg);
}

.intergalactic1 {
  top: 0;
  left: 0;
  pointer-events: none;

  animation-name: myAnimation;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

@keyframes myAnimation {
  0% {
    translate: 140vw 0;
  }

  100% {
    translate: -100vw 0;
  }
}
.intergalactic2 {
  margin: 0;
  padding: 0;
  font-size: 300%;
  pointer-events: none;

  letter-spacing: 2em;
  font-weight: 800;
  color: red;
  position: fixed;
  left: 1em;

  opacity: 25%;

  animation-name: intergalactic2;
  animation-duration: 30s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: rotate(none);

  @media (width < 500px) {
    font-size: 8dvw;
    transform: rotate(90deg);
  }
  @media (height < 400px) {
    animation-duration: 10s;
  }
}

@keyframes intergalactic2 {
  0% {
    translate: 0 -200vh;
  }

  100% {
    translate: 0 100vh;
  }
}
@media (width < 500px) {
  @keyframes intergalactic2 {
    0% {
      translate: -75vw -300vh;
    }

    100% {
      translate: -75vw 300vh;
    }
  }
}
/*
.intergalactic3 {
  animation-name: intergalactic3;
  animation-duration: 7s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes intergalactic3 {
  0% {
    translate: 500;
  }

  100% {
    translate: -250vw;
  }
}
.intergalactic4 {
  animation-name: intergalactic4;
  animation-duration: 7s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes intergalactic4 {
  0% {
    translate: 500vw;
  }

  100% {
    translate: 500vw;
  }
} */