html {
  background: #0b0710;
}

body {
  position: relative;
  isolation: isolate;
  background: transparent;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 18%, rgba(193, 143, 69, 0.12), transparent 34%),
    radial-gradient(circle at 18% 70%, rgba(61, 47, 130, 0.25), transparent 42%),
    linear-gradient(145deg, #110a19 0%, #17101f 48%, #0c0914 100%);
}

#fluid-background {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  filter: saturate(1.12) contrast(1.03);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  background:
    radial-gradient(circle at 76% 18%, rgba(193, 143, 69, 0.12), transparent 34%),
    radial-gradient(circle at 18% 70%, rgba(61, 47, 130, 0.25), transparent 42%),
    linear-gradient(145deg, #110a19 0%, #17101f 48%, #0c0914 100%);
}

.fluid-webgl #fluid-background { background: transparent; }

body > .stars,
body > main,
body > section,
body > footer {
  position: relative;
  z-index: 2;
}

body > nav {
  z-index: 1000;
}

.fluid-webgl #top.hero {
  background: rgba(12, 8, 17, 0.035);
}

.fluid-webgl #top.hero::before {
  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(0, 0, 0, 0.075));
}

.fluid-webgl #about {
  background: rgba(14, 9, 20, 0.18);
}

.fluid-webgl #credentials {
  background: rgba(31, 23, 42, 0.24);
}

.fluid-webgl #top.hero,
.fluid-webgl #about,
.fluid-webgl #credentials {
  color: rgb(244, 238, 225);
}

.fluid-webgl #top.hero h1,
.fluid-webgl #top.hero p,
.fluid-webgl #top.hero span,
.fluid-webgl #about h2,
.fluid-webgl #about h3,
.fluid-webgl #about p,
.fluid-webgl #about strong,
.fluid-webgl #credentials h4,
.fluid-webgl #credentials p {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.92), 0 0 18px rgba(0, 0, 0, 0.58);
}

.fluid-webgl #about .about-body,
.fluid-webgl #about .philosophy-card p,
.fluid-webgl #credentials p {
  color: rgb(244, 238, 225);
}

#credentials .credential-photo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#credentials .photo-slots { align-items: start; }

@media (max-width: 700px) {
  #fluid-background {
    opacity: 1;
  }

  .fluid-webgl #top.hero { background: rgba(12, 8, 17, 0.03); }
  .fluid-webgl #about { background: rgba(14, 9, 20, 0.12); }
  .fluid-webgl #credentials { background: rgba(31, 23, 42, 0.16); }
}