*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
::-webkit-scrollbar{
    width: 10px;
    height: 5px;
}
::-webkit-scrollbar-thumb{
    background: linear-gradient(deeppink,purple,cyan);
    border-radius: 5px;
}
body{
    background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)),url(black.jpg) no-repeat;
    background-size: cover;
}
.nav{
    background: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8));
    height: 70px;
}
.logo{
    font-size: 6vmin;
    color: #fff;
    font-weight: bold;
    font-family: baskerville;
    float: left;
    margin: 15px 0 0 10px;
    background: linear-gradient(#fd004c,
    #fe9000,
    #fff020,
    #3edf4b,
    #fd004c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nav-link{
    float: right;
    display: flex;
    margin: 20px 15px 0 0;
}
ul li{
    list-style: none;
}
.nav-link li a{
    margin: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 3.5vmin;
    transition: 0.5s ease;
}
.nav-link li a:hover{
    color: cyan;
    font-size: 3.8vmin;
}
.song-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.box{
    max-width: 300px;
    height: 200px;
    background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.4));
    border-radius: 10px;
    box-shadow: 4px 4px 3px #fff, -1px -1px 4px #fff;
    margin: 25px;
    animation: animate 1.4s ease infinite;
    transition: 0.5s ease;
}
.box:hover{
    transform: scale(1.1);
}
/* @keyframes animate{
    from{
        transform: scale(1);
    }
    to{
        transform: scale(1.1);
    }
} */
.img-box{
    float: left;
    margin: 10px;
    width: 70px;
    height: 70px;
    border-radius: 10px;
}
img{
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
}
h1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    float: right;
    width: 60%;
    font-size: 4.1vmin;
    color: #fff;
    font-weight: 600;
    margin: 10px 0 0 0;
    
}
span{
    font-size: 3vmin;
    font-weight: 300;
}
audio{
    margin: 50px 0 0 12px;
    width: 42vmin;
    height: 40px;
}
audio::-webkit-media-controls-panel{
    background: linear-gradient(rgba(196, 177, 177, 0.8),rgba(0,0,0,0.8));
}
/* audio::-webkit-media-controls-play-button{
    background-color: #fff;
    border-radius: 50%;
} */
@media screen and(max-width:865px) {
    audio{
        width: 100%;
    }
}
.row1{
    background: linear-gradient( to top right, rgba(0, 0, 0, 0.70),rgba(0,0,0,0.5)),url(of_you.jpg);
}
.row2{
    background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(mock.jpg) no-repeat;
    background-size: cover;
}
.row3{
    background: linear-gradient( to right, rgba(0, 0, 0, 0.99),rgba(0,0,0,0.5)),url(anime.jpg);
}
.row4{
    background: linear-gradient( to right, rgba(0, 0, 0, 0.99),rgba(0,0,0,0.5)),url(czy.jpg);
    background-size: cover;
}
.row5{
    background: linear-gradient( to right, rgba(0, 0, 0, 0.99),rgba(0,0,0,0.5)),url(black1.jpg);
    background-size: cover;
}
.row6{
    background: linear-gradient( to right, rgba(0, 0, 0, 0.99),rgba(0,0,0,0.5)),url(2.0.jpg);
    background-size: cover;
    background-position: center;
}

.footer{
    height: 60px;
    padding: 20px 80px;
    margin: 0%;
    background: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8));
    text-align: center;
}
.footer p{
    color: whitesmoke;
    margin: 17px auto;
    padding: 20px auto;
}