body{
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        margin:0;
        background-color:black;
        color:white;
        overflow:hidden;
}
.main{
    display:flex;
    height:100vh;
    padding:0.5rem;
    
}

.sidebar{
    background-color:#000;
    width:340px;
    border-radius:1rem;
    margin-right:0.5rem;
}

.main-content{
    background-color:#121212;
    flex:1;
    border-radius:1rem;
    overflow:auto;
    padding:0 1.5rem;
}

.music-player{
    background-color:black;
    position:fixed;
    bottom:0;
    width:100%;
    height:4.4rem;

}
a{
    text-decoration:none;
    color:white;
}
.nav{
    background-color:#121212;
    border-radius:1rem;
    display:flex;
    flex-direction:column;
    height:6rem;
    padding:0.5rem 0.75rem;
}

.nav-option{
    line-height:2rem;
    opacity:0.7;
    padding:0.5rem 0.75rem;
}

.nav-option i{
    font-size:1.26rem;
}
.nav-option a{
    font-size:1.15rem;
    margin:1rem;
}
.nav-option:hover{
    opacity:1;
}
.library{
    background-color:#121212;
    border-radius:1rem;
    height:100%;
    margin-top:0.5rem;
    padding:0.5rem 0.75rem;
}
.options{
    display:flex;
    justify-content:space-between;
    
}
.lib-option img{
    height:1.25rem;
    width:1.25rem;
}

.options .icons{
    padding-top:0.7rem; 
}

.options i{
    font-size:1.25rem;
    opacity:0.7;
    margin-right:0.7rem;
}
.options i:hover{
    opacity:1;
}
.box{
    background-color:#232323;
    height:8rem;
    border-radius:0.75rem;
    margin:0.75rem 0rem;
    padding:0.25rem 1.25rem;
}
.box-p1{
    font-size:1rem;
    font-weight:500;
}
.box-p2{
    font-size:0.85rem;
    opacity:0.9;
}

.badge{
    background-color: white;
    border:none;
    border-radius:7rem;
    padding:-.25rem 1rem;
    font-weight:700;
    margin-top:0.5rem;
    height:2rem;
    width:fit-content;
}
.sticky-nav{
    position:sticky;
    top:0;
    background-color: #121212;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1rem 0 1rem 0;
    z-index:10;

}
.sticky-nav-icons{
    margin-left:0.75rem;
}
.sticky-nav-options{
    display:flex;
    justify-content:center;
    align-items:center;
   
}
.sticky-nav-options button{
    margin-right:1rem;
}
.sticky-nav-options i{
    margin-right:1rem;
}
.dark-badge{
    background-color:#000;
    color:white;
}
@media(max-width:1000px){
    .hide{
        display:none;

    }
}
.cards-container{
    display:flex;
    border-radius:0.5rem;
    flex-wrap:wrap;
}
.card{
    background-color: #232323;
    width:200px;
    padding:1rem;
    margin-left:1.5rem;
    margin-top:1rem;
}
.card-img{
    width:100%;
    border-radius:0.5rem;
}
.card-title{
    font-weight:600;
}
.card-info{
    font-size:0.85rem;
    opacity:0.5;
}
.footer{
    height:250px;
    display:flex;
    align-items:center;
    justify-content:center;

}
.line{
    width:90%;
    height:30%;
    border-top:1px solid white;
    opacity:0.4;

}
.play-alb{
    display:flex;
    width:25%;
}
.play-img{
    height:3.5rem;
    width:3.5rem;
    margin-top:0.4rem;
    margin-right:1rem;
    margin-left:0.5rem;
  
}
.paragraph1{
    font-weight:600;
    opacity:1;
}
.paragraph2{
    opacity:0.7;
}
.paragraph{
    line-height:0.5rem;
    padding-top:0.5rem;
}
.play-alb i{
    font-size:1.5rem;
    margin-top:1.6rem;
    margin-left:1rem;

}
.music-player{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.player{
    width:50%;
}

.player-control{
    height:1rem;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-left:2rem;
    opacity:0.7;
    margin-bottom:0.3rem;
}
.playback-bar{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-left:5rem;
}
.progress-bar{
    width:70%;
    appearance: none;
    background-color: transparent;
    cursor:pointer;
   
}
.progress-bar::-webkit-slider-runnable-track{
    background-color:#ddd;
    height:0.2rem;
}
.progress-bar::-webkit-slider-thumb{
    appearance: none;
    height:1rem;
    width:1rem;
    background-color:#1bd760;
    border-radius:50%;
    margin-top:-6px;
}




.player-control:hover{
    opacity:1;
}
.progress-bar1{
    width:30%;
    appearance: none;
    background-color: transparent;
    cursor:pointer;
     
   
}
.progress-bar1::-webkit-slider-runnable-track{
    background-color:#ddd;
    height:0.2rem;
    /* margin-bottom:0.3rem; */
}
.progress-bar1::-webkit-slider-thumb{
    appearance: none;
    height:0rem;
    width:0rem;
    background-color:#1bd760;
    border-radius:50%;
    margin-top:-6px;
}

.controls i{
    margin-right:1rem;
}


.control1{
    margin-left:3rem;
}

.controls{
    width:25%;
    display:flex;
    padding-left:100px;
}