/**Defining some global rgb color variables**/
:root {
    --color-white: 255, 255, 255;
    --color-black: 0, 0, 0;
    --color-gold: 228, 199, 115;
    --color-medgray: 125, 124, 126;
    --color-drkgray: 50, 50, 50;
    --color-rust: 175, 73, 44;
    --color-green: 79, 121, 66;
}

body { 
    font-family: 'Roboto Condensed', sans-serif; background: rgba(var(--color-black), 1); 
    color: rgba(var(--color-white), 1); 
    text-align: center; 
}

.jukebox-container { 
    max-width: 1000px; margin: 1rem auto; 
    padding: 1rem; 
    background: rgba(var(--color-rust), 1); 
    border-radius: 3px; 
}

#audio-player {
  width: 90%; /* You can use percentages for responsiveness */
  /* or a fixed width */
  /* width: 400px; */
}

.song-btn { 
    display: block; 
    width: 100%; 
    margin: 5px 0; 
    padding: 7px; 
    cursor: pointer; 
    background: rgba(var(--color-drkgray), 1); 
    color: rgba(var(--color-white), 1); 
    border: none; 
    border-radius: 3px; }

.song-btn:hover { 
    background: rgba(var(--color-medgray), 1); 
}

#queue-list { 
    list-style: none; 
    padding: 0; 
    text-align: left; 
    color: rgba(var(--color-white), .5);
    font-size: .7em;
}

.queue-area { 
    min-height: 70px; 
    padding: 1em .5em;
    border-bottom: 1px solid rgba(var(--color-drkgray), 1); 
    margin-bottom: 10px; 
}