:root {
  --background: hsl(222, 47%, 11%);
  --primary: hsl(204, 70%, 63%);
}

body {
  background-color: var(--background);
  color: #f0f4f8;
}

/* GRADIENT BETWEEN HEADER AND CONTENT - LIKE FOOTER */
.header-gradient {
  position: relative;
  width: 100%;
  height: 14rem;
  background: linear-gradient(to bottom, var(--background), rgba(0, 0, 0, 0.4), transparent);
  pointer-events: none;
  z-index: 10;
  margin-top: 120px;
}

/* MATCH FOOTER GRADIENT STYLE */
.hero-section-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--background) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
  pointer-events: none;
}