@font-face {
  font-family: Remon;
  src: url("Remon.ttf");
  font-weight: bold;
}

@font-face {
  font-family: SF-Pro;
  src: url("SF-Pro-Text-Medium.otf");
  font-weight: normal;
}

:root{

  --navbar_pc_height: 5rem;
  --navbar_tablet_height: 4rem;
  --navbar_phone_height: 4.5rem;

  /*container var*/
  --pc_width:75%;
  --phone_width: 100%;
  --tablet_width: 75%;

  /*grid variable*/
  --grid_pc_width: 90%;
  --grid_phone_width:100%;
  --grid_pc_gap: 3%;

  --footer-height: 2rem;

  --container-pc-start: 15vh;
  --container-phone-start: 10dvh;
  --container-tablet-start: 10vh;

  --container-pc-end: 2vh;
  --container-phone-end: 5dvh;
  --container-tablet-end: 5vh;

  --element-pc-spacing: 5rem;

  --font-size-header: 2rem;
  --font-size-body: 1rem;

/*   --grid_element_pc_width: 30%;
  --grid_element_phone_width: 90%; */

  scroll-behavior: smooth;

}
html, body{
  /* overscroll-behavior: none; */
}


html{
  font-size: 100%

}

body{

  display:flex;
  flex-direction: column;
  min-height: 100vh;
  /* align-items: center; */

  padding: 0%;
  margin: 0px;

  background-size: cover;
  font-family: 'SF-Pro';
  font-size: 1.5rem;

  position:relative;
  /* overflow: hidden; */

}


/*=============================================================*/
a:link,
a:visited,
a:hover,
a:active{
  text-decoration: none;
  color: inherit;
}

h1{
  font-size: 3rem;
  margin: 1vh 0px;
  
}

button{
  font-family: inherit;
  font-size: inherit;
  border: 2px;
  font-size: 1.5rem;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.7);
  color:black;


}
button:hover{
  transition: all 0.3s ease;
  transform: scale(1.1);
  background-color: rgba(0, 0, 0, 0.9);
  color: white;

}

.credits_link{
  font-size: 1.2rem;
  margin: 0.5rem;
}

.share_button{
  /* background-color: whitesmoke; */
  font-size: 1.2rem;
  /* text-transform: uppercase; */
  padding: 0.2rem 1rem 0.2rem 1rem;
  border: 1px solid;
  margin-top: 0.8rem;
  cursor: pointer;

}

ul{
  padding: 0px;
}


/*=============================================================*/

.bg_container{
  position: absolute;
  display: flex;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index:-100;

}

#dim_bg{
  filter: opacity(0.2);
  position:sticky;
  overflow: hidden;
  margin-bottom: -100vh;
}

.bg{
  max-height:100%;
}

.bg_clipper_top{
  position:fixed;
  top: -100vh;
  width: 100vw;
  height: 100vh;
  background-color: white;
  z-index: 1000;
  pointer-events: none;
}

.page_container{
  position: relative;
  /* min-height: 100vh; */
}

.content{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 5vw;
}

.content_overlay{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 200;
}



.navbar_container{
  position:sticky;
  z-index: 1000;
  top: 0;
  --gradient: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1.0) 0%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0.0) 100%
    );
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0% 5%;
  /* text-transform: uppercase; */
  font-family: 'Remon';
  background: var(--gradient);
  height: var(--navbar_pc_height);
}

#no_gradient{
  background-color: white;
}

#hard_gradient{
  --hard_gradient: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1.0) 0%,
      rgba(255, 255, 255, 0.8) 70%,
      rgba(255, 255, 255, 0.0) 100%
    );
  background: var(--hard_gradient);
}

.navbar_list{
    display: flex;
    justify-content: space-between;
    list-style: none;
    text-transform: uppercase;
    font-family: 'SF-Pro';
    font-size: clamp(1rem, 2.5vw, 2rem);
    margin: 1vh;
    
    
}

