@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

*{
    border : solid 0px white;
}

body{
    background : rgb(60, 60, 60);
    font-family: "Inter", sans-serif;
}

a{
    color : yellow;
    text-decoration: none;
  }

.grid-container{
    display : grid;
    grid-template-rows : 1fr;
    grid-template-columns: 1fr;
    gap : 30px;
}



header{
    display : grid;
    grid-template-columns : 1fr 3fr;
    grid-template-rows : 150px;
}

.logo{
    display : grid;
    justify-items : center;
    align-items: end; 
}

nav{
    /* border  : solid 0px red; */
    display : grid;
    align-items: end;
}
nav ul{
    /* border  : solid 0px green; */
    list-style: none;
    padding: 0px;
    margin:0px;
    display : grid;
    grid-template-columns : 1fr 1fr 1fr 1fr; 
    
    align-items: end;
}

nav ul li{
    text-align : center;
}

nav ul li a:link{
    text-align : right;
    font-weight : 1pt;
    font-size : 10pt;
    letter-spacing : 5px;
    font-family: "Inter", sans-serif;
    color : white;
    text-decoration:none;
}

nav ul li:active{
    color : red;
}

nav ul li a:hover{
    color: rgb(127, 227, 20);
    cursor: url('../images/icons/cursor.cur'), auto; /* Custom cursor added */
}

nav ul li a:visited{
    color: white;
}

.activePage{
    color:yellow !important;
  }

.heading{
    
    color : white;
    font-size : 5vw; /* Changed from 96pt to responsive font size */
    font-weight : bold;
    font-family: "Jost", sans-serif;
    text-align: right;
    padding : 6px; 
    padding-right : 100px;
}

/* Artist Page */
.artist *{
        border : solid 0px white;
    }

.artist_logo{
    text-align : center;
}
.artist_logo img{

    max-width : 666px;
    width : 80%;
    min-width : 350px

}

.artist_profiles{
    margin : 0 auto;
    display : flex;
    margin-top: 20px;
    margin-bottom : 20px;
    justify-content: space-around;
    width : 66%;
    max-width : 700px;
    justify-self: center;
}

.artist_profiles img{
    width : 20px !important;
    height : 20px !important;
}



/* MUSIC PAGE */
.content section{
    border : solid 0px white;
    display : grid;
    gap : 20px;
    justify-items: center;
  }

  .content section .release{
    border : solid 0px green;
    min-height : 500px;
    width : 100%;
    max-width:666px;
    text-align:center;
    letter-spacing:3px;
    font-size : 10pt;
    margin-bottom : 100px;
  }

  .content section .release .release_artwork{
    /* max-width : 666px; 
    /* max-height : 666px;*/
    width:100%;
    
    min-height : 222px;
    transition: filter 0.3s ease;
    border-radius:6px;
  }

  .content section .release .release_artwork img{
    width : 50%;
  }


.content section .release img:hover,
.content section .artist img:hover {
    filter: drop-shadow(25px 25px 25px rgba(36, 36, 36, 0.99));
    cursor: url('../images/icons/cursor.cur'), auto; /* Custom cursor added */
}

.streams{
  display : flex;
  margin-top: 20px;
  margin-bottom : 20px;
  justify-content: space-around;
  width : 100%;
}

.streams img{
  width : 20px !important;
  height : 20px !important;
}

.latest{
  grid-column: 1 / 2;
}

.title_description{
    font-family: "Jost", sans-serif;
    text-align : left;
    width : 100%;
    color : white;
  }

/* Title Page */
.title{
    display : grid;
  }
  
  .title_artwork{
    text-align : center;
  }
  
  .title_artwork img{
    width : 100%;
    max-width : 666px;
  }
  
  .title_description{
    font-family: "Jost", sans-serif;
    text-align : left;
    width : 100%;
  
    justify-items: center;
  }

  .title_description div{
    width : 666px;
  }

  
  
  .title_tracks{
    padding : 0px;
    margin : 0px;
    list-style : none;
    width : 100%;
    justify-items: center;
  }

  .title_tracks li{
    width : 666px;
  }



  .title_streams{
    text-align : right;
  }
  .title_streams a:link{
    text-decoration : none;
  }
  
  .title_streams img{
    width : 20px;
    margin : 5px;
  }
  
  .track{
    display : grid;
    grid-template-columns : 1fr 1fr;
    gap:10px;
    height : 60px;
    border-bottom : solid 1px white;
    margin-bottom : 10px;
    align-items: end;
    padding-bottom: 10px;
    font-family: "Jost", sans-serif;
    color : white;
  }

  /*MERCH*/
  .merch_item{
    color : white;
    margin-bottom : 25px;
  }

  .merch_item img{
    width : 100%;
    max-width : 666px;
  }
  
   .merch_item{
    font-family: "Jost", sans-serif;
  }

/* NEWS */
.news_event{
    
    margin-bottom : 10px;
    max-width : 1024px;
    background : rgba(255,255,255,.55);
    padding : 50px;
    border-radius : 6px;
    border : solid 0px rgba(255,255,255,.5);
  }
  
  .news_event a:link{
    color : yellow;
    text-decoration : none;
  }
  
  .news_event a:visited{
    color : yellow;
    text-decoration : none;
  }
  


footer {

    max-height : 10px;
    border : solid 1px rgb(28, 28, 28);
    border-radius : 6px;

    font-size : 7pt;
    display : flex;
    justify-content: center;
    align-items: flex-end;
    padding : 66px;
    background : rgba(255,255,255,.0666);
    margin-top :100px;
    color : rgb(16, 26, 31);
}

@media (max-width: 700px) {
    header{
        display : grid;
        grid-template-columns : 1fr;
        grid-template-rows : 150px;
        gap : 30px;
    }

    header *{
        border : solid 0px white;
    }

    .heading{
        font-size : 5em;
        text-align: center;
        padding : 0px;
    }

}