@charset "UTF-8";

/*
 Theme Name: Rebellix
 Description: CSS for the official Rebellix website
 Template:rebellix.com
 Author:Thomas Federico
 Author URI:https://www.fullstackdesigner.co
 Version:1.1.0
*/

@layer reset,
base,
navigation,
layout,
components,
utility; 


/* reset */
@layer reset
{
 
    /***
        The new CSS reset - version 1.11.3 (last updated 25.08.2024)
        GitHub page: https://github.com/elad2412/the-new-css-reset
    ***/

    /*
        Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
        - The "symbol *" part is to solve Firefox SVG sprite bug
        - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
    */
    :where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,::after,::before{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}a,button{cursor:revert}menu,ol,summary,ul{list-style:none}ol{counter-reset:revert}img{max-inline-size:100%;max-block-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert;box-sizing:border-box}::placeholder{color:unset}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert;box-sizing:border-box}::-webkit-details-marker{display:none}

    *,*:before, *:after {
        box-sizing: border-box;
    }
} /* End of @layer reset */ 

/* base */
@layer base
{

    :root
    {
    --bp-nav-port-min-width: 0px;
    --bp-nav-port-min-height: 0px;

    --bp-nav-land-max-height: 499px;

    --bp-desktop-min-width: 769px;
    --bp-desktop-min-height: 500px;

    --bp-orientation-portrait: portrait;
    --bp-orientation-landscape: landscape;
    }

    /* === 2. HTML/BODY (DOCUMENT) === */
    * { -webkit-backface-visibility: hidden; overscroll-behavior-y: none!important; }

    @supports (-webkit-overflow-scrolling: touch)
    {
        /* CSS specific to iOS devices only */
        html, body, .bg
        {
        /*-webkit-transform: scale(1); /* fixes weird zoom bug on iOS orientation change when using Edge browser */
        }
    }
    
        
    html {
        -webkit-text-size-adjust: 100%; /* or 'none' */
        -ms-text-size-adjust: 100%;     /* for IE/Edge legacy */
    }
    
    html, body
    {
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: sans-serif;
        background: #000000;
        overflow-x:clip;
        font-family: 'Bebas Neue', sansserif;
        font-display: swap;
    }

    body{ z-index: -2; }

} /* End of @layer base */

  
 
    

ul { display:flex;margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0; padding:0}

ul, li {list-style: none}

img, svg { max-width:100%; height:auto;}

/* Fixed header */
.fixed-header {
  position: fixed;
  flex-direction:column;
  top: 1rem;
  left: 0;
  right: 0;
  background: #262626;
  color: #fff;
  padding: calc(1rem + env(safe-area-inset-top)) 1rem 1rem;
  z-index: 100;
  text-align: center;
  margin:0 auto;
  width:calc(100% - 4rem);
  border-radius:8px;
  max-width:1200px;
  
  overscroll-behavior: none;
  overflow: hidden;
  
  will-change: transform;
  transform: translateZ(0);
  
  pointer-events: auto;
  touch-action: none;
  
}


.fixed-header a {
  pointer-events: auto;
  touch-action: manipulation;
}

body.menu-open .fixed-header {
    pointer-events: none;

}

body:not(.menu-open) .fixed-header { pointer-events: auto; }


#header-wrapper
{
    display:flex;
    flex-direction:row;
}



.content {
  padding: 1rem;
}

.pos-f { position:fixed; }
.pos-r { position:relative}

.flex { display: flex; }

.block { width:100%; margin: 0 auto}

.fl-col { flex-direction: column;}
.fl-row { flex-direction: row;}

.t-center { text-align: center;}

.fl-centered { align-items: center; align-content: center; justify-content: center;}


.navbar-mobile-portrait { position: fixed;}

.nav-container {
    width:calc(100% - 2rem);
    height:auto; 
    margin:0 1rem;
    background: hsl(273, 85%, 3%);
    top:1rem;
    border-radius: 14px;
    z-index:300!important; }

