:root {
    --dark: #141414;
    --light-100: #f5f5f7;
    --light-200: #cfcfcf;
    --primary-100: #3a3b4f;
    --primary-200: #5a5b70;
}

* {
    font-family: "Blinker", sans-serif;
    scroll-behavior: smooth;
}

body {
    height: 100dvh;
    background-color: var(--dark);
    color: var(--light-100);
    margin: 0; padding: 0;
    font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: center; align-items: center;
    gap: 3rem;
    padding: 0 3rem;
}

button {
    margin-bottom: .5rem;
    padding: .35rem 1rem;
}

h2 {
    font-size: 1.5rem;
    line-height: .8;
    margin: .75rem auto 0 auto;
}

h3 {
    font-size: 1rem;
    font-weight: 400;
    color: var(--light-200);
    margin: 0 auto 1.5rem auto;
}

.custom-container {
    width: min(1160px, 100% - 4rem);
    max-width: 500px;
    max-height: calc(100dvh - 6rem);
    background: var(--primary-200);
    border-radius: .75rem;
    margin: 1.5rem 0;
    overflow-y: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    position: relative;
}
.custom-container.small {
    max-width: 200px;
}
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    padding: .5rem;
}
.custom-container::-webkit-scrollbar {
    display: none;
}
.other-songs {
    display: none;
}

.topbar {
    background: var(--primary-200);
    padding-top: .75rem;
    display: flex; flex-direction: column;
    position: sticky;
    top: 0;
    z-index: 1;
}
.topbar:has(.image:hover) .loop::after {
    display: block;
}
.topbar .image {
    height: calc(100% - 1rem); aspect-ratio: 1;
    position: absolute;
    top: .5rem;
    overflow: hidden;
}
.topbar .image #image {
    height: 100%; aspect-ratio: 1;
    border-radius: .5rem;
    object-fit: cover;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    filter: brightness(75%);
}
.topbar .loop {
    width: 16px; aspect-ratio: 1/1;
    position: absolute;
    top: 0; left: 0;
}
.topbar .loop::after {
    content: url("data:image\/svg+xml,%3Csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"%23f5f5f7\" class=\"bi bi-search\" viewBox=\"0 0 16 16\"><path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0\"/%3E%3C/svg%3E ");
    display: none;
    width: 100%; aspect-ratio: 1/1;
    margin: auto;
    cursor: pointer;
}
.topbar #mobileOnclick {
    display: none;
}
.topbar .gradient-top {
    position: absolute;
    top: 100%; left: 0;
    width: 100%; height: 50%;
    background: linear-gradient(180deg, var(--primary-200), transparent);
    z-index: 1;
}

.image-popup {
    display: none;
}

.image-popup.open {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.541);
    z-index: 3;
    display: flex;
}
.image-popup.open img {
    width: 100%;
    max-width: 80%; height: auto;
    margin: auto;
}

.lyrics {
    display: flex; flex-direction: column;
    position: relative;
    padding: 0 .5rem .75rem .5rem;
}

.line {
    user-select: none;
    margin: .75rem .5rem;
    color: var(--dark);
    font-size: 1.75rem;
    font-weight: 600;
    cursor: pointer;
}

.line:first-child {
    margin-top: 2rem;
}

.line:last-child {
    margin-bottom: 1.25rem;
}

.line.active {
    color: var(--light-100);
}

.line.note {
    position: relative;
    color: transparent;
}
.line.note::after {
    content: url("data:image\/svg+xml,%3Csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" fill=\"%23141414\" class=\"bi bi-music-note\" viewBox=\"0 0 16 16\"><path d=\"M9 13c0 1.105-1.12 2-2.5 2S4 14.105 4 13s1.12-2 2.5-2 2.5.895 2.5 2\"/><path fill-rule=\"evenodd\" d=\"M9 3v10H8V3z\"/><path d=\"M8 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 13 2.22V4L8 5z\"/%3E%3C/svg%3E ");
    position: absolute;
    top: 50%; left: 0;
    transform: translateY(-50%);
    z-index: 0;
}
.line.note.active::after {
    content: url("data:image\/svg+xml,%3Csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" fill=\"%23f5f5f7\" class=\"bi bi-music-note\" viewBox=\"0 0 16 16\"><path d=\"M9 13c0 1.105-1.12 2-2.5 2S4 14.105 4 13s1.12-2 2.5-2 2.5.895 2.5 2\"/><path fill-rule=\"evenodd\" d=\"M9 3v10H8V3z\"/><path d=\"M8 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 13 2.22V4L8 5z\"/%3E%3C/svg%3E ");
}

