#pfp-backdrop,
#pfp-backdrop * {
  box-sizing: border-box;
}

html,
body {
  background: transparent !important;
}

#pfp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#pfp-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -40%;
  height: 180%;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(27, 36, 64, 0.7) 0%, transparent 60%),
    linear-gradient(var(--pfp-angle), var(--pfp-base-a), var(--pfp-base-b) 45%, var(--pfp-base-c));
  will-change: transform;
}

#pfp-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#pfp-glow {
  position: absolute;
  left: 0;
  right: 0;
  top: -60%;
  height: 220%;
  background:
    radial-gradient(var(--pfp-glow-size-1) at var(--pfp-glow-pos-1), var(--pfp-glow-1), transparent 60%),
    radial-gradient(var(--pfp-glow-size-2) at var(--pfp-glow-pos-2), var(--pfp-glow-2), transparent 65%);
  mix-blend-mode: screen;
  opacity: 0.9;
  will-change: transform;
}