*{
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}


body{
 background: linear-gradient(to right, black,rgba(36, 37, 122, 0.466),black);
 text-align: center;
 justify-content: center;
 align-items: center;
 padding: 10px;
}

header{
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  background: linear-gradient(to right,black,darkblue,rgb(92, 91, 91),darkblue,black);
  
  border-bottom: 1px solid wheat;
  box-shadow: 0px 2px 6px black;
  padding: 10px 0px;
  z-index: 999;
}



h1{
margin: 0% auto;
text-align: center;
font-size: 25px;
color: white;
text-shadow: 2px 2px 4px gold;
background: rgba(245, 245, 245, 0.089);
padding: 6px 0px;
margin-bottom: 10px;
border-radius: 100%;
box-shadow: 0px 2px 10px rgba(135, 206, 250, 0.322);
background-image: url(MusicGig.gif);
background-position: top;
background-size: cover;
border-left: 2px solid rgba(228, 179, 89, 0.884);
border-right: 2px solid rgba(228, 179, 89, 0.884);
width: 75%;

}


h2{
margin: 0% auto;
text-align: center;
font-size: 25px;
color: white;
text-shadow: 2px 2px 4px gold;
background: rgba(245, 245, 245, 0.089);
padding: 10px;
border-radius: 20px;
box-shadow: 0px 2px 10px rgba(135, 206, 250, 0.322);
background-image: url(MusicGig.gif);
background-position: top;
background-size: cover;
width: 75%;
margin-bottom: 15px;

}



.navigationMusicHtlm{
  margin: 0% auto;
   position: relative;
   left: 0%;
   width: 100%;
    display: flex;
    overflow-x: scroll;
    border: none;
    box-shadow: 0px 2px 6px black;
    background-color: transparent;
    border-radius: 5px;
    padding: 25px 5px;
    gap: 5px;
    background: linear-gradient(to right,black,rgb(0, 0, 139),rgb(92, 91, 91),rgb(0, 0, 139),black);
  }
  .navigationMusicHtlm::-webkit-scrollbar{
    width: 0%;
  }
  .navigationMusicHtlm::-webkit-scrollbar-track {
   
    border-radius: 5px;
  }   
  .navigationMusicHtlm::-webkit-scrollbar-thumb{
    border: 1px solid rgba(245, 222, 179, 0.884); 
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.637); 
    cursor: grab; 
  }
  .navigationMusicHtlm::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 212, 4, 0.836);
    cursor: grab;
  }
  .navigationMusicHtlm::-webkit-scrollbar-thumb:active{
    background-color: darkblue;
    cursor: grabbing;
  }
  .navigationMusicHtlm .mlb{
    position: relative;
    display: inline-block;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    margin: 5px;
    padding: 65px;
    max-width: 100%;
    border: none;
    box-shadow: 0px 2px 6px black;
    border-radius: 10px;
    background-position: center;
    background-size: cover;
    cursor: pointer;
  }
  .navigationMusicHtlm .mlb:hover{
    box-shadow: 2px 2px 10px lightgreen;
    background-color: rgba(255, 217, 0, 0.349);  
    transform: scale(1.10);
    transition: 0.5s; 
  }

.navigationMusicHtlm p {
  margin: 0 auto;
  text-align: center;
  position: absolute;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: bold;
  left: 0;
  top: 130px;
  width: 100%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.795);
  text-shadow: 1px 1px 2px black;
  font-size: 12px;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 10px;

  /* Added properties for better overflow handling */
  white-space: nowrap;         /* Prevents text from wrapping to the next line */
  text-overflow: ellipsis;     /* Adds "..." at the end if text overflows */
  box-sizing: border-box;      /* Ensures padding is included in the width */
}





.navigationMusic{
  margin: 0% auto;
   position: absolute;
   left: 0%;
   width: 100%;
    display: flex;
    overflow-x: scroll;
    border: none;
    box-shadow: 0px 2px 6px black;
    background-color: transparent;
    border-radius: 5px;
    padding: 25px 5px;
    gap: 5px;
    background: linear-gradient(to right,rgba(0, 0, 0, 0.644),rgba(0, 0, 0, 0.644),rgba(1, 1, 128, 0.623),rgba(187, 159, 3, 0.521),rgba(1, 1, 128, 0.623),rgba(0, 0, 0, 0.644),rgba(0, 0, 0, 0.644));
    background-size: 25%;
  }
  .navigationMusic::-webkit-scrollbar{
    width: 0%;
  }
  .navigationMusic::-webkit-scrollbar-track {
   
    border-radius: 0px;
  }   
  .navigationMusic::-webkit-scrollbar-thumb{
    border: 1px solid rgba(245, 222, 179, 0.884); 
    border-radius: 0px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    background: rgba(0, 0, 0, 0.637); 
    cursor: grab; 
  }
  .navigationMusic::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 212, 4, 0.836);
    cursor: grab;
  }
  .navigationMusic::-webkit-scrollbar-thumb:active{
    background-color: darkblue;
    cursor: grabbing;
  }
  .navigationMusic .mlb{
    position: relative;
    display: inline-block;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    margin: 5px;
    padding: 50px;
    max-width: 100%;
    border: none;
    box-shadow: 0px 2px 6px black;
    border-radius: 10px;
    background-position: center;
    background-size: cover;
    cursor: pointer;
  }
  .navigationMusic .mlb:hover{
    box-shadow: 2px 2px 10px lightgreen;
    background-color: rgba(255, 217, 0, 0.349);  
    transform: scale(1.10);
    transition: 0.5s; 
  }

.navigationMusic p {
  margin: 0 auto;
  text-align: center;
  position: absolute;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: bold;
  left: 0;
  top: 100px;
  width: 100%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.795);
  text-shadow: 1px 1px 2px black;
  font-size: 12px;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 10px;

  /* Added properties for better overflow handling */
  white-space: nowrap;         /* Prevents text from wrapping to the next line */
  text-overflow: ellipsis;     /* Adds "..." at the end if text overflows */
  box-sizing: border-box;      /* Ensures padding is included in the width */
}


#category-albums{
  margin: 0% auto;
   position: relative;
   justify-content: space-between;
   left: 0%;
   width: 100%;
    display: flex;
    overflow-x: scroll;
    border: none;
    box-shadow: 0px 2px 6px black;
    background-color: transparent;
    border-radius: 5px;
    padding: 25px 5px;
    gap: 5px;
    background: linear-gradient(to right,black,rgb(0, 0, 139),rgb(92, 91, 91),rgb(0, 0, 139),black);
  }
  #category-albums::-webkit-scrollbar{
    width: 0%;
  }
  #category-albums::-webkit-scrollbar-track {
    background-color: rgba(245, 245, 245, 0.253);
    border-radius: 0px;
  }   
  #category-albums::-webkit-scrollbar-thumb{
    border: 1px solid transparent; 
     border-radius: 0px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    background: rgba(0, 0, 0, 0.692); 
    cursor: grab; 
  }
 #category-albums::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 212, 4, 0.836);
    cursor: grab;
  }
  #category-albums::-webkit-scrollbar-thumb:active{
    background-color: darkblue;
    cursor: grabbing;
  }
 .category-album{
    position: relative;
    display: inline-block;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    margin: 5px;
   
    border: none;
    box-shadow: 0px 2px 6px black;
    border-radius: 10px;
    background-position: center;
    background-size: cover;
    cursor: pointer;
  }
 .category-album p {
  margin: 0 auto;
  text-align: center;
  position: absolute;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: bold;
  left: 0;
  top: 140px;
  width: 100%;
  overflow: hidden;
  color: rgba(211, 211, 6, 0.849);
  text-shadow: 1px 1px 2px black;
  font-size: 12px;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 10px;

  /* Added properties for better overflow handling */
  white-space: nowrap;         /* Prevents text from wrapping to the next line */
  text-overflow: ellipsis;     /* Adds "..." at the end if text overflows */
  box-sizing: border-box;      /* Ensures padding is included in the width */
}


  .category-img {
    width: 125px;
    height: 125px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    margin: 5px;

   
  }
  .category-img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }

 






