/* #region Phone*/
:root {
  --color-primary: #00ffa0;
  --color-secondary: #f0f0f0;
  --color-tertiary:#3c3c3c;
  --color-accent: #f0f0f0;
  --color-devider: #c9c9c9; 
  --color-prim2: #0bc17e; 
  --color-prim3: rgb(12, 158, 104); 
  --size-1: 
}

body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--color-primary);
  color: var(--color-secondary);
}

main {
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex: 1;
  width: 100vw;
  height: 100vh;
  text-align: left;
  padding-inline: clamp(1.5rem, 9.5vw, 6rem);
  background-color:var(--color-prim2);
  padding-bottom: clamp(2rem, 10vw, 5rem);
  padding-top: clamp(0rem,3vw, 1.5rem);
}

footer {
  display: flex;
  flex-direction: column; 
  align-items: center;
  padding-inline: 1.5rem;
  padding-top: clamp(2rem, 10vw, 3rem);
  
}

h1 {
  font-size: clamp(1.6rem, 8vw, 3rem);
  margin-bottom: 0.3rem;
  font-weight: 900;
}

h2 {
  font-style: bold;
  font-size: clamp(1.2rem, 7vw, 2.5rem);
  font-weight: 800;
  padding-bottom: .5rem;
}

h3 {
  font-style: bold;
  font-size: clamp(1rem, 4vw, 1.3rem);
  font-weight: 700;
}

a {
  cursor: pointer;
}

p {
  font-size: clamp(1rem, 10vw, 1.4rem);
}

.about p {
  font-size: clamp(.7rem, 6vw, 1.4rem);
}

.about .quote {
  font-size: clamp(.95rem, 4vw, 1.2rem);
}

.homepage .quote {
  padding-top: 1rem;
}

.home-about {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-block: 1rem;
}

.home-about-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.home-about p {
  font-size: clamp(1rem, 4vw, 1.5rem);
  white-space: normal; /* allow wrapping */
  overflow-wrap: break-word; /* force break if needed */
}

