.fire-border {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Cap the entire composited effect, including overlapping tiles/corners. */
  opacity: 1;
  --fire-depth: 100px;
}

.fire-border canvas { position: absolute; display: block; }
.fire-border [data-edge="top"],
.fire-border [data-edge="bottom"] { left: 0; width: 100%; height: var(--fire-depth); }
.fire-border [data-edge="left"],
.fire-border [data-edge="right"] { top: 0; height: 100%; width: var(--fire-depth); }
.fire-border [data-edge="top"] { top: 0; }
.fire-border [data-edge="bottom"] { bottom: 0; }
.fire-border [data-edge="left"] { left: 0; }
.fire-border [data-edge="right"] { right: 0; }

@media (max-width: 600px) {
  .fire-border { --fire-depth: 62px; }
}