body {
			font-family: Arial, sans-serif;
			margin: 0;
			background-color: #2d2d2d;
			color: white;
			text-align: center;
		}

		table {
			width: auto;
			border-collapse: separate;
			border-spacing: 10px;
			color: white;
			text-align: center;
			margin: 0 auto;
			border: none;
		}

		th, td {
			padding: 10px;
			text-align: left;
			color: white;
			border-bottom: 1px solid #333;
		}

		th {
			background-color: #333;
		}

		img {
			width: 50px;
			height: 50px;
		}

		.spinner {
			display: none;
			margin: 50px auto;
			border: 8px solid #f3f3f3;
			border-top: 8px solid #e67e22;
			border-radius: 50%;
			width: 60px;
			height: 60px;
			animation: spin 1s linear infinite;
		}

		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}

		#spinner.show {
			display: block;
		}

		.button-spinner {
			display: inline-block;
			width: 20px;
			height: 20px;
			border: 3px solid rgba(255,255,255,.3);
			border-radius: 50%;
			border-top-color: #fff;
			animation: spin 1s ease-in-out infinite;
			-webkit-animation: spin 1s ease-in-out infinite;
		}

		#urlInput {
			width: 80%;
			max-width: 400px;
			margin: 10px auto;
			display: block;
			padding: 10px;
			font-size: 16px;
			border: none;
			border-radius: 5px;
			background-color: #4a4a4a;
			color: white;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
		}

		#urlInput:focus {
			outline: none;
			box-shadow: 0 0 5px rgba(255, 165, 0, 0.5);
		}

		#progressBar {
			width: 80%;
			height: 20px;
			border: 1px solid #333;
			background-color: #2d2d2d;
			padding: 5px;
			margin-bottom: 10px;
			display: none;
			position: absolute;
			position: fixed; /* Change from absolute to fixed */
			top: 1%; /* Position at 50% from the top */
			left: 50%; /* Position at 50% from the left */
			transform: translate(-50%, -50%); /* Center the element */
			align-items: center;

		}

		#progressBar > div {
			width: 0%;
			height: 100%;
			background-color: #3498db;
			transition: width 0.5s;
		}

		#progressText {
			display: none;
			font-weight: bold;
			color: #3498db;
		}

		#zipPreparingText {
			display: none;
			font-weight: bold;
			color: orange;
			animation: blink 1s linear infinite;
		}

		@keyframes blink {
			0% { opacity: 1; }
			50% { opacity: 0.5; }
			100% { opacity: 1; }
		}

		#nowPlaying {
			font-size: 18px;
			font-weight: bold;
			margin-top: 20px; margin-bottom: 10px;
			color: orange;
			display: none;
		}

		#currentSong {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20px;
			margin-bottom: 10px;
		}

		#currentSong img {
			border-radius: 50%;
			width: 200px;
			height: 200px;
			margin-right: 20px;
		}

		#currentSong > div {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		#currentSong span {
			text-align: center;
		}

		#currentSong span:first-child {
			margin-bottom: 5px;
		}

		#musicContent td.song-info {
			transition: background-color 0.3s;
			cursor: pointer;
		}

		#musicContent td.song-info:hover {
			background-color: #696969;
		}

		#downloadAllButton {
			background-color: orange;
			color: white;
			border: none;
			padding: 10px 15px;
			font-size: 10px;
			cursor: pointer;
			border-radius: 5px;
			margin: 5px;
			display: inline-block;
			max-width: 150px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		#downloadAllButton:hover {
			background-color: #FF5E0E;
		}

		#lyricsModal {
			display: none;
			position: fixed;
			z-index: 1;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.lyrics-modal-content {
			background-color: #2d2d2d;
			margin: 30px auto;
			padding: 20px;
			border: 1px solid #333;
			width: auto;
			max-width: 400px;
		}

		.lyrics-modal-content h2 {
			margin-top: 10px;
			color: orange;
			font-weight: bold;
		}

		.lyrics-modal-content p {
			margin-bottom: 20px;
			color: white;
			white-space: pre-wrap;
		}

		.lyrics-modal-content .loading {
			color: white;
			animation: blink 1s linear infinite;
		}

		.lyrics-modal-content .not-found {
			color: red;
			font-weight: bold;
		}

		.lyrics-modal-content .close {
			color: Black;
			float: right;
			font-size: 28px;
			font-weight: bold;
		}

		.lyrics-modal-content .close:hover,
		.lyrics-modal-content .close:focus {
			color: #FF5E0E;
			text-decoration: none;
			cursor: pointer;
		}

		.artist-section {
			margin: 30px 0;
			padding: 20px;
			background: rgba(0, 0, 0, 0.2);
			border-radius: 10px;
		}

		.item-card {
			transition: all 0.3s ease;
		}

		.item-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
		}

		.item-card img {
			transition: opacity 0.3s ease;
		}

		.item-card:hover img {
			opacity: 0.8;
		}

		@media (max-width: 768px) {
			#musicTable, audio, #nowPlaying, #progressBar {
				width: 100%;
			}
		}

		.control-button-container {
			width: 100%;
			text-align: center;
			margin-top: 1px;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}

		.control-button-container button {
			margin: 5px;
		}

		.lyrics-icon {
			width: 35px;
			height: 35px;
			margin-left: 10px;
			margin-bottom: 5px;
		}

		.error-message {
			color: red;
			font-weight: bold;
			margin: 10px;
			display: none;
		}
		
		audio {
			display: none;
			width: 80%;
			max-width: 600px;
			background-color: #2d2d2d !important;
			border: none;
			border-radius: 0;
			margin: 0 auto;
			outline: none;
			color-scheme: dark;
			color: white;
		}

		/* Style the audio player controls panel */
		audio::-webkit-media-controls-panel {
			background-color: #2d2d2d !important;
			color: white; /* Text and control color */
		}

		/* Style for play, pause, and other control buttons */
		audio::-webkit-media-controls-play-button,
		audio::-webkit-media-controls-pause-button,
		audio::-webkit-media-controls-mute-button,
		audio::-webkit-media-controls-volume-slider,
		audio::-webkit-media-controls-timeline,
		audio::-webkit-media-controls-current-time-display,
		audio::-webkit-media-controls-time-remaining-display {
			color: white !important;
			background-color: #2d2d2d !important;
			border-radius: 0; /* Remove rounded corners */
		}

		/* Style the timeline bar for better visibility */
		audio::-webkit-media-controls-timeline {
			background-color: rgba(255, 255, 255, 0.2); /* Light transparent color */
		}

		
		/* General button styles */
		.circular-button {
			border-radius: 50%;
			width: 100px;
			height: 100px;
			background-color: orange;
			color: white;
			border: none;
			font-size: 16px;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: background-color 0.3s ease, transform 0.2s ease;
			cursor: pointer;
		}

		/* Hover effect */
		.circular-button:hover {
			background-color: #FF5E0E; /* Slightly lighter shade of orange */
			transform: scale(1.05); /* Slight zoom effect */
		}

		/* Active button effect */
		.circular-button:active {
			background-color: #e68a00; /* Darker orange when clicked */
			transform: scale(0.95); /* Slight shrink effect */
		}

		/* Style for count below the button */
		.circular-button-container {
			display: flex;
			flex-direction: column;
			font-weight: bold;
			align-items: center;
			margin: 20px 0;
		}

		.count-label {
			color: white;
			margin-top: 10px;
			font-size: 14px;
		}
		
		.artist-page h2 {
			margin-top: -20px !important;    /* Reduce space above artist name */
			margin-bottom: 2px !important; /* Adjust space below artist name */
		}
		
        footer {
            text-align: center !important;
            font-size: 14px;
            color: white;
            opacity: 0.8;
            padding: 10px;
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #333; /* Optional: adds a background color */
        }
		
		body {
			padding-bottom: 50px; /* Adjust this value based on your footer's height */
		}
		
		@media screen and (max-width: 768px) {
			footer {
				padding-left: 0;
				padding-right: 0;
			}
		}
		
		.home-button img {
			width: 25px;
			height: 25px;
		}
		
		.artist-link {
			text-decoration: none;
			color: inherit;
			cursor: pointer;
		}
		.artist-link:hover {
			text-decoration: underline;
			color: #999;
		}
			
		@keyframes flash {
			0%, 100% {
				opacity: 1;
			}
			50% {
				opacity: 0.5;
			}
		}

		.loading-indicator {
			position: fixed;
			top: 15%;  /* Adjust this if you want it higher or lower */
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 9999;
			display: flex; /* Ensure it's a flex container */
			justify-content: center; /* Center the spinner horizontally */
			align-items: center; /* Center the spinner vertically */
			color: Orange;
			font-weight: bold;
		}

		.loading-indicator .text {
			animation: flash 2s linear infinite;
		}
		
		.three-dot-menu {
			position: relative;
			display: inline-block;
		}

		.three-dot-button {
			background: none;
			border: none;
			font-size: 20px;
			cursor: pointer;
			padding: 5px 10px;
			color: #666;
		}

		.three-dot-button:hover {
			color: #000;
		}

		.menu-content {
			display: none;
			position: absolute;
			right: 0;
			background-color: #2c2c2c;
			min-width: 160px;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			z-index: 1;
			border-radius: 4px;
		}

		.menu-content.show {
			display: block;
		}

		.menu-item {
			color: white;
			padding: 12px 16px;
			text-decoration: none;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.menu-item:hover {
			background-color: #575757;
		}

		.menu-icon {
			width: 20px;
			height: 20px;
		}

		/* Custom checkbox styling */
		input[type="checkbox"] {
			appearance: none;
			-webkit-appearance: none;
			width: 16px;
			height: 16px;
			background-color: #606060;
			border: none;
			cursor: pointer;
			position: relative;
			border-radius: 2px; /* Optional: if you want slightly rounded corners */
		}

		/* Checked state */
		input[type="checkbox"]:checked {
			background-color: orange;
		}

		/* Optional: Add a checkmark when checked */
		input[type="checkbox"]:checked::after {
			content: '✓';
			position: absolute;
			color: white;
			font-size: 12px;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		/* Remove focus outline */
		input[type="checkbox"]:focus {
			outline: none;
		}

		#copyLyricsBtn {
			background-color: #ff6b00;
			color: white;
			border: none;
			padding: 10px 20px;
			border-radius: 5px;
			cursor: pointer;
			transition: background-color 0.3s ease;
			display: block;
			margin: 15px auto;
			font-size: 14px;
		}

		#copyLyricsBtn:hover {
			background-color: #ff8533;
		}

		.image-modal {
			display: none;
			position: fixed;
			z-index: 1000;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.95);
			overflow: hidden;
		}

		.image-modal-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			max-width: 95vw; /* increased from 90% */
			max-height: 95vh; /* increased from 90% */
			width: auto;
			height: auto;
			object-fit: contain;
			border-radius: 8px;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
			animation: zoomIn 0.3s ease-out;
		}

		.close-image {
			position: absolute;
			right: 25px;
			top: 15px;
			color: #fff;
			font-size: 40px;
			font-weight: bold;
			cursor: pointer;
			z-index: 1001;
			text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
			transition: color 0.3s ease;
		}

		.close-image:hover {
			color: #ff0000;
		}

		/* Add animation for modal opening */
		@keyframes zoomIn {
			from {
				transform: translate(-50%, -50%) scale(0.3);
				opacity: 0;
			}
			to {
				transform: translate(-50%, -50%) scale(1);
				opacity: 1;
			}
		}

		#artistDropdown {
			display: none; /* Initially hidden */
			position: absolute;
			width: calc(90% - 20px); /* Match the width of urlInput, considering padding */
			max-width: 400px; /* Match the max-width of urlInput */
			background-color: #4a4a4a !important; /* Background color */
			border: none !important; /* Explicitly remove border */
			max-height: 200px;
			overflow-y: auto;
			z-index: 10;
			color: white;
			border-radius: 5px; /* Consistent with urlInput's rounded edges */
			box-shadow: none; /* Removed shadow */
			margin-top: 1px; /* Add a small gap between input and dropdown */
			left: 50%; /* Center the dropdown */
			transform: translateX(-50%); /* Center the dropdown */
		}

		/* Styling for individual suggestion items */
		#artistDropdown div {
			padding: 10px;
			cursor: pointer;
			color: white;
			font-size: 12px; /* Updated font size */
			border: none; /* Remove all borders */
			border-bottom: 1px solid #333; /* Keep line between artist names */
			transition: background-color 0.3s ease;
			text-align: left; /* Left-aligned text */
		}

		#artistDropdown div:last-child {
			border-bottom: none; /* Remove border from last item */
		}

		#artistDropdown div:hover {
			background-color: #2d2d2d; /* Lighter than the background color */
			color: #fff;
		}

		/* Styling for the scrollbar */
		#artistDropdown::-webkit-scrollbar {
			width: 8px; /* Width of the scrollbar */
		}

		#artistDropdown::-webkit-scrollbar-thumb {
			background-color: orange; /* Color of the scrollbar thumb */
			border-radius: 4px; /* Rounded corners for the scrollbar thumb */
		}

		#artistDropdown::-webkit-scrollbar-track {
			background: transparent; /* Transparent background of the scrollbar track */
		}

		.input-container {
			position: relative;
			width: 100%;
			max-width: 400px; /* Adjust as needed */
			margin: 0 auto; /* Center the container if desired */
		}

		.highlight {
			background-color: transparent;
			font-weight: bold;
			color: orange; /* or any color that matches your theme */
		}

		.page-not-found-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: -30px !important; 
			position: relative;
		}

		.page-not-found-image {
			width: auto;
			max-width: 800px;
			max-height: 400px;
			height: auto;
			overflow-y: auto;
			z-index: 1; /* Lower z-index */
		}

		.page-not-found-button {
			background-color: orange;
			color: white;
			border: none;
			padding: 10px 20px;
			font-size: 16px;
			cursor: pointer;
			border-radius: 5px;
			transition: background-color 0.3s;
			position: relative;
			z-index: 2; /* Higher z-index */
			margin-bottom: 25px; /* Add margin to the bottom of the button */
		}

		.page-not-found-button:hover {
			background-color: #FF5E0E;
		}

		.header-container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 10px 0;
			margin-top: 40px;
		}

		.header-container h1 {
			margin: 0;
			text-align: center;
			display: flex;
			align-items: center;
			font-size: 28px;
		}

		.navigation-buttons {
			display: flex;
			justify-content: center;
			gap: 15px;
			width: 100%;
			margin-top: 5px;
			margin-Bottom: -10px;
			max-width: 800px; /* Adjust this value based on your design needs */

		}

		.nav-button img, .home-button img {
			width: 30px;
			height: 30px;
		}

		.nav-button:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}

		#backPageButton {
			position: absolute;
			left: 10%;
		}

		#nextPageButton {
			position: absolute;
			right: 10%;
		}

		.nav-button, .home-button {
			position: relative;
			background: none;
			border: none;
			cursor: pointer;
			padding: 5px;
		}

		/* Custom tooltip styling */
		.nav-button[data-tooltip]::after,
		.home-button[data-tooltip]::after {
			content: attr(data-tooltip);
			position: absolute;
			bottom: -25px;
			left: 50%;
			transform: translateX(-50%);
			background-color: #333;
			color: white;
			padding: 5px 10px;
			border-radius: 4px;
			font-size: 12px;
			white-space: nowrap;
			z-index: 1000;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s, visibility 0.3s;
		}

		.nav-button[data-tooltip]:hover::after,
		.home-button[data-tooltip]:hover::after {
			opacity: 1;
			visibility: visible;
		}

		body.initial-search {
			/* background-image: url('Pictures/RJ_BG.png');*/
			background-size: 400px 400px;
			background-repeat: no-repeat;
			background-position: center 200px;
			min-height: 400px; /* Ensures the body is tall enough to show the image */
		}

		.nav-button img {
			width: 24px;
			height: 24px;
		}

		.home-button {
			cursor: pointer;
			opacity: 1;
		}

		}

		.nav-button {
			transition: opacity 0.3s ease;
		}

		#savePageButton {
			display: block;
			margin: 20px auto 50px; /* Top: 20px, Horizontal: Auto, Bottom: 50px */
			padding: 10px 20px;
			background-color: black;
			color: white;
			border: none;
			border-radius: 20px; /* Rounds the corners */
			font-size: 16px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}

		#savePageButton:hover {
			background-color: #333333; /* Dark grey on hover */
		}
		
		#SaveArtistData {
			display: block;
			margin: 20px auto 50px; /* Top: 20px, Horizontal: Auto, Bottom: 50px */
			padding: 10px 20px;
			background-color: black;
			color: white;
			border: none;
			border-radius: 20px; /* Rounds the corners */
			font-size: 16px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}

		#SaveArtistData:hover {
			background-color: #333333; /* Dark grey on hover */
		}

		#searchNewSongButton {
			display: block;
			margin: 20px auto; /* Centers the button horizontally and adds vertical margin */
			padding: 10px 20px;
			background-color: black;
			color: white;
			border: none;
			border-radius: 20px; /* Rounds the corners */
			font-size: 16px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}

		#searchNewSongButton:hover {
			background-color: #333333; /* Dark grey on hover */
		}

		#loadButton, .control-button {
			background-color: orange;
			color: white;
			border: none;
			padding: 10px 15px;
			font-size: 10px;
			cursor: pointer;
			border-radius: 5px;
			margin: 10px auto;
		}

		#loadButton:hover {
			background-color: #FF5E0E;
		}
		
		/* Default (small screens) */
		.song-info[data-resizable-column] {
			width: 200px; /* Adjust for mobile view */
			word-wrap: break-word;
		}

		/* Medium screens (e.g., tablets) */
		@media (min-width: 768px) {
			.song-info[data-resizable-column] {
				width: 300px; /* Increase for tablets */
			}
		}

		/* Large screens (e.g., laptops, desktops) */
		@media (min-width: 1200px) {
			.song-info[data-resizable-column] {
				width: 400px; /* Further increase for larger screens */
			}
		}

		.video-list {
			display: flex;
			margin: 0 auto; /* Center the video list */
			flex-wrap: wrap; /* Allow items to wrap onto the next line */
			justify-content: center; /* Align items to the center */
			gap: 5px; /* Space between thumbnails */
		}

		.thumbnail-container {
			background-color: transparent; /* Set the background color */
			width: 270px; /* Fixed width */
			height: 250px; /* Increase height to accommodate title */
			border-radius: 100%; /* Make the container round */
			display: flex;
			flex-direction: column; /* Stack image and text vertically */
			align-items: center; /* Center items horizontally */
			justify-content: center; /* Center items vertically */
			overflow: hidden; /* Hide overflow */
			position: relative; /* Position relative for the image */
		}

		.thumbnail-image {
			width: 200px; /* Full width of the container */
			height: 200px; /* Full height of the container */
			object-fit: cover; /* Ensure the image covers the container without distortion */
			border-radius: 50%; /* Make the image round */
			transition: filter 0.3s ease; /* Smooth transition for the filter */
		}

		.thumbnail-container:hover .thumbnail-image {
			filter: blur(2px); /* Apply blur effect on hover */
		}

		.thumbnail-title {
			font-size: 12px; /* Set font size for video name */
			margin-top: 5px; /* Increased space between image and title */
			text-align: center; /* Center align the title */
			display: block; /* Ensure title is displayed as a block element */
			padding: 0 10px; /* Add horizontal padding for better readability */
			line-height: 1.2; /* Adjust line height for better spacing */
		}

		.thumbnail-artist {
			font-size: 10px; /* Set font size for artist name */
			margin-top: 1px; /* Space between video name and artist name */
			text-align: center; /* Center align the artist name */
			display: block; /* Ensure artist name is displayed as a block element */
			padding: 0 10px; /* Add horizontal padding for better readability */
			line-height: 1.2; /* Adjust line height for better spacing */
		}

		.modal {
		  display: none;
		  position: fixed;
		  z-index: 1;
		  left: 50%;
		  top: 20%;
		  transform: translate(-50%, -50%);
		  width: 90vw; /* 90% of viewport width */
		  max-width: 600px; /* Limit modal width on larger screens */
		  height: 90vh; /* 90% of viewport height */
		  max-height: 90vh; /* Limit modal height to viewport */
		  overflow: auto;
		  padding: 10px;
		  box-sizing: border-box;
		  border-radius: 8px; /* Optional: Adds a slight border radius */
		}

		.modal-content {
		background-color: #2d2d2d;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #888;
		width: calc(100% - 40px); /* Ensures space inside modal */
		max-width: 400px;
		text-align: center;
		border-radius: 10px;
		box-sizing: border-box;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 95vw; /* increased from 90% */
		max-height: 95vh; /* increased from 90% */
		width: auto;
		height: auto;
		object-fit: contain;
		border-radius: 8px;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
		animation: zoomIn 0.3s ease-out;
		}

        .close-modal {
            color: white;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close-modal:hover,
        .close-modal:focus {
            color: orange;
            text-decoration: none;
            cursor: pointer;
        }

		#modalUrlInput {
			width: 100%; /* Full width */
			max-width: 350px; /* Maximum width of 350px */
			height: 30px; /* Adjusted height for better usability */
			margin: 10px; /* Add space below the input */
			padding: 5px; /* Reduced padding for a thinner appearance */
			background-color: #4a4a4a; /* Consistent background */
			color: white; /* Text color */
			border: none; /* Remove border */
			border-radius: 5px; /* Rounded corners */
			box-sizing: border-box; /* Ensures padding is included in height */
		}

		.button-container {
			display: flex;
			justify-content: center;
		}
		
		#cancelButton, #modalLoadButton {
			background-color: orange;
			color: white;
			border: none;
			padding: 10px 15px;
			font-size: 10px;
			cursor: pointer;
			border-radius: 5px;
		}

		#modalLoadButton {
			margin-right: 5px;
		}

		#cancelButton:hover, #modalLoadButton:hover {
			background-color: #FF5E0E;
		}
		}
		
		#videoTableContainer {
			display: block; /* Ensure the container is visible */
		}

		#musicContent {
			margin-top: 20px; /* Reduce margin to prevent pushing elements out of view */
		}

		.hidden {
			display: none !important;
		}

		/* Container holding buttons */
		.button-container {
		  display: flex;              /* Flexbox layout */
		  flex-wrap: wrap;            /* Wrap buttons to a new row */
		  justify-content: center;    /* Center the buttons horizontally */
		  gap: 20px;                  /* 20px space between buttons */
		  margin-top: -50px;           /* Optional space at the top of the container */
		  position: relative;
		  max-width: 320px;           /* Optional: Limit the max width of the container */
		  margin-left: auto;          /* Center the container horizontally */
		  margin-right: auto;         /* Center the container horizontally */
		}

		/* Button styles */
		.button-style {
		  display: block;
		  margin: 0;                  /* Remove margin since the container handles spacing */
		  padding: 0;
		  background: #333333;        /* Dark grey background */
		  border: 3px solid #FF8C00;  /* Orange border */
		  color: white;
		  cursor: pointer;
		  font-size: 10px;             /* Smaller font size */
		  font-weight: bold;          /* Bold text */
		  text-align: center;
		  border-radius: 50%;         /* Circular shape */
		  width: 120px;               /* Set width for consistency */
		  height: 120px;              /* Same as width for perfect circle */
		  line-height: 12px;          /* Vertically center text */
		  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
		  text-transform: uppercase;  /* Uppercase text for modern look */
		  font-family: 'Arial', sans-serif; /* Clean modern font */
		  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Soft shadow for 3D effect */
		  white-space: normal;        /* Allow text to break into multiple lines */
		  text-align: center;         /* Ensure text is centered */
		  line-height: 20px;          /* Make sure text fits within circle */
		}

		/* Button hover effect */
		.button-style:hover {
		  background: #FF8C00; /* Orange on hover */
		  transform: scale(1.1); /* Zoom-in effect */
		  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4); /* Enhanced shadow for a more 3D effect */
		}

		/* Button active effect */
		.button-style:active {
		  background: #E07B00; /* Darker orange for "pressed" effect */
		}

		/* Responsive layout: Ensure buttons stay in 2-per-row layout */
		@media (min-width: 320px) {
		  .button-style {
			flex-basis: 45%; /* Each button takes up 45% of the container width */
		  }
		}

		@media (min-width: 768px) {
		  .button-style {
			flex-basis: 45%; /* Adjust to take 45% of the container width */
		  }
		}

		.playlist-cover {
			width: 200px;
			height: 200px;
			object-fit: cover;
			display: block;
		}

		.playlist-title {
			font-size: 20px; /* Adjust size */
			font-weight: bold; /* Make it bold */
			color: rgba(255, 255, 255, 0.85); /* Slightly less than full white */
			text-align: left; /* Align text to the left */
			margin: 10px 0; /* Add space above and below */
			cursor: pointer; /* Indicate clickable text */
			transition: color 0.3s ease; /* Smooth color change on hover */
			text-decoration: none; /* Ensure no underline */
		}

		.playlist-title:hover {
			color: orange; /* Change color on hover */
		}

		#installAppButton {
			display: block;
			margin: 20px auto 50px; /* Top: 20px, Horizontal: Auto, Bottom: 50px */
			padding: 10px 20px;
			background-color: black;
			color: white;
			border: none;
			border-radius: 20px; /* Rounds the corners */
			font-size: 16px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}

		#installAppButton:hover {
			background-color: #333333; /* Dark grey on hover */
		}
		
		#videoPlayerContainer {
		  display: none; /* Initially hidden */
		  text-align: center;
		  margin-top: 20px; /* Adjust as needed for spacing */
		  position: relative; /* Ensure it stays within its parent container */
		  width: 100%; /* Make it fill the width of its parent */
		  max-width: 800px; /* Limit max width if needed */
		  margin: 0 auto; /* Center horizontally */
		}

		#videoTitle {
		  font-size: 24px;
		  font-weight: bold;
		  color: orange;
		  margin-bottom: 10px;
		}

		#videoPlayer div {
		  display: flex; /* Align buttons horizontally */
		  justify-content: center; /* Center the buttons */
		  gap: 10px; /* Space between buttons */
		}

		#VideoCloseButton, #VideoPreviousButton, #VideoNextButton {
		  background-color: orange;
		  color: white;
		  border: none;
		  padding: 10px 15px;
		  font-size: 10px;
		  cursor: pointer;
		  border-radius: 5px;
		  max-width: none; /* Remove max-width constraint */
		  white-space: nowrap;
		}

		#VideoCloseButton:hover, #VideoPreviousButton:hover, #VideoNextButton:hover {
		  background-color: #FF5E0E;
		}

		#videoPlayer {
			max-width: 1000px; /* Maximum width */
			max-height: 500px; /* Maximum height */
			width: 100%; /* Fill the container width */
			height: auto; /* Maintain aspect ratio */
			margin: 0 auto; /* Center the video list */
			display: none;
			margin-bottom: 10px;
		}