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

/* Bron voor hulp/inspo voor de ticker tape animatie: https://www.ryangittings.co.uk/blog/pure-css-ticker/ */

header {
  font-size: xx-large;
  color: aquamarine;
  opacity: 0.5;
  text-decoration: line-through;
}
body {
  background-color: #587668;
  font-family: "Seraphs";
}
main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, auto));
  width: min(100%, 80rem);
  margin-inline: auto;
  padding-inline: 1rem;
  box-sizing: border-box;
  font-variation-settings:
    "wght" 110,
    "SRFS" 5;
  font-size: 2em;
  line-height: 3rem;
  column-width: 30ch;
}

.ticker {
  --ticker-duration: 40s;
  font-size: xx-large;
  font-variant: small-caps;

  position: relative;

  width: 100%;

  overflow: hidden;

  padding: 0.5rem;
}

.ticker__inner {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: nowrap;

  white-space: nowrap;

  animation-iteration-count: infinite;

  animation-timing-function: linear;

  animation-name: ticker;

  animation-duration: var(--ticker-duration);

  text-align: center;

  padding-left: 100%;

  width: max-content;
}

.ticker__inner p {
  margin: 0 2rem;
}

@keyframes ticker {
  0% {
    transform: translate3d(0%, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
.caps {
  text-transform: uppercase;
}

.v1 {
  grid-area: 1 / 1 / 2 / 13;
  text-align: right;
}

.bigleft {
  grid-area: 2 / 2 / 3 / 6;
  text-align: left;
  text-transform: uppercase;
  color: #ffffff;
  transform: rotate(-20deg);
}
.bigleft:hover,
.bigright:hover {
  color: rgb(6, 0, 120);
  transform: scale(1.5);
  transition: 500ms;
}
.bigright {
  grid-area: 3/ -8 / 4 / -5;
  text-align: right;
  text-transform: uppercase;
  color: #ffffff;
  transform: rotate(15deg);
}
h1 {
  font-weight: bolder;
  font-style: oblique;
  font-size: 7vw;
}
h2 {
  grid-area: 4 / 4 / 5 / 5;
}
h3 {
  grid-area: 5 / 4 / 6 / 6;
}

h4 {
  grid-area: 5 / 4 / 5/ 6;
  font-variation-settings:
    "wght" 200,
    "SRFS" 0;
  font-style: italic;
  font-size: clamp(5vw, 15vw, 20vw);
  line-height: clamp(3vw, 18vw, 15rem);
  padding-top: 5rem;
}
h4:hover {
  text-decoration: underline;
  transform: scale(1.5) skew(-15deg);
  transition: 500ms;
  color: gold;
}

.hudson {
  grid-area: 6 /-9 / 8 / -1;
  text-align: left;
}
.gall {
  grid-area: 8 /-13 / 10 / -6;
  text-align: left;
}
#sectick {
  grid-area: 10 / 1 / 11 / 13;
  font-style: italic;
  font-variation-settings:
    "wght" 150,
    "SRFS" 80;
  text-decoration: line-through dashed;
}
.jazz {
  grid-area: 11 / -1 / 12/ -9;
}
.jazz > span {
  background: linear-gradient(to right, #332117, #f4c290);
  background-clip: text;
  color: transparent;
  font-variation-settings:
    "wght" 170,
    "SRFS" 60;
}

.fullsteam {
  display: none;
}

.ramble {
  letter-spacing: -10%;
  font-variation-settings:
    "wght" 185,
    "SRFS" 25;
}

em {
  font-variation-settings:
    "wght" 100,
    "SRFS" 60;
}

strong {
  color: rgb(91, 0, 5);
  font-variation-settings:
    "wght" 200,
    "SRFS" 0;
}
strong:hover {
  transition: 500ms;
  font-size: 3em;
}
.mario {
  display: none;
}
.ip {
  display: none;
}
.oldschool {
  display: none;
}
.vertical {
  display: none;
  font-variation-settings:
    "wght" 200,
    "SRFS" 60;
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-shadow: #555 1rem 0;
}
.slop {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .ticker__inner {
    flex-wrap: wrap;

    white-space: inherit;

    padding-left: 0;

    width: auto;
  }
}