.Top-Ten-Title{
    color: rgba(216, 185, 8, 0.781);
    text-shadow: 1px 1px 2px black;
    background-color: rgba(0, 0, 0, 0.26);
   font-size: 14px;
   font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 500;
    text-align: right;
    padding: 2px;
    position: absolute;
    right: 10px;
    top: 6px;
}
.Top-Ten-Title ion-icon{
    color: rgba(167, 143, 10, 0.822);
    background-image: url(lollipop_3GIF.gif);
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.938);
    border-radius: 50px;
}









  .progress-container{
  margin: 0% auto;
  display: inline-block;
  width: 80%;
 
}

#progressBar {
  margin: 0% auto;
  display: block;
  width: 80%;
}


#volumeControl {
  margin: 0% auto;
  display: block;
  width: 40%;
}





#close-btn{
  margin: 0% auto;
  position: absolute;
  bottom: 0;
  left: 0px;
  border: none;
  color: red;
  text-shadow: 1px 1px 2px black;
  padding: 10px 5px;
  font-size: 14px;
  font-weight: 700;
  background-color: rgba(255, 255, 255, 0.315);
  border-bottom-left-radius: 15px;
   border-top-right-radius: 0px;
  cursor: pointer;
  opacity: 80%;


}
#close-btn:hover{
  color: rgb(37, 1, 1);
  text-shadow: 1px 1px 2px yellow;
}
  
  #category-filter{
              appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
            margin: 0% auto;
            position: fixed;
            top: 0;
            left: 0;
            border: none;
            padding: 10px 10px;
            text-align: center;
            width: 100%;
            border-radius: 6px;

              font-weight: 600;
  background: linear-gradient(to right,rgba(0, 0, 0, 0.863),rgba(83, 83, 83, 0.795),rgba(0, 0, 0, 0.863));
  color: rgba(212, 212, 9, 0.842);
  text-shadow: 1px 1px 2px black;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.836);
            font-size: 15px;
            letter-spacing: 1px;
            cursor: pointer;
            text-transform: uppercase;
            z-index: 1001;
            display: none;
          }
          #category-filter option{
            background-color: black;
            cursor: pointer;
          }




#search-bar {
    margin: 0% auto;
    width: 100%; /* fill container */
    padding: 8px 40px 8px 8px; /* right padding to avoid mic overlap */
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 16px;
    color: white;
    text-shadow: 1px 1px 2px gold;
    border: 1px solid rgba(153, 205, 50, 0.788);
    border-radius: 10px;
    background-color: rgba(18, 119, 177, 0.438);
    text-align: center;
    box-shadow: 0px 1px 5px lightsalmon;
    transition: 0.5s;
}
#search-bar:focus{
    background-color: rgba(4, 14, 87, 0.322);
    transition: 0.5s;
}




  #toggle-searchTwo{
    margin: 0% auto;
    border: none;
    background: transparent;
    cursor: pointer;
    margin-bottom: 10px;
    margin-top: 10px;
}
#toggle-searchTwo i{
    margin: 0% auto;
    margin-top: 10px;
    padding: 7px 8px;
    background: transparent;
    color: rgba(196, 169, 19, 0.76);
    font-size: 25px;
    box-shadow: 0px 2px 6px darkblue;
    background-color: rgba(0, 0, 0, 0.726);
    border-radius: 8px;
  
}
#toggle-searchTwo:hover{
     transform: scale(1.00);
     transition: 0.5s ease;
     background-color: rgba(0, 0, 0, 0.87);
       border-radius: 8px;
}
#toggle-searchTwo i:hover{
    color: gold;
      border-radius: 8px;
}


#LanguageContainer{
  border: none;
  position: absolute;
  bottom: 5px;
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 600;
  background-color: rgba(10, 10, 10, 0.863);
  box-shadow: 0px 2px 6px darkblue;
  color: rgba(187, 187, 7, 0.829);
  text-shadow: 1px 1px 2px black;

}
#voice-lang{
     appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  border: none;
  position: relative;
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 600;
  background-color: rgba(10, 10, 10, 0.863);
  box-shadow: 0px 2px 6px darkblue;
  color: rgba(187, 187, 7, 0.829);
  text-shadow: 1px 1px 2px black;

}



    
  #video-list{
    height: 30vh;
    padding: 10px;
    overflow: scroll;

 }

 #video-list::-webkit-scrollbar{
  background-color: transparent;
  height: 0px;
  width: 15px;
}
#video-list::-webkit-scrollbar-thumb{
  background-color: transparent;
  cursor: pointer;
  border-radius: 100%;
  border: 1px solid wheat;
}

#video-list::-webkit-scrollbar-thumb:hover{
  border: 1px solid rgba(212, 181, 4, 0.842);

}

#video-list::-webkit-scrollbar-track{
  background-color: transparent;
  border: none;
}



 #video-list div{
    margin: 0% auto;
    position: relative;
    display: inline-block;
    flex-direction: column;
    box-sizing: border-box;
   background: linear-gradient(to right, rgba(0, 0, 0, 0.808),rgba(73, 73, 73, 0.596),rgba(0, 0, 0, 0.644));
   padding: 10px;
   width: 100%;
   margin-bottom: 15px;
   border-top: 1px solid wheat;
   border-bottom: 1px solid wheat;
   box-shadow: 0px 2px 6px black;
   cursor: pointer;
   border-radius: 10px;
}
#video-list div:hover{
    transform: scale(1.05);
    transition: 0.5s ease-in-out;
    border-left: 2px solid gold;
    border-right: 2px solid gold;
}
 #video-list img{
    margin: 0% auto;
    box-shadow: 0px 2px 5px whitesmoke;
    border: 1px solid lightskyblue;
    padding: 2px;
    width: 75px;
    height: 75px;
    border-radius: 6px;
 }
 #video-list img:hover{
   transform: scale(1.10);
   transition: 0.5s ease-in-out;
 }
 #video-list p{
    margin: 0% auto;
    color: rgba(255, 255, 0, 0.925);
    text-shadow: 1px 1px 2px black;
    font-size: 15px;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 5px;
    overflow: hidden; /* Prevent text from overflowing */
    text-overflow: ellipsis; /* Add ellipsis for overflowed text */
    white-space: nowrap; /* Prevent text from wrapping to the next line */
    width: 100%;
    padding: 2px; /* Added padding for better spacing */
 }

 #video-list pre {
    color: rgba(255, 255, 255, 0.815);
    text-shadow: 2px 2px 2px black;
    background-color: rgba(245, 245, 245, 0.164);
    font-size: 14px;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 10px;
    padding: 5px 5px; /* Increased padding */
    border-left: 3px solid rgba(148, 126, 2, 0.671);
    border-right: 3px solid rgba(148, 126, 2, 0.671);
    box-sizing: border-box; /* Ensure padding is considered in width */
    overflow: hidden; /* Prevent text from overflowing */
}
#video-list section{
    margin: 0% auto;
    position: absolute;
    top: 0px;
    right: 0px;
    color: darkgray;
    text-shadow: 1px 1px 2px black;
    font-size: 12px;
    padding: 5px;
    max-width: 100%; 
    border-radius: 0px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 10px;



}
#video-list section:hover{
    transform: scale(1.50);
    transition: 0.5s ease-in-out;
}

