index.css

.bp-hero {
  --bp-hero-1: 59,137,214;
  --bp-hero-2: 33,37,41;
  --bp-hero-3: 42,147,252;
  --bp-hero-4: 249,37,157;
  --bp-hero-5: 178,17,214;
  --bp-hero-6: 13,7,122;
  background-image: 
    linear-gradient(180deg, rgba(var(--bp-hero-1), 0.01), rgba(var(--bp-hero-2), 1) 85%),
    radial-gradient(ellipse at top left, rgba(var(--bp-hero-3), 0.5), transparent 50%),
    radial-gradient(ellipse at top right, rgba(var(--bp-hero-4), 0.5), transparent 50%),
    radial-gradient(ellipse at center right, rgba(var(--bp-hero-5), 0.5), transparent 50%),
    radial-gradient(ellipse at center left, rgba(var(--bp-hero-6), 0.5), transparent 50%);
  padding-top: 150px;
  padding-bottom: 75px;
}
[data-bs-theme=light] .bp-hero {
  --bp-hero-1: 59,137,214;
  --bp-hero-2: 255,255,255;
  --bp-hero-3: 42,147,252;
  --bp-hero-4: 249,37,257;
  --bp-hero-5: 178,40,214;
  --bp-hero-6: 13,30,122;
}

.bp-grid {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, #ffffff10 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff10 1px, transparent 1px);
}
[data-bs-theme=light] .bp-grid {
  background-image:
    linear-gradient(to right, transparent 1px, transparent 1px),
    linear-gradient(to bottom, transparent 1px, transparent 1px);
}

.dl-btn {
  background:
    linear-gradient(to right, rgba(249,37,257,0.4), rgba(13,7,122,0.4));
  }
[data-bs-theme=light] .dl-btn {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

@media screen and (max-width: 600px) {.bp-screenshot-cutoff {max-height: 25vh !important}}
@media screen and (max-width: 400px) {.bp-screenshot-cutoff {max-height: 15vh !important}}
@media screen and (max-width: 200px) {.bp-screenshot-cutoff {max-height: 10vh !important}}

.width-800 {
  max-width: 800px;
}