.container {
  max-width: 960px;
}

.icon-link > .bi {
  width: .75em;
  height: .75em;
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

    .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

.btn-bd-primary {
    --bd-violet-bg: #9200ff;
    --bd-violet-rgb: 144, 0, 255;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #ff00ed;
    --bs-btn-hover-border-color: #ff00ed;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #9200ff;
    --bs-btn-active-border-color: #9200ff;
}
.bd-mode-toggle {
    z-index: 1500;
}

    .bd-mode-toggle .bi {
        width: 1em;
        height: 1em;
    }

    .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
    }

.site-header {
  background-color: rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.flex-equal > * {
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    flex: 1;
  }
 }

.bg-custom {
    color: #db32d8 !important;
    background: linear-gradient(122deg,rgba(61, 61, 61, 1) 0%, rgba(43, 43, 43, 1) 49%, rgba(71, 71, 71, 1) 100%) !important;
}
h1, .h1 {
  font-size: calc(30px + 1.5vw);
  color: #e500f1;
  font-weight: 500;
  
} 
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 65px;
    color: #e500f1;
    font-weight: 700;
  }
}
h2, .h2 {
  font-size: calc(20px + 0.9vw);
  color: #a800fb;
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 35px;
    color: #a800fb;
  }
}
h3, .h3 {
  font-size: calc(25px + 0.9vw);
  color:#ffffff;
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 35px;  
    color:#ffffff; 
    }
}
h4, .h4 {
  font-size: calc(15x + 0.9vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 25px;  
    }
}
h5, .h5 {
  font-size: calc(13px + 0.9vw);
  color: #a800fb;
}
@media (min-width: 1200px) {
  h5, .h5 {
    font-size: 20px; 
    color: #a800fb; 
    }
}
a {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  text-decoration: none;
}
a:hover {
  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}