#video-list small{
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 5px;
  background: linear-gradient(to right,black,rgba(209, 178, 3, 0.863),black);
  color: rgba(255, 255, 255, 0.842);
  text-shadow: 1px 1px 2px black;
  border-bottom: 0.5px solid rgba(245, 222, 179, 0.829);
  font-size: 10px;
  font-weight: 600;
  font-family: Georgia, 'Times New Roman', Times, serif;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 4px;
  width: 35%;
  opacity: 90%;
   
}



#Video-tag{
        color: yellow;
        text-shadow: 1px 1px 2px darkblue;
        margin-bottom: 5px;
        font-size: 16px;
        letter-spacing: 1px;
    }


    #video-controls{
            margin: 0% auto;
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            gap: 5px;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: linear-gradient(to right,rgba(0, 0, 0, 0.856),rgba(1, 1, 110, 0.856),rgba(107, 91, 3, 0.856),rgba(1, 1, 110, 0.842),rgba(0, 0, 0, 0.842));
            box-shadow: 0px 2px 10px black;
            padding: 25px 10px;
            border-radius: 10px;
            box-sizing: border-box;
            width: 95%;
          }

          #video-player:hover #video-controls {
    display: flex;  /* Show when the video container is hovered */
}

          #video-controls button{
            margin: 0 auto;
            font-size: 20px;
            padding: 15px 25px;
            width: 10%;
            height: 10%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: rgba(255, 218, 6, 0.733);
            background: rgba(0, 0, 0, 0.329);
            border: 1px solid wheat;
            box-shadow: 0px 1px 4px darkblue;
            border-radius: 100px;
            cursor: pointer;
          }
          #video-controls button:hover{
            background: rgba(0, 0, 0, 0.89);
            transform: scale(1.10);
            transition: 0.5s ease-in-out;
            box-shadow: 0px 2px 6px gold;
          }
          #playPauseBtn i{
            margin: 0% auto;
            font-size: 25px; 
          }
          #playPauseBtn{
            font-size: 25px;
          }




          

.video-item.active {
    border: 2px solid rgba(255, 217, 0, 0.849); 
}






.video-details {
    margin: 0% auto;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;       
    left: 50%;       
    transform: translate(-50%, -50%); 
    width: 95%;
    height: auto;       
    padding: 10px;
    background: linear-gradient(to right,rgba(0, 0, 0, 0.932),rgba(1, 1, 100, 0.925),rgba(155, 132, 3, 0.849),rgba(1, 1, 100, 0.925),rgba(0, 0, 0, 0.925));
    border-radius: 15px;
    border: 1px solid rgba(245, 222, 179, 0.842);
    box-shadow: 0px 5px 15px black;
    z-index: 999; 
    text-align: center;
    
}
video {
  max-width: 100%;
  height: 250px;
  border-radius: 8px;
  box-shadow: 0px 2px 6px black;
}
#video-player video {
  max-width: 100%;
  height: 250px;
  border-radius: 5px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.925);
  padding: 2px;
  margin-bottom: -5px;
  background-color: rgba(0, 0, 0, 0.904);
 
}

  

#videoThumbnail{
    padding: 2px;
    width: 75px;
    height: 75px;
    border-radius: 8px;
    box-shadow: 0px 2px 6px lightskyblue;
    margin-bottom: 5px;
}
 

#videoInfo{
    margin: 0% auto;
    background-color: rgba(245, 245, 245, 0.082);
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    width: 70%;
    border-radius: 10px;
}


.Top-Ten-Title{
    color: rgba(216, 185, 8, 0.781);
    text-shadow: 1px 1px 2px black;
    background-color: rgba(0, 0, 0, 0.26);
   font-size: 14px;
   font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 500;
    text-align: right;
    padding: 2px;
    position: absolute;
    right: 10px;
    top: 6px;
}
.Top-Ten-Title ion-icon{
    color: rgba(167, 143, 10, 0.822);
    background-image: url(lollipop_3GIF.gif);
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.938);
    border-radius: 50px;
}





#current-video-info{
    margin: 0% auto;
    position: absolute;
    border-top-left-radius: 8px;
    top: 10px;
    width: 50%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.562),rgba(87, 86, 86, 0.589),rgba(0, 0, 0, 0.582));
    
  }

#current-video-title{
    font-size: 12px;
    color: rgb(197, 191, 191);
    text-shadow: 2px 2px 2px darkblue;
    letter-spacing: 0.5px;
}
#current-video-creator{
    font-size: 10px;
    color: white;
    text-shadow: 0px 0px 2px gold;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}



.GoLolli{
        margin: 0% auto;
        font-size: 16px;
        color: rgba(214, 214, 25, 0.842);
        text-shadow: 1px 1px 2px black;
        font-weight: 500;
        font-family: Georgia, 'Times New Roman', Times, serif;
        text-decoration: none;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        padding: 5px;
        border-right: 2px solid rgba(221, 180, 104, 0.89);
        border-left: 1px solid rgba(221, 180, 104, 0.89);
        box-shadow: 0px 2px 6px black;
        margin-left: 5PX;
        background-image: url(MusicGig.gif);
        background-position: center;
        background-size: 50%;

    }
    .GoLolli:hover{
        transform: scale(1.10);
        transition: 0.5s ease-in-out;
        color: yellow;
        border-right: 2px solid yellow;
        border-left: 1px solid yellow;
    }
    





 

 



  .Women-Design-Title{
    margin: 0% auto;
    position: relative;
    text-align: center;
    font-size: 25px;
    color: yellow;
    text-shadow: 2px 2px 4px black;
    padding: 10px;
    border-radius: 20px;
   background: linear-gradient(to right,black,rgba(85, 85, 85, 0.877),black);
    width: 50%;
    box-shadow: 0px 2px 6px black;
    margin-bottom: 10px;
    margin-top: 5px;
  }


  

