:root{
    --velvet: #D8A9D0;
    --velvet-ink: #000000;
    --velvet-paper: #FFFFFF;

    --velvet-soft: rgba(216, 169, 208, .18);
    --velvet-border: rgba(216, 169, 208, .40);

    --vip-velvet: var(--velvet);
}

html{
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    scroll-behavior: smooth;
}
a {
	color: var(--velvet);
	text-decoration: underline;
}
a:hover {
	color: var(--velvet);
	text-decoration: none;
}
[data-bs-theme="light"] html{
    background:
    linear-gradient(
        180deg,
        rgba(216,169,208,.14),
                    rgba(255,255,255,.96) 40%,
                    #ffffff 100%
    );
}
[data-bs-theme="light"] body{
    background: transparent;
    color: #111;
}

[data-bs-theme="dark"] html{
    background:
    radial-gradient(
        1000px 600px at 20% 8%,
        rgba(216,169,208,.18),
                    rgba(0,0,0,0) 55%
    ),
    linear-gradient(
        180deg,
        #0b0b0b 0%,
        #000000 100%
    );
}
[data-bs-theme="dark"] body{
    background: transparent;
    color: #f3f4f6;
}

.velvet-accent{
    color: var(--velvet) !important;
}
.btn-velvet{
    --bs-btn-bg: var(--velvet);
    --bs-btn-border-color: var(--velvet);
    --bs-btn-color: #000;
    --bs-btn-hover-bg: #cF98c6;
    --bs-btn-hover-border-color: #cF98c6;
    --bs-btn-hover-color: #000;
    --bs-btn-focus-shadow-rgb: 216,169,208;
}
.badge-velvet{
    background: var(--velvet);
    color: #000;
}

.btn-vip{
    --bs-btn-bg: var(--velvet);
    --bs-btn-border-color: var(--velvet);
    --bs-btn-color: #000;
    --bs-btn-hover-bg: #cF98c6;
    --bs-btn-hover-border-color: #cF98c6;
    --bs-btn-hover-color: #000;
    --bs-btn-focus-shadow-rgb: 216,169,208;
}
.text-vip{ color: var(--velvet) !important; }
.border-vip{ border-color: var(--velvet-border) !important; }

.vip-navbar{
    transition: background-color .25s ease, backdrop-filter .25s ease, box-shadow .25s ease, border-color .25s ease;
    border-bottom: 1px solid transparent;
}
.vip-navbar.scrolled{
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
    border-bottom-color: var(--velvet-border);
}
[data-bs-theme="light"] .vip-navbar{
    background: rgba(255,255,255,.92);
}
[data-bs-theme="light"] .vip-navbar.scrolled{
    background: rgba(255,255,255,.78);
}
[data-bs-theme="dark"] .vip-navbar{
    background: rgba(0,0,0,.86);
}
[data-bs-theme="dark"] .vip-navbar.scrolled{
    background: rgba(0,0,0,.68);
}

main{ padding-top: 88px; }
.card{
    border-color: var(--velvet-border);
}
[data-bs-theme="dark"] .card{
    background: rgba(255,255,255,.04);
}
.card-header{
    border-bottom-color: var(--velvet-border);
    background: transparent;
}

.mini-card .card-body{
    padding: .9rem;
}

.container-xxl{
    max-width: 1320px;
}

.hero-line{
    height: 4px;
    width: 110px;
    background: var(--velvet);
    border-radius: 99px;
}

.vip-layout{
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    gap: 1rem;

    align-items: start;
}

@media (max-width: 992px){
    .vip-layout{
        grid-template-columns: 1fr;
    }
}

.vip-card{
    border: 1px solid rgba(216, 169, 208, .25);
    border-radius: 14px;
    overflow: hidden;
}

[data-bs-theme="light"] .vip-card{
    background: rgba(255,255,255,.92);
}
[data-bs-theme="dark"] .vip-card{
    background: rgba(255,255,255,.04);
}

#themeAuto.active,
#themeLight.active,
#themeDark.active{
background-color: var(--velvet);
border-color: var(--velvet);
color: #000;
}

#themeAuto.active:hover,
#themeLight.active:hover,
#themeDark.active:hover{
background-color: #cF98c6;
border-color: #cF98c6;
color: #000;
}

#themeAuto:not(.active),
#themeLight:not(.active),
#themeDark:not(.active){
opacity: .75;
}
#themeAuto:not(.active):hover,
#themeLight:not(.active):hover,
#themeDark:not(.active):hover{
opacity: 1;
}

.vip-section-title h1,
.vip-section-title h2,
.vip-section-title h3{
    position: relative;
    display: inline-block; 
    padding-bottom: .45rem;
}

.vip-section-title h1::after,
.vip-section-title h2::after,
.vip-section-title h3::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;           
    background: var(--velvet);
    border-radius: 99px;
}

.vip-aside{
  align-content: start;
  align-items: start;
}
.vip-aside > *{
  height: auto;
}

@media (max-width: 992px) {
    .vip-layout{
        grid-template-columns: 1fr;
    }
    .vip-layout > aside {
        margin-top: 1rem;
    }
}


.vip-layout > section.vip-card{
  border-radius: 14px;
}

.vip-layout > aside .vip-card{
  border-radius: 12px;
  border-color: var(--velvet-border);
  background: rgba(216,169,208,.06);
}

[data-bs-theme="dark"] .vip-layout > aside .vip-card{
  background: rgba(216,169,208,.1);
}


.vip-animate .vip-card{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.vip-animate.is-ready .vip-card{
  opacity: 1;
  transform: none;
}


.vip-layout > aside .vip-card {
    transition: all 0.8s ease-in-out;
}

.rank-badge{
    display: inline-block;
    border-width: 1px;
    border-style: solid;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;
}

.rank-badge:hover{
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.dj-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
@media (max-width: 992px){
  .dj-grid{ grid-template-columns: 1fr; }
}
@media (min-width: 1400px){
  .dj-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dj-card{
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dj-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
  border-color: var(--velvet-border);
}