* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "poppins", sans-serif;
}

:root {
    --headerFont: 16px;
    --mainFont: 16px;
    --footerFont: 16px;
    --searchFont: 16px;
    --libFont: 16px;
    --audioFont: 16px;
}

html {
    font-size: 16px;
}

body {
    width: 100%;
    height: 100dvh;
    background-color: black;
    color: white;
    padding: 0px 8px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 64px auto;
    grid-template-rows: min-content 1fr min-content;
}

.header {
    font-size: var(--headerFont);
    display: flex;
    width: 100%;
    height: 4em;
    align-items: center;
    justify-content: space-between;
    padding: .5em 1.375em;
}

.header .leftHead {
    font-size: var(--headerFont);
    display: flex;
    align-items: center;
    gap: 1.625rem;
}

.leftHead .libButton {
    font-size: var(--headerFont);
    width: 2em;
    height: 2em;
    display: none;
}

.leftHead .spotify {
    font-size: var(--headerFont);
    width: 2em;
    height: 2em;
    filter: invert(1);

}

.leftHead .home {
    font-size: var(--headerFont);
    height: 1.75em;
    width: 1.75em;
}


.input {
    display: flex;
    align-items: center;
    position: relative;
    outline: none;
}

.input input {
    width: 29.625em;
    height: 3em;
    background-color: black;
    /* border: 2px solid white; */
    transition: all;
    transition-duration: 100ms;
    transition-delay: 0s;
    transition-timing-function: linear;
    border-radius: 100em;
    padding: .75em 0px .75em 3em;
    box-sizing: border-box;
    /* outline: none; */
    font-size: var(--searchFont);

}

.input input:hover {
    border: .1px solid rgba(255, 255, 255, 0.194);
    background-color: rgba(255, 255, 255, 0.178);
}

.input input::placeholder {
    font-size: var(--searchFont);

    color: rgba(255, 255, 255, 0.523);
}

.input .search {
    font-size: var(--searchFont);
    width: 1.875em;
    /* height: 32px; */
    position: absolute;
    left: .8125em;
    filter: opacity(.5);
}

.input .baseline {
    font-size: var(--searchFont);
    width: 1.5em;
    /* height: 21px; */
    filter: invert(1);
    position: absolute;
    right: 1em;
}

.rightHead {
    font-size: var(--headerFont);
    display: flex;
    align-items: center;
    height: inherit;
    gap: 1.75em;

}

.rightHead span {
    font-size: var(--headerFont);
    color: rgba(255, 255, 255, 0.666);

    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .625em;
}

.rightHead span img {
    font-size: var(--headerFont);
    width: 1.25em;
    filter: opacity(.7);
}

.rightHead .bell {
    font-size: var(--headerFont);
    width: 1.375em;
    filter: opacity(.7);
}

.rightHead .counity {
    width: 1em;
    font-size: var(--headerFont);
    filter: invert(1) opacity(.7);
}

.rightHead .circle {
    font-size: var(--headerFont);
    width: 2em;
    height: 2em;
    background-color: lightgreen;
    border-radius: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
}



main {
    font-size: var(--libFont);
    display: flex;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: min-content 1fr;
    height: calc(100dvh - 121.67px);
    overflow: hidden;
}

.yourLibrary {
    font-size: var(--libFont);
    width: 18.75em;
    padding: 0px 1em;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(3, min-content) minmax(6.75em, 17.375em);
    gap: 1.25em;
    height: 100%;
    grid-row: 1/2;
    grid-column: 1/2;
    z-index: 100;
    background-color: black;
    height: inherit;
}

.lib {
    font-size: var(--libFont);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75em 0;

}

.lib span {
    font-size: var(--libFont);
    font-weight: 800;
    text-transform: capitalize;
    margin-left: .625em;
}

.lib div {
    font-size: var(--libFont);
    display: flex;
    align-items: center;
    gap: 1em;
}

.lib div .play {
    font-size: var(--libFont);
    width: 2.75em;
    filter: opacity(.7);

}