.Women-Design{
    margin: 0% auto;
 
    display: flex;
    flex-direction: column;
  justify-content: center;
    align-items: center;
    text-align: center;
    align-content: center;
    width: 0%;
    margin-bottom: 40px;
    gap: 10px;
    padding: 10px;
    border: none;
  }






.Women-Design img {
  margin: 0% auto;
  position: relative;
  display: flex;
  width: 200px;
  height: 150px;
  border-radius: 10px;
  box-shadow: 0px 2px 6px black;
  animation: heartbeat 1.5s infinite;
}


  .Women-Design img:hover{
    transform: scale(1.05);
    transition: 0.5s ease-in-out;
    box-shadow: 0px 2px 10px rgba(255, 217, 0, 0.849);
  }



@keyframes heartbeat {
  0%, 50% {
    transform: scale(1);
    box-shadow: 0px 5px 15px red;
  }
  14% {
    transform: scale(1);
    box-shadow: 0px 5px 15px blue;
  }
  28% {
    transform: scale(0.5);
    box-shadow: 0px 5px 20px white;
  }
  42% {
    transform: scale(1);
     box-shadow:0px 5px 15px red;
  }
  70% {
    transform: scale(1);
    box-shadow: 0px 5px 15px blue;
  }
}



  #category-filtermusic{
            margin: 0% auto;
            border: none;
            padding: 10px 5px;
            text-align: center;
            width: 250px;
            border-radius: 10px;
            background-color: rgba(46, 45, 45, 0.849);
            color: rgba(218, 187, 14, 0.753);
            text-shadow: 1px 0px 1px rgba(180, 154, 5, 0.63);
            box-shadow: 0px 2px 5px black;
            border-left: 2px solid wheat;
            border-right: 2px solid wheat;
            font-size: 15px;
            letter-spacing: 1px;
            cursor: pointer;
            margin-top: 5px;
            margin-bottom: 10px;
          }
          #category-filtermusic option{
            display: block;
            background-color: black;
            cursor: pointer;
          }






  .dropdown {
    margin: 0% auto;
    position: relative;
    display: inline-block;
  }
  .dropbtn {
    margin: 0% auto;
    border-radius: 10px;
    color: rgba(212, 181, 5, 0.925);
    text-shadow: 1px 1px 2px black;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-family: Georgia, 'Times New Roman', Times, serif;
    background: linear-gradient(to right,black,rgba(80, 79, 79, 0.89),black);
    box-shadow: 0px 2px 6px black;
    padding: 5px;
    cursor: pointer;
    border: none;
  
  }
  .dropdown:hover .dropbtn {
      background-color: black;
  }

  .dropdown-content {
      display: none;
      position: absolute;
      background-color: transparent;
      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
      z-index: 1;
      min-width: 200px;
      height: 40vh;
      padding: 10px;
      overflow: scroll;
  }

  .dropdown-content::-webkit-scrollbar {
  width: 15px;
  height: 0px;
  background: transparent;
  border-radius: 10px;
  }
  .dropdown-content::-webkit-scrollbar-thumb {
  background: transparent;
  border: 2px solid rgba(255, 255, 0, 0.5);;
  border-radius: 10px;
  height: 40px;
  cursor: pointer;
  }
  .dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 0, 0.5);
  }
  .dropdown-content::-webkit-scrollbar-track {
  background: transparent;
  border: none;
  }
  .dropdown-content::-webkit-scrollbar-track:hover {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  }

  .dropdown-content a {
      color: yellow;
      text-shadow: 1px 1px 2px black;
      border: 1px solid wheat;
      margin-top: 10px;
      padding: 12px 16px;
      text-decoration: none;
      border-radius: 10px;
      background: linear-gradient(to right,black,rgba(80, 79, 79, 0.89),rgba(1, 1, 112, 0.774),rgba(80, 79, 79, 0.89),black);
      display: block;
  }

  .dropdown-content a:hover {
    transform: scale(1.05);
    transition: 0.5s ease-in-out;
      background-color: rgba(0, 0, 139, 0.897);
  }

  .dropdown:hover .dropdown-content {
      display: block;
  }



  #spinnerS {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 1000;
}

.spinnerSo {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

  .SubscriptionT2{
        margin: 0% auto;
        color: darkgray;
        text-shadow: 1px 1px 2px black;
        margin-bottom: 15px;
        font-size: 14px;
        font-weight: 600;
       }

  #progress-container {
    width: 100%;
    margin: 10px 0;
    background: rgba(0, 0, 0, 0.753);
    border-radius: 10px;
    padding: 5px;
}

#progress-bar {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background-color: black;
    appearance: none;
}

#progress-bar::-webkit-slider-runnable-track {
    background-color: rgba(2, 2, 43, 0.952);
    border: 1px solid rgba(201, 172, 10, 0.781);
    box-shadow: 0px 2px 4px rgba(59, 59, 59, 0.733);
    border-radius: 5px;
    height: 10px;
}

#progress-bar::-webkit-slider-thumb {
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: black;
    border: 2px solid rgba(221, 190, 16, 0.952);
    cursor: pointer;
}

#progress-bar::-moz-range-track {
    background-color: transparent;
    border-radius: 5px;
    height: 10px;
}

#progress-bar::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: gold;
    cursor: pointer;
}




#returnBt{
  border: none;
  background: linear-gradient(to right,black,darkgray,black);
  box-shadow: 0px 2px 6px black;
  padding: 5px;
 color: rgba(255, 255, 0, 0.822);
 text-shadow: 1px 1px 2px black;
 cursor: pointer;
}

#returnBt:hover{
  transform: scale(1.10);
  transition: 0.5s ease-in-out;
  color: yellow;
}



  #return-btnTwo{
  border: none;
  background: linear-gradient(to right,black,darkgray,black);
  box-shadow: 0px 2px 6px black;
  padding: 5px;
 color: rgba(255, 255, 0, 0.822);
 text-shadow: 1px 1px 2px black;
 cursor: pointer;
}

#return-btnTwO:hover{
  transform: scale(1.10);
  transition: 0.5s ease-in-out;
  color: yellow;
}

#returnB{
  margin: 0% auto;
  position: absolute;
  bottom: 0;
  left: 0;
  list-style-type: none;
  cursor: pointer;
  border: none;
  color: rgba(255, 255, 0, 0.822);
 text-shadow: 1px 1px 2px black;
  box-shadow: 0px 2px 6px black;
 cursor: pointer;
 font-size: 20px;
 padding: 6px 12px; 
 background: rgba(255, 0, 0, 0.521);
 border-radius: 10px;
 border-top-left-radius: 0px;
 border-bottom-right-radius: 0px;
 opacity: 70%;
}

#returnB:hover{
  transition: 0.5s ease-in-out;
  color: yellow;
  opacity: 100%;
  box-shadow: 0px 2px 5px rgba(245, 245, 245, 0.226);
}

#card-element{
   margin: 0% auto;
   width: 100%;
   background-color: rgba(245, 245, 245, 0.589);
   padding: 10px;
   font-size: 30px;
   box-shadow: 0px 2px 6px black;
   border-radius: 5px;
  }


  