.nav-header
{
    display: flex;
    flex-direction: column ;
    border-radius: 12px 12px 0 0;
      box-shadow: inset 0px -2px 2px rgba(255, 255, 255, 0); /* start off-screen left */
}

#nav-header-logo { display: flex; flex-direction:column; width:100%; padding:.5rem;}

#logo { max-height:clamp(40px, 8vw, 100px); margin:0 auto;}


.nav-body { /*height:calc(97.5vh - 4rem);*/ /*height: 0;*/flex-direction: column; }





.nav-body ul:first-of-type
{
    margin-top:1rem;
}

.nav-body ul 
{
    flex-direction: column;

    width:100%;
    margin:0 auto;
    text-align: center;
}

.nav-body ul  li
{ margin-top: 1rem;}


.nav-body ul  li a {
    font-size: 4vh;
    color:#fff;
}

.nav-items
{
    list-style: none;
}


#toggle-button {
display: flex;
flex-direction: column;
width: 16px;
height: 12px;
justify-content: space-between;
}

.line {
    width: auto;
    height: 2px;
    background: var(--color-white);
}

#logo-container-mobile { padding:.5rem 0;}

#mobile-header-cols
{
    display:flex!important;
    overflow: clip;
}

#mobile-header-cols > div
{
    display:flex;
    height:100%;
    }

.btn-header-cta
{
    cursor:pointer;
}

.btn-header-cta:hover
{
    background: deeppink;
}

.btn-header-cta:first-child:hover
{
    border-radius: 8px 0 0 8px;
    background: deeppink;
}

.btn-header-cta:last-child:hover
{
    border-radius: 0 8px 8px 0;
    background: deeppink;
}



#btn-icon-shop svg { max-height: 24px;}

#mobile-header-cols, .nav-header
{
    height:74px
}

main
{
    margin-top:0;
    padding:0 1.5rem;
}



.sections
{
    /* min-height: 10000px; */
    color: #fff;
    z-index: 0 !important;
    /* background: blue; */
}

.shadow {
-webkit-box-shadow: 0px 8px 8px -5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 8px 8px -5px rgba(0,0,0,0.75);
box-shadow: 0px 8px 8px -5px rgba(0, 0, 0, 0.75);
}


#new-video
{

    border-radius:12px;

    position: relative;
    display: flex;
    overflow: clip;
    width: 100%;
    margin:5rem auto 0;
    
    & img
    {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    
    position: relative;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1;
    max-height:800px;

    }        
}
.btns-cta-wrapper
{
    margin:3rem auto;
}


.btns-cta-wrapper .btn-cta
{
    padding: 1rem;
    border-radius: 6px;
    background: hsl(273, 85%, 3%);
    color: #fff;
    text-decoration:none;
}

#release-date h1
{
    color:hsl(273, 85%, 3%);
    text-shadow: 2px 2px 4px #fff;
}
               

/* === X. LAYOUT : NEWS  === */

#news {
  & .media-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0!important;
    border-radius:8px;
    overflow:clip;
  }

  & .media-item {
    flex: 0 0 auto;
    width: 200px;
    height: 280px;
    overflow: hidden;
    position: relative; /* key for absolute child */
    background-color: #000;
    margin:0!important;
  }

  & .media-item a {
    display: flex;
    width: 100%;
    height: 100%;
  }

  & .insta-pic {
    position: absolute; /* image fills parent */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* crops sides or top/bottom */
    object-position: center; /* centers crop */
  }
}




#app:has(.navbar-mobile-portrait)
{

    & #btn-icon-menu
    {
      height:42px; 
      background:deeppink;
      align-content:center;
      text-transform:uppercase;
    }
    
    & .nav-items { display:none;}
    
    & #nav-container-left { order:0;}
    & #toggle-container { order:2;}
    & #nav-container-right { order:1;}
    
    & .nav-container-outer li {
        color:blue;
        margin-top:1rem;
        text-transform:uppercase;
    }
    
    
    #news .media-item {
    width: 50%;
    height: 320px;
  }
    

    
}

