html {
  --purple-accent: purple;
  --yellow-accent: yellow;
  --black-accent: black;
}

@font-face {
  font-family: 'Seraphs';
  src: url('assets/style/SeraphsVF.woff2') format('woff2');
}

body{
  font-family: 'Seraphs';
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: radial-gradient(var(--yellow-accent), var(--purple-accent));
}

h1 {
  font-size: 20px;
  writing-mode: sideways-rl;
  color: var(--yellow-accent);
  font-variation-settings: "wght" 100, "SRFS" 60;
      font-variation-settings: "wght" 100, "SRFS" 0;
      transition:1.5s;

  &:hover {
    font-variation-settings: "wght" 100, "SRFS" 60;
    margin-left: 30%;
    rotate: -90deg;
  }
}

h2 {
  font-size: 20px;
  color: var(--black-accent);
  transform: translatex(12rem);
  
    font-variation-settings: "wght" 100, "SRFS" 0;
      transition:1.5s;

  &:hover {
    font-variation-settings: "wght" 200, "SRFS" 60;
    margin-top: 25%;
  }
}

	h3 span {
    font-size: 20px;
    letter-spacing: 10px;

		transition-duration:.15s;
		transition-delay: calc( sibling-index() * .1s);
		transition-timing-function:ease-in-out;
		transition-property: font-variation-settings;

    font-variation-settings: "wght" 100, "SRFS" 15;
  }

  	h3:hover span {
		font-variation-settings: "wght" 200, "SRFS" 15;
	}

.boog {
  transform: translatey(10rem) rotate(-30deg);
}

h4 {
  font-size: 40px;
  text-align: center;
  margin-top: 0;
  transform: translatey(15rem);
  color: var(--purple-accent);
  font-variation-settings: "wght" 100, "SRFS" 30;
    transition:1s;

  &:hover {
    font-variation-settings: "wght" 200, "SRFS" 0;
  }
}

h5 {
  font-size: 15px;
  writing-mode: sideways-rl;
  transform: translatex(-8rem);
  color: var(--black-accent);

  font-variation-settings: "wght" 200, "SRFS" 0;
      transition:1.5s;

  &:hover {
    font-variation-settings: "wght" 100, "SRFS" 60;
    transform: scaleX(2.75);
  }
}


h6 {
  font-size: 15px;
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  transform: translatex(5rem);
  writing-mode: sideways-lr;
  color: var(--black-accent);
  font-variation-settings: "wght" 200, "SRFS" 0;
      transition:1.5s;

  &:hover {
    font-variation-settings: "wght" 100, "SRFS" 60;
    transform: scaleY(2);
  }
}


p {
  font-size: 35px;
  color: var(--yellow-accent);
  transform: translatex(8rem);
  font-variation-settings: "wght" 200, "SRFS" 0;
  transition: 3s;

  &:hover {
    font-variation-settings: "wght" 200, "SRFS" 60;
  }
}

p::after {
  content: "LETITHAPPEN.";
  opacity: 0;
  transition: opacity 1s;
}

p:hover::after {
  opacity: 1;
  color: var(--purple-accent);
}