#upload-forM {
    margin: 0% auto;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 278px;       
    left: 50%;       
    transform: translate(-50%, -50%); 
    width: 95%;
    height: auto;       
    padding: 10px;
    background: linear-gradient(to right,rgba(0, 0, 0, 0.952),rgba(53, 52, 52, 0.897),rgba(0, 0, 0, 0.945));
   
    border-radius: 15px;
    border: 2px solid rgba(245, 222, 179, 0.842);
    box-shadow: 0px 2px 6px black;
    z-index: 9999; 
    text-align: center;
    
}

#return-btnfour{
  margin: 0% auto;
  position: absolute;
  top: -5px;
  right: 5px;
  list-style-type: none;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 2px gold;
  padding: 10px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  width: 50px;
  height: 50px;
  border: none;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0px 2px 6px rgba(102, 101, 101, 0.822);
 background-color: darkblue;
 opacity: 70%;
}

#return-btnfour:hover{
  transform: scale(1.10);
  transition: 0.5s ease-in-out;
  background-color: rgba(0, 0, 139, 0.897);
  opacity: 100%;
}

#sign-up{
    margin: 0% auto;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0px 2px 6px black;
    color: transparent;
    background-image: url(registernowbuttongif.gif);
    background-position: center;
    background-size: 100%;
    cursor: pointer;
  }
  #sign-up:hover{
    transform: scale(1.10);
    transition: 0.5s ease-in;
  }


#main {
    margin: 0% auto;
    position: fixed;
    top: 278px;       
    left: 50%;       
    transform: translate(-50%, -50%); 
    width: 95%;
    height: auto;       
    padding: 10px;
    background: linear-gradient(to right,black,darkblue,rgba(182, 125, 3, 0.705),darkblue,black);
   
    border-radius: 15px;
    border: 2px solid rgba(245, 222, 179, 0.842);
    box-shadow: 0px 2px 6px black;
    z-index: 9999; 
    text-align: center;
    
}
#main input{
  margin-bottom: 15px;
}


span{
    font-size: 20px;
    color: wheat;
    margin-bottom: 5px;
}



#payment-form{
  margin: 0% auto;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 278px;       
    left: 50%;       
    transform: translate(-50%, -50%); 
    width: 95%;
    height: auto;       
    padding: 10px;
   
    background: linear-gradient(to right,black,darkblue,rgba(182, 125, 3, 0.705),darkblue,black);

   
    border-radius: 15px;
    border: 2px solid rgba(245, 222, 179, 0.842);
    box-shadow: 0px 2px 6px black;
    z-index: 9999; 
    text-align: center;
}


#music-upload-form{
  color: darkgray;
  background: linear-gradient(to right,black,darkblue,rgba(182, 125, 3, 0.705),darkblue,black);
}

#music-upload-form input{
    margin: 0% auto;
    padding: 8px;
    font-size: 16px;
    border: none;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 2px 6px black;
    width: 80%;
}
#message{
  font-size: 18px;
  color: white;
  text-shadow: 1px 1px 2px black;
  font-weight: 600;
}

  #email,
#password,
#email-signup,
#confirm-email-signup,
#password-signup,
#confirm-password-signup{
    margin: 0% auto;
    padding: 10px;
    font-size: 18px;
    width: 70%;
    border: none;
    border-radius: 15px;
    text-align: center;
    border: 2px solid gold;
}
#password{
    margin-bottom: 20px;
}
#submit{
    margin: 0% auto;
    padding: 6px 20px;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    margin-bottom: 20px;
    background-color: darkblue;
    color: white;
    text-shadow: 0px 0px 3px gold;
    box-shadow: 0px 2px 6px darkgray;
}
#submit:hover{
    transform: scale(1.10);
    transition: 0.5s;
    background-color: blue;
}
.google-sign-in{
    padding: 10px;
    border: none;
    margin-bottom: 5px;
    border-radius: 6px;
    background-image: url(googlegif2.gif);
    background-position: center;
    background-size: cover;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 3px 8px black;
    color: transparent;
}
.google-sign-in:hover{
    transform: scale(1.10);
    transition: 0.8s;
    box-shadow: 0px 2px 6px lightskyblue;
}
#create-acct-btn{
    margin: 0% auto;
    padding: 6px 20px;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: darkblue;
    box-shadow: 0px 2px 6px black;
    color: white;
    text-shadow: 0px 0px 3px gold;
    border: none;
    cursor: pointer;
}
#create-acct-btn:hover{
    background-color: blue;
    
}

#return-btn{
  border: none;
  background: linear-gradient(to right,black,darkgray,black);
  box-shadow: 0px 2px 6px black;
  padding: 5px;
 color: rgba(255, 255, 0, 0.822);
 text-shadow: 1px 1px 2px black;
 cursor: pointer;
}

#return-btn:hover{
  transform: scale(1.10);
  transition: 0.5s ease-in-out;
  color: yellow;
}

  
#music-player {
    margin: 0% auto;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;       
    left: 50%;       
    transform: translate(-50%, -50%); 
    width: 90%;
    height: auto;       
    padding: 10px;
    background: linear-gradient(to right,rgba(0, 0, 0, 0.932),rgba(1, 1, 110, 0.925),rgba(0, 0, 0, 0.925));
    border-radius: 15px;
    border: 2px solid rgba(245, 222, 179, 0.842);
    box-shadow: 0px 5px 15px black;
    z-index: 999; 
    text-align: center;
    
}


 

.search-container {
  margin: 0 auto;
  position: relative;
  display: inline-flex;
  width: 100%;
}

#searchBar {
  padding: 10px 40px 10px 10px; /* extra right padding for mic space */
  border-radius: 10px;
  font-size: 16px;
  border: 1px solid gold;
  width: 75%;
  display: block;
  text-align: center;
  box-sizing: border-box; /* important to keep padding within width */
}

#voice-btn-clone {
  position: absolute;
  right: 12%; /* match with #searchBar width + padding */
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.952);
  text-shadow: 1px 1px 2px rgba(141, 121, 5, 0.863);
  font-size: 22px;
  font-weight: 600;
  padding: 0;
  margin: 0;
}

#voice-btn-clone:hover {
  color: gold;
}

#voice-btn-login {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(190, 190, 4, 0.842);
  text-shadow: 1px 1px 1px black;
  font-size: 22px;
  font-weight: 600;
  padding: 0;
  margin: 0;
}

#voice-btn-login:hover {
  color: yellow;
}




/* Button style for the search icon */
.search-toggle-btn {
position: absolute;
top: 50px;
right: 0px;
border: none;
font-size: 20px;
cursor: pointer;
color: white;
text-shadow: 1px 1px 2px gold;
background: transparent;
border-left: 3px solid  rgba(153, 131, 5, 0.596);
border-radius: 8px;
padding: 5px 9.2px;
height: 35px;
}
.search-toggle-btn:hover{
transform: scale(1.10);
transition: 0.5s;
}


/* When the search bar is shown, keep the header layout unchanged but hide the content */
header.search-active h1,
header.search-active .sidebar {
visibility: hidden;  /* Hide the header content */
opacity: 0;          /* Make it invisible */
transition: visibility 0s 0.3s, opacity 0.3s ease;
}