.navbar_list li a{
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

nav a:hover{
  
  transform: scale(1.2);
}

nav a[aria-current="page"] {
  color:grey;
  pointer-events: none;
}

nav a[aria-current="page"]:hover{}


.navbar_item{
    display: flex;
    align-items: center;
    padding: 15px 20px;
    
}

.menu_button{
    display:none;
    height:50%;
    border: 0px;
    background-color: rgba(255, 255, 255, 0.0);
}
.menu_button:hover{
  background-color: white;
  color: black;
}


/*===============================================================*/


.music_container{
    
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(0.5* var(--container-pc-start));
  width: var(--pc_width);
  border-radius: 1%;

  background-color: white;


}


.stream_button{
  text-transform: uppercase;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 1.2rem;
  margin-bottom: calc(0.5* var(--container-pc-start));

}
.stream_button a{
  display: flex;
  align-items: center;

}
.stream_button svg{
  margin: 5px;
  width:30px;
}
.stream_button:hover{
    transition: all 0.3s ease;
    fill:white;
}

.music_link{
  display:flex;
  flex-direction: column;
  width: 90%;
  min-height: 0;
  align-items: center;
  /* aspect-ratio: 1/1; */
  margin-bottom: 5rem;
  /* cursor:pointer; */
  filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.1));
}

.album_title{
  text-align: center;
  text-transform: uppercase;
  /* text-decoration: underline; */
  margin: 0.75em;
}

.album_image{
  width: 100%;
  aspect-ratio: 1/1;
  filter: blur(0px);
  filter: grayscale(0%) brightness(100%);
  /* filter: contrast(10%);
   */
}

.album_overlay{
  position: absolute;
  display: none;
  /* display: none; */
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 0% 0%;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 1000000;
}

.album_spotify{
  width: 100%;
  margin-top: 1rem;
  
}

.album_embed{
  width: 100%;
  min-height: 152px
} 

/* .album_embed{
  width: 95%;
  height: 95%
} */

.album_overlay button{
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  /* border: 1px solid; */
}
.album_overlay button:hover{
  transform: inherit;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  /* border: 1px solid; */
}

/*===============================================================*/

.video_container{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--container-pc-start);
  width: var(--pc_width);
  border-radius: 1%;

  background-color: white;

}

.video_wrapper{
  /* display: block; */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* aspect-ratio: calc(16/9); */
  margin: 0px;
  margin-bottom: var(--element-pc-spacing);

}

.video_wrapper > div {
  position: relative;
  padding-bottom: 75%;
  height: 0px;
}

/* .video_wrapper iframe{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
} */

.video_wrapper iframe{
  width: 100%;
  /* height: calc(100%*3/4); */
  aspect-ratio: calc(4/3);
  margin-bottom: 1rem;
}

/*===============================================================*/
/*MERCH*/

.merch_header{
  font-size: 2.5rem;
  text-transform: uppercase;
  margin-top: 5vh;
}
.merch_container{
  
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--container-pc-start);
  margin-bottom: var(--container-pc-end);
  width: var(--pc_width);
  /* border-top: 1px solid darkslategrey; */
  /* border-bottom: 1px solid darkslategrey; */
  border-radius: 1%;
  /* border-style: outset; */

  background-color: white;



}

.merch_title{
  text-transform: uppercase;
  /* text-decoration: underline; */
  margin: 0.75em;
}

.merch_image{
  max-width: 75%;
}

.merch_details{
  text-align: justify;
  text-justify: auto;
  /* text-align: center; */
  width: 75%;
  border-top: 2px solid darkslategray;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-top: 0.5rem;


  font-size: 0.75rem;

}

#merch_price{
  text-align: center;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0;
  padding-top: 0;
  font-size: 1.5rem;
}

#shipping{
  border: none;
  font-size: 0.65rem;
  margin-top: 0;
  text-align: center;
}


/*===============================================================*/
/*GALLERY*/

.gallery_menu_container{
    width: var(--grid_pc_width);
    margin-top: calc(0.5* var(--container-pc-start));
    margin-bottom: calc(0.5* var(--container-pc-start));
}

