@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap');
body{
    background-color:rgb(35, 35, 35);
    margin:0;
    padding:0;
    height:100%;
    overflow: scroll;
}
li{
    color:white;
    cursor:pointer;
    list-style-type:none;
    margin-right:30px;
    margin-left:0;
}
#navbar{
    display:flex;
    align-items: center;
    justify-content:left;
    margin-left:0;
    font-family:Familjen Grotesk;
}
#searchbar{
    height:40px;
    width:400px;
    border-radius: 15px;
    border:1px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left:150px;
}
#input_box{
    color:rgb(255, 255, 255);
    background-color:rgb(35, 35, 35);
    width:300px;
    border:none;
    border-radius:15px;
    height:35px;
    font-size:19px;
    font-family:Afacad Flux;
    margin-left:10px;
}
#input_box:focus{
    outline:none;
}
#profile{
    height:40px;
    width:40px;
    border:none;
    border-radius:50%;
    background-color: rgb(71, 144, 228);
    color:black;
    display:flex;
    font-size:20px;
    font-family:Familjen Grotesk;
    align-items: center;
    justify-content: center;
}
#Premium{
    height:35px;
    width:150px;
    display:flex;
    justify-content: center;
    align-items: center;
    color:black;
    font-family:Afacad Flux;
    margin-left:30px;
    border-radius:20px;
    background-color: white;
    transition-duration:0.3s;
}
#Premium:hover{
    color:white;
    background-color: black;
    scale:1.1;

}
.banner{
    margin-left:auto;
    margin-right:auto;
    height:32vh;
    padding-left:20px;
    box-sizing: border-box;
    color:white;
    border-radius:30px;
    font-family: Familjen Grotesk;
    background: linear-gradient(45deg, #1DB954, #131514);
    width:86%;
    border:2px solid white;
}
#top_songs{
    display:flex;
    overflow: scroll;
}
.song img{
    height:150px;
    cursor: pointer;
    width:150px;
    border:2px solid black;
    border-radius:5px;
    margin-left:20px;
}
.song{
    text-align:center;
}
#a{
    height:90px;
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border:1px solid red;
    overflow:hidden;
}
.bottom{
    position:sticky;
    background: linear-gradient(90deg, #1ab54d, #131514);
    height:80px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border:1px solid white;
    border-radius:15px;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#progress_bar{
    width:80%;
    cursor: pointer;
}
#icons{
    display:flex;
    height:auto;
    width:30%;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    justify-content: center;
}
.buttons img{
    height:40px;
    width:40px;
    cursor:pointer;
    margin:0;
}
#playlist{
    height:40vh;
    width:70vw;
    overflow:scroll;
    border-radius:10px;
    padding:20px;
    margin-left:auto;
    margin-right:auto;
    margin-top:30px;
    font-family: Familjen Grotesk;
    background: linear-gradient(180deg, #1DB954, #0b0b0b);
}
#explore_all{
    background-color:white;
    color:black;
    margin-left:30px;
    display:flex;
    align-items: center;
    justify-content: center;
    border-radius:50%;
    height:120px;
    width:120px;
    margin-top:20px;
    font-size:15px;
    transition-duration:0.3s;
    cursor:pointer;
}
#explore_all:hover{
    background-color:black;
    color:white;
    scale:1.2;
}
#song1{
    display:flex;
    height:100px;
    align-items: center;
    text-align: center;
    width:100%;
    padding:5px;
    border:1px solid honeydew;
    border-radius:9px;
    transition-duration: 0.3s;
    cursor:pointer;
    margin-top:15px;
}
#song1:hover{
    box-shadow:2px 3px 2px 6px black;
    scale: 1.01;
}
#ishq_hai img{
    height:100px;
    border-radius:9px;
    width:100px;
}
#title{
    font-size:25px;
    margin-left:15px;
    color:whitesmoke;
}