#volume-bar-container {
    width: 100%;
    margin: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#volume-bar {
    width: 90%;
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    background: #ddd;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
}

#volume-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: hotpink;
    cursor: pointer;
}


#track-bar-container {
    width: 100%;
    margin: 10px 0;
    display: flex;
    justify-content: center;
}

#track-bar {
    width: 90%;
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    background: #ddd;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
}

#track-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: hotpink;
    cursor: pointer;
}


#music-player {
    width: 300px;
    margin: 0 auto;
    text-align: center;
    font-family: Arial, sans-serif;
}
#current-track {
    display: flex;
    align-items: center;
}
#album-art {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
#controls button {
    margin: 5px;
    font-size: 1.2em;
    border:0px hotpink solid;
    background:#222;
}
#playlist {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}
#playlist li {
    padding: 5px;
    cursor: pointer;
}
#playlist li:hover {
    border-radius:8px;
    background-color: #444;
    color:hotpink;
    text-decoration:underline;
}


.avatar {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    border: 1px solid hotpink;
    object-fit: cover;
}


.spacer
{
    padding:10px;
}

h2
{
    margin:0px;
    background:#555;
    border-radius:8px;
    margin-bottom:5px;
}

nav li:hover
{
    background:#444;
    border-radius:8px;
}

nav li
{
    padding:5px;
    list-style:none;
}

.banner
{
    width:1300px;
    height:250px;
    background-image: url("../images/awesome-banner-2024.png");
    border-radius:8px;
    border:1px hotpink solid;
    position:absolute;
    top:0;
}

.container
{
    display:flex;
    justify-content:center;
}

.content-r
{
    width:355px;
    background:#333;
    border-radius:8px;
    border:1px hotpink solid;
    opacity: 0.8;
}

.content-l
{
    width:990px;
    background:#222;
    border-radius:8px;
    border:1px hotpink solid;
    margin-right:10px;
    opacity: 0.8;
}

body
{
    background:#000;
    color:#FFF;
    font-family:arial;
    background-image: url("../images/AgtPbuH.png");
    background-attachment: fixed;
}

a:link
{
    color:#FFF;
    text-decoration:none;
}

a:visited
{
    color:#FFF;
    text-decoration:none;
}

a:active
{
    color:#FFF;
    text-decoration:none;
}

a:hover
{
    color:hotpink;
    text-decoration:underline;
}