.home-about-img {
  min-width: fit-content;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

.home-about-img img{
  margin-top:1rem;
  aspect-ratio: 1/1;
  object-fit: cover;
  width: clamp(50px, 25vw, 140px);
  border-radius: 1rem;
}

.tablet {
  display: none;
}

.recent-release.pc {
  display: none;
}

p.pc {
display: none;
}

header {
  display: flex; 
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  z-index: 10; /* stays ontop of other stuff */
  height: 60px;
  width: 100%;
  padding-block: .5rem;
}

.header-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.header-logo {
  display: flex;
  justify-content: center;
  flex-direction: column;
  max-width: fit-content;
  max-height: 60px;
  height: clamp(50px, 7vw, 60px);
}

.hamburger {
  display: flex;
  flex-wrap: wrap-reverse;
  padding-right: 1rem;
  cursor: pointer;
  height: 100%;
}

.hamburger-inner {
  height: 45px;
  width: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  border-radius: 8px;
  padding-left: 0.63rem;
}

.hamburger-inner div {
  width: 25px;
  height: 5px;
  padding-left: 0.71rem;
  background: var(--color-accent);
}

.hamburger-inner.active {
  outline: 2px solid #ececec;
  /* only around smaller box */
}

.menu {
  font-weight: 600;
  top: calc(var(--top-ribbon-height, 60px)); /* fallback to 60px if variable not set */
  display: none;
  flex-direction: column;
  background: var(--color-prim2); /* adjust color */
  color: var(--color-secondary);
  border-top: solid;
  position: absolute;
  width: 100%;
}

.menu a { /* Menu link layout */
  padding: 1rem;
}

.menu.show { /* Enables the menu toggle */
  display: flex;
}

.menu-slice { /* Menu link container layout */
  display: flex;
  justify-content: space-between;/* Pushes toggle to the right */
  padding-left: 1rem;
  font-size: 1.2rem;
  border-bottom: 0.05rem solid var(--color-devider);
}

.menu-slice2 { /* Menu link container layout */
  display: flex;
  justify-content: space-between; /* Pushes toggle to the right */
  padding-left: 1rem;
  font-size: 1.2rem;
  border-bottom: 0.05rem solid var(--color-devider);
  cursor: pointer;
}

.menu-slice a {
  /* Menu link container layout */
  display: flex;
  justify-content: space-between;
  /* Pushes toggle to the right */
  padding-left: 1rem;
  font-size: 1.2rem;
  cursor: pointer;
}

.submenu {
  /* Submenu layout */
  display: none;
  /* Dropdowns hidden by default */
  flex-direction: column;
  /* Dropdown items below eachother */
}

.submenu-slice {
  display: flex;
  font-size: 1rem;
  border-bottom: 0.05rem solid var(--color-devider);
  font-family: "Nunito";
  background-color: var(--color-prim3);
  padding-left: 1rem;
}

.submenu a {
  /* Submenu link layout */
  font-size: 1rem;
  font-family: "Nunito";
  cursor: pointer;
}

.submenu.show {
  /* Enables the submenu toggle */
  display: flex;
}

.submenu-toggle {
  /* submenu-toggle layout */
  transition: 0.3s ease;
  cursor: pointer;
  padding: 1rem 1rem;
  color: var(--color-accent);
}

.submenu-toggle.rotated {
  transform: rotate(90deg);
  /* or 180deg if you want it pointing down */
}

.italic-text {
  font-style: italic;
}

.quote {
  font-family: "Nunito";
  font-style: italic;
  font-size: clamp(.75rem, 3vw, 1.5rem);
  color: #acffe9;
}


.footer-socials.stream-links {
  max-width: 500px;
}

.footer-socials {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  max-width: 500px;
}

.footer-socials div {
  display: flex;
  flex-direction: column;
}

.footer-socials a {
  cursor: pointer;
  color: var(--color-tertiary);
  font-size: clamp(1rem, 5vw, 1.5rem);
  font-weight: 500;
}

.footer-logo {
  display: flex;
  margin-inline: auto;
  margin-block: .5rem;
  height: 100%;
  width: clamp(60px,18vw,90px);
  border-radius: 1.2rem;
  cursor: pointer;
}

.footer-copyright {
  display: flex;
  text-align: center;
  color: var(--color-secondary);
  height: 100px;
  width: 100%;
}

.footer-copyright div {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.footer-copyright p {
  font-weight: 400;
  font-size: clamp(.7rem, 3vw, .85rem);
  gap: 0.2rem;
  font-family: "Roboto";
  color: var(--color-tertiary);
}

.about-section {
  display: flex;
  flex-direction: column;
  padding-left: 1.1rem;
}

.hero {
  position: relative; /* So text can sit on top */
  overflow: hidden; /* So it doesnt go outside the fv*/
  height: 90vh;
}

.hero-img {
  width: 100%;
  height: 90vh; 
  object-fit: cover; /* makes image cover the section without stretching */
}

.hero-h1 {
  position: absolute; /* place the h1 on top of the image */
  font-family: "nunito sans";
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 900;
  text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.7); /* makes it readable */
  top: calc(90% - 6vw);
  left: 5%; 
}

.music {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.videos {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding-block: clamp(0rem, 10vw, 3rem);
}

.about {
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  color: var(--color-secondary);
}

.release {
  top: 10px;
  width: 100%;
  min-height: 300px;
  margin-bottom: 2rem;
}

.cover-art {
  width: 100%; 
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: .5rem;
  margin: auto;
  box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.6);
}

.release-title {
  font-family: "Roboto";
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 900;
  margin: 0.5rem 0 1rem;
  padding-bottom: .5rem;
}

.recent-release {
  display: flex;
  flex-direction: column;
  padding-block: 2rem;
  max-width: 100%;
}

.release-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:flex-start;
}

.release-container.tablet {
  display: none;
}

.release-container.pc {
  display: none;
}

.track {
  display: contents; /* makes the two spans align into grid cells */
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 400;
}
.time {
  margin-left: 1rem;
}
.date {
  display: none;
}

.tracklist {
  display: grid;
  grid-template-columns: 1fr auto; /* left = titles, right = time */
  row-gap: .7rem;
}

.sate { /*pc - the container for the header section with the page links*/
  display: none; 
}

