body{
    margin: 10px;
    color: rgba(255, 85, 0, 0.76);
    background-color: black;
    font-family: 'Gotham';
    text-shadow: 3px 3px white;
    /* color: ; */
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 7% 10%; /* top-bottom, left-right */
    padding: 60px 70px;
    border: 2px solid outset;
    border-radius: 8px;
    background: rgba(126, 125, 125, 0.6);
}

.container > .song-details{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 10px;
    flex: 0.3;      
}

.container > .song-details > .song-name{
    font-size: 50px;
    font-weight: bold;
    text-shadow: 2px 2px white;
}

.container > .audio-controls{
    flex: 0.7;
    margin: 20px;
}

.container > .audio-controls > .buttons{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin-top: 20px;
}

.container > .audio-controls > .buttons > .playpause-song, .prev-song, .next-song{
    cursor: pointer;
}

.container > .audio-controls > .slider-container{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 10px 0px 0px 0px;
}

.container > .audio-controls > .slider-container > .volume_slider{
    margin: 0px 7px;
    -webkit-appearance: none;
    appearance: none; 
    width: 100%;
    outline: none;
    cursor: pointer;
    overflow: hidden;
    border-radius: 16px;
}

.container > .audio-controls > .slider-container > .volume_slider::-webkit-slider-runnable-track {
    height: 20px;
    border-radius: 16px;
    background: white;
}

.container > .audio-controls > .slider-container> .volume_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none; 
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 85, 0, 0.76);
    box-shadow: -307px 0 0 300px rgba(255, 85, 0, 0.76);
}