/* MARK: fonts */
@font-face {
  font-family: "Seraphs";
  src: url("font/SeraphsVF.woff2") format("woff2"); /* Modern Browsers */
}
/* MARK: items */
body {
  font-family: "Seraphs";
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  background: var(--gradient);
  min-height: 100dvh;
  background-size: 300% 400%;
  animation: move 10s alternate infinite;
  overflow-x: hidden;
}

:root {
  --gradient: radial-gradient(rgb(253, 190, 135), rgb(255, 119, 0));
  --text-color: black;
}

@keyframes move {
  from {
    background-position: 0%;
  }
  to {
    background-position: 100% 100%;
  }
}

div {
  font-size: 30px;
  line-height: 36px;
  font-variation-settings:
    "wght" 121,
    "SRFS" 2;
  display: grid;
  grid-template-columns: 504px;
  grid-auto-flow: row;
  justify-content: center;
  text-align: center;
  margin-top: 5em;
}

strong {
  font-variation-settings:
    "wght" 160,
    "SRFS" 2;
  font-weight: bold;
  transition: 1s;

  &:hover {
    font-weight: 900;
    font-variation-settings:
      "wght" 1600,
      "SRFS" 10;
    font-size: 35px;
  }
}

p:nth-of-type(4) {
  opacity: 70%;
}

p:nth-of-type(5) {
  opacity: 60%;
  font-size: 25px;
}

p:nth-of-type(6) {
  opacity: 40%;
  font-size: 22px;
}

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

@keyframes --gnome-animation2 {
  0% {
    rotate: 0turn;
  }
  100% {
    rotate: 0.5turn;
  }
}

@keyframes --wolf-animation {
  0% {
    translate: -1em 2em;
  }

  50% {
    translate: 2em -2em;
  }
  100% {
    translate: -1em 2em;
  }
}

@keyframes --wolf-animation2 {
  0% {
    translate: -5em 2em;
  }

  50% {
    translate: -2em -2em;
  }

  100% {
    translate: 1em 2em;
  }
}

main > p:nth-of-type(1) {
  position: fixed;
  top: 6%;
  left: 2%;
  font-variation-settings:
    "wght" 100,
    "SRFS" 25;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.2;
    rotate: 20deg;
  }
}

