style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
    list-style: none;
    text-decoration: none;
}

body{
    background-color: rgb(38, 31, 41);
    color: rgb(128, 128, 128);
    display: flex;
}

nav{
    background-color: rgb(24, 26, 34);
    border-right: 1px solid rgb(128, 128, 128);
    height: 100vh;
    /* padding:2rem; */
    width: 15%;   
}

.personal,
.app{
    padding: 2rem 2rem 0 2rem;
}

.app h2,
.personal h2{
    font-weight: 100;
    font-size: 1.1rem;
}



.app ul li a,
.personal ul li a,
.create-playlist a{
    margin:0.3rem 0;
    display: inline-block;
    width: 100%;
    /* background-color: rgb(89, 89, 243); */
    color:rgb(128, 128, 128);
    /* color: white; */
}

.app ul li a i,
.personal ul li a i,
.create-playlist a i{
    margin:1rem 1.2rem;
    transition: all 0.3s ease;
}

.create-playlist{
    margin:0 2rem;
    transform: translateY(200px);
}

.app ul li a:hover,
.personal ul li a:hover,
.create-playlist a:hover{
    background-color: rgb(89, 89, 243);
    box-shadow: 0 0 10px rgba(89,89,243,0.4);
    border-radius: 0.3rem;
    color:#fff;
}

.play-control{
    transform: translateY(235%);
    height:10%;
    display:flex;
    align-items: center;
    justify-content: space-around;
    background-color:black;
}

.play-control i{
    cursor:pointer;
    font-size: 1.5rem;
}

.play-control .pause{
    color:white;
}

.play-control .backward,
.play-control .forward{
    color:rgba(255, 255, 255, 0.63);
}

/* right side  */
.left i,
.right i{
    margin: 0 1rem;
    cursor: pointer;
}

.search-container{
    /* background-color:grey */
    height:5vh;
    display: flex;
    padding:0 7rem;
    align-items: center;
    width: 100%;
}

.searchBar{
    margin-left: 2.2rem;
    margin-right: 25rem;
    background-color: rgb(38, 31, 41);
    width:60%;
    padding: .125rem;
    height:70%;
}

.searchBar_search{
    cursor: pointer;
    margin:1rem;
}


.searchBar_input{
    background-color:rgb(38, 31, 41);
    color:rgb(128, 128, 128);
    border:none;
    outline: none;
    font-size: 1.2rem;
    width:80%;
}

.login{
    margin-right: 2rem;
}

.explore-new{
    /* background-color:red; */
    margin:2rem 0 ;
    padding-left: 8rem;
}

.explore-new h2{
    margin: 1rem 0;
    font-family: 'Montserrat', sans-serif;
    letter-spacing:2px;
    color: white;
}

.explore-new h3{
    color: white;
    font-weight: 300;
    font-family: 'Montserrat', sans-serif;
}

.explore-new h4{
    font-weight: 100;
}

.cards{
    display:flex;
}

.cards .card{
    margin-right:3rem ;
}

.cards .card img{
    width:180px;
    height:180px;
    border-radius: 20px;
    box-shadow: 0 1px 10px rgba(179, 159, 159, 0.2); 
}

.popular_mood{
    display:flex;
}

.popular{
    margin-left: 8rem;
    /* background-color: red; */
    width: 45%;
}

.popular h2{
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 1rem;
    color: white;
    letter-spacing: 2px;
}

.popular__card{
    background-color:rgb(56, 40, 63);
    border-radius: 7px;
    margin-bottom:1rem;
    display:flex;
    align-items: center;
}

.popular__card img{
    margin: 5px 5px 5px 20px;
    width:40px;
    height: 40px;
    border-radius: 7px;
}

.popular__card .sl_no{
    color:rgba(255, 255, 255, 0.801);
    margin: 1rem;
    font-size: 1.2rem;
}

.popular__card .song_name{
    margin:0 20rem 0 2.2rem;
    color:rgba(255, 255, 255, 0.712);
}

.popular__card .song_duration{
    margin:0 2rem;
}

.popular__card .song_more{
    color: rgba(255, 255, 255, 0.795);
    cursor:pointer;
}

.mood{
    margin-left: 4rem;
    /* background-color: red; */
    width:45%;
}

.mood h2{
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 1rem;
    color: white;
    letter-spacing: 2px;
}

.mood .row-1,
.mood .row-2{
    display: flex;
    flex-direction: row;
    width:100%;
    height:45%;
}


.mood .mood-card{
    background-color:rgb(56, 40, 63);
    color:rgba(255, 255, 255, 0.829);
    display:flex;
    height: 90%;
    border-radius: 0.5rem;
    width:45%;
    margin: 0 1.5rem 1.5rem 0;
    align-items: center;
    justify-content: center;
}

.song-control {
    display:flex;
    align-items: center;
    justify-content:space-around;
    transform: translateY(40px);
    height: 10%;
    width:109%;
    background-color:black;
}

.song-control i{
    font-size:1.5rem;
}

.song-control .song-control-detail {
    display: flex;
    align-items:center; 
    justify-content: space-around;
}

.song-control img{
    height: 50px;
    width: 50px;
    margin: 0 1rem;
    border-radius: 0.5rem;
}

.song-control-detail .song-details h3{
    color: white;
    font-size:1rem;
    font-family:'Ubuntu',sans-serif ;
    letter-spacing:2px;
}

.song-control-detail .song-details h4{
    font-size:0.7rem;
}

.song-control .song-control-detail span{
    margin: 0 2rem;
}

.song-control .song-duration-covered{
    height: 0.3rem;
    width: 600px;
    border-radius:1rem ;
    background-color:rgb(89, 89, 243);
    box-shadow: 0 0 10px 0.5px rgb(89, 89, 243);
}
.song-control .song-duration{
    width: 300px;
    border-radius:1rem;
    background-color:grey;
    height: 0.3rem;
}