body{
     font-family: "Montserrat", sans-serif;
     font-weight: 500;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     background-color: #000;
     color: #ffffff;
     overflow: hidden;
     
}
.main{
     display:flex;
     height: 100vh;
     padding: 0.5rem;
}
.navbar{
     background-color: black;
     position: fixed;
     top:0%;
     display: flex;
     height: 56px;
     width: 100%;
     color: white ;
     justify-content: space-between;
     align-items: center;
}
.sidebar{
     background-color: #121212;
     width: 340px;
     border-radius: 1rem;
     margin-top: 56px;
}
.main-content{
     background-color: #121212;
     width: 100%;
     border-radius: 1rem;
     overflow: auto;
     margin-top: 56px;
     margin-left: 1rem;
}
.music-player{
     background-color: black;
     position: fixed;
     bottom: 0px;
     width: 100%;
     height: 72px;
}
.nav-options{
     background-color: black;
     border-radius: 1rem;
     width: 30%;     
}
.fa-spotify i{
     font-size: 3rem;
}
.search-bar{
     display: flex;
     width: 50%;
}
.home-logo i{
     background-color: #121212;
     border-radius: 50%;
     font-size: 1.2rem;
}

.search{
     background-color: #121212;
     border-radius: 1rem;
     height: 2rem;
     width: 340px;
     display: flex;
     justify-content: start;
     align-items: center;
     margin: 5px;
}
.Search-area{
     border: 0;
     background-color: #121212;
     color: white;
     border-radius: 1rem;
     height: px;
     width:100%;
}
.install-apps{
     background-color: #121212;
     border-radius: 1rem;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     height: 2rem;
     text-wrap: nowrap;
}
.navbar i{
     font-size: 1.2rem;
     margin: 5px;
     padding: 5px;
     background-color: transparent;
}
a{
     text-decoration: none;
     color: white;
     font-size: 1rem ;
}
.library{
     background-color:#121212;
     border-radius: 1rem;
     margin-top: 0rem;
}
.options{
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0.4rem 0.75rem;

}
.icons button{
     background-color: #1f1f1f;
     border-radius: 1rem;
     border: 0;
     text-align: center;
     color: white;
     font-size: 14px;
     padding: 0.5rem;
     height: auto;
     
}
.icons i{
     font-size: 14px;
     margin: 0;
     padding: 0;
}
.buttons{
     padding: 0.5rem;
}
.buttons button,i{
     background-color: #1f1f1f;
     border-radius: 1rem;
     border: 0;
     text-align: center;
     color: white;
     font-size: 14px;
     padding: 0.5rem; 
}
.playlist-search {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 14px;
     opacity: 0.7;
     position: sticky;
}
.playlist-search i{
     background-color: transparent;
     padding: 0;

}
.playlist-search:hover{
     opacity: 1;
}
.playlist-options{
     overflow: auto;
     scroll-behavior: smooth;
     margin: 0.7rem 0.5rem;
     height: 100vh;
}
.playlist-options::-webkit-scrollbar{
     background-color: #000;
}
.playlist-songs{
     display: flex;
     flex-direction: column;
     margin-top: 0.6rem;
     margin-left: 0.2rem;
}
.songs{
     height:50px;
     width: 100%;
     font-size: 1rem;
     display: flex;
     padding: 0.25rem;
     padding: 0;
     line-height: 0;
     align-items: center;
}
.songs img{
     height: 35px;
     font-weight: 15px;
     border-radius: 2px;
}
.songs h4{
     font-size: 14px;
     font-weight: 500;
     margin-left: 0.7rem;
}
.songs h5{
     font-size: 12px;
     font-weight: 300;
     margin-left: 0.7rem;
}
.songs:hover{
     background-color: #2b2b2b;
     
}
.main-content .buttons{
     display: flex;
     margin-left: 1rem;
}
.main-content .main-button{
     background-color: #ffffff1a;
     border-radius: 1rem;
     border: 0;
     text-align: center;
     color: white;
     font-size: 14px;
     padding: 0.5rem; 
     margin: 0.4rem;
}

.cards-heading {
     padding: 0 1.5rem;
     font-size: 1rem;
}
.cards-container{
     display: flex;
     padding: 0 1.5rem;
     flex-wrap: wrap;
}

