@import url('https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Varela+Round&display=swap');

body {
     background-color: antiquewhite;
     font-family: 'Varela Round', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ✅ Navigation */
nav {
     font-family:'Ubuntu',sans-serif; 
}

nav ul {
     display:flex;
     align-items: center;
     justify-content: space-between;
     list-style-type:none;
     height:65px;
     background-color:black;
     color:white;
     padding: 0 15px;
}

nav ul li {
    padding: 0 10px;
}

.brand img {
     width:44px;
     margin-right:10px;
}

.brand {
     display: flex;
     align-items: center;
     font-weight: bold;
     font-size:1.3rem;
}

/* ✅ Main Layout */
.container {
     background-color:black;
     min-height:75vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.6s ease-in-out;
     color:white;
     display: flex;
     margin:23px auto;
     width:70%;
     border-radius:12px;
     padding:30px;
     gap:20px;
     flex-wrap: wrap;
}

/* ✅ Songs List */
.songList {
     flex: 1 1 350px;
}

.songItemContainer {
     margin-top: 40px;
     width:50%;
}

.songItem {
   height:50px;
   display:flex;
   background-color:white;
   color:black;
   margin:12px 0;
   align-items:center;
   justify-content:start;
   gap:16px;
   border-radius:34px;
   padding: 0 15px;
   font-size:12px;
}

.songItem img {
   width: 45px;
   height: 45px;
   object-fit: cover;
   border-radius: 34px;
}

/* ✅ Player Bar */
.bottom {
     position: sticky;
     bottom: 0;
     width:100%;
     height:auto;
     background-color:rgb(44, 8, 8);
     padding: 15px 0;
     display:flex;
     justify-content:center;
     align-items:center;
     flex-direction:column;
}

#myProgressBar {
     width: 90%;
     cursor:pointer;
}

.icons {
     margin-top:15px;
}

.icons i {
    cursor:pointer;
    color: white;
    font-size: 36px;
    margin: 0 8px;
}

.songInfo {
     color:white;
     margin-top:10px;
     font-size:14px;
     text-align:center;
}

.songInfo img {
     opacity:0;
     transition:opacity 0.4s ease-in;
     margin-right:8px;
}

/* ✅ Responsive Design Below */
@media (max-width: 1000px) {
    .container {
        width: 90%;
        padding: 20px;
    }
}

@media (max-width: 600px) {
    nav ul {
        flex-direction: column;
        height: auto;
        padding: 10px 0;
    }

    .brand {
        margin-bottom: 8px;
    }

    .bottom {
        padding: 10px 0;
    }

    .icons i {
        font-size: 28px;
    }

    .songItem {
        padding: 0 10px;

    }

    #myProgressBar {
        width: 95%;
    }
}

@media (max-width: 900px) {
    .brand {
        font-size: 1.1rem;
    }

    .songItem img {
        width: 35px;
        height: 35px;
    }

    .songItemContainer {
       width:100%;
    }

    .icons i {
        font-size: 24px;
    }
}