#app:has(#btn-icon-menu.open)
{
    & .nav-container-outer
    {
        background:crimson;
        max-height: calc(80dvh - 2rem - env(safe-area-inset-bottom)); overflow-y: auto; box-sizing: border-box;
    }
}
    


@media screen and (min-width: 0) and (max-height:499px) and (orientation:landscape)
{
    #nav-header-logo { max-width: 120px!important; }
        
    .nav-header { display:flex; flex-direction: row;}
    #nav-header-logo { margin-left:0;max-width: 180px; }
    .items-right { margin-right: 1rem;}
    
    .nav-items li a { padding:0 .25rem; color:#fff; font-size: clamp(2vw, 1.5rem, 3vw);}
    
    .navbar-mobile-landscape
    {
        /*-webkit-position:sticky; position:sticky!important;*/
    }
    

        
    #app:has(.navbar-mobile-landscape)
    {
        & #btn-icon-menu,
        & #btn-icon-shop
        {
            display:none!important
        }
        
        & #logo-container-mobile
        {
            align-items: flex-start!important;
            margin-left: 1rem;
            max-width: 100px;
        }
    }
}


@media screen and (orientation:landscape)
{
   .nav-container
   {
      background: red;
   }
}
    

@media screen and (min-width: 769px) and (min-height: 500px)
{

    #nav-header-logo { max-width: 180px; }

    .nav-body ul li a {
        font-size: 8vw;
    }

    .nav-header { display:flex; flex-direction: row;}

    .nav-items {  max-width: none; width:100%; margin: 0 auto;}

    .items-left { justify-content: flex-end;}

    .items-right { justify-content: flex-start;}

    .nav-items li a { padding:0 1rem; color:#fff;}

    /*#mobile-header-cols {display:none!important;}*/
    
    #btn-icon-menu, #btn-icon-shop {display:none!important;}

    #logo-container-desktop { margin:2rem auto; max-width:200px;}

    .logo-container-width { width:0px }

    .nav-items a { font-size: 2.125vw; }

    .navbar-desktop
    {
        /*-webkit-position:sticky; position:sticky;*/
    }


    
    #covert-art
    {
        margin:0 auto;
        
    }
    
    #home h1 {
        padding: 3rem 1rem 3rem;
        font-size: 3rem !important;
            
    }
    

    
    .btn-social-home
    {
        width: 300px;
    }
    

}


#app:has(.navbar-mobile-landscape),
#app:has(.navbar-desktop)
{

    & #btn-icon-menu,
    & #toggle-container{ display:none;}
    
}


#app:has(.navbar-mobile-landscape)
{
    .fixed-header{
        max-width:none!important;
        border-radius:0;
        margin:0;
        width:auto;
        height:56px;
        padding:env(safe-area-inset-top) 1rem env(safe-area-inset-bottom)

    }
    
    & #header-wrapper
    {
      flex-direction:row;
      width:100%;
      margin:0 auto;
      align-items:center;
      height:56px;
    }
    
    & .nav-items { display:flex; flex-direction:column; width:100%; }
    & .nav-items ul { display:flex;  flex-direction:row; }
    

    & #nav-container-right { align-items:flex-end; /*order:2;*/}
    
    /*
    & #nav-header-logo
    {
        background:red;
        order:0;
        margin-right:auto;
    }
    & #nav-container-left
    {
        order:1;
    }
    */

}


#app:has(.navbar-desktop)
{
    .fixed-header
    {
        transform:translateY(1rem);
    }
    & #header-wrapper
    {
      flex-direction:row;
      width:100%;
      margin:0 auto;
      align-items:center;
    }
    
    & .nav-items { display:flex; flex-direction:column; align-content:center; align-items:center; }
    & .nav-items ul { display:flex;  flex-direction:row; margin-bottom:0;}
    & #nav-container-left { align-items:flex-start;}
    & #nav-container-right { align-items:flex-end;}
}





.nav-container-outer
{

    /*background:deeppink;*/
}

.nav-container-outer {
    overscroll-behavior: none;
    overflow: hidden;
    touch-action: none;
    will-change: transform;
    transform: translateZ(0); }

body.menu-open .nav-container-outer {
    pointer-events: none; touch-action: none; overscroll-behavior: none; overflow: hidden;
}

body.menu-open .nav-container-outer a {
    pointer-events: auto;
}




.nav-container-inner
{
    display:none;
}

/* ============================================
   MOBILE PORTRAIT — menu allowed to expand
============================================ */
@media (orientation: portrait) {
  .nav-container-outer {
    height: auto; /* JS will animate to 82dvh */
    overflow: hidden;
  }
  .nav-container-inner
  {
      flex-direction:column;
      height:100%;
  }
  
  .nav-container-inner ul
  {
      flex-direction:column;
  }
}

/* =================================================
   MOBILE LANDSCAPE & DESKTOP — force collapsed menu + hide #btn-icon-menu
================================================= */
/* Landscape mobile OR Desktop — force collapsed menu */
@media (orientation: landscape) and (max-height: 499px),
       (min-width: 769px) and (min-height: 500px)
{

      .nav-container-outer {
        margin:0 auto;
        height: 0 !important;
        overflow: hidden;
      }
    
    
}





.toggle-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin: auto auto 0;
    gap: 10px;
    font-size: 14px;
    user-select: none;
    padding: 1rem;
    color: #fff;
    cursor: pointer;
}

