/* docs/stylesheets/extra.css */
/* animated geometric-ish background behind the site */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* layered gradients to fake a geometric mash */
  background-image:
    linear-gradient(120deg, rgba(70,20,90,0.18), rgba(20,10,40,0.06)),
    radial-gradient(800px 400px at 10% 20%, rgba(120,30,160,0.12), transparent 20%),
    radial-gradient(600px 300px at 85% 80%, rgba(30,60,150,0.10), transparent 18%);

  background-size: 300% 300%, 100% 100%, 100% 100%;
  filter: blur(0px) saturate(120%);
  opacity: 1;
  animation: eggbg 28s linear infinite;
}

/* subtle moving effect */
@keyframes eggbg {
  0%   { background-position: 0% 50%, 0% 0%, 0% 0%; }
  50%  { background-position: 100% 50%, 0% 0%, 0% 0%; }
  100% { background-position: 0% 50%, 0% 0%, 0% 0%; }
}

/* optional: slightly dim the content area so text pops */
.md-content {
  background: linear-gradient(rgba(0,0,0,0.00), rgba(0,0,0,0.00));
}

/* if you want a frosted panel look for the main column */
.md-main {
  background: rgba(10,10,10,0.02);
  border-radius: 8px;
}

/* tweak heading font fallback & color
.md-typeset h1, .md-typeset h2 {
  color: #eae6ff;
  font-weight: 700;
} */