@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}



body {
    background-color: #000;
    color: white;
}

.left {
    width: 25vw;

}

.logo{
    cursor: pointer;
}
.right {
    width: 75vw;
 position: relative;
 
    
}

.home {
    height: 29vh;
}

.library {
    min-height: 59vh;
    position: relative;
}

.footer {
    display: flex;
    flex-wrap: wrap;
    font-size: 10px;
    padding: 20px 4px 10px 4px;
    gap: 12px;
    position: absolute;
    bottom: 0;

}

.footer a {
    color: rgb(196, 196, 196);
    text-decoration: none;
}

.home ul li {
    display: flex;
    gap: 10px;
    width: 30px;
    list-style: none;
    padding-top: 10px;
    cursor: pointer;

}

.heading {
    display: flex;
    gap: 10px;
cursor: pointer;
}



.hadder{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(34, 34, 34);
  height: 55px;
  padding: 0px 6px;
  border-radius: 5px;
  
}

.nav{
    display: flex;
    align-items: center;
  
}



.spotifyplaylist{
    padding: 10px;
    font-size: 0.6rem;
    font-weight: 700;
    max-height: 68vh;
    overflow-y: scroll;
 
   
}
.spotifyplaylist h1{
 cursor: pointer;
}
.card-container{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
}
.card{
    width: 114px;
    height: 182px;
    padding: 8px;
    border-radius: 5px;
    background-color: #252525;
    cursor: pointer;
    
    
}
.card >*{
  padding-top: 3px;
}
.card img{
     width: 100%;   
     border-radius: 6px; 
      
}
.card .play{
    position: relative;
    
}

.card .play button{
    display: inline-flex;
    background-color: rgb(13, 13, 13);
    border: none;
 border-radius: 50%;
     position:absolute ;
     top: 100px;
     right: 16px;
     opacity: 0;
     transition: all 0.2s ease-in ;
}
:hover.card .play button{
opacity: 1;
top: 76px;

}


.singupbtn{
    background: none;
    border: none;
    margin: 10px;
    color: rgb(170, 168, 168);
   
}
:hover.singupbtn{
color: rgb(251, 251, 251);
transform: scale(1.04);

}

.singupbtn:active{
    scale: 0.98;
}
.loginbtn{
    border: none;
   border-radius: 50px;
   padding: 6px 20px;
   font-size: 16px;
    color: rgb(1, 1, 1);
    transition: all ease-in-out .16s;
   font-size: 13px;

}

:hover.loginbtn{
transform: scale(1.04);
background: rgb(216, 215, 215);


} 
.loginbtn:active{
    scale: 0.95;
}

.playbar{
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    background: rgb(99, 160, 99);
    width: 100%;
    padding: 12px;
    border-radius: 5px;

    
}