*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background-color: var(--black);
  color: var(--white);
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  overflow-x: hidden;
}

/* grain texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}