.action-bar {
    width: calc(100% - 1rem);
    position: sticky;
    left: .5rem;
    bottom: .75rem;
    z-index: 1;
    padding: .5rem 0;
}

.action-bar .gradient-bottom {
    width: 100%; height: calc(45px * 2);
    background: linear-gradient(0deg, var(--primary-200) 60%, transparent);
    position: absolute;
    bottom: -.75rem;
    z-index: 0;
}
.action-bar .bg {
    width: 100%; height: 100%;
    background: var(--primary-100);
    position: absolute;
    inset: 0;
    border-radius: .5rem;
}

.action-bar #time,
.action-bar #totalTime {
    width: fit-content; height: fit-content;
    top: 50%; transform: translateY(-50%);
    position: absolute;
}
.action-bar #time {
    left: .75rem;
}
.action-bar #totalTime {
    right: .75rem;
}

.action-bar .play-pause-btn {
    width: 35px; height: 35px;
    margin: auto;
    cursor: pointer;
    position: relative;
}
.action-bar .play-pause-btn svg {
    width: 100%; height: 100%;
}

#audio {
    display: none;
}

.item {
    width: 100%; aspect-ratio: 1;
    background: var(--primary-100);
    border-radius: .5rem;
    cursor: pointer;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    position: relative;
    overflow: hidden;
}
.item img {
    width: 100%; height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    z-index: 0;
    filter: brightness(50%);
}
.item h2,
.item h3 {
    text-align: center;
    margin: 0;
    position: relative;
    z-index: 1;
}

#otherSongs .item.small h2,
#otherSongsTwo .item.small h2 {
    font-size: 1.25rem;
    text-wrap: balance;
}

#otherSongs .item.extra-small h2,
#otherSongsTwo .item.extra-small h2 {
    font-size: 1.1rem;
    text-wrap: balance;
}

#artists .item.five h2 {
    font-size: 1.25rem;
    text-wrap: balance;
}

@media (max-width: 768px) {
    body {
        flex-direction: column-reverse;
        gap: 0;
        padding: 0 .5rem;
    }

    .custom-container {
        margin: 1rem 0;
    }

    .custom-container:not(.small) {
        max-height: calc(100dvh - 200px - 2rem);
    }

    .custom-container.small {
        display: none;
    }

    .other-songs {
        background: var(--primary-200);
        width: min(1160px, 100% - 4rem);
        max-width: 500px;
        display: block;
        border-radius: .75rem;
        box-shadow: 0 0 10px rgba(0, 0, 0, .5);
        overflow-x: auto;
    }
    .other-songs::-webkit-scrollbar {
        display: none;
    }

    .other-songs .inner-wrapper {
        width: fit-content;
        display: flex;
        gap: .5rem;
        padding: .5rem;
    }

    #otherSongs .item {
        width: 85px;
    }
    #otherSongs .item h2 {
        font-size: 1.25rem;
        text-wrap: balance;
    }
    #otherSongs .item.small h2 {
        font-size: 1.1rem;
        text-wrap: balance;
    }
    #otherSongs .item.extra-small h2 {
        font-size: .85rem;
        text-wrap: balance;
    }
    .item h3 {
        font-size: .85rem;
    }

    #name,
    #artist {
        margin-right: .5rem;
        max-width: 70%;

        line-clamp: 1;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .topbar .loop {
        display: none;
    }

    .topbar #mobileOnclick {
        width: 100%; height: 100%;
        display: block;
        position: absolute;
        top: 0; left: 0;
        cursor: pointer;
    }
}