.label-on, .label-off {
    font-weight: bold;
    opacity: 0.5;
    transition: opacity 0.3s, color 0.3s;
    margin: 0 auto;
}

.toggle-wrapper {
    width: 15vw;
    max-width: 100px;
    min-width: 50px;
    height: 30px;
    margin: 0 auto;
    border-radius: 30px;
    background-color: #666;
    position: relative;
    transition: background-color 0.3s ease;
    touch-action: manipulation;
    flex-shrink: 0;
}

.toggle-wrapper.on {
    background-color: #4caf50;
}

.knob {
    aspect-ratio: 1;
    height: calc(100% - 4px);
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    right: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    touch-action: none;
    transition: none;
}





.frame {
    box-shadow: #fff 0px 0px 0 1px inset;
}





/* === 1. APP PRESETS: ROOT/HTML/BODY === */

:root {
--color-bg:#121110;
--color-bg-card:#11131d;
--color-grey:#736f68;
--color-white: #fff;
--color-000: #000;
}

/* CUSTOM SCROLLBAR */

body { scrollbar-color:var(--color-white)#00121e!important; }

/* Only Chrome */
body::-webkit-scrollbar
{
width: 14px;
border-radius:0;
}
body::-webkit-scrollbar-track
{
background: #00121e;
border-radius:0;
border:2px solid #00121e;
}
body::-webkit-scrollbar-thumb
{
background: var(--color-white);
border-radius:0;
border:2px solid #00121e;
}

/* !important is needed sometimes */
body::-webkit-scrollbar
{
width: 14px !important;
border-radius:0!important;
}

body::-webkit-scrollbar-thumb:win:;dow-inactive
{
background: var(--color-white)!important;
border-radius:0!important;
border:2px solid #00121e!important;
}

/* Only IE */
html { scrollbar-face-color: #40c380; scrollbar-shadow-color: #232945; scrollbar-highlight-color: #232945; }

/* Only FireFox */
/* Strangely, it prevents the no delay on iPad without being affiliated to anything */
.no-delay { touch-action: manipulation; }

/* === 3. APP COMMON ELEMENTS / CLASSES === */

/**
*** Simpler harmonizing classes than Bootstrap for any div (parent or nested)
***/
  
  
/* FLOW POSITIONS  */
.pos-r { position: relative; }
.pos-f { position: fixed; }

/* MAX-WIDTH OF THE WIDTH CONTENTS */

.max-w { max-width: 1200px; }

/* FLEX CONTAINER */
.cont-flx
{
    display:flex;
    width:100%;
    margin:0 auto!important;
}
/* FLEX DIRECTIONS */
.fldr-r { flex-direction: row; }
.fldr-c { flex-direction: column; }

/* CENTER ELEMENTS */
/* Vertical and horizontal centering inside a div  */
.v-center
{
    align-items: center;
    align-content: center;
    justify-content: center;
}
/* Text center*/
.t-center { text-align: center; }


.ovf-clip { overflow:clip; }


/* === 5. COMMON LAYOUT FOR SECTIONS  === */


/* Harmonizing classes for sections and titles */

.sections
{

    /*min-height: 10000px;*/
    color:var(--color-white);
    /*background: blue;*/
      z-index: 0!important;
}

.section {
  overflow: clip;
  color: #ffffff;
  margin: 0 auto -1px!important;
  display: flex;
  width: 100%;
  flex-direction: column;
  margin:0 auto;
  will-change: transform;
}


.section:first-of-type
{
  padding:0!important;
}

.section:not(:first-of-type)
{
    padding:0 30px;
    /*background:var(--color-bg);*/
}

.section:nth-child(n+2) {
  padding:0 30px 4rem!important;
}

.section:last-of-type .section-title { padding:0 30px; }


.section-title h1
{
    display:flex;
    flex-direction:column;
    font-size: clamp(5rem, 6vw, 7.5rem);
    width:100%;
    align-items:center;
    align-content:center;
    justify-content:center;
    margin:clamp(1.25rem, 20vw, 11rem) auto clamp(1.25rem, 20vw, 3.5rem)!important
}

.section:last-of-type
{
    margin: 0 auto;
    padding-bottom:clamp(1.25rem, 20vw, 9rem)!important;
}


.section-title h2
{
    font-size:clamp(0.6125rem, 5vw, 2.5rem)!important;
    text-transform: uppercase;
    place-self: center;
    margin: 3rem auto !important;
    font-size:2rem;
}

h3
{
  font-size:1.5rem;
}

.ig-link, .ig-link:visited { color:var(--color-white)!important }

.section p a, .section p a:visited, .card p a, .card p a:visited
{
    color: var(--color-grey);
}


/* Harmonizing for grids and cards */

/* GRIDS + CARDS */
 
.grid
{
    display:grid!important;
    width:100%;
}

.grid > div
{
    display:grid!important;
    width:100%;
    align-content:center;
    justify-content:center;
    text-align:center;
}

 
.card-wrapper
{
    display:grid;
    grid-gap:2.25rem;
}
     
.card
{
    display:grid;
    grid-template-rows: auto 1fr auto;
    grid-template-rows: subgrid;
    grid-row: span 5;
    grid-row-gap:0;
    background:var(--color-bg-card); 
}

.grid h2 { margin-bottom:1.5rem}

.card :is(h2, p)
{
    padding:0 1.875rem
}

.frame
{
    padding:1.5rem;
    box-shadow: var(--color-white) 0px 0px 0 2px inset;
}

.btn-cta i {
    margin-right: .25rem;
    font-display: swap;
}


.shadow
{
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.5);
}


/* === X. LAYOUT : NEWS  === */

section
{
  & .media-container
  {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap:.5rem;
  }

  & .media-item
  {
    display: inline-flex;
    width:100%;
    height:auto;
    margin: 4px;
    overflow:clip;
    max-width: 260px;
    max-height: 260px;
  }

#news .item-cover {
    width: 100%;
    height: 100%;
    display: flex;
}

#news .insta-pic {
    width: 100%;
    height: 100%;
    object-fit: cover; /* or contain */
    object-position: center;
}
}

