button{
    background: none;
    border-radius: 100px;
    padding : 10px;
}
button:hover{
    cursor : pointer;
}


.audio-player-container{
    margin-top : 40px;
    display : flex;
    background-image: linear-gradient(to bottom,  rgb(163, 133, 78), rgb(114, 90, 46) );   
    border-radius : 40px;
    width : 80%;
    height : 200px;
    max-width : 1250px;
    overflow : hidden;
    box-shadow : 0px 2px 10px 5px black;
}

.img-container{
    width : 40%;    
}

.img-container img{
    width : 100%;
    height : 100%;
    object-fit: cover;
    mask-image : linear-gradient(to right, rgb(0, 0, 0, 1) 70%, rgb(0, 0, 0, 0))
}

.music-info{
    display : flex;
    flex-direction: column;
    width : 100%;
    gap : 20px;
    position : relative;
}


.track-title{
    position : absolute;
    top : 10px;
    left : 20px;
    font-size : 25px;
    color: rgb(57, 32, 1);
}
.music-controls{
    margin-top : 40px;
    display : flex;
    flex-direction: column;
    width : 100%;
    justify-content: center;
    align-items: center;
    gap : 10px;
    /* background-color: blue; */
}

.music-controls button{
    width : 80px;
    height : 80px;
    /* background-color: rgb(255, 255, 255); */
    border : 5px solid rgb(245, 224, 152);
}

.music-controls button:hover{
    background-color: rgb(255, 255, 255, 1);
}

.seek-bar-container{
    /* background-color: blue; */
    width : 100%;
}
.seek-bar-container input{
    width : 80%;
}

.seek-bar-container input{
    accent-color : rgb(74, 62, 7);
}

.audio-player-container a{
    color : white;
    text-decoration : none;
}

.audio-player-container a:hover{
    font-weight : bold;
    text-decoration : underline;
    cursor:pointer;
}