body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    user-select: none;
    background: linear-gradient(lightgray, white);
    height: 100vh;
    margin: unset;
}

body > div {
    margin: 0.5em
}


/* PLAYER STYLING */
#player-container {
    /* position: fixed; */
    right: 0;
    border: 1px solid black;
    /* width: 25em; */
    background: linear-gradient(rgb(250, 250, 250), rgb(200, 200, 200), rgb(150, 150, 150));
}

#player-container * {
    margin: 0.5em;
}

#player-container .song_title {
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
}

#player-container .creator_text {
    font-style: italic;
}

#player-container .caption_text {
    background: black;
    color: white;
    margin: unset;
    font-style: italic;
    padding: 1em;
    user-select: text;
}

#player-container .caption_text.hidden {
    display: none;
}

#player-container .caption_text::before {
    content: "“";
}

#player-container .caption_text::after {
    content: "”";
}

#player-container .playbar-container {
    display: flex;
    margin: unset;
    padding: 1em;
    align-items: center;
}

#player-container .playbar {
    width: 100%;
    height: 100%;
    margin: unset;
}

#player-container .duration {
    margin: unset;
    margin-right: 1em;
    white-space: nowrap;
}

#player-container .song-length {
    margin: unset;
    margin-left: 1em;
    white-space: nowrap;
}

input {
    -webkit-appearance: none;
    background: white;
    border: 2px solid black;
    padding: 3px 0;
    border-radius: 50px;
    cursor: pointer;
}

input::-webkit-slider-thumb {
    appearance: none;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    border-radius: 100%;
    border: 2px solid black;
    background: white;
}

#player-container .controls {
    display: flex;
    margin: unset;
    padding: 0.5em;
    justify-content: space-between;
    align-items: center;
    gap: 0.25em
}

#player-container input {
    height: 5px;
    margin: unset;
}

#player-container .button {
    background: linear-gradient(white, gray);
    border: 1px solid black;
    margin: unset;
    width: 5em;
    padding: 0.5em;
    text-align: center;
}

#player-container .button:hover {
    background: linear-gradient(white, lightgray)
}

#player-container .button.selected {
    background: linear-gradient(white, lightgray, white)
}








#player-container .caption_container {
    background: black;
    color: white;
    margin: unset;
    font-style: italic;
    user-select: text;
    overflow: hidden;
    height: var(--height);
    transition: height 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#player-container .caption {
    margin: unset;
    user-select: text;
    padding: 1em;
}

#player-container .caption_container.hidden {
    /* display: none; */
    height: 0px;
}

#player-container .caption::before {
    content: "“";
}

#player-container .caption::after {
    content: "”";
}












/* SONG SELECTION STYLING */
#song-select {
    width: 30em;
    height: 80vh;
    /* height: calc(100vh - 1em); */
    border: 1px solid black;
    overflow-y: scroll;
    overflow-x: hidden;
}

#song-select .song {
    display: flex;
    flex-direction: column;
    padding: 1em;
    background: linear-gradient(lightgray, gray);
}

#song-select .song:hover {
    background: linear-gradient(lightgray, white);
}

#song-select .song .song-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#song-select .song .song-info div {
    text-wrap: nowrap;
}

#song-select .song .title {
    text-overflow: ellipsis "  ";
    overflow: hidden;
}

#song-select .song.selected {
    background: linear-gradient(white, lightgray, white);
}



.song-select-column {
    display: flex;
    flex-direction: column;
    width: 30em;
    gap: 1em;
}

.player-column {
    display: flex;
    flex-direction: column;
    width: 25em;
    gap: 1em;
}


/* THANKS STACKOVERFLOW */
/* https://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element */
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}