/* Animated grain layer placed behind all content. */
:root {
  --grain-strength: 1;
}

body {
  position: relative;
  isolation: isolate;
}

body > * {
  position: relative;
  z-index: 1;
}

.grain-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.grain-layer__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--grain-opacity, 0.2);
}

#main-header {
  position: fixed;
  overflow: hidden;
}

#main-header > :not(.grain-header-layer) {
  position: relative;
  z-index: 1;
}

.grain-header-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.grain-header-layer__canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: var(--grain-opacity, 0.2);
}