.video-scroller {
  position: relative;
  display: flex;
  align-items: center;
  max-height: 300px;
}


.media-scroller {
  display: flex;
  flex-direction: row; /*makes the elements go inline (left to right)*/
  flex-wrap: nowrap;
  gap: clamp(.5rem, 3vw, 1rem); /*gap between each element*/
  padding-block: var(--_spacer); /*padding: top & bottom of each element*/

  --_spacer: .7rem; /*create a value that can be used to control multiple values at once*/
  white-space: normal;
  scroll-behavior: smooth; /* smooth scrolling */
        
  overflow-x: auto; /*so the scrolling is only for the scroller, not the whole page*/
  overscroll-behavior-inline: contain; /*the scroll pushing and dragging, is contained in the scroller*/
}

.snap-inline { /*to make it so the css of the media-scroller doesnt get too long, and more control*/
    scroll-snap-type: inline mandatory; /*the scrolling snaps, always*/
}
.snap-inline > * { /*target all elements*/
    scroll-snap-align:start; /*the scrolling snaps to the start of the left most element*/
}
.snap-inline > :last-child { /*target last element*/
    scroll-snap-align: end; /*at the last element, the scrolling snaps to the end of it, instead of the start of the left most */
}
.snap-inline > :first-child { /*target last element*/
    scroll-snap-align: start;
}

.media-element {
  display: flex; /*using grid for more control*/
  flex: 0 0 auto;   /* do not grow or shrink; keep width as defined */
  flex-direction: column;
  gap: var(--_spacer); /*control the space between the picture and the text*/
  padding: clamp(.6rem, 3.6vw, 1rem); /*control the padding inside each element */
  padding-bottom: calc(1rem + 2vw);
  background-color: var(--color-prim3); /*background color*/
  border-radius: calc(2px + 1vw); /*rounded corners for background*/
  box-shadow: 2px 2px 3px 3px var(--color-prim-shadow);
  max-width: clamp(100px, 31vw, 350px);
  height: auto;
}

.media-element p {
  display: -webkit-box;       /* use flexible box */
  -webkit-box-orient: vertical; /* vertical stacking */
  -webkit-line-clamp: 2;      /* max number of lines */
  font-size: clamp(.65rem, 3vw, 1rem);
  overflow: hidden;   /* hide overflowing text */
  text-overflow: ellipsis; /* show "…" for overflow */
  white-space: normal; /* ensure wrapping */
  word-wrap: break-word; /* break long words if needed */
  overflow-wrap: anywhere; /* optional, handles very long words */
  padding-inline: calc(.1rem + .5vw) ;
}

.scroll-button {
  display: none;
}

.media-scroller::-webkit-scrollbar {
  display: none;
}

.thumbnail { 
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: calc(3px + 1vw);
}

.media-element > img    {
  aspect-ratio: 16 / 9; /*img gets cropped to 16:9 */
  object-fit: cover; /*the img doesnt stretch*/
  cursor: pointer;
}

.scroller-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* keeps aspect ratio */
  display: block;
  border:0;
}

.recent-releases {
  display: flex;
  flex-direction: column;
}

.image-wrapper {
  position: relative; /* play button absolute relative to this wrapper */
  display: inline-block;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-size: clamp(1rem, 6vw, 5rem);
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  grid-row: 1 / 2; /* overlay on top of image */
  pointer-events: none; /* click passes through to thumbnail */
}

.modal {
  display: none; /* hidden by default */
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  position: relative;
  width: 80%;
  max-width: 1080px;
  aspect-ratio: 16 / 9;
  background-color: black;
  border-radius: 1rem;
  overflow: hidden;
}

.modal-content iframe {
  width: 100%;
  height: 100%;
}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 2rem;
  color: white;
  cursor: pointer;
}

.hero-pc {
  display: none;
}

.link-page {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 0;
  min-height: 19rem;
}


.cover-container {
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  max-width: 11rem;
  margin-bottom: 1rem;
}
 
.cover-container p {
  font-weight: 900;
  font-size: 1.1rem;
  line-height: clamp(1.2rem, 3vw, 1.7rem);
  text-align: center;
  text-shadow: #0f0f0f .15rem 0 .4rem;
}