.card{
     
     width: 150px;
     height: 225px;
     padding: 1rem;
     margin-left: 0 ;
     margin-bottom: 1rem;
}
.card:hover{
     background-color: #232323;
     transition: 0.8s;
}
.card::after{
     transition: 0.5s;
}
.card-img{
     width: 100%;
     height: 10rem;
     border-radius: 0.5rem;
}
.card .card-title{
     font-size: 1rem;
     font-weight: 600;
     margin: 0;
}
.card .card-info{
     font-size: 0.85rem;
     font-weight: 400;
     opacity: 0.8;
     margin-top: 0.2rem;
     line-height: 1;
     display: -webkit-box;
     -webkit-line-clamp: 2; /* number of lines */
     -webkit-box-orient: vertical;
     overflow: hidden;
}
.footer{
     height: 200px;
     display: flex;
     align-items: center;
     justify-content: center;
}
.line{
     width: 90%;
     height: 50%;
     border-top: 1px solid white;
}
.main-content::-webkit-scrollbar{
     background-color: transparent;
     width: 10px;
}
.main-content::-webkit-scrollbar-thumb{
     width: 90%;
     height: 10px;
     background-color: #ffffff4d;
     
}
.main-content::-webkit-scrollbar-track{
     background-color: transparent;
}

/* music player */
.music-playing{
     padding: 0.5rem;
     display: flex;
     width: 100%;
     height: 100%;
}
.song-playing{
     width: 25%;
     height: 100%;
     background-color: black;
     display: flex;
     align-items: center;
     padding-left: 0.5rem;
     margin-bottom: 0.5rem;
}
.play-function{
     width: 50%;
     height: 100%;
     /* background-color: ; */
}
.music-controls{
     width: 25%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     margin-right: 2rem;
}
.music-poster img{
     width: 40px;
     height: 40px;
}
.music-name{
     color: white;
     line-height: 0;
     margin-left: 1rem;
}
.music-name h3{
     font-size: 14px;
     font-weight: 600;
}
.music-name h5{
     font-size: 12px;
     font-weight: 400;
     opacity: 0.8;
}
.music-logo i{
     background-color: transparent;
     margin-left: 1rem;
     color: white;
     font-weight: bold;
     font-size: 1.15rem;
}
.control-icon i{
     background-color: transparent;
     padding: 0;
     margin: 0;
     color: white;
     padding: 0.1rem;
     font-size: 0.8 rem;
     opacity: 0.7;
}
.control-icon i:hover{
     opacity: 1;
}
.volume{
     display: flex;
}
.volume input{
     
     appearance: none;
     background-color: transparent;
     width: 75px;
     cursor: pointer;
}
.volume input::-webkit-slider-runnable-track{
     background-color: #ddd;
     height: 0.3rem;
     border-radius: 100px;

}
.volume input::-webkit-slider-thumb{
     appearance: none;
     height: 0.4rem;
     width: 0.4rem;
     border-radius: 50%;
     background-color: #1bd760;
     margin-top: -1px;
}
.play-pause{
     display: flex;
     align-items: flex-start;
     justify-content: center;
     margin: 0;
}
.music-icon {
     margin: 0;padding: 0;

}
.music-icon i{
     color: white;
     margin: 0 0.4rem;
     opacity: 0.7;
     background-color: transparent;
}
.music-icon i:hover{
     opacity: 1;
}
.play i{
     font-size: 1.5rem;
}
.music-track{
     display: flex;
     justify-content: center;
     padding: 0;
}
.music-track input{
     appearance: none;
     background-color: transparent;
     width: 450px;
     cursor: pointer;
     margin-top: 0; !important
     padding: 0;
     
}
.music-track input::-webkit-slider-runnable-track{
     background-color: #ddd;
     height: 0.4rem;
     border-radius: 100px;

}
.music-track input::-webkit-slider-thumb{
     appearance: none;
     height: 0.4rem;
     width: 0.5rem;
     border-radius: 50%;
     background-color: #1bd760;
     margin-top: -1px;
     margin-top:0;
}
.music-track h6{
     font-size: 12px;
     color: white;
     margin:0 6px;
     opacity: 0.8;
     font-weight:lighter;
     letter-spacing: 2px;
}