body{
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    background-color: black;
    color: white;
    overflow: hidden ; /* when content overflows from the screen , it will not be scrollable */
 }

 .main{
   display: flex;
   height: 100vh;
   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; /* baki ke content ko jitni jaghe required hai usko dedo , but jo bachi hui jaghe hai usko mereko dedo */
   border-radius: 1rem;
   overflow: auto;
   padding: 0 1.5rem 0 1.5rem;
 }

 .music-player{
   background-color: black;
   position: fixed;
   bottom: 0;
   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:hover{
   opacity: 1;
 }

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

 .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;
 }

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

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

 .icons i{
   opacity: 0.7;
   margin-left: 1.5rem;
 }

 .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;
   z-index: 10;
 }

 .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;
   margin-left: 1.5rem;
 }

 .cards-container{
   display: flex;
   flex-wrap: wrap;
 }

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

}

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

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

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

 .line{
  width: 90%;
  height: 50%;
  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: 16px;
  width: 16px;
  background-color: #1bd760;
  border-radius: 50%;
  margin-top: -6px;
 }

 .album{
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: space-between;
  align-items: center;
 }

 .album-img{
  height: 48px;
  width: 48px;
  border-radius: 0.4rem;
  padding: 0 0 0 16px;
  margin-bottom: 10px;
  margin-top: 10px;
 }

 .album-info{
  /* margin-right: 40px; */
  justify-content: space-evenly;
 }

 .controls{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-right: 20px;
 }

.volume-bar{
  width: 80%;
}

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

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