.cover-container p:first-of-type {
  padding-top: .5rem;


}

.dark {
  color:var(--color-secondary);
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.background img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* makes it grow to fill */
  filter: blur(70px);
  transform: scale(1.1); /* optional: zoom a bit so edges don’t show */
}

.stream-link-container { 
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.442);
  width: 100%;
  max-width: 500px;
  max-height: fit-content;
  border-radius: .5rem;
  margin-bottom: 1rem;
}

.stream-link-container a {
  padding-inline: 1rem;
}

.stream-link {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: var(--color-primary);
  border-bottom: .07rem solid #7a7a7a;
  width: 100%;
  height: 4.3rem;
  padding-block: 1rem;
}

.stream-link img {
  width:7rem;
}

section > a:last-of-type > div{
  border-bottom: none;
}

.stream-logo {
  width: max-content;
  height: 3.2rem;
  padding-block: .5rem;
}

.stream-button {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 1rem;
  background-color: #dde7ec;
  
  border-radius: .3rem;
  font-family: "Nunito Sans";
  font-weight: 700;
  font-size: .85rem;
}

.footer-logo {
  margin-block: 1.5rem;
}
/* #endregion phone*/
@media (max-width: 319px) {   
  h1 { 
    font-size: clamp(1.5rem, 8.5vw, 2rem);
  }
  h2 { 
    font-size: clamp(1rem, 7.5vw, 2rem);
  }
  h3 { 
    font-size: clamp(.65rem, 5.5vw, 2rem);
  }
  p { 
    font-size: clamp(.5rem, 5vw, 2rem);
  }
  .quote {
    font-size: clamp(.5rem, 4vw, 2rem);
  }

  .name-logo {
    font-size: clamp(.5rem, 6vw, 2rem);
  }  
  .hero-h1 { 
    font-size: clamp(1rem, 8.5vw, 2rem);
  }

  .release-title {
    font-size: clamp(.65rem, 5vw, 2rem);
  }
  .song { 
    font-size: clamp(.5rem, 5vw, 2rem);
  }
  .time { 
    font-size: clamp(.5rem, 5vw, 2rem);
  }  
  .cover-container p {
    font-size: clamp(.75rem, 5.5vw, 2rem);
  }

  .footer-socials a {
    font-size: clamp(8px, 5.5vw, 16px);
  }
  
  .footer-copyright p {
    font-size: clamp(.5rem, 3.5vw, .7rem);
  }

  .stream-link img {
    width: 39%;
    height: min-content;
  }
  .stream-button {
    font-size: clamp(.5rem, 4vw, 2rem);
    width: fit-content;
    padding: 4%;
  }

}

