body {
    overflow-x: hidden;
}

.container {
    margin: 0 auto;
    overflow-x: hidden;
}

.sub-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;

    max-width: 700px;
}

.pad {
    margin: 0px 10px;
}

h1 {
    position: relative;
    font-family: sans-serif;
    font-size: 3.4em;
    align-self: flex-end;
    text-align: end;

    width: fit-content;

    color: var(--box-background-color-2);
    text-shadow: 2px 2px 0px var(--highlight-color), 3px 3px 0px var(--highlight-color), 4px 4px 0px var(--highlight-color);
    line-height: 0.8em;
    letter-spacing: -3px;

    padding-top: 40px;
    transform: translateY(-20px);
}

.hdr {
    animation: beep 2s steps(2, jump-start) infinite;
}

h1::after {
    content: "";
    position: absolute;
    left: -10%;
    bottom: -20px;
    width: 110%;
    height: 25px;
    background-color: var(--box-background-color);
    z-index: -1;
    border-radius: 3px;
}


@keyframes beep {
    0%    {transform: rotate(-2deg);}
    100%  {transform: rotate(1deg);}
}


.h2 {
    background-color: var(--box-background-color);
    padding: 2px 6px;
    border-radius: 3px;
}


#back {
    display: flex;
    justify-content: end;
}

#back a {
    text-decoration: none;
    width: 100%;
    text-align: end;
    text-transform: lowercase;
}

#back a:hover {
    text-decoration: underline;
}


.song-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 3px;

    border: 1px solid var(--box-background-color);
    transition: transform 100ms ease-out, box-shadow 100ms ease-out, background-color 100ms ease-out;
}

.song-container:hover {
    background-color: var(--box-background-color);
    transform: translate(-3px, -3px);
    box-shadow: 5px 5px 0px var(--shadow-color);
}

.song-title {
    color: var(--highlight-color);
}

.song-date {
    font-size: 80%;
}



.song-container .flex-row {
    flex-direction: row-reverse;
}


.cover::after {
    content: " [COVER]";
    color: var(--text-color);
    font-size: 80%;
}

.original::after {
    content: " [ORIGINAL]";
    color: var(--text-color);
    font-size: 80%;
}



@media only screen and (max-width: 700px) {

    :root {
        --album-size: calc((100vw / 3) - 32px);
        --playlist-size: var(--album-size);
    }

    .container {
        padding: 5px;
    }

    iframe {
        height: 80px;
    }

}


@media only screen and (max-width: 500px) {

    :root {
        --album-size: calc((100vw /2) - 32px);
    }

    h1::after {
        width: 100%;
        transform: translateX(10%);
    }

}