header.search-active #searchBar {
margin: 0% auto;
display: block;      /* Make the search bar visible */
width: 80%;        /* Set width for the search bar */
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0s 0.3s;
}



#current-music-info{
    margin: 0% auto;
    position: relative;
    border-radius: 8px;
    border-top: 1px solid wheat;
    border-bottom: 1px solid wheat;
    padding: 10px;
    margin-bottom: 15px;
    box-shadow: 0px 2px 5px rgb(100, 99, 99);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.562),rgba(87, 86, 86, 0.589),rgba(0, 0, 0, 0.582));
    width: 100%;
    height: 240px;
    overflow: hidden;
      display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


  }
.Musicplayer-image-wrapper {
  margin: 0 auto;
    width: 200px;
    height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; /* Optional: gives a neutral background */
    border: none;
    border-radius: 8px;
    box-shadow: 0px 2px 6px black;
     border-radius: 8px;
    /* Optional: helps visualize the box */
     
  }

.Player-image {
    width: 200px;
    height: 200px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    cursor: pointer;
     background-color: transparent; 
     border-radius: 5px;
     box-shadow: 0px 2px 6px black;
     border-radius: 8px;
     
}






#current-music-title{
  margin: 0 auto;
  display: flex;
  flex-direction: column;
    font-size: 12px;
    color: rgb(197, 191, 191);
    text-shadow: 2px 2px 2px darkblue;
    letter-spacing: 0.5px;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 200px;
    padding: 0 4px;
  overflow: hidden;
  white-space: nowrap;         /* Prevents text from wrapping to the next line */
  text-overflow: ellipsis;     /* Adds "..." at the end if text overflows */
  box-sizing: border-box;  
}



#current-music-creator {
  font-size: 10px;
  color: white;
  text-shadow: 0px 0px 2px gold;
  letter-spacing: 0.5px;
  margin-bottom: 2px;

  /* Layout and overflow */
 width: 200px;
  box-sizing: border-box;
  padding: 0 4px;               /* Add space to prevent clipping */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  /* Text alignment */
  text-align: center;
}


#music-controls{
            margin: 0% auto;
            display: flex;
            gap: 5px;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: rgba(245, 245, 245, 0.096);
            box-shadow: 0px 2px 10px rgba(135, 206, 250, 0.322);
            padding: 10px;
            border-radius: 50px;
            margin-bottom: 10px;
            box-sizing: border-box;
            width: 90%;
          }
          #music-controls button{
            margin: 0 auto;
            font-size: 16px;
            padding: 10px 10px;
            width: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: rgba(255, 218, 6, 0.733);
            background: rgba(20, 91, 172, 0.397);
            border: 1px solid yellowgreen;
            box-shadow: 0px 1px 4px lightsalmon;
            border-radius: 30px;
            cursor: pointer;
          }
          #playPauseBtn i{
            margin: 0% auto;
            font-size: 20px; 
          }
          #playPauseBtn{
            font-size: 20px;
          }


#upload-forM {
    margin: 0% auto;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;       
    left: 50%;       
    transform: translate(-50%, -50%); 
    width: 95%;
    height: auto;       
    padding: 10px;
    background: linear-gradient(to right,black,darkblue,rgb(92, 91, 91),darkblue,black);
  
    border-radius: 10px;
    border: 2px solid rgba(245, 222, 179, 0.842);
    box-shadow: 0px 2px 6px black;
    z-index: 9999; 
    text-align: center;
    
}
#upload-forM input{
    margin: 0% auto;
    width: 70%;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid rgba(255, 217, 0, 0.856);
    border-radius: 10px;
    margin-bottom: 15px;
}

#upload-forM .Uploadbtn{
    margin: 0% auto;
    border: none;
    padding: 10px 0px;
    justify-content: center;
    text-align: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0px 2px 6px black;
    background-color: blue;
    color: beige;
    opacity: 90%;
    margin-bottom: 15px;
    cursor: pointer;
    min-width: 200px;
}
#upload-forM select{
    margin-bottom: 10px;
    border: none;
    padding: 5px 5px;
    border-radius: 10px;
    box-shadow: 0px 2px 6px darkgray;
    background: linear-gradient(to right,rgba(0, 0, 0, 0.849),rgba(99, 98, 98, 0.938),rgba(0, 0, 0, 0.89));
    color: rgba(255, 255, 0, 0.842);
    text-shadow: 1px 1px 2px black;
    background-color: black;
    cursor: pointer;
}
#upload-forM select:hover{
    color: yellow;
}
#upload-forM button:hover{
    transform: scale(1.05);
    transition: 0.8s;
    text-shadow: 1px 1px 3px gold;
    opacity: 100%;
}

#toggleButtonTwo{
        margin: 0% auto;
        position: fixed;
        top: 15px;
        left: 3px;
        list-style-type: none;
        cursor: pointer;
        background: transparent;
        border: none;
        border-right: 3px solid rgb(9, 168, 9);
        border-radius: 8px;
        padding: 5px;
        padding-right: 8px;
        z-index: 9999;
    }
    #toggleButtonTwo i{
        color: rgba(189, 162, 14, 0.856);
        font-size: 20px;
    }

    #toggleButtonTwo:hover{
        padding-right: 15px;
        border-right: 3px solid yellow;
    }
    #toggleButtonTwo i:hover{
        color: gold;
    }




#showLoginBtn{
        margin: 0% auto;
        position: fixed;
        top: 50px;
        left: 0px;
        list-style-type: none;
        cursor: pointer;
        background: transparent;
        border: none;
        border-right: 3px solid rgba(153, 131, 5, 0.596);
        border-radius: 8px;
        padding: 8px;
        padding-right: 10px;
        z-index: 9999;
    }
    #showLoginBtn i{
        color: rgba(255, 255, 255, 0.815);
        text-shadow: 1px 1px 2px rgba(223, 191, 10, 0.822);
        font-size: 20px;
    }
    #showLoginBtn i:hover{
        color: gold;
        padding-right: 5px;
        border-right: 2px solid rgb(7, 179, 7);
    }




        #toggleButtonOne{
        margin: 0% auto;
        position: fixed;
        top: 50px;
        right: 0px;
        list-style-type: none;
        cursor: pointer;
        background: transparent;
        border: none;
        border-left: 3px solid rgba(153, 131, 5, 0.596);
        border-radius: 8px;
        padding: 8px;
        padding-left: 10px;
        z-index: 9999;
    }
    #toggleButtonOne i{
        color: rgba(255, 255, 255, 0.815);
        text-shadow: 1px 1px 2px rgba(223, 191, 10, 0.822);
        font-size: 20px;
    }
    #toggleButtonOne i:hover{
        color: gold;
        padding-left: 5px;
        border-left: 2px solid rgb(7, 179, 7);
    }




    #contentSection{
  margin: 0% auto;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;       
    left: 50%;       
    transform: translate(-50%, -50%); 
    width: 95%;
    height: 85%; 
    overflow: scroll;      
    padding: 10px;
    background: linear-gradient(to right,black,rgba(151, 129, 4, 0.767),black);

    border-radius: 15px;
    border: 2px solid rgba(245, 222, 179, 0.842);
    box-shadow: 0px 2px 6px black;
    z-index: 999; 
    text-align: center;
}


