:root {
  --dark-color: hsl(var(--hue), 100%, 9%);
  --light-color: hsl(var(--hue), 95%, 98%);
  --base: hsl(var(--hue), 95%, 50%);
  --complimentary1: hsl(var(--hue-complimentary1), 95%, 50%);
  --complimentary2: hsl(var(--hue-complimentary2), 95%, 50%);

  --font-family: "Poppins", system-ui;

  --bg-gradient: linear-gradient(
    to bottom,
    hsl(var(--hue), 95%, 50%),
    hsl(var(--hue), 95%, 50%)
  );
}

.frostycontent {
  /* background: var(--bg-gradient); */
}

.orb-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /*z-index: -1;*/
  z-index: 5;
}
.orb-canvas-two {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /*z-index: -1;*/
  z-index: 2;
}

canvas.orb-canvas {
	filter: blur(75px);
    transform: translate3d(95%,-20%,0) scale(1.5);
}
@media screen and (max-width: 1440px) {
	canvas.orb-canvas {
		transform: translate3d(107%,-20%,0) scale(1.5);
	}
}

canvas.orb-canvas-two {
	filter: blur(75px);
    transform: translate3d(85%,20%,0) scale(2.0);
}
@media screen and (max-width: 1440px) {
	canvas.orb-canvas-two {
		transform: translate3d(97%,20%,0) scale(2.0);
	}
}
body.mobile canvas.orb-canvas-two {
    transform: translate3d(90%,-40%,0) scale(2.0);
}

/* Not too many browser support this yet but it's good to add! */
@media (prefers-contrast: high) {
  .orb-canvas, .orb-canvas-two {
    display: none;
  }
}