@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


 :root {

     --a: 0;
 }

 * {

     margin: 0;
     padding: 0;
     font-family: "Roboto", serif;
     font-weight: 700;
     font-style: normal;
 }

 body,
 html {

     background-color: #0a0909;
     color: #f3f8f5;
     overflow-x: hidden;
     /* Hide horizontal scrollbar */
     height: 100%;
     /* Take up the full viewport height */
     width: 100%;
     /* Take up the full viewport width */

 }



 .left {

     width: 25%;
     /* 25% width of the container */
     /* Full height of the container */
     margin: 10px;

 }

 .right {

     width: 75%;
     /* 75% width of the container */
     margin: 10px;
     position: relative;


 }

 .logo {

     width: 290px;

 }

 .logo img {
     width: 16vw;
 }

 .home ul li {

     list-style: none;
     width: 17px;
     display: flex;
     gap: 15px;
     padding-top: 10px;

 }

 .bg-black {

     background-color: black;
     color: white;
 }

 .bg-grey {

     background-color: #121212;
     color: white;
 }

 .invert {
     filter: invert(1);
 }

 .p1 {
     padding: 10px;
 }

 .library {

     margin-top: 6px;
     min-height: 70vh;
     position: relative;

 }

 .library img {

     width: 30px;
 }

 .heading {

     gap: 13px;
     padding: 17px;
 }

 .footer {

     display: flex;
     gap: 13px;
     font-size: 10px;
     position: absolute;
     bottom: 0;
     margin-bottom: 16px;
     align-items: center;
     justify-content: center;

 }

 .footer a {

     color: gray;
 }

 .header {

     display: flex;
     justify-content: space-between;
     background-color: rgb(34 34 34);
     /* background-color: #252525; */
     /* padding: 8px;
    align-items: center;
    height: 62px; */
 }


 .header>* {
     padding: 20px;
 }



 .sptify-playlist {
     padding: 25px;

 }

 .card-container {

     display: flex;
     gap: 20px;
     margin: 15px;
     flex-wrap: wrap;
     max-height: 67vh;
     overflow-y: auto;
     padding-right: 7px;


 }

 .card {

     position: sticky;
     padding: 10px;
     width: 250px;
     border-radius: 5px;
     background-color: #252525;
     transition: all .9s;


 }
 .play {
    width: 28px;
    height: 28px;
    background-color: rgb(240, 241, 235);
    border-radius: 50%;
    /* Makes it a perfect circle */
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 98px;
    right: 14px;
    opacity: var(--a);
    transition: all 0.5s ease-out;
    /* Remove any border rendering */
    border: none;
    box-shadow: none;
}

 .card:hover{
    background-color: #646464;
    cursor: pointer;
    --a:1;

 }

 .card img {
     width: 100%;
     /* height: 250px; */
     object-fit: contain;
 }

 .card h2 {

     margin: 10px;
 }

 .card p {

     margin: 10px;
 }


 .signupbtn {

     background-color: rgb(34 34 34);
     color: rgb(247, 243, 243);
     font-weight: bold;
     border: none;
     outline: none;
     cursor: pointer;
     font-size: 16px;

 }

 .signupbtn:hover {
     font-size: 17px;
     color: rgb(12, 11, 11)
 }

 .loginbtn {
     border: none;
     outline: none;
     background-color: #646464;
     border-radius: 21px;
     color: rgb(247, 243, 243);
     padding: 10px;
     width: 79px;
     cursor: pointer;
     font-size: 16px;
 }

 .loginbtn:hover {
     font-weight: bold;
     color: rgb(12, 11, 11);
     font-size: 17px;
 }



 .buttons>* {
     margin: 0 12px;
 }

 .hamburgerContainer {
     position: relative;
     bottom: -8px;
 }

 .playbar {
     right: 21px;
     background-color: #646464;
     bottom: 18px;
     position: fixed;
     width: 69vw;
     padding: 12px;
     align-items: center;
     gap: 20px;
     border-radius: 9px;
     min-height: 40px;
     
 }

 .songbutton {
     display: flex;
     justify-content: center;
     gap: 20px;
 }

 .songlist ul {
     padding: 0 10px;
 }

 .songlist ul li {
     display: flex;
     justify-content: space-between;
     gap: 10px;
     cursor: pointer;
     padding: 12px 0;
     border: 1px solid white;
     margin: 12px 0;
     padding: 13px;
     border-radius: 3px;
     /* background-color: #252525; */

 }

 .playnow {

     display: flex;
     align-items: center;
     gap: 10px;

 }

 .songlist .info {

     font-size: 14px;
     width: 197px;
     align-self: center;
 }

 .songlist {
     height: 51vh;
     overflow: auto;
     background-color: #252525;
     border-radius: 7px;
 }
 

 .seekbar {
     height: 4px;
     width: 97.5%;
     background-color: #ebe6e6;
     border: 2px solid rgb(189, 175, 175);
     position: absolute;
     bottom: 5px;
     margin: 3px;
     cursor: pointer;

 }

 .circle {
    width: 12px;
    height: 12px;
    border-radius: 50%; /* Ensure it is a perfect circle */
    background-color: black;
    position: absolute;
    bottom: -5px; /* Adjust to align with the line */
    left: -4px; /* Start at the left */
    transition: left 0.25s ease-in-out; /* Smooth movement transition */
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); /* Add a subtle shadow for better visibility */
    border: 2px solid white; /* Optional: Add a border for clarity on darker backgrounds */
  }

 .songbutton img {
     cursor: pointer;
 }

 .abovebar {
     display: flex;
     justify-content: space-between;
     padding: 0 12px;
     margin: 10px 0;
     padding: 0;
 }


 #hamgurger-mobile {
     display: none;
 }

 .close-icon {
     display: none;
 }

 .songinfo{
   width: 210px;
 }

 .volume{
    display: flex;
    gap: 10px;
 }

 .song-volume-time-div{
    display: flex;
    align-items: center;
    gap: 10px;

}
.volume input{
    cursor: pointer;
}



 /* For screens 1500px to 1599px */
 @media (min-width: 1500px) and (max-width: 1599px) {
     .playbar {
         right: 30px;
     }
     .card-container{
        justify-content: none;
    }



 }

 /* For screens 1600px and wider */
 @media (min-width: 1600px) {
     .songlist {
         height: 60vh;
     }

     .playbar {
         right: 60px;
     }
   
 }


 @media (min-width: 1212px) and (max-width: 1327px) {

   

     .card-container {
         gap: 10px;
     }

     .card {
         width: 225px;
     }

     .playbar {
         right: 16px;
     }

     .card-container{
        justify-content: center;
    }
 }

 @media(max-width: 1211px) {


    .card-container{
        justify-content: center;
    }

    .footer{
        display: none;
    }

     .left {
         position: absolute;
         left: -120%;
         z-index: 1;
         background-color: black;
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 10px 0;


     }

     .left .close-icon {

         position: absolute;
         right: 18px;
         top: 14px
     }

     .right {
         width: 100vw;
     }

     .playbar {
        
         width: 90vw;
         padding: 0px;


     }

     .playbar {
       right: 21px;
       /* bottom:0px; */
     }

     #hamgurger-mobile {
         display: inline;

     }

     .close-icon {
         display: inline-block;
         top: 14px;
         cursor: pointer;

     }

     .seekbar {
         width: 87vw;
     }

     .songlist {
        height: 56vh;
    }
    

     .songbutton {
         display: flex;
         align-self: center;
         /* position: relative;
         left: -10px; */
     }

     .songtime {
         display: flex;
         align-self: center;
         font-size: 16px;
     }

     .songinfo {
         display: flex;
         align-self: center;
         font-size: 16px;
         width: auto;
     }

     .card {
         width: 90vw;
     }

     .sptify-playlist {
         padding: 10px;
     }


     .logo img {
         width: 226px;

     }

     .right {
         margin: 0px;
         
     }

     .abovebar {
        position: relative;
        top: -6px;
        flex-direction: column;
        gap: 13px;
     }

     #lyrics{
        display: flex;
        justify-content: center;
        padding: 5px;
        
     }

    .song-volume-time-div{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0px;
    
    }
    .volume{
        position: relative;
        left: -7px;
        margin-bottom: 1px;
        padding-bottom: 6px;
       
    }
    
    .card-container{
        max-height: unset;
        overflow-y: unset;
        margin-bottom: 22vh;
    }

 }


 @media (min-width: 490px) and (max-width: 548px) {
    .playbar {
        right: 24px;
       
    }
    .card {
        width: 60vw;
    }
   

}

