html {
  height: 100%;
  background: 50% 50% no-repeat
}

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

html {
  color-scheme: light dark;

   --color-gradients: light-dark(#6daa8a, #4b7e64);
  --color-gradients2: light-dark(#cffacd,#79ab82);
  --color-gradients3: light-dark(#649f74, #3e6f4c);
  --color-gradients4: light-dark(#bfddc2, #bfddc2);
  --a-hover: #db6588;
  --a-focus: #e39bae;
  --a-focus2: deeppink;
  --color-magenta: light-dark(#EDE6D8,#263B2E);
}

body {
 background: var(--color-magenta);
}

main {
  padding: 2em;
  display: grid;
  grid-template-columns: repeat(12fr, 1fr);
  grid-template-rows: auto;
  font-family: "Seraphs";

}

main p:first-of-type {
  grid-column: 1 / 9;
  font-size: 1.5em;
  max-width: 22em;
}

h2 {
  padding: 2em;
  transform: rotate(330deg) translate(0px, 0px) skew(30deg, 0deg);
  font-family: "Seraphs";
  max-width: 15em;
  animation: wave 4s infinite ease-in-out;
}

.Wop {
  --aalt: 1;
  font-size: 1.8em;
  display: inline-block;
  animation: shake 0.5s infinite linear;
}

.flop {
  font-size: 2em;
  font-weight: bold;
  display: inline-block;
  animation: shake 0.3s infinite linear;
}

.TD {
  font-size: 1.3em;
}

.shake {
  display: inline-block;
  animation: shake 0.5s infinite linear;
}

.sideways {
  writing-mode: sideways-lr;
}

.loop {
  display: inline-block;
  animation: wave 4s infinite ease-in-out;
}

main p:nth-of-type(2) {
  grid-column: 5 / 8;
  grid-row: 3;
  max-width: 15em;
  font-size: 3em;
  text-align: right;
  animation: drop 1.3s infinite ease-out;
}
main p:nth-of-type(3) {
  grid-column: 6 / 10;
  grid-row: 4;
  padding: 2em;
  max-width: 15em;
  font-size: 1.3em;
  text-align: right;
  transform: rotate(355deg) translate(0px, 0px) skew(-41deg, 0deg);
  @media (prefers-reduced-motion:no-preference) {
		animation-name:--wolf-animation;
		animation-duration:4s;
		animation-iteration-count:infinite;
		animation-timing-function: linear;	
	}
}

main p:nth-of-type(4) {
  grid-column: 1 / 9;
  grid-row: 5;
  transition: rotate 90deg;
  font-size: 1.3em;
  max-width: 20em;
  font-variation-settings:
    "wght" 158,
    "SRFS" 43;
}

main p:nth-of-type(5) {
  grid-column: 6 / 9;
  grid-row: 6/ 7;
  max-width: 10em;
  font-size: 1.3em;
  text-align: right;
  line-height: 2em;
    animation: grow-progress linear forwards;
  animation-timeline: scroll();
}

main p:nth-of-type(6) {
  grid-column: 1 / 9;
  grid-row: 7 / 8;
  max-width: 20em;
  font-size: 1.4em;
  letter-spacing: 1em;
  	animation-name:--the-animation;
			animation-duration:6s;
			animation-iteration-count:infinite;
      	animation-timing-function: ease-in;
 
	
}

button {
  grid-column: 5;
  grid-row: 8;
  background: radial-gradient(
    var(--color-gradients),
    var(--color-gradients2),
    var(--color-gradients3)
  );
  color: var(--color-text);
  font-size: var(--step-1);
  border-radius: 0.3em;
  border: none;
  max-width: 6em;
  max-height: 6em;
  padding: 1em;
  animation-name:--gnome-animation;
	animation-duration:2s;
	animation-iteration-count:infinite;
}

a {
  color: black;
  text-decoration: none;
}

@keyframes shake {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}

@keyframes wave {
  0%,
  100% {
    transform: translateX(0px) rotate(0deg) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translateX(40px) rotate(4deg) scale(1.1); /* Schuift hard naar rechts en kantelt */
    opacity: 1;
  }
  50% {
    transform: translateX(0px) rotate(-3deg) scale(0.95); /* Schakelt terug en kantelt linksom */
    opacity: 0.8;
  }
  75% {
    transform: translateX(-30px) rotate(2deg) scale(1.05); /* Schuift naar links */
    opacity: 1;
  }
}

@keyframes drop {
  0%,
  100% {
    transform: translateY(0) rotate(390deg) skew(-41deg, 0deg);
  }

  50% {
    transform: translateY(-30px) rotate(390deg) skew(-41deg, 0deg);
  }
}

@keyframes --gnome-animation {
	0% {
		rotate:0turn;
	}
	100% {
		rotate:1turn;
	}
}

@keyframes --wolf-animation {
	0% {
		translate:-1em 1em;
	}
	25% {
		translate:-1em -1em;
	}
	50% {
		translate:1em -1em;
	}
	75% {
		translate:1em 1em;
	}
	100% {
		translate:-1em 1em;
	}
}

@keyframes --the-animation {
	0% {
		translate:0;
	}
	100% {
		translate:calc(100cqi - 3em);
	}
}

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1.4);
  }
}

:root {
  --aalt: 0;
}