:root {
  color-scheme: dark;
}

body,
.bg-dark-bg {
  background-color: #7f25b3;
}

body::before {
  content: '';
  position: fixed;
  top: -880px;
  bottom: 0;
  left: -60px;
  right: -60px;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='880'%3E%3Cline x1='36' y1='24' x2='39' y2='42' stroke='%239FC6E8' stroke-width='1' opacity='0.2'/%3E%3Cline x1='118' y1='130' x2='121' y2='146' stroke='%239FC6E8' stroke-width='1' opacity='0.16'/%3E%3Cline x1='204' y1='58' x2='207' y2='78' stroke='%23A8D8F0' stroke-width='1' opacity='0.22'/%3E%3Cline x1='292' y1='210' x2='295' y2='228' stroke='%239FC6E8' stroke-width='1' opacity='0.18'/%3E%3Cline x1='376' y1='96' x2='379' y2='112' stroke='%2322D3EE' stroke-width='1' opacity='0.2'/%3E%3Cline x1='462' y1='264' x2='465' y2='284' stroke='%239FC6E8' stroke-width='1' opacity='0.2'/%3E%3Cline x1='76' y1='330' x2='79' y2='350' stroke='%23A8C8E8' stroke-width='1' opacity='0.18'/%3E%3Cline x1='170' y1='412' x2='173' y2='428' stroke='%239FC6E8' stroke-width='1' opacity='0.16'/%3E%3Cline x1='258' y1='498' x2='261' y2='520' stroke='%23FF9EC9' stroke-width='1' opacity='0.18'/%3E%3Cline x1='348' y1='388' x2='351' y2='404' stroke='%239FC6E8' stroke-width='1' opacity='0.2'/%3E%3Cline x1='432' y1='530' x2='435' y2='548' stroke='%23A8D8F0' stroke-width='1' opacity='0.18'/%3E%3Cline x1='60' y1='600' x2='63' y2='616' stroke='%239FC6E8' stroke-width='1' opacity='0.16'/%3E%3Cline x1='150' y1='668' x2='153' y2='688' stroke='%239FC6E8' stroke-width='1' opacity='0.2'/%3E%3Cline x1='240' y1='760' x2='243' y2='778' stroke='%2322D3EE' stroke-width='1' opacity='0.16'/%3E%3Cline x1='330' y1='690' x2='333' y2='710' stroke='%239FC6E8' stroke-width='1' opacity='0.18'/%3E%3Cline x1='420' y1='796' x2='423' y2='812' stroke='%239FC6E8' stroke-width='1' opacity='0.2'/%3E%3Cline x1='500' y1='180' x2='503' y2='196' stroke='%23A8C8E8' stroke-width='1' opacity='0.16'/%3E%3Cline x1='18' y1='470' x2='21' y2='486' stroke='%239FC6E8' stroke-width='1' opacity='0.18'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 520px 880px;
  animation: rain-fall-far 1.5s linear infinite;
}

body::after {
  content: '';
  position: fixed;
  top: -720px;
  bottom: 0;
  left: -60px;
  right: -60px;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='720'%3E%3Cline x1='40' y1='30' x2='44' y2='54' stroke='%23CFE8FF' stroke-width='1.5' opacity='0.34'/%3E%3Cline x1='128' y1='110' x2='132' y2='132' stroke='%23B8DDF5' stroke-width='1.5' opacity='0.3'/%3E%3Cline x1='216' y1='60' x2='220' y2='86' stroke='%23FFB3D6' stroke-width='1.5' opacity='0.3'/%3E%3Cline x1='306' y1='180' x2='310' y2='202' stroke='%23CFE8FF' stroke-width='1.5' opacity='0.34'/%3E%3Cline x1='396' y1='90' x2='400' y2='114' stroke='%2322D3EE' stroke-width='1.5' opacity='0.28'/%3E%3Cline x1='84' y1='290' x2='88' y2='314' stroke='%23B8DDF5' stroke-width='1.5' opacity='0.3'/%3E%3Cline x1='188' y1='360' x2='192' y2='384' stroke='%23CFE8FF' stroke-width='1.5' opacity='0.32'/%3E%3Cline x1='284' y1='430' x2='288' y2='452' stroke='%23FF9EC9' stroke-width='1.5' opacity='0.26'/%3E%3Cline x1='372' y1='500' x2='376' y2='524' stroke='%23CFE8FF' stroke-width='1.5' opacity='0.3'/%3E%3Cline x1='60' y1='560' x2='64' y2='582' stroke='%23B8DDF5' stroke-width='1.5' opacity='0.28'/%3E%3Cline x1='160' y1='620' x2='164' y2='646' stroke='%23CFE8FF' stroke-width='1.5' opacity='0.3'/%3E%3Cline x1='260' y1='680' x2='264' y2='702' stroke='%2322D3EE' stroke-width='1.5' opacity='0.24'/%3E%3Cline x1='350' y1='640' x2='354' y2='664' stroke='%23B8DDF5' stroke-width='1.5' opacity='0.28'/%3E%3Cline x1='440' y1='300' x2='444' y2='324' stroke='%23CFE8FF' stroke-width='1.5' opacity='0.3'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 480px 720px;
  animation: rain-fall-near 0.85s linear infinite;
}

@keyframes rain-fall-far {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(18px, 880px, 0); }
}

@keyframes rain-fall-near {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(26px, 720px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .navbar-nav a.active {
    animation: none;
  }
}

.navbar-title {
  background: none;
  color: #ffffff;
  -webkit-text-fill-color: currentColor;
}

.navbar-title span {
  display: inline-block;
}

@supports (-webkit-background-clip: text) {
  .navbar-title span {
    background: none;
    -webkit-text-fill-color: #ffffff;
  }
}

.navbar-nav a.active {
  box-shadow:
    0 0 16px 2px rgba(255, 77, 157, 0.5),
    0 0 42px 8px rgba(255, 77, 157, 0.26);
  animation: nav-pill-glow 3s ease-in-out infinite;
}

@keyframes nav-pill-glow {
  0%, 100% {
    box-shadow:
      0 0 16px 2px rgba(255, 77, 157, 0.5),
      0 0 42px 8px rgba(255, 77, 157, 0.26);
  }
  50% {
    box-shadow:
      0 0 22px 4px rgba(255, 77, 157, 0.75),
      0 0 60px 12px rgba(255, 77, 157, 0.38);
  }
}