@media (min-width: 549px) and (max-width: 700px) {
    .playbar {
        right: 36px;
       
    }
    .card {
        width: 34vw;
    }
  

}

@media (min-width: 701px) and (max-width: 834px) {
    .playbar {
        right: 49px;
       
    }
    .seekbar {
        width: 88vw;
    }
    .card {
        width: 34vw;
    }
   
}

@media (min-width: 834px) and (max-width: 867px) {
    .playbar {
        right: 52px;
        
    }
    .seekbar {

        width: 88vw;
    }
    .card {
        width: 40vw;
    }


}

@media (min-width: 869px) and (max-width: 924px) {
    .playbar {
        right: 56px;
        
    }
    .seekbar {
        width: 88vw;
    }
    .card {
        width: 40vw;
    }
   

}
@media (min-width: 924px) and (max-width: 1024px) {

    .playbar {
        right: 67px;

    }
    .seekbar {
        width: 89vw;
    }
    .card {
        width: 40vw;
    }

    
}

@media (min-width: 1025px) and (max-width: 1211px) {
    .playbar {
        right: 70px;

    }
    .seekbar {
        width: 89vw;
    }
    .card {
        width: 34vw;
    }
    

}


/* 
@media (max-width: 363px) {
    
.header>* {
    padding: 7px;
}


} */

@media (max-width: 425px) {
    
    .header>* {
        padding: 7px;
    }
 
    #lyrics{
        font-size: x-large;
    }
    
}