.gallery_menu{
  display: grid;
  list-style: none;
  grid-template-columns: repeat(3, 1fr);
  /* justify-content: space-around; */
  font-size: 1rem;
  margin: 0;

}

.gallery_menu_item{
  margin: 4%;
  /* text-justify: auto; */
  text-align: center;
  /* border-bottom: 1px solid; */
  /* border-left: 1px solid; */
  /* text-decoration: underline; */
  
}

.gallery_menu_item a:hover{
  color: grey;
  transition: all 0.1s ease;
}

.gallery_header{
  margin-top: calc(0.5*var(--container-pc-start));
  scroll-margin-top: 15vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: var(--grid_pc_width);
  justify-items: center;
  align-items: center;

  /* font-size: 2.5rem; */
}

.gallery_header_title{
  grid-column-start: 2;
  /* width: 50%; */
  margin: 0;
  text-align: center;
}

.gallery_to_top{
  display: flex;
  /* width: 50%; */
  align-items: center;
  justify-self: end;
}

.gallery_to_top_text{
  margin: 0;
  text-transform: uppercase;
  font-size: 1rem;
}

.gallery_to_top_svg{
  width: 3rem;
  height: 3rem;
}
.gallery_grid{
  width: var(--grid_pc_width);
  justify-items: center;
  align-items: center;
  /* min-height: 0; */
  /* display: flex;
  justify-content: flex-start;
  flex-wrap: wrap; */
  display: grid;
  /* gap: var(--grid_pc_gap); */
  grid-template-columns: repeat(3, 1fr);
  /* margin: 2vw 0px; */
  box-sizing: border-box;
}

.gallery_image{
  min-height: 0;
  display: flex;
  width: 90%;
  aspect-ratio: 1/1;
  object-fit: cover;
  margin: 5%;
  /* border: 2px solid rgb(104, 102, 102); */

  padding: 0.5%;
  transition: transform 0.3s ease, padding 0.3s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.gallery_grid img:hover {
  transform: scale(1.05);
  padding: 0%;
  /* filter: invert(70%) grayscale(100%); */
  filter: invert(10%) grayscale(100%);
}

/* Fullscreen overlay */
#gallery_overlay {
  border-width: 0px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Fullscreen image */
#gallery_overlay_image {
  height: 80%;
  width: auto;
  object-fit: contain;
  max-width: 90%;
  max-height: 90%;
}

#gallery_overlay_text{
  border-width: 0px;
  color: antiquewhite;
  font-size: 1rem;
}


/*===============================================================*/

.contact_container{
    
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--container-pc-start);
  margin-bottom: var(--container-pc-end);
  width: var(--pc_width);
  border: 0px solid darkslategrey;
  border-radius: 1%;

  background-color: white;
}

#contact_form{

  display: flex;
  flex-direction: column;
  align-items: center;
  width: 75%;
  /* border-top: 2px solid darkslategrey; */
}

.contact_details{
  /* text-align: justify; */
  /* text-justify: auto; */
  text-align: center;
  width: 75%;
  /* border-top: 2px solid darkslategray; */
  margin-top: 1em;
  margin-bottom: 0em;
  /* padding-top: 0.5rem; */
  font-size: 0.75rem;
}

#shipping_details{
  text-align: left;
  /* text-align: justify; */
  /* text-justify: auto; */
  width: 100%;
  font-size: 0.65rem;
}


.contact_product_section{
  display: grid;
  grid-template-columns: 50% 50%;
  /* grid-template-columns: repeat(4, 25%); */
  width: 100%;
}

#product_section{
  grid-column-start: 1;
  grid-column-end: 3;
}
#size_section{
  width:auto;
  padding-right: 5px;
}
#size_section2{
  display: none;
  width:auto;
  padding-right: 5px;
}

.product_soldout{
  display: none;
}

#quantity_section{
  width:auto;
  padding-right: 5px;
}
.contact_form_section{
  font-size: 1.5rem;
  margin: 2% 0;
  width: 100%;
  /* text-transform: capitalize; */
}

