*{
    margin:0;
}
header {
    background-color: #534D41;
    text-align: center; 
    display: flex; 
    justify-content: space-between;  
    font-size: 1rem;    
    height: 10vh;
}

body { 
    background-color: #F0CEA0;
} 

#Logo {
    font-size: 3rem;
    cursor: pointer;
}

.CloseButton {
    font-size: 4rem; 
    position:relative; 
    cursor: pointer;

}

#NewsLetterContainer {
    display: block; 
    position: fixed;  
    left: 0; 
    top: 0;  
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.4); 
}



#Cart {
    cursor: pointer;
    font-size: 2rem;
    margin-top: 1vh;
}

#CartQuantity {
    font-size: 1rem; 
    color: red; 
    position: absolute; 
    top: 2vh; 
    right: 2vw; 
    border-radius: 50%;
}

#CartPopUpContainer {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.8); 
    justify-content: center;
    align-items: center; 
    z-index: 1;
    display: none;
}
#CartPopUp {
    height: 50vh; 
    width: 75vw; 
    background-color: white; 
    margin-left: 12vw;
    margin-top: 20vh;
    z-index: 2;
}

#CartInformation {
    border: #534D41 solid 4px;
}

#PlaylistHamburger {
    color: black; 
    font-size: 2rem; 
    position: absolute; 
    left: 88vw; 
    top: 14vh; 
    cursor: pointer;
}

#MusicPlayer {
    height: 25vh;
    background-color: #F0CEA0;
}

#SongInfo {
    position: relative; 
    top: 6vh;
    text-align: center;
    font-size: 0.25rem;
}
#ControlsWCart {
    display: flex;
    justify-content: center;
    margin-top: 8vh;
    font-size: 0.75rem;
}

.Controls{
    cursor: pointer;
    margin-top: 1vh;
}

#ProgressBarContainer {
  width: 50%;
  height: 20px;
  background-color: #eee;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 3vh;
}

#ProgressBarFill {
  height: 100%;
  width: 0%; /* Initial width */
  background-color: #4CAF50;
}

/*.PopupModal {
     height: 25vh;
     display: none;
     position: fixed; 
     top: 5.375vh; 
     background-color: white;
}*/

#PlaylistModal {
    background-color: #534D41;
    height: 25vh; 
    position: relative; 
    bottom: 15vh; 
    display: none; 
    overflow: scroll;
    overflow-x: hidden;
}

#PlaylistSearchField {
    width: 75vw; 
    margin-left: 10vw;
    height: 2vh; 
    font-size: 1rem; 
    text-align: center;
}

#LicenseModalContainer {
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    z-index: 1;
}

#LicenseModal {
    height: 50vh;
    width: 75vw;
    background-color: white;
    font-size: 0.350rem;
    text-align: center;
    margin-left: 12vw;
    margin-top: 20vh;
}

#Licenses {
    display: flex; 
    font-size: 0.5rem; 
    text-align: center; 
    justify-content: center; 
    margin-top: -4vh;
}

.Licenses_Type ul {
    padding-left: 0px;
}

#Licenses ul {
    list-style-type: none;
}

#DownloadModalContainer {
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    z-index: 1;
}
#DownloadModal {
    height: 50vh;
    width: 75vw;
    background-color: white;
    font-size: 0.350rem;
    text-align: center;
    margin-left: 12vw;
    margin-top: 20vh;
}

#AboutMeTxtWPic {
    display: flex; 
    font-size: 0.650rem;
}

#Biography {
    display: flex;
    font-size: 0.750rem;
}

.SocialsContainer {
    display: flex; 
    width: 100vw;
    align-items: center;
}

.SocialsTakeAction {
    font-size: 0.5rem; 
    text-align: center; 
    width: 50vw;
}


.TestimonialsContainer {
    display: flex;
    font-size: 1rem;
}

footer{
    background-color: #534D41;   
    font-size: 0.4rem;  
}

#NewsLetterSignup label {
    font-size: 1rem;
}


@media (width > 500px) {
    #AboutMeTxtWPic {
    display: flex; 
    font-size: 0.750rem;
    }  
    #SongInfo {
    font-size: 0.5rem;
    }   
    #PlaylistModal {
    bottom: 18vh; 
    }

    #Licenses {
    margin-top: -2vh;
    }
    .TestimonialsContainer {
    font-size: 1.150rem;
    }
    footer{ 
    font-size: 0.575rem;  
    } 
    header {    
    height: 12.5vh;
    }
}
@media (width > 600px) {
    header {    
    height: 14vh;
    }
    #Biography {
    display: flex;
    font-size: 1rem;
    }    
}
@media (width > 700px) {
    .TestimonialsContainer {
    font-size: 1.25rem;
    }    
    #AboutMeTxtWPic {
        display: flex; 
        font-size: 0.850rem;
    }
}

@media (width > 800px) {
    #AboutMeTxtWPic {
    display: flex; 
    font-size: 0.950rem;
    }   
    #SongInfo {
    font-size: 0.650rem;
    } 
     #PlaylistModal {
    bottom: 20vh; 
    }
    #Biography {
    display: flex;
    font-size: 1.150rem;
    } 
    footer{ 
    font-size: 0.650rem;  
    } 
    header {    
    height: 16vh;
    }
    #Licenses {
    font-size: 0.75rem; 
    margin-top: 0;
    }
}
@media(width > 900px) {
    .TestimonialsContainer {
    font-size: 1.350rem;
    }
}

@media (width > 1000px) {
    #AboutMeTxtWPic {
    display: flex; 
    font-size: 1rem;
    }
    footer{ 
    font-size: 0.750rem;  
    }   
}

@media (width > 1100px) {
    .TestimonialsContainer {
    font-size: 1.450rem;
    }
}
@media (width > 1200px) {
    #PlaylistModal {
    bottom: 23vh; 
    } 
    #Biography {
    display: flex;
    font-size: 1.250rem;
    } 
    
    #Licenses {
    margin-top: 4vh;
    }
    .TestimonialsContainer {
    font-size: 1.5rem;
    }
}