* {

    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* overflow-x: hidden; */
    z-index: 1;
}

::-webkit-scrollbar {

    display: none;
}

html,
body {

    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0)
}

.container {

    background-color: rgb(255, 238, 238);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;


}

.container nav {

    width: 100%;
    height: 10%;
    background-color: rgb(40, 7, 72);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px 10px;
}

.container nav img {

    width: 80px;
    animation: logo 1s alternate-reverse infinite;
    
    

}


@keyframes logo {
from{

    opacity: .5;
}    
to{

    opacity: 1;
}
}


.container nav h1 {

    font-size: 25px;
    color: rgb(255, 0, 162);
    animation: headname 1.2s both 1;
}


@keyframes headname {
    from{
    
       
       
        opacity: 0;
    }    
    to{
    
opacity: 1;    }
    }

.container nav div {

    display: flex;
    align-items: center;
    justify-content: center;
}

#menu{

    color:rgb(255, 0, 187);
    font-size: 28px;
    margin-left: 10px;
    font-weight: bolder;
    transition: .5s all;


}

.songdetails {

    height: fit-content;
    width: 700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    /* border: 2px solid red; */
    margin-top: 3%;
    padding: 20px 0;
    background-color: rgba(0, 0, 0, 0.888);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    /* background-image: url('https://i.pinimg.com/originals/f1/20/f1/f120f1bdde457ba9208083e5d9e957d5.gif');
    background-repeat: no-repeat;
    background-size: cover; */


}

.coverimg {

    width: 600px;
    height: 300px;
    background-position: center;
    background-size: contain;
   background-color:rgb(0 0 0 / 37%);
    animation: coverimg both 1s;
    background-repeat: no-repeat;
    border-radius: 20px 10px 10px 10px;
    position: relative; 




}

#volume{

    margin-left:-10%;
    width: 30px;
    display: block;
}

#volslider{

    /* rotate: -90deg; */
    display: none;
    margin-left:-10%;

    width: 90px;
}


@keyframes coverimg {

    from {

        transform: translateX(100%);
    }

    to {

        transform: translateX(0%);
    }

}

.playtime {


    width: 590px;
    /* color: red; */
}

marquee {

    width: 500px;
    border-radius: 20px;
    color: white;
    padding: 10px;
    font-family: monospace;
   
}

.controls {
    width: 600px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
    gap: 10%;
    padding: 5px;

}

.controls img {


    width: 40px;
    animation: playbtn both .5s;


}


@keyframes playbtn {

    from {

        opacity: 0;

    }

    to {

        opacity: 10;
    }
}

#play {

    cursor: pointer;
    width: 45px;
    transition: .2s ease;
    background-color: white;
}

#pause {
    cursor: pointer;
    display: none;

}

#title {


    animation: title alternate-reverse 1s infinite;
    font-size: 25px;
    /* color: black; */
    text-align: center;
    width: fit-content;

}


.disc {

    background-image: url('https://64.media.tumblr.com/b583c317eddacd3d71504eca5fe905c4/16269574b23c30c4-bf/s500x750/e859b2a542e9ee67be5caed7db538598f58d5614.gif');

    width: 100%;
    height: 100%;
    position: absolute;
    /* z-index: 100; */
    top: 0%;
    left: 0%;
    background-color: rgba(255, 255, 255, 0);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    filter: blur(5px);
    z-index: -1;
    display: none   ;

    

}

footer{

    width: 100%;
    height: 50px;background-color:rgb(40, 7, 72);
    position: absolute;
    bottom: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer img{

    display: none;
}

footer h1{

    color:rgb(255, 0, 162) ;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
}


.playlists {

position: absolute;
z-index: 10;
width: 100%;
height: 90%;
bottom: 0px;
background-color: rgb(160, 160, 160);
text-align: center;

color: white;
display: none;
}



.playlistanim{

    animation: playlists .5s 1 ;
}

.pllsongs {

    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;  
    flex-direction: column;  
    justify-content: start;
    color: rgb(0, 0, 0);

}

.songs{

/* border: 2px solid red; */
width: 100%;
height: 50%;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
margin-top: 10px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
padding: 10px;

}

#trendsong{

    font-size: 35px;
    color: rgb(39, 16, 36);
    font-family:Georgia, 'Times New Roman', Times, serif;
    text-decoration: underline;
}   


.song{

    background-color: rgb(0, 0, 0);
    width: 600px;
    height: 90px;
    margin-top: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 5px;
    color: rgb(255, 255, 255);
    gap: 5px;
    font-size: 10px;
    cursor: pointer;
    text-wrap:nowrap;
    overflow: hidden;
    animation: songappear .7s .3s 1 both;
    transition: .5s;
    

}

.song:hover{

    transform: translateX(10px);
}



@keyframes songappear{

    from{
        opacity: 0;
       /* transform: translateX(10%); */
    }
    to{
        opacity: 1;
        
    }
}

.song img{

    width: 50px;
    border-radius: 100px;
}

@keyframes playlists {
    from{

        transform: translatex(100%);
        opacity: 0;

    }

    to {

        transform: translatex(0%);
        opacity: 1;
    }
}

@keyframes title {

    from {

        opacity: 0.5;

    }

    to {

        opacity: 1;

    }
}



@media (max-width:768px) {
    .coverimg {
        width: 90%;
    }

    .controls,
    .playtime,
    marquee {
        width: 90%;
        padding: 5px;
    
    }

    #volslider{

        width: 90px;
        margin-left: 5px;
    }

    .songdetails {
        width: 97%;
    }

    #title{

        font-size: 22px;
    }

    .song{width: 100%;font-size: 57%;}

}