.contact_form_element{
  /* min-width: 100%; */
  width: 100%;
  /* padding: 1% 0; */
  margin: 1% 0;
  font-family: Arial, Helvetica, sans-serif;
}
.contact_label{
  max-width: 100%;
  /* text-transform: capitalize; */
  font-size: 1rem;
}

#submit{
  border: 2px solid darkslategrey;
  border-radius: 1%;
  color: black;
  font-style: normal;
  /* background-color: rgba(255, 255, 255, 1); */
}

#submit:hover{
  color:white;
}

/*===============================================================*/
/*CREDITS*/
.credits_container{
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  margin-top: calc(0.5*var(--container-pc-start));
  margin-bottom: var(--container-pc-end);
  width: var(--pc_width);
  border-radius: 1%;
}

.credits_title{
  font-size: var(--font-size-header);
  margin-bottom: 1.5rem;
  scroll-margin-top: 15dvh;
}
.credits_category{
  font-size: 1.5rem;
  /* margin-bottom: 0.5rem; */
}
.credits_body{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 1rem;
  font-size: 1rem;
  margin-bottom: 5vh;
  /* line-height: 200%; */
}
.credits_subcategory{
  font-size: 1.1rem;
  grid-column: span 2;
  font-style: italic;
}

/*===============================================================*/

  .minimal_subscribe {
  z-index: 2;
  /* position: absolute; */
  /* bottom: var(--footer-height); */
  /* right: 0vw; */
  /* display: flex; */
  margin-left: auto;
  /* width:100%; */
  margin-bottom: 1rem;
  /* width: 23vw;
  border-bottom: 1px solid rgba(0, 0, 0, 0.85);
  padding-bottom: 3px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: rgba(0, 0, 0, 0.85) !important;
  font-style: normal;
  font-size: 0.75rem; */
}

#minimal_form{
  border: none;
  /* border-radius: 0; */
}

#minimal_submit{
  font-style: normal;
  color: black;
  font-size: 0.75rem;
}

/*===============================================================*/
/* 
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
} */

.footer{
  /* position:absolute; */
  /* bottom: 0; */
  /* width: 100%; */
  display: flex;
  flex-direction: row;
  margin-top: auto;
  /* margin-top: aut%; */
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 0% 1%;
  overflow: hidden;
  /* height: var(--footer-height); */
}

#footer_home{
  flex-direction: column;
  background-color: transparent;
}

#footer_bottom{
  width: 100%;
  padding: 0% 10%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}

.socials_container{
  display: flex;
  /* gap: 10%; */
  width: 30%;
  justify-content: space-between;
  align-items: center;
}
.socials_link{
  display: flex;
  align-items: center;
  /* padding: 0.5em; */
}

.copyright{
  display: none;
  font-size: 1rem;
  margin: 0px;
  text-transform: uppercase;
}

#abenayo_logo{
  /* max-width: 30%; */
  /* display: none; */
  max-height: var(--footer-height);
  margin-bottom: 0rem;
}

/*===============================================================*/
/*RESIZE*/
/*===============================================================*/
/*PHONE*/
@media screen and (max-width: 510px) {
  .navbar_container{
    background-color: white;
    border-bottom: solid 1px;
    height: var(--navbar_phone_height);
  }
  #hard_gradient{
    background-color: white;
  }
