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

body {
  font-family: 'Seraphs', Arial, sans-serif;
  max-width: 85rem; /*was 75rem*/
  margin: 0 auto;
}

.regel {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
}

.rechts {
  justify-content: end;
}

.heelgroot {
  font-size: 9rem;
  font-weight: 800;
  animation: serifs 3s ease-in-out infinite alternate;
}
@keyframes serifs {
  from { font-variation-settings: 'wght' 800, 'SRFS' 0; }
  to   { font-variation-settings: 'wght' 800, 'SRFS' 20; }
}
.groot          { font-size: 5.5rem; font-weight: 600; }
.middelgedraaid { font-size: 5.5rem; font-weight: 600; rotate: 15deg; }
.middel         { font-size: 3.5rem; font-weight: 500; }
.klein          { font-size: 2rem;   font-weight: 300; }
.tiny           { font-size: 1.5rem; font-weight: 300; }

/* telefoon, belangrijk anders heel cursed */
@media (max-width: 50rem) {
  .regel     { grid-auto-flow: row; }
  .heelgroot { font-size: 4rem; }
  .groot     { font-size: 3rem; }
}

.regel:first-child .heelgroot {
  animation:
    ronddraaien 5s linear infinite;
}

@keyframes ronddraaien {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

.regel:nth-child(2) .groot {
  animation: glitchmannetje 0.4s steps(2) infinite;
}

@keyframes glitchmannetje {
  0%   { translate: 0 0;      rotate: 0deg;    font-weight: 600; }
  25%  { translate: 2px -2px; rotate: -1deg;   font-weight: 300; }
  50%  { translate: -2px 1px; rotate: 1deg;    font-weight: 900; }
  75%  { translate: 1px 2px;  rotate: -0.5deg; font-weight: 500; }
}