.music-container {
    background: #fff;
    border: 1px solid #000;
    border-radius: 10px;
    padding: 10px;
    margin-top: 5px;
  }
  
  .music-info {
    text-align: center;
    margin-bottom: 10px;
  }
  
  .music-info h4 {
    font: italic 11px georgia;
    margin: 0;
  }
  
  .music-info p {
    font: 10px calibri;
    margin: 5px 0;
  }
  
  .img-container {
    width: 100px;
    height: 100px;
    margin: 0 auto 10px;
  }
  
  .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
  }
  
  .progress-container {
    height: 4px;
    background: #f5f5dc;
    border: 1px solid #000;
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 10px;
  }
  
  .progress {
    height: 100%;
    background: #000;
    width: 0%;
    border-radius: 2px;
  }
  
  .navigation {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  .action-btn {
    background: #000;
    border: 1px solid #555;
    border-radius: 10px;
    padding: 5px;
    cursor: pointer;
  }
  
  .action-btn:hover {
    background: #777;
  }
  
  .playlist {
    font: 10px calibri;
  }
  
  .playlist ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .playlist li {
    padding: 5px;
    border-bottom: 1px solid #f4f4f4;
    cursor: pointer;
  }
  
  .playlist li:hover {
    background: #f4f4f4;
  }
  
  .playlist li.activeSong {
    background: #f4f4f4;
    font-weight: bold;
  }

  body 
  {font:10px calibri;letter-spacing:1px;color:#333;background:#4a6741 url(bats.png) repeat-x;}

textarea {font:10px calibri;letter-spacing:1px;}


a:link, a:visited, a:active {
color:#000;text-decoration:none;}
a:hover {
color:#555;}
a img {
border-width:0;
}

b {color:#111;font-weight:bold;}


::-webkit-scrollbar-thumb {
background-color: transparent;  
border-radius: 0px;
border:1px solid #cc000;
}
::-webkit-scrollbar {
width: 7px; height: 4px; 
background: transparent;
}
  

.title {text-transform:uppercase;color:#fff;background:#000;font:12px georgia;letter-spacing:2px;padding:1px;padding-left:4px;margin-bottom:4px;border-top-left-radius:5px;
border-top-right-radius:5px;}
#content {background:#fff;width:400px;padding:4px;border:1px solid #000;border-radius:10px;}
#left {background:#fff;width:170px;padding:4px;border:1px solid #000;border-radius:10px;}
#banner {background:#222 url(http://twistedsifter.com/wp-content/uploads/2013/05/animated-gifs-of-fighting-game-backgrounds-25.gif);width:400px;height:230px;padding:4px;border-radius:10px;}
.bigtitle {font:16px arial;text-transform:uppercase;text-align:right;color:#ffffff;text-shadow: 1px 1px 2px black;border-bottom:1px solid #ccc;margin-top:110px;}

    
#navigation {
      width: 390px;
      float: left;
      margin: 0 0 0 0;
      padding: 5px 0px;
      list-style: none;
      background-color: transparent;
       }
   #navigation li {
      float: left; }
   #navigation li a {
      display: block;
      padding: 2px 10px;
font:italic 11px georgia;
text-transform:lowercase;
border-radius:10px;
     letter-spacing:1px;
      text-decoration: none;
      font-weight: normal;
margin-right:0px;
margin-left:5px;
      color: #fff;
background:#000;
      border:1px solid #555;}
   #navigation li a:hover {
      color: #fff;
      background-color: #777; }