index.css

.bp-hero {
  --bp-hero-1: 203,166,247;
  --bp-hero-2: 33,37,41;

  background-image: 
    linear-gradient(180deg, rgba(var(--bp-hero-1), 0.01), rgba(var(--bp-hero-2), 1) 85%);
  padding-top: 75px;
  padding-bottom: 75px;
}
[data-bs-theme=light] .bp-hero {
  --bp-hero-1: 59,137,214;
  --bp-hero-2: 255,255,255;
}

.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, #00000010 1px, transparent 1px),
    linear-gradient(to bottom, #00000010 1px, transparent 1px);
}

.bp-grid.bp-sponsor {
  background-size: 20px 20px;
  background-position: -2px -2px;
  transition: scale .2s
}
.bp-sponsor:hover {
  scale: 1.05
}

.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;
}

.bp-highlight {
  --bp-color-1: rgba(243, 139, 168, 1);
  --bp-color-2: rgba(250, 179, 135, 1);
  --bp-color-3: rgba(249, 226, 175, 1);
  --bp-color-4: rgba(166, 227, 161, 1);
  --bp-color-5: rgba(137, 180, 250, 1);
  --bp-color-6: rgba(203, 166, 247, 1);

  background: 
    linear-gradient(90deg, 
      rgba(243, 139, 168, 1),
      rgba(250, 179, 135, 1),
      rgba(249, 226, 175, 1),
      rgba(166, 227, 161, 1),
      rgba(137, 180, 250, 1),
      rgba(203, 166, 247, 1)
    );
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}


.glyph-container {
  width: 60px;
  height: 60px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0;
}

.glyph-square {
  background: white;
  width: 101%;
  height: 101%;
  opacity: 0;
  animation: glyph-fadeIn 0.5s forwards;
}
[data-bs-theme=light] .glyph-square {
  background: black;
}

.glyph-square:nth-child(1) {
  grid-column: 2;
  grid-row: 1;
  animation-delay: 0s;
}
.glyph-square:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
  animation-delay: 0.1s;
}
.glyph-square:nth-child(3) {
  grid-column: 3;
  grid-row: 2;
  animation-delay: 0.2s;
}
.glyph-square:nth-child(4) {
  grid-column: 2;
  grid-row: 3;
  animation-delay: 0.3s;
}
.glyph-square:nth-child(5) {
  grid-column: 3;
  grid-row: 3;
  animation-delay: 0.4s;
}

@keyframes glyph-fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}