#contentSection::-webkit-scrollbar {
  width: 10px;
  height: 0px;
  background: transparent;
  border-radius: 10px;
  }
  #contentSection::-webkit-scrollbar-thumb {
  background: transparent;
  border: 2px solid transparent;;
  border-radius: 10px;
  height: 10px;
  cursor: pointer;
  }
  #contentSection::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 0, 0.5);
  }
  #contentSection::-webkit-scrollbar-track {
  background: transparent;
  border: none;
  }
  #contentSection::-webkit-scrollbar-track:hover {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  }

#contentSection a {
      color: yellow;
      text-shadow: 1px 1px 2px black;
      border: 1px solid wheat;
      margin-top: 10px;
      padding: 12px 16px;
      text-decoration: none;
      border-radius: 10px;
      background: linear-gradient(to right,black,rgba(80, 79, 79, 0.89),rgba(1, 1, 112, 0.774),rgba(80, 79, 79, 0.89),black);
      display: block;
  }

  #contentSection a:hover {
    transform: scale(1.05);
    transition: 0.5s ease-in-out;
      background-color: rgba(0, 0, 139, 0.897);
  }


#music-list{
  margin: 0% auto;
  align-items: center;
  text-align: center;
  padding: 10px;
   gap: 20px;
   min-width: 90%;
   height: 40vh;
   overflow: scroll;

}
  #music-list::-webkit-scrollbar {
  width: 15px;
  height: 0px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  }
  #music-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 0, 0.5);
  border-radius: 10px;
  height: 40px;
  cursor: pointer;
  }
  #music-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 0, 0.8);
  }
  #music-list::-webkit-scrollbar-track {
  background: transparent;
  border: none;
  }
  #music-list::-webkit-scrollbar-track:hover {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 0, 0.8);
  }

#music-list div{
  margin: 0% auto;
  position: relative;
  width: 100%;
  display: inline-block;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.623);
  border-top: 2px solid wheat;
  border-bottom: 2px solid wheat;
  box-shadow: 0px 2px 6px black;
  border-radius: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  cursor: pointer;
}
#music-list div:hover{
  transform: scale(1.05);
  transition: 0.5s ease-in-out;
  box-shadow: 0px 2px 5px rgba(228, 194, 4, 0.87);
}
#music-list img{
    box-shadow: 0px 2px 6px black;
    width: 100px;
    height: 100px;
    border-radius: 8px;
}
.music-item img:hover{
  transform: scale(1.05);
  transition: 0.5s ease-in-out;
  box-shadow: 0px 2px 10px gold;
}

#music-list p{
 margin: 0% auto;
  position: relative;
  font-family: Arial, sans-serif;
  color: rgba(228, 228, 6, 0.863);
  text-shadow: 1px 1px 1px black;
  font-weight:  700;
  font-size: 12px;
  letter-spacing: 1px;
  background-color: rgba(0, 0, 0, 0.671);
  border-radius: 5px;
  width: 80%;
  overflow: hidden;

    white-space: nowrap;         /* Prevents text from wrapping to the next line */
  text-overflow: ellipsis;     /* Adds "..." at the end if text overflows */
  box-sizing: border-box;
  padding: 3px 2px;

    }

#music-list pre{
  margin: 0% auto;
  color: white;
  text-shadow: 1px 1px 2px black;
  font-weight: 500;
  font-size: 14px;
  width: 90%;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
  align-items: center;
  overflow: hidden;

    white-space: nowrap;         /* Prevents text from wrapping to the next line */
  text-overflow: ellipsis;     /* Adds "..." at the end if text overflows */
  box-sizing: border-box;  
  padding: 5px 2px;
  background-color: rgba(245, 245, 245, 0.116);
  border-left: 3px solid rgba(206, 176, 7, 0.849);
  border-right: 3px solid rgba(206, 176, 7, 0.849);
  box-shadow: 0px 2px 6px black;
  border-radius: 20px;
  margin-bottom: 10px;
}
#music-list section{
    margin: 0% auto;
    position: relative;
    left: 0px;
    color: darkgray;
    text-shadow: 1px 1px 2px black;
    font-size: 12px;
    padding: 0px 5px;
    width: 200px;
    margin-bottom: -5px;
    margin-top: 5px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.815),rgba(129, 128, 128, 0.582),rgba(158, 136, 8, 0.795),rgba(129, 128, 128, 0.582),rgba(0, 0, 0, 0.822));
    box-shadow: 0px 2px 6px black;
    border-radius: 5px;

}
#music-list section:hover{
    transform: scale(1.50);
    transition: 0.5s ease-in-out;
}


 #music-list  .download-button{
          position: absolute;
          top: 0;
          right: 0;
          border: none;
          cursor: pointer;
          z-index: 999;
          background: transparent;
          background-color: transparent;
          
          
        }
    #music-list .download-button i{
          position: absolute;
          top: 0;
          right: 5px;
                    border: none;
          color: rgba(179, 179, 6, 0.753);
          font-size: 25px;
                    background: transparent;
          background-color: transparent;
        }









#clone-scroll-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-btn {
  background-color: rgba(0, 0, 0, 0.6);
  color: yellow;
  border: none;
  padding: 12px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 5;
  transition: all 0.3s ease;
}

.scroll-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

#scrollLeftBtn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}

#scrollRightBtn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}




#music-list-clone{
  margin: 0% auto;
  display: flex;
  position: sticky;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 25px;
   gap: 30px;
   min-width: 90%;
   overflow: scroll;
   margin-top: 15px;
   background-color: rgba(0, 0, 0, 0.747);
   border-top: 1px solid rgba(211, 181, 9, 0.849);
   border-bottom: 2px solid rgba(182, 155, 4, 0.705);

  scroll-snap-type: x mandatory;

}
#music-list-clone::-webkit-scrollbar {
  width: 0px;
  height: 15px;
  background: rgba(0, 0, 0, 0.767);
  border-radius: 10px;
  }
  #music-list-clone::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 10px;
  height: 40px;
  cursor: pointer;
  border: 1px solid  transparent;
  }
  #music-list-clone::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 0, 0.8);
  }
  #music-list-clone::-webkit-scrollbar-track {
  background: transparent;
  border: none;
  }
  #music-list-clone::-webkit-scrollbar-track:hover {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  }

  #music-list-clone div{
  margin: 0% auto;
  position: relative;
  display: inline-block;
  min-width: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 5px 25px;
  background-color: rgba(0, 0, 0, 0.842);
  border-top: 1px solid wheat;
  border-bottom: 1px solid wheat;
  box-shadow: 0px 2px 4px rgba(94, 93, 93, 0.849);
  border-radius: 10px;

  background-image: url(./music/fireImagePic.gif);
  background-position: top;
  background-size: 50%;

  cursor: pointer;
}
.music-item img{
    box-shadow: 0px 2px 6px black;
    width: 180px;
    height: 180px;
    border-radius: 8px;
}
.music-item img:hover{
  transform: scale(1.05);
  transition: 0.5s ease-in-out;
  box-shadow: 0px 2px 10px gold;
}