.lib div .expand {
    font-size: var(--libFont);
    width: 1.25em;
    filter: opacity(.7);
}

.artist {
    font-size: var(--libFont);
    display: flex;
    gap: .625em;
}

.artist span {
    font-weight: 500;
    border-radius: 12.5em;
    background-color: rgba(255, 255, 255, 0.18);
    /* color: white; */
    padding: .3125em .8125em;
    font-size: var(--libFont);
}

.recent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.recent>img {
    font-size: var(--libFont);
    width: 1.5em;
    filter: opacity(.7);
    position: relative;
    top: .125em;
}

.recent span {
    display: flex;
    align-items: center;
    font-size: var(--libFont);
    filter: opacity(.7);
    /* gap: 30px; */
}

.recent span img {
    width: 1.5em;
    font-size: var(--libFont);

}

.tabs {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

}

.tabs .tab {
    display: flex;
    gap: .625em;
    font-size: var(--libFont);

}

.cover img {
    font-size: var(--libFont);
    width: 3em;
    height: 3em;
    border-radius: .125em;
    object-fit: cover;
    object-position: center;
}

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

}

.detail1 {
    font-size: var(--libFont);
    font-weight: 400;
    text-transform: capitalize;

}

.detail2 {
    font-size: (.8125 * var(--libFont));
    color: white;
    filter: opacity(.7);
    font-weight: 500;
}

.detail2>img {
    font-size: var(--libFont);
    width: .8125em;
    margin-right: .3125em;
    filter: invert(1) opacity(100%);
}

.audios {
    font-size: var(--audioFont);
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    height: inherit;
    overflow-y: auto;
    gap: 1.625em;
    padding: 1.25em;
    align-content: start;
    position: relative;
    padding-top: 2.5em;

    /* z-index: -1; */
}

.libName {
    /* content: "kiddan"; */
    color: white;
    font-size: 1.3rem;
    position: absolute;
    left: .5em;
    text-transform: capitalize;
    top: .25em;
    font-weight: 600;
}

.song {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: fit-content;
    width: min-content;
    /* gap: 10px; */

}

.song>img {
    font-size: var(--audioFont);
    width: 8.125em;
    height: 8.125em;
    border-radius: .625em;
    object-fit: cover;
    object-position: center;
}


.song span {
    font-size: .7rem;
    opacity: .7;
    text-transform: capitalize;
    text-align: center;
}

.song>.s1 {
    font-size: 1rem;
    opacity: 1;
    color: white;
}




.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.currentSong {
    font-size: var(--footerFont);
    display: flex;
    align-items: center;
    gap: .3125em;
    width: 13.75em;
    /* align-self: flex-start; */
}

.currentSong .tab {
    font-size: var(--footerFont);
    display: flex;
    gap: .625em;

}

.cover1 img {
    font-size: var(--footerFont);
    width: 3em;
    height: 3em;
    border-radius: .125em;
    object-fit: cover;
    object-position: center;
}

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

}

.info1 {
    font-size: var(--footerFont);
    font-weight: 400;

}

.info2 {
    font-size: calc(.8125 * var(--footerFont));
    color: white;
    filter: opacity(.7);
    font-weight: 500;
}

.info2>img {
    font-size: var(--footerFont);
    width: .81255em;
    margin-right: .3125em;
    filter: invert(1) opacity(100%);
}


.timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3125em;
    font-size: var(--footerFont);
    /* align-self: center; */
}

.timeline .songName {
    font-size: 10px;
    width: 139px;
    word-break: initial;
    height: 13px;
    /* overflow-x: hidden; */
    text-align: center;
    overflow: hidden;
    opacity: .7;
    display: none;
    letter-spacing: 2px;
    text-transform: capitalize;
}

.timeline .controls {
    font-size: var(--footerFont);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .8125em;
    cursor: pointer;
}

.controls>img {
    font-size: var(--footerFont);
    width: 1.875em;
    filter: opacity(.7);
}

