body {
            text-align: center;
            font-family: Arial, sans-serif;
            background-color: #111;
            color: white;
            margin: 0;
            padding-bottom: 60px; /* Prevent overlap with fixed audio controls */
            overflow-x: hidden;
        }

        /* 🎵 Playlist Styling */
        .playlist-container {
            width: 100%;
            margin: 0px ;
            padding-top: 0px;
            padding-bottom: 10px;
            position: relative;
            z-index: 1;
        }
        .playlist-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            text-align: left;
            position: relative;
            z-index: 2;
        }
        .playlist-table td {
            padding-bottom: 5px;
            padding-top: 5px;
            border-bottom: 1px solid rgba(221, 196, 154, 0.75);
        }
        .playlist-table tr:last-child td {
            border-bottom: none;
        }
        .time { color: #ffcc00; }
        .artist { color: #ff6699; font-weight: bold; text-transform: uppercase; }
        .title { color: #66ccff; font-weight: bold;}

        /* 🔥 Equalizer Overlays the Playlist */
        .equalizer-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            pointer-events: none;
            opacity: 0.75;
            z-index: 0;
        }
        table.equalizer {
            width: 100%;
            border-collapse: collapse;
            position: absolute;
            top: 0;
            left: 0;
        }
        th {
            width: 100%;
            height: 20px;
            transition: height 0.1s ease-out;
        }
        .bars1 { background-image: linear-gradient(to right, deeppink, lime);border-top:2px solid deeppink; color: black; text-align: right; }
        .bars2 { background-image: linear-gradient(to right, black, deepskyblue);border-top:2px solid black; color: black; opacity: 1.0;text-align: right; }
        .bars3 { background-image: linear-gradient(to right, deepskyblue, springgreen);border-top:2px solid deepskyblue; color: black; opacity: 1.0;text-align: right; }
        .bars4 { background-image: linear-gradient(to right, springgreen, deeppink);border-top:2px solid springgreen; color: black; opacity: 1.0;text-align: right; }
        .bars5 { background-image: linear-gradient(to right, lime, orangered);border-top:2px solid lime; color: black; opacity:1.0 ;text-align: right; }
        .bars6 { background-image: linear-gradient(to right, orangered, yellow); border-top:2px solid orangered; border-bottom: 5px solid yellow; color: black; opacity: 1.0;text-align: right; }

        /* 🔥 Fixed Audio Controls */
        .audio-container {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.8);
            padding: 0;
            z-index: 3;
        }
        audio {
            width: 100%;
            max-width: none;
        }

        /* Header Picture Styling */
        .pictureFrame {
            width: 100%;
            height: 250px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
			opacity: 0.5;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
            padding: 20px;
            z-index: 2;
            transition: filter 0.1s ease-out; /* Smooth transition for filter effects */
        }
		.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #404040;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  padding:0px;
  border:0px;
  height:20px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 50px;
  height: 25px;
  background: #cccccc;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 50px;
  height: 25px;
  background:#cccccc;
  cursor: pointer;
}

   label {
            display: block;
            text-align: right;
			height:20px;
			color:#cccccc;
			font-weight: bold;