/* =============================================================================
   overlays.css: Full-screen canvases and the stacking order layering page
   content between the smoke/glow and the flame particles.
   ============================================================================= */

/* Full-screen flame overlay canvas */
/*----------------------------------*/

#flame-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
[data-theme="light"] #flame-overlay {
  mix-blend-mode: multiply;
}

/* Page content sits above smoke/glow; glow element above content for ambient bleed */
/*----------------------------------------------------------------------------------*/

header, main, #global-bar, footer {
  position: relative;
  z-index: 2;
}

/* Flame particles render on top of everything */
/*---------------------------------------------*/

#fire-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}