.media-container:first-of-type .media-item:hover img:last-child
  {
    opacity: .5;
    transition: all .3s ease;
  }


.btns-cta {
    margin: 3rem auto !important;
}


#music 
{
    & .item-cover {
        position: relative;
        display: flex;
        overflow: clip;
        aspect-ratio: 1 / 1;
        max-width: 260px;
        max-height: 260px;
    }

  & img
  {
    object-fit: cover;
  }
}

.btn-social-icon {
    margin-right: 0.5rem;
}


.btns-cta .btn-cta {
    padding: 0.5rem;
    border-radius: 6px;
}
.btn-social-spotify {
    background: rgb(30, 215, 96);
}
.btn-cta {
    font-size: 1.5rem;
}

.btn-cta i {
    margin-right: 0.25rem;
}

a, a:visited {
    color: rgb(255, 255, 255);
    cursor: pointer;
    text-decoration: none !important;
}

a:hover {
    color: rgb(255, 255, 255);
    text-decoration: none;
}



/* === X. LAYOUT : SHOP  === */

.shop-wrapper
{
    flex-direction:column;
}

.grid > div {
    display: grid !important;
    width: 100%;
    align-content: center;
    justify-content: center;
    text-align: center;
}


#grid-store
{
  & .store-card
  {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-rows: subgrid;
    grid-row: span 5;
    grid-row-gap: 0;
    background: var(--color-bg-card);
  }

  & .card-wrapper
  {
    grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 33.33333333%, 320px), 1fr)) !important;
    grid-gap: 1px;
    box-sizing: border-box;
    padding: 1px;
    justify-content: center;
  }

  & .card
  {
    position: relative;
    grid-column: auto;
    grid-row: span 2;
    grid-row-gap: 0;
    background: transparent;
    box-shadow: 0 0 0 1px var(--color-grey);
  }
}

