second.css

html{
    background-color: #0c1027;
 }
 body{
    height: 84vh;
    overflow: hidden;
}

/* Navigation-bar */

.nav-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    }
    .features{
        width:200px;
        transition: all 0.1s ease-in-out;
        transform: scale(0.95);
    }
    .features:hover{
    transform: scale(1.1);
    }
    .features span a{
       font-family: sans-serif;
       font-size: 1.1rem;
       font-weight: 500;
    }
    .nav-bar span a{
        color:white;
        text-decoration: none;
    
    }
    .logo img{
        height:70px;
        width:80px;
    }
    .logo{
        height:50px;
        width:50px;
    }
    #nav-links{
        display: flex;
        list-style:none;
        align-items: center;
    }
    #nav-links li a{
        display: inline-block;
      padding: 10px 60px;
      text-decoration: none;
      color: white;
      font-size: 2rem;
    }
    .fa-bell{
        font-size:1.5rem;
        animation: fadeIn 1s ease-in-out infinite alternate ;
    }
    @keyframes fadeIn {
        from{
            opacity: 0%;
        }
        to{
            opacity: 100%;
        }
    }
    #search-box{
        padding:5px 20px;
        border-radius: 7%;
        margin:0px 70px;
        background-color: #12193e;
        color: white;
        width: 230px;
    }

    /* Main */
    main{
        margin-top: 2.5%;
        display: flex;
        flex-direction: row;
        width: 100%;
        height:84.8vh;
        box-sizing: border-box;
        padding: 0 4%;
        justify-content: space-evenly;

    }
    .section1{
        width:67%;
    }
    .section2{
        width:25%;
    }

    /* Section-1 */
    .about{
        background-color: #141b41;
        width: 100%;
        height: 50%;
        box-shadow: 0px 0px 12px 0.1px rgb(141, 140, 140);
        display: flex;
        justify-content: space-between;

    }
    .image{
        height: 100%;
        width: 40%;
        background-image: linear-gradient(  transparent, rgb(101, 106, 138) ),url(https://i.pinimg.com/564x/3f/1c/53/3f1c5344b693a035352806504c45e624.jpg);
        background-size: cover;
    }
    .details{
        width:55%;
        color: white;
        font-family: "Segoe UI", Arial, sans-serif;
    }
    .jumbotron-detail {
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        /* padding-right: 12px; */
    }
    /* descriptive part contains the descripton of the song and action part contains the follow and play buttons */
.descriptive-part,
.action-part {
	width: 100%;
	height: max-content;
}
/* follower count */
/* self explanatory */
.author {
	font-size: 1.5vw;
}
/* description of the jumbotron */
.desc {
	font-size: 1vw;
}
/* action part */
/* .action-part {
	padding-top: 2vw;
} */
.action-part p {
	font-size: 1vw;
}
 .details p{
        margin:0;
    }
    .song-name-main{
        font-size: 1rem;
    }
    .btns{
        margin-top: 2.5%;
    }
    .btns > button {
        border: 0px;
        height: 3vw;
        width: 10vw;
        color: white;
        font-size: 1.2vw;
    }
    /* play button */
    .btns > button:nth-child(1) {
        background-image: linear-gradient(-19deg, red 0%, blue 100%);
    }
    /* follow button */
    .btns > button:nth-child(2) {
        background-color: transparent;
    }


    /* Queue */
    .queue-list{
        margin-top: 2%;
        color: white;
        height: auto;
        overflow: scroll;
        height:48%;
    }
    .queue-list::-webkit-scrollbar{
        display: none;
    }
    .left{
        margin:auto 0;
        margin-left: 1%;
        width: 200px;
        display: flex;
        justify-content: space-between;
    }
    .song-card{
        display: flex;
        justify-content: space-between;
        margin: 1% 2% 2% 2%;
        height:70px;
        box-shadow: 0px 0px 12px 0.1px rgb(129, 222, 245);
        transition: all 0.2s ease-in-out;
    }
    .song-card:hover{
        transform: scale(1.01);
        box-shadow: 0px 0px 12px 0.1px rgb(129, 222, 245);
        cursor: pointer;
    }
    .song-image{
        margin:auto 0;
    }
    .song-image img{
        height: 50px;
        width: 50px;
       
    }
    .song-number{
        margin:auto 0;
        margin-left: 1.5%;
    }
    .song-number a{
        color: white;
        text-decoration: none;
        font-family: monospace;
    }
    .song-name{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    .song-name a{
        text-decoration: none;
        color: white;
        font-family: monospace;
        font-size:0.9rem;
       
    }
    .like{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: auto 0;
        margin-right: 3%;
        width:15%;
    }
    .like a i{
        color: white;
        font-size: 1.2rem;
        transition: all 0.1s ease-in-out;
        margin:0 5%;
    }
    .like a i:hover{
        color: rgb(172, 2, 2);
      transform: scale(1.2);
    }

    /* section-2 */
    .similar-artist{
        width: auto;
        height: 50%;
    }
    .header{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color:white;
        width:90%;
        padding-left:2% ;
    }
    .header h4{
        font-size: 1.2rem;
        font-family: monospace;
        font-weight: 600;
        margin:0;
    }
    .card-container{
        display: flex;
        flex-wrap: wrap;
        margin-top: 5%;
        justify-content: space-between;
        width: auto;
        height: auto;
        overflow: scroll;
        height:90%;
    }
    .card-container::-webkit-scrollbar{
        display: none;
    }
    .card {
        display: flex;
        width: auto;
        color: white;
        margin:2% 2% 2% 2%;
        transition: all 0.3s ease-in-out;
        box-shadow: 0px 0px 12px 0.1px rgb(2, 82, 148);
        transform: scale(0.95);

    }
    .card:hover{
        transform: scale(1);
    }
    .card-name{
        width:50%;
        margin-right:70px ;
        margin-left: 10px;
        margin-bottom: 0px;
        margin-top: 20px;
    }
    .card-time{
        font-size:0.8rem !important;
        margin-top: 30px;
    }
    
    .text{
        font-family: monospace;
        font-size: 1rem;
    }
    .date{
        margin:-20px 0px 0px 10px;
        font-family: sans-serif !important;
        font-size:0.65rem !important ;
    }
    .card-container>div>img{
        height:90px;
        width: 90px;
    }
    .card-info{
        display: flex;
        flex-wrap: wrap;
    }
    .header select{
        background-color:Transparent;
        border: none;
        color: white;
    
    }
    .header select option{
        background-color:white;
        color: black;
    }


    .recently-played{
        width:auto;
        height:90%;
    }

    .recently-container{
        margin-left: 2%;
        width:90%;
        overflow: scroll;
        display: flex;
        flex-direction:column ;
        margin-top: 5%;
        justify-content: space-between;
        overflow: scroll;
        height:90%;
    }
    .recently-container::-webkit-scrollbar{
        display: none;
    }
    .recently-left{
        margin:auto 0;
        margin-left: 1%;
        width: 65%;
        display: flex;
        justify-content: space-between;
    }
    .space{
        margin-bottom:5%;
    }
    .recently{
        margin-top: 8%;
    }