#music-list-clone p{
 margin: 0% auto;
  color: rgba(197, 197, 9, 0.829);
  text-shadow: 1px 1px 2px black;
  font-weight: 600;
  font-size: 14px;
  width: 180px;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
  align-items: center;
  padding: 5px 2px;
  background-color: rgba(245, 245, 245, 0.116);
  border-left: 2px solid rgba(206, 176, 7, 0.849);
  border-right: 2px solid rgba(206, 176, 7, 0.849);
  box-shadow: 0px 2px 6px black;
  border-radius: 20px;

    overflow: hidden;

    white-space: nowrap;         /* Prevents text from wrapping to the next line */
  text-overflow: ellipsis;     /* Adds "..." at the end if text overflows */
  box-sizing: border-box;
  padding: 3px 2px;
}
#music-list-clone pre{
  margin: 0% auto;
  color: white;
  text-shadow: 1px 1px 2px black;
  font-weight: 500;
  font-size: 14px;
  width: 90%;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
  align-items: center;
  overflow: hidden;
  padding: 5px 2px;
  background-color: rgba(245, 245, 245, 0.116);
  border-left: 3px solid rgba(206, 176, 7, 0.849);
  border-right: 3px solid rgba(206, 176, 7, 0.849);
  box-shadow: 0px 2px 6px black;
  border-radius: 20px;

  display: none;
 
}
#music-list-clone section{
    margin: 0% auto;
    position: relative;
    color: rgba(121, 120, 120, 0.863);
    text-shadow: 1px 1px 2px black;
    font-size: 12px;
    padding: 0px 5px;
    width: 180px;
    background-color: transparent;
    font-weight: 600;
    border-radius: 5px;
    margin-top: 4px;
    margin-bottom: -5px;

}
#music-list-clone section:hover{
    transform: scale(1.50);
    transition: 0.5s ease-in-out;
}

#music-list-clone .music-item{
  scroll-snap-align: center;
}

  #music-list-clone.dragging {
  cursor: grabbing;
  scroll-behavior: auto; /* cancel smooth scroll while dragging */
}

#music-list-clone small{
  position: absolute;
  top: 0;
  width: 18%;
  font-size: 8px;
  background: transparent;
  color: darkgray;
  padding: 4px;
  padding-left: 2px;
  padding-right: 2px;

     overflow: hidden;

    white-space: nowrap;         /* Prevents text from wrapping to the next line */
  text-overflow: ellipsis;     /* Adds "..." at the end if text overflows */
  box-sizing: border-box;
}



        
footer{
  margin: 0% auto;
  flex-direction: column;
  bottom: 0%;
  left: 0;
  position: fixed;
  align-items: center;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  padding: 5px;
  z-index: 999;

   }
   footer p{
    width: 250px;
    text-align: center;
    padding: 5px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background-color: rgba(255, 255, 255, 0.062);
   }

   footer ion-icon{
    color: rgba(255, 217, 0, 0.411);
   }
   footer p, footer span{
    color: rgba(119, 116, 116, 0.76);
   
   }

   .homebtn{
    margin: 0% auto;
    position: fixed;
    left: 5px;
    bottom: 0px;
    border-bottom: 1px solid rgba(245, 222, 179, 0.952);
    box-shadow: 0px 2px 6px black;
    background-color: rgba(0, 0, 0, 0.918);
    border-radius: 7px;
    width: 50px;
    display: flex;
    justify-content: center;
    padding: 2px 0px;
    opacity: 90%;
    margin-bottom: 5px;
    cursor: pointer;
  
  }
  .homebtn i{
    margin: 0% auto;
    color: rgba(255, 217, 0, 0.568);
    justify-content: center;
    font-size: 25px;
    display: flex;
    align-items: center;
    
  }
  .homebtn i:hover{
    color: gold;
  }
  .homebtn:hover{
    color: gold;
    transition: color 0.5s ease;
    box-shadow: 2px 2px 20px gold;
    transform: scale(1.10);
    transition: 0.5s;
    cursor: pointer;
  
  }
  .navTitle{
    margin: 0% auto;
    position: relative;
    flex-direction: column;
    display: flex;
    color: rgba(255, 255, 255, 0.829);
    text-shadow: 1px 1px 3px rgba(219, 187, 7, 0.863);
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 600;
    font-size: 22px;
    padding: 5px 5px;
    background-color: black;
    width: 65%;
    background-image: url(MusicGig.gif);
    background-position: bottom;
    background-size: 50%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top: 1px solid rgba(245, 222, 179, 0.89);
    box-shadow: 0px 2px 6px black;
  }




@media (min-width: 768px){
  .dropbtn{
    width: 200px;
  }
  
  
  .scroll-btn{
    display: block;
  }
    #music-list-clone::-webkit-scrollbar-thumb {
  background: transparent;
  }
  .navTitle{
    width: 400px;
    font-size: 30px;
  }
    h1{
        width: 600px;
        font-size: 30px;
    }

    #contentSection{
        width: 700px;
    }

  
    .login-details{
        width: 500px;
    }
    #main{
        width: 500px;
    }
    #upload-forM{
        width: 500px;
    }

    #music-player{
        width: auto;
    }


       #music-list div{
        margin: 0% auto;
        position: relative;
        width: 300px;
        margin-bottom: 10px;
        background: transparent;
    }

 
#music-list-clone{
        grid-template-columns: repeat(4, 1fr);
    }

#music-list-clone div{
  margin: 0% auto;
  min-width: 300px;
}




        .video-details {
            width: 450px;
            height: auto;
        }
        .video-details input{
          width: 90%;
        }
        #video-player {
            width: 100%;
        }
   

        #video-list li{
        width: 300px;
     }

     .Women-Design-Title{
      width: 300px;
     }


     

  #docu-controls{
      width: 400px;
    }
  



    #docu-player{
      width: 600px;
    }


    

#docu-player{
  margin: 0% auto;
  position: fixed;
  top: 310px;
  min-width: 650px;
    min-height: auto;
}







     

#live-controls{
  width: 400px;
}




#live-player{
  width: 600px;
}




#live-player{
margin: 0% auto;
position: fixed;
top: 310px;
min-width: 650px;
min-height: auto;
}

video {
  max-width: 100%;
  height: 350px;
  border-radius: 8px;
  box-shadow: 0px 2px 6px black;
}




#searchBar {
  max-width: 500px;

}


#voice-btn-clone {
  position: absolute;
  right: 0%; /* match with #searchBar width + padding */
  top: 50%;
  left: 460px;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.952);
  text-shadow: 1px 1px 2px rgba(141, 121, 5, 0.863);
  font-size: 22px;
  font-weight: 600;
  padding: 0;
  margin: 0;
}



   #scrollLeftBtn,
  #scrollRightBtn {
    display: block; /* Show the scroll buttons on larger screens */
  }



}