.pause {
    font-size: var(--footerFont);
    width: 2em;
    height: 2em;
    background-color: white;
    border-radius: 10em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pause img {
    font-size: var(--footerFont);
    font-size: var(--footerFont);
    filter: invert(1);
    width: 1.875em;
}

.time {
    font-size: var(--footerFont);
    display: flex;
    align-items: center;
    gap: .625em;
    font-size: .875em;
    justify-content: center;
}

.time span {
    opacity: .7;
}

.time input {
    font-size: var(--footerFont);
    appearance: none;
    width: 21.875em;
    height: .3125em;
    background-color: rgba(255, 255, 255, 0.518);
    outline: none;
    /* opacity: .5; */
}

.time input::-webkit-slider-thumb {
    font-size: var(--footerFont);
    -webkit-appearance: none;
    appearance: none;
    width: 1em;
    height: 1em;
    border-radius: 6.25em;
    background: white;
    cursor: pointer;
    opacity: 100%;
    filter: opacity(1);
    cursor: pointer;
}

.volume {
    font-size: var(--footerFont);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .625em;
    /* align-self: end; */
}

.volume>img {
    font-size: var(--footerFont);
    width: 1.5em;
    opacity: .7;
}

.vol {
    display: flex;
    align-items: center;
    position: relative;
}

.volume .vol input {
    font-size: var(--footerFont);
    appearance: none;
    outline: none;
    width: 6.25em;
    height: .3125em;
    background-color: rgba(255, 255, 255, 0.486);
    /* opacity: .5; */
}

.vol input::-webkit-slider-thumb {
    font-size: var(--footerFont);
    -webkit-appearance: none;
    width: .625em;
    height: .625em;
    color: white;
    background-color: white;
    border-radius: 10px;

}

.displayFlex {
    display: flex;
}

.libClick {
    background-color: #474747;
}

















@media screen and (max-width:940px) {
    .vol input {
        position: absolute;
        top: -69px;
        right: -28px;
        transform: rotateZ(-90deg);
        display: none;
    }

    :root {
        --footerFont: 13px;
        --headerFont: 13px;
        --searchFont: 12px;
        --libFont: 12px;
        --audioFont: 10px;
    }

    main {
        height: calc(100dvh - 99.3958px);
    }


}

@media screen and (max-width:750px) {
    .rightHead>span {
        display: none;
    }

    .miniplayer,
    .devices {
        display: none;
    }

    .currentSong,
    .currentSong .tab,
    .cover1 img,
    .info,
    .info1,
    .info2,
    .info2>img {
        font-size: 10px;
    }
}

@media screen and (max-width:590px) {
    :root {
        --searchFont: 9px;
        --footerFont: 9px;
        --headerFont: 12px;
        --libFont: 9px;
        --audioFont: 15px;
    }


    main {
        height: calc(100dvh - 133.3125px);
        grid-template-columns: 1fr;
    }

    .yourLibrary {
        display: none;
    }
}

@media screen and (max-width:500px) {
    :root {
        --searchFont: 9px;
        --footerFont: 19px;
        --headerFont: 21px;
        --libFont: 19px;
        --audioFont: 15px;
    }

    .currentSong,
    .currentSong .tab,
    .cover1 img,
    .info,
    .info1,
    .info2,
    .info2>img {
        font-size: 7px;
    }

    .input input {
        width: 24em
    }

    .time input {
        width: 72%;
    }

    .header .leftHead {
        gap: .7em;
    }


    .timeline .songName {
        display: block;
    }

    .leftHead .libButton {
        display: flex;
    }

    main {

        height: calc(100dvh - 171.5417px);
    }

    .currentSong {
        display: none;
    }

    .footer {
        justify-content: center;
    }
    .timeline{
        width: 100%;
    }
    .time {
        width: 100%;
    }

    .leftHead .input {
        display: none;
    }

    .volume {
        display: none;
    }

    .audios {
        grid-row: 1/2;
        grid-column: 1/2;
    }
}