*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: gilroy;
    color: #fff;
}
html , body{
    height: 100%;
    width: 100%;
}

#main{
    height: 85%;
    width: 100%;
    background-color: #111;
    display: flex;
    padding: 5vw 10vw;
}

#left{
    height: 100%;
    background-color: #333;
    width: 45%;
    /* background-image: url(https://m.media-amazon.com/images/I/91zTlD7AY1L.jpg); */
    background-size: cover;
    background-position: top;
}
#right{
    height: 100%;
    width: 55%;
    /* background-color: blue; */
    padding: 0 3vw;
}
#right h3{
    font-size: 40px;
}

#all-songs{
    /* background-color: red; */
    height: 85%;
    margin-top: 30px;
}
.song-card{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #5a5a5a;
    padding: 18px 15px;
}
.song-card:hover{
    background-color: #1e1e1e;
}
.song-card:nth-last-child(1){
    border-bottom: 1px solid #5a5a5a;
}
.song-card .part1{
    display: flex;
    align-items: center;
    pointer-events: none;
}
.song-card img{
    height: 55px;
    width: 55px;
    margin-right: 20px;
}
.song-card h2{
    font-size: 22px;
    font-weight: 600;
}
.song-card h6{
    font-weight: 500;
    font-size: 16px;
}

#player{
    height: 15%;
    width: 100%;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

#player h3{
    background-color: rgba(30, 30, 30, 0.737);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
#player h3 i{
    font-size: 24px;
}

#player h3:active{
    scale: 0.93;
}