@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300&display=swap');

*,
*::before,
*::after{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
    font-family: 'Jost', sans-serif;
    box-sizing: border-box;
    overflow: hidden;
}
#myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100vh; 
    min-height: 100vh;
    object-fit: cover;
    z-index: -2;
  }
.main_div{
    position: absolute;
    z-index: -1;
    width: 80vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.music_container{
    width: 35rem;
    
    height: 55rem;
    background-color: #ffffff;
    border-radius: 2rem;
    box-shadow: 0 1.2rem 3rem 0.5rem rgba(255, 255, 255,0.5);
    padding: 3rem;
    text-align: center;
    
}
.music_container #title{
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    word-spacing: 0.5rem;
    color: #171717;
    margin: 2rem 0 0.5rem 0;
    font-size: 2.5rem;
    font-weight: 500;
    text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.3);
}
.music_container #artist{
    color: #cccaca;
    text-transform: capitalize;
    letter-spacing: 0.1rem;
    font-size: 2rem;
    margin-bottom: 4rem;
    font-weight: 300;
}
.img_container{
   width: 25rem;
   height: 25rem;
   margin: auto;
}
img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 1.2rem 3rem 0.5rem rgba(0, 0, 0, 0.4);
}
.music_controls{
    width: 20rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    margin-top: 2rem;
}
.music_controls .fas{
    color: #111111;
    font-size: 2rem;
    cursor: pointer;
    filter: drop-shadow(0 1.2rem 3rem 0.5rem rgba(0,0,0,0.4) );
}
.music_controls .main_button{
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: #111111;
    color: #f6f6f6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
}
.music_controls .fas:hover{
    color: grey;
}
.music_controls .fas_play:hover{
    background-color: #f6f6f6;
    color: #111111;
    box-shadow: 0 1rem 2rem 0.2rem rgba(0,0,0,0.4);
}

.anime{
    animation: rotatePlayer 5s linear infinite ;
}
@keyframes rotatePlayer {
    from{ transform: rotate(0deg);}
    to {
        transform: rotate(360deg);
    }
}

/* progress style  */

.progressbar_container{
    width: 100%;
    height: auto;
    padding: 1rem 0;
    margin-top: 1rem;
}
.progress_div{
    width: 100%;
    height: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7),0 2px 4px rgba(0, 0, 0, 0.7),0 4px 8px rgba(0, 0, 0, 0.7),0 8px 16px rgba(0, 0, 0, 0.7),0 16px 32px rgba(0, 0, 0, 0.7),0 32px 64px rgba(0, 0, 0, 0.7);
    border-radius: 4rem;
    position: relative;
    margin-top: 0.rrem;
    transition: width in linear;
    -moz-transition: width in linear;
    -o-transition: width in linear;
    -webkit-transition: width in linear;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;

}
.progress{
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4rem;
    width: 0%;
    height: 100%;
    background-color: black;
    margin-top: 0.rrem;
    transition: width in linear;
    -moz-transition: width in linear;
    -o-transition: width in linear;
    -webkit-transition: width in linear;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.progress_duration_meter{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 1.5rem;
    font-size: bold;
}
/* Songs list css */

.songslist{
    margin:20px;
    display: flex;
    position: absolute;
    z-index: 0;
    color: white;

}
#ourlist{
    padding: 5px;
    border-radius: 40%;
    cursor: pointer;
}
#ourlist:hover{
    color: rgb(166, 81, 245);
}
ul {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
  }
  
  li a {
    display: block;
    color: #000;
    font-weight: bold;
    padding: 8px 16px;
    text-decoration: none;
  }
  
  /* Change the link color on hover */
  li a:hover {
    background-color: #555;
    color: black;
  }