.store-icon
{
  padding: 3rem 1px 0;

  & svg
  {
    display: flex;
    max-height: 50px !important;
    padding: 0 1px;
  }

  & svg :is(path, polygon, rect, ellipse)
  {
    fill: #ffffff!important;
  }
}


.store-cta
{
  padding: 2rem 1px;
    
  & div
  {
    letter-spacing:2px!important;
    font-size:1.5rem;
  }
}

#official-merch-container
{
    
  height:auto;
  
  background: #091718;
   

  & #title-merch-ask
  {
    padding:1.5rem 0;
    font-size:1.25rem;
    letter-spacing:2.5px!important;
    color:#fff;
  }
  

  & .cta-shop 
  {
    margin:1rem auto;
  }
}


@media screen and (min-width:769px) and (min-height:500px)
{
    

  
  
  .shop-wrapper
  {
    flex-direction:row;
    column-gap:2rem;
  }
  
  #official-merch-container
  {
    align-content:space-between;
    flex:1;
  }
  
  #merch-pic-container
  {
      height:460px;
      
      & img
      {
        width: 100%!important;
        height: 100%!important;
        object-fit: cover;
        object-position: center;
      }
      
  }
  
    #social-media-footer
  {
    margin:2rem auto;

    & li
    {
      width:48px;
      height:48px;
      margin-left: 3rem;
    }
  }

  #nav-bot ul, #credits-info-bot ul
  {
     
    flex-direction: row;
  }

  .nav-items-bot
  {

    & li { margin: .5rem; }
  }

  
}



#grid-store
{

  & .bandcamp:hover
  {
    background: rgb(29, 160, 195);
  }

  & .spotify:hover
  {
    background: rgb(29, 185, 84);
  }
  
  & .amazon:hover
  {
    background: rgb(240, 136, 4);
  }
  
  & .apple:hover
  {
    background: linear-gradient(rgb(252, 103, 103), rgb(236, 0, 140));
  }
  
  & .reverbnation:hover
  {
    background:#f035dd;
  }
  
  & .tidal:hover
  {
    background:#000;
  }
  
}





.btn-social-home
{
  background: var(--color-grey);
  color:#fff;
}