@media only screen and (min-width: 768px) {  
  p.tablet {
    display: flex;
  }
  p.pc {
    display: none;
  }

  .release-container {
    flex-direction: row;
    justify-content: center;
    align-items:flex-start;
    gap: calc(.5rem + 3vw);
  }

  .release-container.tablet {
    display: flex;
  }
  .release-container.pc {
    display: none;
  }

/* #region Homepage*/
  p {
    font-size: 1.5rem;
  }
  .quote {
    font-size: 1.3rem;
  }


  /* #region Header*/
  header {
    height: 110%;
    --top-ribbon-height:70px;
  }  

  .header-logo p {
  font-size: 1.5rem;
  }

  .hamburger {
   padding-right: 1.5rem;
  }

  .hamburger-inner {
    height: 45px;
    width: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    border-radius: 8px;
    padding-left: 0.63rem;
 }

  .hamburger-inner div {
    width: 25px;
    height: 5px;
    padding-left: 0.71rem;
    background: var(--color-accent);
  }

  /* #endregion Header*/
  .hero {
    height: 90vh; 
  }
  
  .homepage .quote {
    font-size: 1.5rem;
    padding-top: 2rem;
  }

  .who-i-am {
    margin-left: 3%;
    margin: 0 auto;
  }

  .text-container {
    display: flex;
    flex-direction: column;
  }

  .section-about {
    display: flex;
  }

  .home-about p {
    font-size: 1.5rem;
    padding-right: 1rem;
    padding-bottom: 1.2rem;
  }

  /* #endregion Homepage*/

  /* #region recent-releases*/

  .release {
    display: flex;
    flex-direction: column;
    width: 31%;
    min-height: fit-content;
    margin: 0 auto;
  }

  /* #endregion recent-releases*/


  .Discography {
    display: flex;
    flex-direction: row; 
    align-items:flex-start;
    flex-wrap: wrap;
    gap: 1.01rem;
    row-gap: 2rem; /* space below each "release"*/
  }

  .date {
    display: block;
    font-size: .8rem;
    font-weight: 400;
  }

  .song {
    font-size: 1.1rem;
  }

  .time {
    font-size: 1.1rem;
  }

  footer {
    padding-inline: 2rem;
  }

  .footer-socials {
    max-width: clamp(500px, 65vw, 700px) 
  }

  .name-logo {
    padding-right: 2rem;
  }

  .cover-container {
    max-width: 15rem;
  }
  .cover-container p {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1024px) {
  .scroll-button {
    position: absolute;
    text-align: center;
    top:50%;
    z-index: 10;
    border: none;
    box-shadow: .01rem .01rem .4rem rgb(0, 0, 0);
    background: #ffffff9b;
    color: var(--color-accent);
    font-size: 30px;
    cursor: pointer;
    padding-inline:1rem;
    padding-top:.2rem;
    border-radius:50%;
    font-size: 2rem;
    font-weight:900;
    text-shadow: .01rem .01rem .4rem rgba(0, 0, 0, 0.612);
  }

  .scroll-button.left {
    left: -2rem;
    transform: translateY(-50%) rotate(90deg); /* flips left arrow */
  }
  .scroll-button.right {
    right: -2rem;
    transform: translateY(-50%) rotate(-90deg); /* flips left arrow */
  }

  .media-scroller::-webkit-scrollbar {
    height: 10px; /* thickness of horizontal scrollbar */
  }
  .media-scroller::-webkit-scrollbar-track {
    background: #808080; 
    border-radius: 5px;
  }
  .media-scroller::-webkit-scrollbar-thumb {
    background: #d3d3d3; 
    border-radius: 5px;
  }
  .media-scroller::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }
  .phone {
    display: none;
  }

  .tablet {
    display: flex;
  }
  .recent-release.pc {
    display: flex;
  }

  p.pc {
    display: flex;
  }

  header {
    height: 85px;
  }  

  p {
    font-size: 1.5rem;
  }
  .quote {
    font-size: 1.3rem;
  }
  
  .header-logo p {
    font-size: 1.7rem;
  }

  .hamburger {
    display: none;
  }
  .sate { /*the container for the header section with the page links*/
    display: flex;
    margin: auto;
    margin-left: 0%;
    gap: 1.5rem;
  }  
  .sate a { /* the header page links */
    font-size: 1.7rem;
    padding-left: 1rem;
    font-family: "Nunito Sans";
    font-weight: 700;
    cursor: pointer;
    color: var(--color-tertiary) ;
  }
  .hero {
    height: 90vh; 
  }

  .homepage .quote {
    font-size: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 3rem;
  }

  .who-i-am {
    margin-left: 3%;
    margin: 0 auto;
  }

  .text-container {
    display: flex;
    flex-direction: column;
  }

  .section-about {
    display: flex;
  }

  .home-about p {
    font-size: 1.5rem;
    padding-right: 1rem;
    padding-bottom: 1.2rem;
  }

  .home-about-img img{
    width: clamp(140px, 14vw, 250px);
  }

  .play-button {
    font-size: 4rem;
  }

  .Discography {
    display: flex;
    flex-direction: row; 
    align-items:flex-start;
    flex-wrap: wrap;
    gap: 1.01rem;
    row-gap: 2rem; /* space below each "release"*/
  }

  .release-container {
    gap: calc(1rem + 3vw);
  }

  .release-container.pc {
    display: flex;
  }

  .date {
    display: block;
    font-size: .8rem;
    font-weight: 400;
  }

  .song {
    font-size: 1.1rem;
  }

  .time {
    font-size: 1.1rem;
  }

  .name-logo {
    padding-right: 2rem;
  }

  .cover-container {
    max-width: 15rem;
  }
}