@import url(./globals.css);
@import url(./utils.css);
@import url(./nav.css);
@import url(./landing.css);
@import url(./hero.css);
@import url(./about.css);
@import url(./projects.css);
@import url(./skills.css);
@import url(./meteor-game.css);
@import url(./animations.css);
@import url(./page-effects.css);
@import url(./loader.css);



@media screen and (min-width: 31.25rem) {
  h2 {
    font-size: 6rem;
    margin-bottom: 6rem;
  }

  .typed-container {
    height: 6.25rem;
  }

}

@media screen and (min-width: 55rem) {
  .wrapper {
    padding: 0 32px;
  }

}

@media screen and (min-width: 75rem) {
  .wrapper {
    padding: 0;
  }
}


@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  cursor: auto;
}




/* ANIMATION */

#floating-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  z-index: 2147483647;
  background: rgba(255, 255, 255, .96);
  box-shadow:
    0 0 16px rgba(255, 255, 255, .7),
    0 0 32px rgba(87, 223, 121, .35);
  mix-blend-mode: screen;
}

#floating-image::before,
#floating-image::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

#floating-image::before {
  inset: -10px;
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow: 0 0 18px rgba(255, 255, 255, .12);
}

#floating-image::after {
  inset: 3px;
  background: rgba(87, 223, 121, .75);
}

body.is-playing-game #floating-image,
body.is-playing-game .cursor-spark,
body.is-playing-game #electric-tentacles-el {
  display: none !important;
}

.cursor-spark {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--spark-size, 8px);
  height: var(--spark-size, 8px);
  pointer-events: none;
  z-index: 2147483646;
  border-radius: 999px 999px 999px 2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .82), transparent 72%);
  filter: blur(.1px);
  mix-blend-mode: screen;
  transform: translate3d(var(--spark-x), var(--spark-y), 0) rotate(var(--spark-rotate));
  animation: cursorSpark .75s ease-out forwards;
}

@keyframes cursorPulse {
  0%,
  100% {
    transform: scale(.72);
    opacity: .85;
  }

  50% {
    transform: scale(1.14);
    opacity: .35;
  }
}

@keyframes cursorSpark {
  0% {
    opacity: .9;
    transform: translate3d(var(--spark-x), var(--spark-y), 0) scale(1) rotate(var(--spark-rotate));
  }

  100% {
    opacity: 0;
    transform: translate3d(calc(var(--spark-x) + var(--spark-dx)), calc(var(--spark-y) + var(--spark-dy)), 0) scale(.15) rotate(calc(var(--spark-rotate) + 90deg));
  }
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  #floating-image,
  .cursor-spark {
    display: none;
  }
}

.shooting-stars-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* END ANIMATION */