@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Roboto+Flex:opsz,wght@8..144,600&family=Rubik:wght@800&display=swap');

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    font-family: 'Roboto Flex', sans-serif;
    min-width: 100vw;
    min-heght: 100vh;
    overflow: hidden;



}

/* __________________Grid_Layout____________________ */






.main {
    grid-area: 1 / 2 / 2 / 3;
    overflow-y: scroll;
    overflow-x: hidden;

    height: 93vh;



    /* width: 85vw;
    height: 90vh; */
    background-color: black;
}

.main::-webkit-scrollbar {
    width: 10px;
    border-radius: 10px;


}

.main::-webkit-scrollbar-track {
    background: rgb(28, 23, 47);
    background: -moz-linear-gradient(175deg, rgba(28, 23, 47, 0.7654412106639531) 0%, rgba(23, 14, 52, 0.9839286056219363) 100%);
    background: -webkit-linear-gradient(175deg, rgba(28, 23, 47, 0.7654412106639531) 0%, rgba(23, 14, 52, 0.9839286056219363) 100%);
    background: linear-gradient(175deg, rgba(28, 23, 47, 0.7654412106639531) 0%, rgba(23, 14, 52, 0.9839286056219363) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1c172f", endColorstr="#170e34", GradientType=1);


}

.main::-webkit-scrollbar-thumb {
    background-color: #b3b3b367;

}

.menu {
    grid-area: 1 / 1 / 2 / 2;
    background-color: #121212;

}

.player {
    grid-area: 2 / 1 / 3 / 3;
    background-color: #171818;

    position: sticky;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    border-top: 0.5px solid rgba(255, 255, 255, 0.1);

}

.grid-container {
    display: grid;
    justify-content: center;

    grid-template-columns: 0.16fr 1fr;
    grid-template-rows: 1fr 0.34fr;
    /* grid-template-areas:
        "sidebar top top top"
    "sidebar main "
    "player player ";
    */
}

/* ____________________Sidebar_________________ */

.menu {
    display: flex;
    flex-direction: column;

}

.logo {
    display: flex;
    justify-content: left;
    margin-left: 20px
}

.logo img {
    filter: invert(100%);
    padding: 30px 0;
    width: 65%;
}

.logo img:hover {
    cursor: pointer;
}

.menulist {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 15px;
    color: black;
    margin: 0 24px;
    padding-bottom: 15px;
    filter: invert(70%);
}

.menulist:hover {
    cursor: pointer;
    filter: invert(100%);
}

.playlist {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 15px;
    color: #b3b3b3;
    margin: 0 24px;
    padding-top: 30px;
}



.playlist img {
    /* filter: invert(100%); */
    border: 2px solid #b3b3b3;
    background-color: #b3b3b3;
    padding: 5px;
    border-radius: 3px;
}

.playlist:hover {
    color: white;
    cursor: pointer;
}

.playlist:hover img {
    border: 2px solid white;
    background-color: white;
}

.liked {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 15px;
    color: #b3b3b3;
    margin: 0 24px;
    padding: 12px 0;
    border-bottom: 0.1px solid rgba(255, 255, 255, 0.1);
}

.liked:hover {
    cursor: pointer;
    color: white;
}



.liked img {
    padding: 7px;
    border-radius: 3px;
    filter: invert(90%);
    background: rgb(191, 237, 68);
    background: -moz-linear-gradient(90deg, rgba(191, 237, 68, 1) 0%, rgba(149, 158, 79, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(191, 237, 68, 1) 0%, rgba(149, 158, 79, 1) 100%);
    background: linear-gradient(90deg, rgba(191, 237, 68, 1) 0%, rgba(149, 158, 79, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#bfed44", endColorstr="#959e4f", GradientType=1);
    background
}

.liked:hover img {
    filter: invert(100%);
}


/* ________________Main___________ */

/* _____________Top Section______________ */

.top {
    background: rgb(63, 57, 81);
    background: -moz-linear-gradient(175deg, rgba(63, 57, 81, 1) 0%, rgba(61, 54, 98, 1) 25%, rgba(28, 23, 47, 0.9783263647255778) 79%);
    background: -webkit-linear-gradient(175deg, rgba(63, 57, 81, 1) 0%, rgba(61, 54, 98, 1) 25%, rgba(28, 23, 47, 0.9783263647255778) 79%);
    background: linear-gradient(175deg, rgba(63, 57, 81, 1) 0%, rgba(61, 54, 98, 1) 25%, rgba(28, 23, 47, 0.9783263647255778) 79%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3f3951", endColorstr="#1c172f", GradientType=1);
}


.flextop {
    display: flex;
    padding-top: 65px;
    padding-left: 32px;
    padding-bottom: 25px;
    gap: 20px;
}

.flextopimg {
    display: inline;
    margin-right: -70px;
}

.flextopimg img {
    width: 75%;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.5);
}

.textbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    font-family: 'Poppins', sans-serif;
    padding-top: 70px;
}

.textbox h1 {
    font-size: 5.5em;
    font-weight: bold;
    letter-spacing: -6px;
}

/* __________________Bottom Section_______________ */

.songcontainer {
    height: 95vh;
    background: rgb(35, 32, 84);
    background: -moz-linear-gradient(178deg, rgb(46, 44, 91) 0%, rgba(29, 28, 53, 1) 25%, rgba(0, 2, 8, 1) 65%);
    background: -webkit-linear-gradient(178deg, rgb(46, 44, 91) 0%, rgba(29, 28, 53, 1) 25%, rgba(0, 2, 8, 1) 65%);
    background: linear-gradient(178deg, rgb(34, 33, 56) 0%, rgba(29, 28, 53, 1) 25%, rgba(0, 2, 8, 1) 65%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#232054", endColorstr="#000208", GradientType=1);
}

/* _____________Play Button__________________ */

.ply i {

    color: #1ed760;
    font-size: 56px;
    padding: 15px;
    margin: 6px 27px;
    margin-bottom: -20px;
}

.ply i:hover {
    transform: scale(1.02);
}

/* ______________Songs Track List_____________ */
.track-list {
    display: inline-block;
    margin: 0 32px;
    color: #b3b3b3;
    align-self: center;
    overflow: hidden;


}

tr {
    font-size: 13px;
    letter-spacing: 1.5px;
    text-align: left;
    padding: 0 50px;
}

th {
    border-bottom: 0.1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 4px;
}

.head1 {
    padding-left: 10px;
}

.numberlist {
    text-align: center;
}

.durationicon {
    filter: invert(70%);
}



td {
    padding: 10px 0;
    color: #b3b3b3;
}

.svg1 {
    filter: invert(66%) sepia(65%) saturate(566%) hue-rotate(85deg) brightness(91%) contrast(94%);
}

.title {
    display: flex;
    justify-content: left;
    align-items: center;
}

.cover1 {
    width: 45%;
}

.songdetails {
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.songdetails h3 {
    color: white;
}

table {
    padding: 20px 0;
    border-spacing: 0 10px;
    width: 80vw;

}

td:first-child {
    border-radius: 5px 0 0 5px;
}

td:last-child {
    border-radius: 0 5px 5px 0;
}

tbody tr:hover {
    background: rgba(41, 63, 87, 0.4);
    border: 2px solid rgba(41, 63, 87, 0.4);
    cursor: default;
}


tbody tr:hover:active {
    transition: ease;
    background: rgba(113, 113, 113, 0.586);
}

.playing h3,
.playing .numberlist {
    color: #1ed760;
}


/* _________________Player Start_______________ */

.player {
    display: flex;
}

.player>* {
    flex-basis: 100%;
}

/* _____________Current Playng Track__________ */

.details {
    display: flex;
    justify-content: left;
    align-items: center;
    color: #b3b3b3;
    padding-left: 6px;
    column-gap: 35px;
}

#details1 {
    display: flex;
    justify-content: left;
    align-items: center;
    color: #b3b3b3;
    font-size: 12px;
    column-gap: 8px;
}

.trackart img {
    width: 32px;
    height: 32px;
}

#gif {
    filter: invert(91%);
    opacity: 0;
    transition: opacity 0.4s ease-in;
}



/* _________________Player buttons______________ */

.buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.p-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    /* margin-left: 25px; */
}

.p-icons i {
    font-size: 20px;
    margin: 0 14px;
    color: #b3b3b3;
}



.p-icons i:hover {
    color: white;
}

#playpause_btn {
    font-size: 30px;
    padding: 2px;
    align-self: center;
    color: white;

}

#playpause_btn:hover {
    transform: scale(1.1);
}