.btn-social-instagram
{
  background-image: linear-gradient(to right top, #fcac0f, #fd9522, #fa7f30, #f36a3c, #e85647, #e44751, #dd395b, #d42d65, #d12174, #ca1b85, #be1e96, #ae27a8);
}

.btn-social-spotify
{
  background:rgb(30, 215, 96)
}

.btn-social-youtube
{
  background:rgb(255, 0, 0)
}

#cta-shop-email
{
  background: #1d817e;
  color:#fff
}

#cta-shop-messenger
{
  background: #0078FF;

}


/* Credits */
  #footer-bot
  {
    background: #090736;
  }


  #credits-info p, #credits-container p
  {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0;
    text-align:center;
  }

  #credits-info
  {
    
    margin: 0 auto;
    padding:0 1rem 2rem;
    background: #000;

    &  span { display: inline-flex;}
  }

  #credits-container p
  {
    padding:0 1rem;
    margin:0 auto 1rem;
  }
  #credits-container p:last-child
  {
    margin:0 auto;
  }


  #btns-cta-credits img
  {
    margin:1rem auto;
    max-width:200px;
  }

  #credits-container
  {
    padding: 3rem 0;
  }

  #credits-container p
  {
    font-size: 1rem;
    font-family: 'Segoe UI', sans-serif!important;
  }

  #credits-container p:last-child
  {
    margin-top:.75rem;
  }
  
  #credits-info-bot
  {
      margin-top:3rem!important
  }

  #credits-info-bot ul {
    margin-bottom: 0;
}

  #credits-info-bot ul li {
    position: relative;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin:.5rem;
}



  #credits-info-bot a, #credits-info-bot a:visited {
      color: var(--color-grey);
      font-weight: bold;
  }

  .webhost, #loadtime
  {
    margin-left: .25rem;
  }

  .logo-credits:hover > #btns-cta-credits img
  {
    opacity: .5!important;
  }
  
  
  
@media screen and (min-width: 769px) and (min-height: 500px)
{
  .shop-wrapper
  {
    flex-direction:row;
    column-gap:2rem;
  }
  
  #official-merch-container
  {
    align-content:space-between;
    flex:1;
  }
  
  #merch-pic-container
  {
      height:460px;
      
      & img
      {
        width: 100%!important;
        height: 100%!important;
        object-fit: cover;
        object-position: center;
      }
      
  }
  
    #social-media-footer
  {
    margin:2rem auto;

    & li
    {
      width:48px;
      height:48px;
      margin-left: 3rem;
    }
  }

  #nav-bot ul, #credits-info-bot ul
  {
     
    flex-direction: row;
  }

  .nav-items-bot
  {

    & li { margin: .5rem; }
  }
  
  .scroll-container, .content, main
  {
      padding:0;
  }
  
  main{
      margin-top:0;
  }
}

/*

#home
{
    background-image:url("../img/jpg/rebellix-i-dont-care-chasm.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center -120px;
    background-attachment:scroll;
}
*/


  /* VIDEO*/


    #videos .section-title
    {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    }

    #videos #cta-social-youtube {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    /*height: clamp(80px, 35vmin, 400px);*/
    margin: clamp(1.25rem, 20vw, 4.5rem) auto !important;
    width: 100%;
    margin: 0;
    padding: 0;
    color: white;
    pointer-events: none;
    z-index: 10;
}

