body{
     font-family: "Montserrat", sans-serif;
     margin: 0; /*now the space before(left) the font wont be there*/
     background-color: black;
     color: white;
     overflow: hidden; /*when there is much content on the page than the height of the page, the content out of the page will not be visible. if we want to see it we can change hidden to scroll, visible,etc.*/
}

.main{
    display: flex;
    height: 100vh; /*viewport height(vertical), i.e. the height of the screen*/
    padding: 0.5rem;
}

.sidebar{
    background-color: black;
    width: 340px;
    border-radius: 1rem; /*1rem=16px*/
    margin-right: 0.5rem;
}

.main-content{
    background-color: #121212;
    flex: 1; /*this means give other content the space they have entered but the whole remaining space will be of this now.*/
    border-radius: 1rem;
    overflow: auto;
    padding: 0 1.5rem 0 1.5rem; /*so that everything in the main content has some gap from the line*/
}

.music-player{
    background-color: black;
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 72px;
}

a{
    text-decoration: none;
    color: white;
}

.nav{
    background-color: #121212;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100px;
    padding: 0.5rem 0.75rem;
}

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

.nav-option:hover{
    opacity: 1;
}

.nav-option i{
    font-size: 1.25rem;
}

.nav-option a{
    font-size: 1rem;
    margin-left: 1rem;
}

.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;
    align-items: center; /*it will come in center fron vertical*/
}

.lib-option img{
    height: 1.25rem;
    width: 1.25rem;
}

.icons{
    font-size: 1.25rem;
    display: flex;
}

.icons i{
    opacity: 0.7;
    margin-right: 1rem;
}

.icons i:hover{
    opacity: 1;
}

.box{
    background-color: #232323;
    height: 8rem;
    border-radius: 0.75rem;
    margin: 0.75rem 0 1.75rem 0;
    padding: 0.75rem 1rem;
}

.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: 100px;
    padding: 0.25rem 1rem;
    font-weight: 700;
    margin-top: 0.5rem;
    height: 2rem;
    width: fit-content;
}

.dark-badge{
    background-color: black;
    color: white;
}

.sticky-nav{
    position: sticky;
    top: 0;
    background-color: #121212;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0 1rem 0;
}

.sticky-nav-icons {
    margin-left: 0.75rem;
}

.sticky-nav-options{
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-item{
    margin-right: 1rem;
}

@media(max-width:1000px) {
    .hide{
        display: none;
    }
}

.card{
    background-color:#232323;
    width: 150px;
    border-radius: 0.5rem;
    padding: 1rem; /*so that the whole content inside the card has some gap from borders*/
    margin-left: 1.5rem;
    margin-top: 1rem   ;
}

.cards-container{
    display: flex;
    flex-wrap: wrap; /*from this if there are more no. of cards in a single line, the cards will take its destined space and the others will be shifted down so that the cards doesn't look odd or squeezed out*/
}

.card-img{
    width: 100%;
    border-radius: 0.5rem;
}

.card-title{
    font-weight: 600;
}

.card-info{
    font-size: 0.8rem;
    opacity: 0.8;
}

.footer{
    height:300px;
    display: flex;
    align-items: center;
}

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

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

.album{
    width: 25%;
}

.player{
    width: 50%;
}

.controls{
    width: 25%;
}

.player-controls{
    display: flex;
    justify-content: center;
    align-items: center;
}

.player-control-icon{
    height: 1rem;
    margin-right: 1.75rem;
    opacity: 0.7;
}

.player-control-icon:hover{
    opacity: 1;
}

.playback-bar{
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-bar{
    width: 70%;
    appearance: none;
    background-color: transparent;
    cursor: pointer;
}

.progress-bar::-webkit-slider-runnable-track{
    background-color: #ddd;
    border-radius: 100px;
    height: 0.2rem;
}

.progress-bar::-webkit-slider-thumb{
    appearance: none;
    height: 1rem;
    width: 1rem;
    background-color: #1bd760;
    border-radius: 50%;
    margin-top: -6px;
}

.controls{
    display: flex;
    justify-content: center;
    align-items: center;
}

.controls i{
    height: 1rem;
    margin: 0.45rem;
}

.control-icon{
    appearance: none;
}

.control-icon::-webkit-slider-runnable-track{
    border-radius: 100px;
    height: 0.2rem;
}

.control-icon::-webkit-slider-thumb{
    appearance: none;
    height: 0.8rem;
    width: 0.8rem;
    border-radius: 50%;
    background-color: #1bd760;
    margin-top: -4px;
}

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

.album-icon img{
    height: 3.5rem;
    width: 3.5rem;
    margin-right: 20px;
    margin-left: 0px;
}

.album-text{
    font-size: medium;
}
.album-title{
    font-size: larger;
    font-weight: 500;
}

.album-sub{
    margin-top: -15px;
}