/* _______handle progressbar___________ */

.slider_container {
    display: flex;
    justify-content: center;
    color: #b3b3b3;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    gap: 10px;
}

.seekbar-container {
    width: 35vw;
    height: 4px;
    background: #656565;
    border-radius: 4rem;
    margin-top: 8px;
}

.seekbar {
    position: relative;
    height: inherit;
    width: 0%;
    border-radius: inherit;
    background: white;
}

.seekbar-container:hover .seekbar {
    background: #1ed760;
}

.seekbar::before {
    content: "";
    position: absolute;
    height: 12px;
    width: 12px;
    border-radius: inherit;
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
    background: white;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.seekbar-container:hover .seekbar::before {
    opacity: 1;
}

/* ___________Handle volume div________ */

.psection3 {
    display: flex;
    justify-content: right;
    align-items: center;
    margin-right: 10px;
    gap: 15px;
}

.psection3 i {
    color: #b3b3b3;
}

.vhover {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.vhover:hover progress::-webkit-progress-value {
    background-color: #1ed760;
}

.vhover:hover input::-webkit-slider-thumb {
    opacity: 1;
}

.vhover i:hover {
    color: white;
}



#giif {
    justify-content: left;
    margin-right: 70px;
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

.slider {
    position: relative;
    width: 110px;
    height: 3px;

}

.slider input {
    position: absolute;
    left: -6px;
    top: 0;
    width: 100px;
    height: 3px;
    -webkit-appearance: none;
    background-color: transparent;
    z-index: 99;
}

.slider input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: white;
    opacity: 0;
}

.slider input:hover::-webkit-slider-thumb {
    opacity: 1;
}

.slider progress {
    width: 90px;
    height: 3px;
    position: absolute;
    -webkit-appearance: none;
    top: 0;
    left: 0;
    border-radius: 10px;
    overflow: hidden;
}

.slider progress::-webkit-progress-bar {
    background-color: #656565;
}

.slider progress::-webkit-progress-value {
    background-color: white;
}

.slider:hover progress::-webkit-progress-value {
    background-color: #1ed760;
}



/* ____________Player End____________ */


/* ______________Media Queries____________  */

@media (min-width: 833px) and (max-width: 1440px) {
    .grid-container {
        grid-template:
            100vh
            15vh / 16vw;
    }

    h3,
    h4 {
        font-size: 1em;
    }

    .liked span,
    .playlist span {
        font-size: 0.8em;
    }

    .textbox h1 {
        font-size: 4.3em;
    }

    .details {
        padding-left: 24px;
    }

    table {
        width: 79vw;
    }
}