main > p:nth-of-type(2) {
  position: fixed;
  top: 2%;
  right: 4%;
  font-variation-settings:
    "wght" 100,
    "SRFS" 25;
  animation-name: --gnome-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

main > p:nth-of-type(3) {
  position: fixed;
  top: 45%;
  left: 7%;
  font-variation-settings:
    "wght" 130,
    "SRFS" 25;
  animation-name: --gnome-animation2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

main > p:nth-of-type(4) {
  position: fixed;
  top: 80%;
  right: 8%;
  font-variation-settings:
    "wght" 150,
    "SRFS" 20;
  rotate: -40deg;
  opacity: 0.7;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.4;
    rotate: 15deg;
  }
}

main > p:nth-of-type(5) {
  position: fixed;
  top: 35%;
  right: 10%;
  font-variation-settings:
    "wght" 180,
    "SRFS" 30;
  animation-name: --gnome-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

main > p:nth-of-type(6) {
  position: fixed;
  bottom: 9%;
  left: 5%;
  font-variation-settings:
    "wght" 90,
    "SRFS" 10;
  animation-name: --gnome-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

main > p:nth-of-type(7) {
  position: fixed;
  top: 2%;
  left: 60%;
  font-variation-settings:
    "wght" 110,
    "SRFS" 25;
  animation-name: --gnome-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

main > p:nth-of-type(8) {
  position: fixed;
  top: 20%;
  right: 18%;
  font-variation-settings:
    "wght" 200,
    "SRFS" 35;
  animation-name: --gnome-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

main > p:nth-of-type(9) {
  position: fixed;
  bottom: 5%;
  left: 50%;
  font-variation-settings:
    "wght" 80,
    "SRFS" 15;
  animation-name: --wolf-animation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

main > p:nth-of-type(10) {
  position: fixed;
  top: 24%;
  left: 3%;
  font-variation-settings:
    "wght" 160,
    "SRFS" 25;
  animation-name: --wolf-animation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

main > p:nth-of-type(11) {
  position: fixed;
  top: 10%;
  left: 42%;
  font-variation-settings:
    "wght" 115,
    "SRFS" 18;
  rotate: -8deg;
  opacity: 0.85;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.4;
    rotate: 15deg;
  }
}

main > p:nth-of-type(12) {
  position: fixed;
  top: 23%;
  left: 32%;
  font-variation-settings:
    "wght" 140,
    "SRFS" 22;
  animation-name: --gnome-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

main > p:nth-of-type(13) {
  position: fixed;
  top: 30%;
  right: 32%;
  font-variation-settings:
    "wght" 95,
    "SRFS" 12;
  animation-name: --wolf-animation2;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

main > p:nth-of-type(14) {
  position: fixed;
  top: 42%;
  left: 28%;
  font-variation-settings:
    "wght" 170,
    "SRFS" 30;
  animation-name: --gnome-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

main > p:nth-of-type(15) {
  position: fixed;
  top: 50%;
  right: 29%;
  font-variation-settings:
    "wght" 105,
    "SRFS" 15;
  rotate: -5deg;
  opacity: 0.75;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.6;
    rotate: -90deg;
  }
}

main > p:nth-of-type(16) {
  position: fixed;
  top: 62%;
  left: 33%;
  font-variation-settings:
    "wght" 85,
    "SRFS" 8;
  animation-name: --wolf-animation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

main > p:nth-of-type(17) {
  position: fixed;
  top: 68%;
  right: 33%;
  font-variation-settings:
    "wght" 155,
    "SRFS" 28;
  animation-name: --gnome-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

main > p:nth-of-type(18) {
  position: fixed;
  top: 80%;
  left: 48%;
  font-variation-settings:
    "wght" 125,
    "SRFS" 20;
}

main > p:nth-of-type(19) {
  position: fixed;
  top: 55%;
  left: 22%;
  font-variation-settings:
    "wght" 190,
    "SRFS" 32;
  rotate: -50deg;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.3;
    rotate: 10deg;
  }
}

main > p:nth-of-type(20) {
  position: fixed;
  top: 40%;
  right: 22%;
  font-variation-settings:
    "wght" 90,
    "SRFS" 14;
  rotate: 30deg;
  opacity: 0.5;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.8;
    rotate: -180deg;
    opacity: 1;
  }
}

main > p:nth-of-type(21) {
  position: fixed;
  top: 4%;
  left: 28%;
  font-variation-settings:
    "wght" 135,
    "SRFS" 18;
  animation-name: --wolf-animation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

main > p:nth-of-type(22) {
  position: fixed;
  top: 5%;
  right: 28%;
  font-variation-settings:
    "wght" 95,
    "SRFS" 12;
  rotate: 18deg;
  opacity: 0.8;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.3;
    rotate: -40deg;
  }
}

main > p:nth-of-type(23) {
  position: fixed;
  top: 15%;
  left: 1%;
  font-variation-settings:
    "wght" 175,
    "SRFS" 30;
  rotate: 45deg;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.4;
    rotate: -15deg;
  }
}

main > p:nth-of-type(24) {
  position: fixed;
  top: 12%;
  right: 9%;
  font-variation-settings:
    "wght" 110,
    "SRFS" 22;
  rotate: -15deg;
  opacity: 0.75;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.6;
    rotate: 60deg;
  }
}

main > p:nth-of-type(25) {
  position: fixed;
  top: 68%;
  left: 14%;
  font-variation-settings:
    "wght" 145,
    "SRFS" 16;
  rotate: -38deg;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.2;
    rotate: 25deg;
  }
}

main > p:nth-of-type(26) {
  position: fixed;
  top: 64%;
  right: 15%;
  font-variation-settings:
    "wght" 85,
    "SRFS" 10;
  rotate: 52deg;
  opacity: 0.55;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.7;
    rotate: -70deg;
    opacity: 1;
  }
}

main > p:nth-of-type(27) {
  position: fixed;
  bottom: 3%;
  left: 2%;
  font-variation-settings:
    "wght" 200,
    "SRFS" 35;
  rotate: 15deg;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.3;
    rotate: -35deg;
  }
}

main > p:nth-of-type(28) {
  position: fixed;
  bottom: 2%;
  right: 2%;
  font-variation-settings:
    "wght" 100,
    "SRFS" 20;
  rotate: -60deg;
  opacity: 0.7;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.5;
    rotate: 45deg;
  }
}

main > p:nth-of-type(29) {
  position: fixed;
  bottom: 7%;
  left: 36%;
  font-variation-settings:
    "wght" 120,
    "SRFS" 24;
  rotate: 8deg;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.4;
    rotate: -120deg;
  }
}

main > p:nth-of-type(30) {
  position: fixed;
  bottom: 8%;
  right: 36%;
  font-variation-settings:
    "wght" 160,
    "SRFS" 28;
  rotate: -28deg;
  opacity: 0.85;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.2;
    rotate: 50deg;
  }
}

main > p:nth-of-type(31) {
  position: fixed;
  top: 18%;
  left: 16%;
  font-variation-settings:
    "wght" 150,
    "SRFS" 20;
  rotate: -15deg;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.4;
    rotate: 25deg;
  }
}

main > p:nth-of-type(32) {
  position: fixed;
  top: 32%;
  left: 19%;
  font-variation-settings:
    "wght" 95,
    "SRFS" 12;
  rotate: 28deg;
  opacity: 0.7;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.6;
    rotate: -45deg;
    opacity: 1;
  }
}

main > p:nth-of-type(33) {
  position: fixed;
  bottom: 12%;
  left: 22%;
  font-variation-settings:
    "wght" 170,
    "SRFS" 28;
  rotate: -35deg;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.3;
    rotate: 15deg;
  }
}

main > p:nth-of-type(34) {
  position: fixed;
  bottom: 14%;
  right: 21%;
  font-variation-settings:
    "wght" 110,
    "SRFS" 15;
  rotate: 18deg;
  opacity: 0.8;
  transition: 0.4s ease-in-out;

  &:hover {
    scale: 1.5;
    rotate: -60deg;
  }
}

main > p:nth-of-type(35) {
  position: fixed;
  top: 55%;
  right: 6%;
  font-variation-settings:
    "wght" 130,
    "SRFS" 24;
  animation-name: --wolf-animation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}