@layer components
{
    /* NAVIGATION */
    /* Auto-close menu */
    .toggle-container
    {
        display: flex;
        align-items: center;
        width: 100%;
        margin: auto auto 0;
        gap: 10px;
        font-size: 14px;
        user-select: none;
        padding: 1rem;
        color: #fff;
        cursor: pointer;
    }

    .label-on, .label-off
    {
        font-weight: bold;
        opacity: 0.5;
        transition: opacity 0.3s, color 0.3s;
        margin: 0 auto;
    }

    .toggle-wrapper
    {
        width: 15vw;
        max-width: 100px;
        min-width: 50px;
        height: 30px;
        margin: 0 auto;
        border-radius: 30px;
        background-color: #666;
        position: relative;
        transition: background-color 0.3s ease;
        touch-action: manipulation;
        flex-shrink: 0;
    }

    .toggle-wrapper.on
    {
        background-color: #4caf50;
    }

    .knob
    {
        aspect-ratio: 1;
        height: calc(100% - 4px);
        background-color: white;
        border-radius: 50%;
        position: absolute;
        top: 2px;
        right: 2px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        touch-action: none;
        transition: none;
    }


    /* SECTIONS */
    
    /* VIDEO*/

    /* Pinning ScrollTrigger YouTube Video Gallery*/

    .horiz-gallery-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-attachment: fixed;
    backface-visibility: hidden;
    transform: translateZ(0);
}

    .horiz-gallery-section {   position: relative; }


    .horiz-gallery-strip {
      margin-top:clamp(120px, 240px, 180px);
      display: flex; gap: 20px; padding: 0 40px;
      will-change: transform; align-items: center;
    }
    

    /* Link wrapper */
    .gallery-link {
      text-decoration: none;
      color: inherit;
      display: block;
      pointer-events: none; /* default: disabled */
    }

    /* Only centered item becomes clickable */
    .gallery-link.active {
      pointer-events: auto;
    }

    .gallery-item {
      position: relative;
      flex: 0 0 auto;
      width: min(600px, 80vw);
      min-height:300px!important;
      border-radius: 12px; overflow: hidden; background: #000;
      
    }



    /* ⭐ NEW: Zoom image slightly on hover ONLY when centered */
    .gallery-link.active:hover .gallery-item img {
      transform: scale(1.05);
    }

    .gallery-item img {
      width: 100%; display: block;
      transition: opacity 0.25s ease-out, transform 0.35s ease;
      will-change: opacity, transform;
    }

    .caption {
      position: absolute; bottom: 12px; left: 12px;
      color: white; font-size: 1.3rem; font-weight: bold;
      text-shadow: 0 0 8px rgba(0,0,0,0.7); pointer-events: none;
    }


} /* End of @layer components */
    

main {
    margin-top: 0 !important;
    padding: 0;
}

    
#home {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: fit-content;
}

#home .video-wrapper, #home .home-extra-content {
    /* height: 792px; */
}

#home .video-wrapper, #home .home-extra-content {
    overflow: hidden;
}
    
    
    /* Extra content below hero */
#home .home-extra-content {
  position: relative;
  width: calc(100% - 4rem);
  padding: 50px 20px;
  background-size: cover;
  color: #fff;
    overflow: hidden;
 z-index: 2;
}

#app:has(.navbar-mobile-portrait) .home-extra-content
{
      margin:9rem auto 4rem;
}

#app:has(.navbar-desktop) .home-extra-content
{
      margin:4rem auto 4rem;
}


#home .home-extra-content img {
    width: 100%;
    max-width: 500px;
    max-height: 500px;
    margin: 0 auto;
}


#home .home-content p {
    margin: 2rem auto;
}

#home button {
    background: #fff;
    color: #000;
    padding: .5rem 1rem;
    font-size: 1.5rem;
    text-box-trim: trim-both;
}

#home, #news, #band, #shop, #contact {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: white;
}




/* ============================
   BAND STACKING SECTION
   ============================ */









#contact
{
    & p
    {
        padding: 0 0 1.5rem;

    }
    & p:not(:last-child)
    {
        padding: 0;
    }
    
    & p, & .btn-cta-txt
    {
    font-size: 1.25rem;
    letter-spacing: 2.5px !important;        
    }
    
    & .btn-cta-contact-wrapper
    {
        margin:3rem auto 5rem;
    }
    
    & .btn-cta-txt
    {
        width:100%;
        padding:5rem 1rem;
        outline:1px solid #fff;
        max-width:600px;
    }

}


.fixed-header,
.new-single-cover,
button {
  opacity: 0;
  visibility: hidden;
}

.home-extra-content p {
  opacity: 1;          /* DO NOT animate opacity on this element */
  visibility: hidden;  /* Only visibility is controlled */
}

.new-single-cover {
  filter: blur(20px);
}


#band img { border-radius:8px}

#band li, #bio p
{
    font-family:'Segoe UI', sans-serif!important;
    font-size: 1.25rem;
    letter-spacing: 2.5px !important;
}

#home
{
    background:green;
}

#news
{
    background:orange;
}

#music
{
    background:skyblue;
}

#band
{
    background:pink;
}

#videos
{
    background:crimson;
}

#shop
{
    background:deeppink;
}

#contact
{
    background:olive;
}