/*   #titlebar{
    justify-content: center;
    background: var(--gradient);
    border: none;
  } */
    .navbar_list {
      opacity: 0%;
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 0;
      left: 0;
      margin: 0px;
      position: absolute;
      width: 100vw;
      background: white;
      z-index: 1000;
      border-top: 1px solid black;
    }
  
    .navbar_list.open {
      display: flex;
      opacity: 0%;
      transition: opacity 0.3s;
      border-bottom: solid 1px;
      
      
    }

    .navbar_item{
      display: block;
      text-align: center;
      width: 75%;
      /* border-bottom: solid 1px; */
    }
  
    .menu_button{
      display: flex;
    }
    .menu_button.open{
      transition: 0.3s;
      color: grey;
    }

    /* ================================================ */

    .home_button{
      width:50%;
    }
    /* ================================================ */

    .stream_button{
      margin-bottom: calc(0.5* var(--container-phone-start));
    }

    .music_container{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: calc(0.5* var(--container-phone-start));
      width: var(--grid_phone_width);
      /* gap: 5vh; */
    }

    .music_link{
      margin-bottom: 3rem;
    }

    /* ================================================ */

    .video_container{
      display: flex;
      flex-direction: column;
      width: var(--phone_width);
      margin-top: var(--container-phone-start);

    }

    .video_container iframe{
      /* height: calc(100vw * 9 / 16); */
    }

    /* ================================================ */
    .gallery_grid{
      width: var(--grid_phone_width);
      grid-template-columns: repeat(2, 1fr);
      margin-bottom: var(--container-phone-end);

    }

    .gallery_menu_container{
      margin-top: calc(0.5 * var(--container-phone-start));
      margin-bottom: calc(0.5 * var(--container-phone-start));
    }

    .gallery_menu{
      grid-template-columns: repeat(1, 1fr);
    }

    .gallery_menu_item{
      text-align: left;
      font-size: 1rem;
      margin: 1%;
      border: 0;
    }
    .gallery_header{
      margin-top: calc(0.5*var(--container-phone-start));
    }

    .gallery_header_title{
      font-size: 1.5rem;
    }

    .gallery_to_top_text{
      display: none;
    }

    /* ================================================ */
    .merch_header{
    font-size: 2rem;
    text-transform: uppercase;
    margin-top: 5vh;
    }
    .merch_container{
      margin-top: var(--container-phone-start);
      margin-bottom: var(--container-phone-end);
      width: var(--phone_width);
    }

    /* ================================================ */
    .contact_container{
      width: var(--phone_width);
      margin-top: var(--container-phone-start);
      margin-bottom: var(--container-phone-end);
    }
    /* ================================================ */
    .credits_container{
      width: var(--phone_width);
      margin-top: var(--container-phone-start);
      margin-bottom: calc(0.5*var(--container-phone-end));
    }
    .credits_title{
      scroll-margin-top: 6rem;
    }
    /* ================================================ */

    .footer{
      flex-direction: column;
      /* border-top: solid 1px; */
    }

    #footer_bottom{
      flex-direction: column;
    }

    .minimal_subscribe{
      margin-left: 0;
    }

    .socials_container{
      width: var(--phone_width);
      padding: 0px 1rem;
      box-sizing: border-box;
    }
    .socials_link{
      padding: 0.1em;
    }
    #abenayo_logo{
      max-height: 1.2rem;
      /* margin-bottom: 0.25rem; */
    }
}

/*TABLET*/
@media screen and (max-width: 800px) and (min-width: 511px){

    .navbar_container{
      height: var(--navbar_tablet_height);
    }
    /* ================================================ */
    .music_container{
      margin-top: calc(0.5*var(--container-tablet-start));
      margin-bottom: var(--container-tablet-end);

    }
    /* ================================================ */
    .video_container{
      margin-top: var(--container-tablet-start);
      margin-bottom: var(--container-tablet-end);

    }
    /* ================================================ */
    .gallery_menu_container{
      margin-top: calc(0.5*var(--container-tablet-start));
    }
    .gallery_header{
      margin-top: calc(0.5*var(--container-tablet-start));
    }
    .gallery_grid{
      margin-bottom: var(--container-tablet-end);
    }
    /* ================================================ */
    .merch_header{
    font-size: 2rem;
    text-transform: uppercase;
    margin-top: 5vh;
    }
    .merch_container{
      margin-top: var(--container-tablet-start);
      margin-bottom: var(--container-tablet-end);
      width: var(--phone_width);
    }
    /* ================================================ */
    .contact_container{
      width: var(--phone_width);
      margin-top: var(--container-tablet-start);
      margin-bottom: var(--container-tablet-end);
    }
    /* ================================================ */

}