/* ----- Global Styles ----- */
html{
font-size:12px;
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1{font-weight: bold; font-size:3.5rem; margin: 0 0 0.5rem 0; text-align: center; line-height: 1em;
}
.left-title{text-align: left; margin-left:2vw;}

a{color:#b197fd; text-decoration: none; transition: 0.2s;}
i{transition: 0.2s;}
strong{color:#b197fd;}

@media all and (min-width: 1100px){
  html{font-size:16px;}
  h1{font-size: 4rem;}
  }
  


body{
  background: rgb(39, 35, 86);
  background: linear-gradient(75deg, rgba(39,35,86,1) 0%, rgba(74,49,105,1) 100%);
  color:#ffffff;
  max-width:1200px;
  margin: 0 auto;
  text-align: center;
}

h2{font-size:2rem;}


/* ========== Header and Menus ========== */
header{
  background:#1F1F34;
  text-align:center; 
  margin: 1em 2vw 1em 2vw;
  display:flex;
  flex-flow: column nowrap;
  align-items: center;
  padding:1rem;
  border-radius: 0.75em; 
}

header img{width:90%; max-width:400px; margin-top:0; border-radius:0.75em;}

.social-links{
  display: flex;
  flex-flow:row wrap;
  color:#DEDEDE
}
.social-links a{
  font-size: 2rem;
  color:#ffffff;
  margin-left:2rem;
}
.playlist-page{border-radius: 0.75em;}
.playlist-page h1, h2{
  margin:0;}
.playlist-page h2{
font-weight: 500;
color:#DEDEDE}



.social-links a:hover{color:#b197fd;}

.overlay {
  display: none;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
  z-index: 1; /* Ensure it's on top */
}

.overlay-content {
  flex: 3 3 100%;
  background:#1F1F34;
  border-radius:12px;
  width:100vw;
  position: absolute;
  top:2vh;
  display:flex;
  flex-flow:column wrap;
  align-items: stretch;
  justify-content: start;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  line-height:1.3rem;
  font-size:1.2rem;
}

.overlay-content :last-child{border-bottom: none;}


.overlay-link{
  flex:3 1 100%;
  width:60%; 
  margin: 0 auto 1rem auto;
  padding: 1vh 1vw;
  display:grid;
  grid-template-columns: 6rem max-content;
  align-items:center;
  justify-content:start;
  color:white;
  font-size: 1rem;
  line-height: 1.5rem;
  border-bottom: #3E3E50 3px solid;}

  .overlay-link:hover{color:white;}

#closeButton{
  flex:3 1 100;
  width:50%; 
  margin: 0 auto;
  padding: 2vh 0;
  color:white;
  line-height: 1.5rem;
  font-size:2.5rem;
  cursor: pointer;
  text-align: center;}

  .overlay-link i{flex: 5 1 30%; font-size:4rem; margin:5% 0 5% 0; width:4rem;}
  .overlay-link label{flex: 5 1 70%; font-size:2rem; line-height: 2rem;}

/* ========== Module Structures ========== */
.module{
  flex: 3 1 100%;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows:2fr min-content min-content;
  background:#1F1F34;
  border-radius:12px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  line-height:1.3rem;
  font-size:1.2rem;
  position:relative;
}

.cta-tag {
background:#0DBFF5;
border-radius: 0 12px 0 12px;
font-size:1.4em;
padding: 0.8em 1em;
font-weight: bold;
position: absolute; top:0; right:0;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}




.ad-module{
  flex: 3 1 100%;
  padding: 1rem 0;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows:1fr 1fr;
  background:#1F1F34;
  border-radius:12px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  line-height:1.3rem;
  font-size:1.2rem;
}

.ad-module .overlay-link{width:80%;}

  .module h2{font-size:3rem; margin:0 0 0.5rem 0; line-height: 1em;}
  
  .card-img{grid-column: 1; grid-row: 1; cursor: pointer;}
  .card-title{grid-column: 1; grid-row: 2; padding: 0.5rem 1rem 0.5rem 1rem; font-size:2rem; line-height:1em; display:flex; flex-flow:column nowrap; align-items:flex-start; margin-left:1rem;}
  .card-btn{grid-column: 1; grid-row: 3;}
  .card-btn a{
    background:#F4AB37; 
    margin-bottom:0;
    font-weight:bold; 
    font-size:1.8rem; 
    color:#ffffff;
    padding: 0.7em; 
    display:flex; 
    align-items:center; 
    justify-content:center;  
    text-align: center; 
    border-radius: 0 0 12px 12px;
  }
  
  .card-btn a:hover{background:#b197fd;}
  .card-btn i{margin-right:1rem;}
  .card-links{grid-column: 1/3; grid-row: 2; display:flex; flex-flow: row wrap; justify-content: space-evenly;}
  
  .module img{height:100%; width:100%; object-fit:cover; border-radius:12px 12px 0 0;}


/* ----- Sreaming Service Links bar ----- */
.stream-link{
  flex:5 5 25%; 
  padding: 1vh 1vw;
  display:flex;
  align-items:center;
  align-content:center;
  justify-content:center;
  flex-flow: row wrap;
  text-align:center;
  color:white;
  font-size: 1rem;
  line-height: 2em;
}

.stream-link i{flex: 5 1 100%; font-size:5rem; margin:10% 0 5%;}
.stream-link label{flex: 5 1 100%; font-size:2rem; margin-bottom:1em; margin-top:0em;}

  .stream-link:last-child{border-radius: 0 0 12px 0}
  .stream-link:first-child{border-radius: 0 0 0 12px}
  .stream-link:hover{ 
   -webkit-box-shadow: inset 0px 0px 5px #1F1F34;
      -moz-box-shadow: inset 0px 0px 5px #1F1F34;
           box-shadow: inset 0px 0px 5px #1F1F34;
    outline: none;}

  .single-link{
    flex:5 3 100%; 
    font-size:1.8em;
    color:#ffffff;
    padding: 0.7em; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    text-align: center;
    border-radius:0 0 12px 12px;
    border-style: none;
  }
  
    .single-link:hover{ 
 color:white; transition: 0.3s;
     outline: none;}
    .single-link i{margin-right:2%;}
      
footer{
  background:#1F1F34;
  text-align:center; 
  margin: 1em 2vw 0 2vw; 
  font-size:1rem;
  border-radius: 12px 12px 0 0; 
  padding:1em;}
footer a{font-size:1.5em;}
footer h3{font-size:2em; margin:0; padding-bottom:0.5rem;}

.footer-frame{display:grid; grid-template-columns: 1fr;}

section{
padding: 0 2vw 2vh 2vw;
}

.title-panel{
  background:#1F1F34;
  padding: 1vh 1vw;
  display:flex;
  align-items:center;
  align-content:center;
  justify-content:center;
  flex-flow: row wrap;
  text-align:center;
  border-radius:0.75rem;
  color:white;
  margin: 1em 0 1em 0;
}
.title-panel h2{
font-size: 3rem;
font-weight: 500;
margin:0;}



.flex-row{display:flex; flex-flow: column nowrap; row-gap: 1rem;
justify-content: center;}

/* Tablet code */
@media all and (min-width: 770px){
html{font-size:13px;}
}

/* ----- Dekstop Code ----- */

@media all and (min-width: 1100px){
html{font-size:14px;}
.module{grid-template-columns: 3fr 2fr; grid-template-rows:2fr min-content;}
.card-img{grid-column: 1; grid-row: 1/3;}
.card-title{grid-column: 2; grid-row: 1;}
.card-btn{grid-column: 2; grid-row: 2;}
.module img{height:100%; width:100%; object-fit:cover; border-radius:12px 0 0 12px;}
.stream-link i{font-size:6rem;}
.flex-row{flex-flow: row wrap;}
footer{grid-template-columns: 1fr 1fr 1fr;}
.footer-frame{grid-template-columns: 1fr 1fr 1fr;}
li{margin-bottom:0.5em;}
li:before{font-weight:bold;}
.overlay-content{width:50%; left:50%; top:50%; transform: translate(-50%, -50%);}
.ad-module{grid-template-columns: 1fr 1fr;}
.card-btn a {position: static; border-radius: 12px; margin:1em;}

.new-release{
grid-template-columns: 1fr 3fr;
}


}
  


.btn-spotify{color:#1ED760;}
.btn-apple{color:#fc3c44 ;}
.btn-youtube{color:#FF3333;}
.btn-amazon{color:#0DBFF5;}
.btn-discord{color: #5865f2;}
.btn-twitch{color: #6441a5;}
.btn-patreon{color: #f96854;}
.btn-threads{color: #000000;}
.btn-bandcamp{color:#629aa9;}
.btn-albums{color:#fc3c44 ;}
.btn-blog{color:#F4AB37;}
.btn-kofi{color:#72A4F2;}
.btn-playlists{color:#1ED760;}
.btn-labs{color:#F4AB37;}
.btn-blog{color: #b197fd;}
.btn-shop{color: #F4AB37;}
.btn-deezer{color: #9333e8;}

.music-panel{color:#1DB954;}
.stream-link:hover{color:#ffffff;}