:root {
  --color_base: #191919;
  --color_pen: #fff;
  --size: 20vmin;
  --fog: calc(var(--size) / 1.2);
  --scale: 4.8;
}

.p-flex {
  display: flex;
}

.p-circle, .fog::after {
  border-radius: 50%;
}

body {
  height: 100vh;
  background-color: var(--color_base);
  margin: 0;
  overflow: hidden;
}

::-moz-selection {
  background-color: transparent;
}

::selection {
  background-color: transparent;
}

.halloctober {
  width: 100%;
  height: 100%;
}
.halloctober__banner {
  margin: auto;
  padding: 3%;
  position: relative;
  overflow: hidden;
}

.typo {
  color: var(--color_pen);
  cursor: default;
  font-family: "Fredoka One", sans-serif;
  font-size: var(--size);
  font-weight: normal;
  letter-spacing: 0.1rem;
  margin: auto;
  outline: none;
  position: relative;
  transform: skew(10deg, 2deg);
  -webkit-animation: float 2s ease-in-out infinite;
          animation: float 2s ease-in-out infinite;
}
.typo:hover + .fog {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.typo::before, .typo::after {
  color: transparent;
  content: "Spooky";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.typo::before {
  -webkit-animation: move_upper_shadow 2s ease-in-out infinite;
          animation: move_upper_shadow 2s ease-in-out infinite;
  opacity: 0;
  text-shadow: 6px 0 2px rgba(179, 8, 8, 0.4), 12px 0 2px rgba(26, 35, 126, 0.3);
}
.typo::after {
  -webkit-animation: move_bottom_shadow 2s ease-in-out infinite;
          animation: move_bottom_shadow 2s ease-in-out infinite;
  text-shadow: 2px 4px 2px rgba(179, 8, 8, 0.4), 4px 8px 2px rgba(26, 35, 126, 0.3);
}
@-webkit-keyframes move_upper_shadow {
  0%, 90%, 100% {
    opacity: 0;
    transform: translateX(-2%);
  }
  30% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes move_upper_shadow {
  0%, 90%, 100% {
    opacity: 0;
    transform: translateX(-2%);
  }
  30% {
    opacity: 1;
    transform: translateX(0);
  }
}
@-webkit-keyframes move_bottom_shadow {
  0%, 90%, 100% {
    opacity: 1;
    transform: translate(0, 0);
  }
  30% {
    opacity: 0;
    transform: translateY(-3.5%);
  }
}
@keyframes move_bottom_shadow {
  0%, 90%, 100% {
    opacity: 1;
    transform: translate(0, 0);
  }
  30% {
    opacity: 0;
    transform: translateY(-3.5%);
  }
}
@-webkit-keyframes float {
  50% {
    transform: scaleY(1.01) skew(-10deg, -2deg);
  }
}
@keyframes float {
  50% {
    transform: scaleY(1.01) skew(-10deg, -2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .typo {
    -webkit-animation: none;
            animation: none;
    transform: none;
  }
  .typo::before, .typo::after {
    -webkit-animation: none;
            animation: none;
  }
}

.fog {
  --fog_neg: calc(var(--fog) * -1);
  width: var(--fog);
  height: var(--fog);
  background-color: var(--color_base);
  position: absolute;
  top: var(--fog_neg);
  left: var(--fog_neg);
  transform: translate3d(0, 0, 0);
  transform-origin: 0 50%;
  -webkit-animation: move_fog 13s 2s ease-in-out alternate infinite;
          animation: move_fog 13s 2s ease-in-out alternate infinite;
}
@-webkit-keyframes move_fog {
  50% {
    transform: scale(var(--scale));
  }
}
@keyframes move_fog {
  50% {
    transform: scale(var(--scale));
  }
}
@media (prefers-reduced-motion: reduce) {
  .fog {
    -webkit-animation: none;
            animation: none;
  }
}
.fog::after {
  --blur: calc(var(--fog) * 2);
  --blur_neghalf: calc(var(--blur) / -2);
  --filter: calc(var(--fog) / 30);
  width: var(--blur);
  height: var(--blur);
  content: "";
  background-color: var(--color_base);
  filter: blur(var(--filter));
  margin-top: var(--blur_neghalf);
  margin-left: var(--blur_neghalf);
  position: absolute;
  top: 50%;
  left: 50%;
}