/* Grainient WebGL background */
html,
body {
  min-height: 100%;
  background: #080c0f !important;
}

body::before {
  display: none !important;
}

#grainient-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  background: #080c0f;
  isolation: isolate;
}

#grainient-background::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: 0;
  background:
    radial-gradient(circle at 22% 24%, rgba(54, 98, 106, .44), transparent 50%),
    radial-gradient(circle at 78% 20%, rgba(26, 36, 45, .42), transparent 54%),
    radial-gradient(circle at 50% 70%, rgba(8, 12, 15, .94), transparent 62%),
    linear-gradient(135deg, #36626a 0%, #080c0f 48%, #1a242d 100%);
  filter: blur(44px) saturate(1.02);
  opacity: .86;
  transform: scale(1.08);
}

#grainient-background.is-webgl-ready::before {
  opacity: .28;
}

#grainient-background canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

body > header,
body > main,
body > footer,
#page-shell {
  position: relative;
  z-index: 1;
}

#page-shell {
  background: transparent !important;
}

#page-shell::before {
  background:
    linear-gradient(180deg, rgba(8, 12, 15, .16) 0%, rgba(8, 12, 15, .50) 42%, rgba(8, 12, 15, .88) 100%) !important;
}

.site-footer,
footer.bg-black,
footer.bg-black\/60 {
  background-color: rgba(0, 0, 0, .58) !important;
  backdrop-filter: blur(14px);
}

@media (prefers-reduced-motion: reduce) {
  #grainient-background canvas {
    opacity: .92;
  }
}