/* ===== ROOT VARIABLES (ONLY ONES USED BY BLOBS) ===== */
:root {
  --link-hover-color: #7d2ae8;
  --dshadow1: #ae00ff;
  --dshadow2: #4400ff;
  --dshadow3: #ff00d4;
  --dshadow4: #8400ff;
}

/* ===== NEBULA BLOBS (ORIGINAL LAYOUT) ===== */
.blob,
.blobbig,
.blobsmall,
.blobtop {
  position: fixed;
  border-radius: 50%;
  background-blend-mode: multiply;
  filter: blur(50px) contrast(1.1);
  z-index: -1;
}

/* Core circular glow */
.blob {
  width: 290px;
  height: 290px;
  box-shadow: 0 0 150px 100px var(--link-hover-color);
  background-image: radial-gradient(
    farthest-corner at 50% 50%,
    #ffffff,
    var(--dshadow3)
  );
  transform: translate(-50%, -50%);
  left: 47vw;
  top: 100vh;
}

/* Huge wide base glow */
.blobbig {
  width: 75vw;
  height: 45vh;
  opacity: 0.15;
  box-shadow: 0 0 150px 100px var(--link-hover-color);
  background-image: radial-gradient(
    farthest-corner at 50% 50%,
    #ffffff,
    var(--dshadow4)
  );
  transform: translate(-50%, -35%);
  left: 47vw;
  top: 100vh;
}

/* Right-side horizontal glow */
.blobsmall {
  width: 340px;
  height: 50px;
  box-shadow: 0 0 150px 50px var(--dshadow4);
  background-image: radial-gradient(
    farthest-corner at 50% 50%,
    #ffffff,
    var(--dshadow3)
  );
  filter: blur(50px) contrast(1.2);
  transform: translate(-50%, -50%);
  left: 60vw;
  top: 100vh;
}

/* Vertical accent glow */
.blobtop {
  width: 20px;
  height: 230px;
  box-shadow: 0 0 1px 20px var(--dshadow4);
  background-image: radial-gradient(
    farthest-corner at 50% 50%,
    #ffffff,
    var(--dshadow3)
  );
  transform: translate(-50%, -50%);
  rotate: -20deg;
  left: 41.6vw;
  top: calc(89vh - 200px);
}

/* ===== PARTICLES BACKGROUND ===== */
#particles-js {
  position: fixed;
  inset: 0;
  z-index: -2;
}