/* Dark hero background extracted from https://hexacoding.ch/. */
#background {
  background-color: #111827 !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}

/* SVG preserves the original polygon, with the blur outside its edges. */
#background::before {
  content: "";
  position: absolute;
  top: -10rem;
  left: calc(50% - 11rem);
  width: 36.125rem;
  aspect-ratio: 1155 / 678;
  transform: translateX(-50%) rotate(30deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='glow' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop stop-color='%230891b2'/%3E%3Cstop offset='1' stop-color='%23164e63'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon fill='url(%23glow)' points='74.1,44.1 100,61.6 97.5,26.9 85.5,0.1 80.7,2 72.5,32.5 60.2,62.4 52.4,68.1 47.5,58.3 45.2,34.5 27.5,76.7 0.1,64.9 17.9,100 27.6,76.8 76.1,97.7 74.1,44.1'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  opacity: 0.2;
  filter: blur(64px);
  pointer-events: none;
}

@media (min-width: 640px) {
  #background::before {
    top: -20rem;
    left: calc(50% - 30rem);
    width: 72.1875rem;
  }
}