html{
  scroll-behavior:smooth;
  background:#050505;
}

body{
  position:relative;
  min-height:100vh;
  margin:0;
  color:#fff;
  background-color:#050505 !important;
  background-image:
    linear-gradient(180deg,rgba(0,0,0,.40),rgba(0,0,0,.76)),
    url("../assets/Bastienstyle.png") !important;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.home-bg,
.home-shade,
.roster-bg,
.roster-shade{
  display:none !important;
  animation:none !important;
}

*{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}

a,button,input,select{
  -webkit-tap-highlight-color:transparent;
  outline-offset:3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:1px solid rgba(255,255,255,.38);
}

#bastienMusicDock{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9999;
  width:310px;
  min-height:70px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 62px;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:11px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:13px;
  background:rgba(7,7,7,.78);
  backdrop-filter:blur(18px) saturate(.9);
  -webkit-backdrop-filter:blur(18px) saturate(.9);
  box-shadow:0 16px 45px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.04);
  transform:translateZ(0);
  transition:transform .24s cubic-bezier(.22,1,.36,1),
             border-color .24s ease,
             background-color .24s ease;
}

#bastienMusicDock:hover{
  transform:translate3d(0,-2px,0);
  border-color:rgba(255,255,255,.27);
  background:rgba(10,10,10,.86);
}

#bastienMusicDock .cover{
  grid-row:1 / 3;
  width:48px;
  height:48px;
  border-radius:9px;
  background:center/cover no-repeat;
  border:1px solid rgba(255,255,255,.14);
  overflow:hidden;
}

#bastienMusicDock .meta{
  min-width:0;
  align-self:end;
}

#bastienMusicDock .music-title{
  font:800 9px Orbitron,Arial,sans-serif;
  letter-spacing:1.5px;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#bastienMusicDock .music-sub{
  margin-top:5px;
  color:#737373;
  font:7px Orbitron,Arial,sans-serif;
  letter-spacing:1.4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#bastienMusicDock .state{
  grid-column:2;
  position:static;
  min-height:0;
  margin-top:4px;
  color:#454545;
  font:6px Orbitron,Arial,sans-serif;
  letter-spacing:1.1px;
}

#bastienMusicDock button{
  grid-column:3;
  grid-row:1 / 3;
  width:62px;
  height:35px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:9px;
  background:rgba(255,255,255,.04);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  font:700 7px Orbitron,Arial,sans-serif;
  letter-spacing:.7px;
  transition:transform .2s ease,
             background-color .2s ease,
             border-color .2s ease;
}

#bastienMusicDock button:hover{
  transform:scale(1.04);
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.30);
}

#bastienMusicFrame{
  position:fixed;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

@media(max-width:700px){
  #bastienMusicDock{
    right:12px;
    bottom:12px;
    width:270px;
  }

  #bastienMusicDock .cover{
    width:44px;
    height:44px;
  }
}

@media(max-width:420px){
  #bastienMusicDock{
    width:calc(100vw - 24px);
  }
}

@media(prefers-reduced-motion:reduce){
  #bastienMusicDock,
  #bastienMusicDock:hover,
  #bastienMusicDock button{
    transition:none;
    transform:none;
  }
}


body{background-image:linear-gradient(180deg,rgba(0,0,0,.46),rgba(0,0,0,.80)),url("../assets/Bastienstyle.png") !important;background-position:center center !important;background-size:cover !important;background-repeat:no-repeat !important;background-attachment:fixed !important}
.nav{z-index:20}


.nav{position:relative;width:max-content;margin:0 auto 34px;padding:5px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(5,5,5,.70);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 14px 40px rgba(0,0,0,.35);display:flex;gap:3px;z-index:20}
.nav a{height:37px;padding:0 18px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:7px;color:#6f6f6f;text-decoration:none;font:700 8px Orbitron,Arial,sans-serif;letter-spacing:1.8px;transition:color .22s ease,background-color .22s ease,border-color .22s ease,transform .22s ease}
.nav a:hover,.nav a.active{color:#fff;background:rgba(255,255,255,.085);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.nav .nav-icon{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;opacity:.78;flex:none;transition:transform .22s ease,opacity .22s ease}
.nav a:hover .nav-icon,.nav a.active .nav-icon{opacity:1;transform:translateY(-.5px)}
.nav a span{display:inline-block}
@media(max-width:600px){.nav{max-width:calc(100vw - 24px);margin-bottom:26px}.nav a{height:34px;padding:0 11px;font-size:7px;letter-spacing:1.2px}.nav .nav-icon{width:11px;height:11px}}

.home-nav{position:fixed;top:20px;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap}
@media(max-width:520px){.home-nav{top:12px}}


html{scroll-behavior:smooth;overflow-y:scroll;overscroll-behavior-y:auto}
body{min-height:100vh;overflow-x:hidden;overflow-y:auto!important;background-color:#050505!important;background-image:
  linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.80)),
  radial-gradient(circle at 84% 82%,rgba(170,0,0,.075),transparent 27%),
  url("../assets/Bastienstyle.png")!important;
  background-position:center,center,center!important;background-size:cover,cover,cover!important;background-repeat:no-repeat!important;background-attachment:fixed,fixed,fixed!important}
body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;background:
  radial-gradient(circle at 50% 18%,rgba(255,255,255,.045),transparent 34%),
  linear-gradient(180deg,transparent 58%,rgba(0,0,0,.18) 100%);opacity:.9}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(circle at 76% 78%,rgba(210,20,20,.055),transparent 22%);mix-blend-mode:screen}

.nav,.toolbar,.guide,.group,.card,.member-box,.filter,.search,.denied-box,#bastienMusicDock{
  box-shadow:0 18px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025)
}

.nav a{min-width:92px}
.nav .nav-icon{width:12px;height:12px;flex:0 0 12px}

a,button{cursor:pointer}
button:active,.nav a:active,.filter:active,.member-box:active{transform:translate3d(0,1px,0)!important}

.page{min-height:100vh;height:auto!important;overflow:visible!important}
.groups{align-items:start}
.group{height:max-content}

.group::after,.card::after,.member-box::after{content:"";position:absolute;right:-80px;bottom:-90px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(180,0,0,.07),transparent 68%);pointer-events:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

@media(max-width:600px){
  .nav{max-width:calc(100vw - 20px);width:max-content}
  .nav a{min-width:0;padding-inline:12px}
}

body.home-page{
  height:100dvh;
  min-height:100dvh;
  overflow:hidden !important;
  overscroll-behavior:none;
}
body.home-page .site-wrapper{
  min-height:100dvh;
  height:100dvh;
  overflow:hidden;
}

#bastienMusicDock{
  position:fixed !important;
  right:20px !important;
  bottom:20px !important;
}
@media(max-width:700px){
  #bastienMusicDock{right:12px !important;bottom:12px !important}
}