*{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
    font-family:"Poppins", serif; 
}
::-webkit-scrollbar{
    width: 0;
}

.navbar{
    height: 60px;
    width: 100%; 
    background-color: black;
     display: flex;  
    align-items: center;
    justify-content: space-between; 
}

.logo{
    height: 90px;
    width: 150px;
}

.logo img{
    height: 100%;
    width: 100%;
     object-fit: contain;
}

.len1{
    display: flex;
    gap: 10px;
}
#len{
    color: white;
    font-size:15px;
    height: 45px;
    width: 430px;
    /* border: 2px solid white; */
    border: none;
    border-radius: 30px;
    background-color: rgb(39, 37, 37);
    padding-left: 15px;
    outline: none;

}
#len:hover{
    background-color: rgb(53, 49, 49);
}
#home{
    font-size: 27px;
    color: white;
    position: relative;
    top: 2px;
}
.sin{
    font-size: larger;
    color: white;
    background: transparent;
    border: none;
    padding:5px;
}
button:hover{
    color: black;
    background-color: white;
    border-radius: 30px;
    cursor: pointer;
}
.ho{

     display: flex; 
     gap: 20px;
     margin-right:25px;
     /* padding-left: 10px; */
     
}
/*section1*/
.section1{
    background-color: black;
    display: flex;
    justify-content: space-evenly;
}
#box11{
    background-color: rgb(40, 35, 35);
    height: 140px;
    width: 400px;
    /* border: 2px solid black; */
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    border-radius: 10px;
    
}
.scroll{
    height: 38%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#you{
    color: white;
    opacity: 0.5;
}
.playb{
    height: 43px;
    width: 43px;
    background-color: rgb(55, 188, 55);
    border-radius: 50%;
    position:relative;
    bottom: 90px;
    left: 90px; 
    display: none;
}

b{
    color: white;
    font-size: 16px;

}
p{
    color: white;
    font-size: 13px;
}
.but{
    height:30px;
    width: 100px;
    border-radius: 30px;
    color: black;
    background-color: white;
    border: none;
    font-size: 10px; 
    font-weight: 10px;
}
.but:hover{
    background-color: aliceblue;
}
li{
    list-style: none;
    color: white;
    cursor: pointer;
}
li:hover{
    color: rgb(206, 218, 228);
}   
.leg{
  display: flex;
  gap: 10px;
  font-size: 14px;
}
.leg2{
    display: flex;
    gap: 10px;
    font-size: 14px;
}
#op{
    font-size: larger;
    height: 40px;
    width: 100px;
    border-radius: 20px;
    background: transparent;
    outline: none;
    color: white;
}
.leftpage{
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 90vh;
    width: 340px;
    background-color: rgb(14, 13, 13);
    border-radius: 10px;
    padding: 7px;
    
}
h1{
    color: white;
}
 option{
    background-color:black;

} 
 /*rightpage*/
 .rightpage{
    height: 90vh;
    width: 72%;
    background-color:rgb(14, 13, 13);
    border-radius: 10px;
    overflow-y: scroll;
   
 }
.part1{
    display: flex;
}
#pou{
    color: white;
    padding: 10px;
}
.pop{
    color: white;
    padding: 10px;
    padding-top: 30px;

}
.img{
    height: 150px;
    width: 150px;
    border-radius: 50%;
    object-fit: cover;
    /* background-size: cover;
    background-repeat: no-repeat; */
}
.img1{
    height: 150px;
    width: 150px;
    border-radius: 2px;
    object-fit: cover;
    /* background-size: cover;
    background-repeat: no-repeat; */
}
h4{
    color: white;
}
.artist{
    color: white;
    opacity: 0.5;
}
.box1{
    height:34vh;
    width:90%;
    padding:20px;
}
.box1:hover{
    background:linear-gradient(to top, rgb(74, 74, 74),transparent,transparent);
    border-radius: 10px;
    cursor: pointer;  
}
.box1:hover .playb{
     display: block;
}
.box2{
    height:34vh;
    width:90%;
    padding:20px;
    /* border: 2px solid brown; */
    
}
.box2:hover{
    background-color: rgb(74, 74, 74);
    cursor: pointer;
    border-radius: 8px;
}
.box2:hover .playb{
    display: block;
}

