style.css

@import url('https://fonts.googleapis.com/css2?family=Lora:ital@1&display=swap');
*,
*::after,
::before{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    font-size: 10px;
    font-family: 'Lora', serif;
}
body{
    display:flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: antiquewhite;
}

#name{
    font-size: 2.5rem;
    color: white;
    font-weight: 600;
    letter-spacing: .2rem;
    margin-bottom: 0;
    opacity: .9;

}
.main_div .music_container{
    width: 30rem;
    height: 54rem;
    /* background-color: #ffffff; */
    background-image:linear-gradient(#9ce3ff 0%, #fd878d 90%);
    border-radius: 2rem;
    /* border:2px solid white; */
    box-shadow: 0px 6px 15px rgba(0,0,0,0.342);
    /* padding:2rem 2rem; */
    /* text-align: center; */
    /* justify-content: center; */
    
}
.top-bar{
    padding:2rem 2rem; 
}
.music_controls{
    padding:2rem 2rem;
    /* margin-bottom: 100px; */
    /* background-color: black; */
}

.progressbar_container .progress{
    /* padding: 2rem 2rem; */
    background: white;
}
.music_container i{
    cursor:pointer;
}
.top-bar,.music_controls ,.music_list .header, .music_list ul li{
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.top-bar i{
    font-size: 3rem;
    color:white;
}
.top-bar i:first-child{
    font-size: 2.5rem;

}
.top-bar span{
    color:white;
    font-size: 1.5rem;
}
.music_container #title{
    text-transform: uppercase;
    font-size: 1.5rem;
    font-style: none;
    font-weight: 600;
    text-align: center;
    justify-content: center;
    letter-spacing: .1rem;
    word-spacing: .3rem;
    margin-top: 1.8rem;
    color:white;
    text-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0.3);
}
.music_container #artist{
    font-size: 1.3rem;
    font-weight: 400;
    text-align: center;
    text-transform: capitalize;
    /* color:rgb(247, 111, 111);*/
    color:white;
    margin:1rem;
    letter-spacing: .15rem;
    margin-bottom: 1.4rem;

}
.music_container .top{
    color:white;
    font-size: 1.3rem;
    font-weight: 200;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image_container{
    width:20rem;
    height:20rem;
    margin:auto;
    margin-top: 2rem;
    overflow:hidden;
    box-shadow: 0 0 0 4px #ffffff,
    0 0 2px #ffffff,
    13px 13px 20px #31313163,
    -10px -10px 27px #e6f6ff;
    border-radius: 50%;
    
}
img{
    width:100%;
    height:100%;
    
    
    /* border:2px solid white; */
    object-fit: cover;
    /* box-shadow: 0 1.2rem 3rem 0.5rem rgba(0,0,0, 0.5); */

}
/* .music_controls{
    /* margin:10px 0 2px 0; */
    /* margin-bottom: 30px; */

.music_controls i{
    font-size: 2.4rem;
    color: white;
    background-clip: text;
    user-select: none;
}
.music_controls i:nth-child(2),
.music_controls i:nth-child(4){
    font-size: 3.5rem;
}
.music_controls #prev{
    margin-right: -13px;
    font-size: 35px;
}
.music_controls #next{
    margin-left: -13px;
    font-size: 35px;
}

.music_controls .play_pause{
    height: 54px;
    width:54px;
    display: flex;
    cursor:pointer;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 2px #fff,
    8px 8px 8px #ff5e66,
    -3px -3px 15px #f0ecec;
}
.play_pause::before{
    position: absolute;
    content:'';
    height: 50px;
    width: 50px;
    background:transparent;
    border:3px solid white;
    border-radius: inherit;
}
#prev,#next{
    box-shadow: 0 0 2px #fff,
    8px 8px 8px #ff5e66,
    -3px -3px 15px #f0ecec;
    border-radius: 50%;

}
.anime{
    animation: rotateplayer 3s linear infinite;
}
/* Progress style */
.music_container .progressbar_container{
    width:100%;
    height: auto;
    padding: 1rem 0;
    margin: 1rem;
    /* background: #f0f0f081; */
    padding:2rem;
    
}
.music_container .progressbar_container .progress_div{
    content:'';
    position: relative;
    /* box-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 2px 4px rgba(255, 255, 255, 0.7), 0 4px 8px rgba(255, 255, 255, 0.7),
    0 8px 16px rgba(255, 254, 254, 0.7),0 16px 32px rgba(253, 253, 253, 0.7),0 32px 64px rgba(252, 250, 250, 0.7); */
    width:100%;
    height: .5rem;
    background: #f0f0f081;
    /* background-color: #74b9f5; */
    /* background-color: black; */
    margin-top: .5rem;
    border-radius: 4rem;
    /* transition: width 0.01 linear; */
    cursor: pointer;
    /* appearance: none; */
}


.progress{
    position: absolute;
    width:0%;
    height: 100%;
    background-color: rgb(224, 234, 243);
    border-radius: 4rem;
    /* padding:2rem; */
    top:0;
    left:0;
}
.progress::before{
    content:'';
    position:absolute;
    height: 12px;
    width:12px;
    border-radius: 50%;
    top:50%;
    right:-3px;
    z-index: 2;
    opacity: 0;
    transform: translateY(-50%);
    background-color: inherit;
    pointer-events: none;
    transition: opacity .2s ease;
}
.progressbar_container:hover .progress::before{
    opacity: 1;
    pointer-events: auto;
}
.progress_duration_meter{
    display:flex;
    justify-content: space-between;
    margin-bottom: .3rem;
    font-size: 1.3rem;
    color: white;
}
 .music_container .music_list{
     /* display:none; */
    /* position:absolute; */
    width:100%;
    justify-content: center;
    align-items: center;
    left: 0;
    bottom:-5px;
    /* top: -65px; */
    
    box-shadow: 0 -5px 10px rgba(0,0,0,0.1);
    z-index: 5;
    padding:20px 40px; 
    border-radius: 15px;
    background: linear-gradient(rgba(255,255,255,0.973),transparent),
    linear-gradient(to top left,rgb(255,23,23),transparent),
    linear-gradient(to top right,rgba(0,183,255),transparent);
    background-blend-mode: screen;
    transition: all .3s ease-in-out;
} 
.music_list.show{
    display:absolute;
    opacity:1;
    pointer-events: auto;
}
.music_list ul{
    margin-top: 15px;
    max-height: 260px;
    overflow: auto;
}
.music_list ul li{
    list-style-type: none;
    display: flex;
    cursor: pointer;
    padding-bottom: 10px;
    margin-bottom:5px ;
    color:black;
    border-bottom: 1px solid white;
}
.music_list ul li:last-child{
    border-bottom: 0px;

}
.music_list ul li .row span{
    font-size: 14px;
}
.music_list ul li .row p{
    opacity: .7;
}
ul li .audio-duration{
    font-size: 13px;
}
.music_list ul::-webkit-scrollbar{
    width:0px;
    /* color:black; */
}
.music_list ul li:hover{
    color:rgb(128, 128, 240);
}
ul li.playing{
    pointer-events: none;
    color: rgb(169, 169, 243);
}
.header .row{
    display: flex;
    align-items: center;
    font-size: 19px;
    color:#515c6f;

}
.header .row i{
    cursor: pointer;
}
.header .row span{
    margin-left: 5px;
}
.header #close{
    font-size: 22px;
    color:#515c6f;
}
@keyframes rotateplayer{
    from{
        transform:rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}