.part2{
    display: flex;
    
}
.part3{
    display: flex;
    
}
.part4{
    display: flex;
    
}
.part5{
    display: flex;
}
footer{
    height: 50%;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 8px;

}
.fo{
    display: flex;
    flex-direction: column;
    gap:5px;
   
}
.fo2{
    display: flex;
    flex-direction: column;
    gap:3px;
    margin-top: 45px;
    
}
.fo3{
    display: flex;
    flex-direction: column;
    gap:3px;
     margin-bottom:35px; 
}
.fo4{
    display: flex;
    flex-direction: column;
    gap: 3px; 
    margin-top: 45px;

}
@media screen and (max-width:1024px){
    .leftpage{
        display: flex;
        flex-direction: column;
        gap: 15px;
        height: 89vh;
        width: 260px;
    }
    .img{
        height: 100px;
        width: 100px;
    }
    .img1{
        height: 100px;
        width: 100px;
    }
    b{
        color: white;
        font-size: 10px;
    
    }
    p{
        color: white;
        font-size: 10px;
    }.but{
        height:20px;
        width: 90px;
    }
    #len{
        color: white;
        font-size:15px;
        height: 40px;
        width: 400px;
    }
    .playb{
        height: 33px;
        width: 33px;
        position:relative;
        bottom: 70px;
        left: 50px; 
        display: none;
    }
    h4{
        font-size: 15px;
        color: white;
    }
}
@media screen and (max-width:768px) {
    .logo{
        height: 60px;
        width: 100px;
    }
    #home{
        font-size: 20px;
}
#len{
    color: white;
    font-size:10px;
    height: 35px;
    width: 290px;
}
.sin{
    font-size:15px;
    padding:1px;
}
.leftpage {
    gap: 15px;
    height: 89vh;
    width: 200px;
}
.leg{
    display: flex;
    gap: 5px;
    font-size: 10px;
  }
  .leg2{
      display: flex;
      gap: 5px;
      font-size: 10px;
  }
  li{
    font-size: 10px;
  }
  #op{
    font-size: 10px;
    height: 20px;
    width: 60px;
  }
  .rightpage{
    height: 90vh;
    width:70%;
}
b{
    color: white;
    font-size: 9px;

}
p{
    color: white;
    font-size: 9px;
}
.box1{
    height:24vh;
    width:70%;
    padding:10px;
}
.box2{
    height:24vh;
    width:70%;
    padding:10px;
}
.img{
    height: 80px;
    width: 80px;
}
.img1{
    height: 80px;
    width: 80px;
}
h4{
    font-size: 10px;
    color: white;
}
.playb{
    height: 23px;
    width: 23px;
    position:relative;
    bottom: 60px;
    left: 60px; 
    display: none;
}
.pop{
    font-size: 20px;
}
#pou{
    font-size: 20px;
}

}
@media screen and (max-width:425px) {
.leftpage{
 display: none;
}
.rightpage{
    height: 90vh;
    width:96%;
}
.logo{
    height: 40px;
    width: 80px;
}
#home{
    font-size:16px;
    position: relative;
    left: 5px;
}
#len{
color: white;
font-size:8px;
height: 25px;
width: 150px;
}
.sin{
font-size:10px;
}
.fo li{
    font-size:10px;

}
.fo4 li{
    font-size: 10px;
}
.fo2 li{
    font-size:10px;
}
.fo3 li{
    font-size: 10px;
}
.fo5 {
   display: none;
}
.part1 {
    overflow-x: scroll;
    overflow-y: hidden;
}
.part2 {
    overflow-x: scroll;
    overflow-y: hidden;
}
.part3 {
    overflow-x: scroll;
    overflow-y: hidden;
}
.part4 {
    overflow-x: scroll;
    overflow-y: hidden;
}
.part5 {
    overflow-x: scroll;
    overflow-y: hidden;
}
}
@media screen and (max-width:375px){
.ho{ 
   
    gap: 6px;
    margin-right: 13px;
    padding-left: 10px;
}    
}
@media screen and (max-width:320px){
    .ho{ 
        gap: 3px;
        margin-right: 9px;
        padding-left: 6px;
    }  
}
@media screen and (max-width:425px){
    .fo{
        display: none;
    }
    .fo2 {
        margin-top: 20px;
    }
}