body {
    background-color: black; /* Sets the background color to black */
    color: white; /* Sets the text color to white */
    font-family: 'Press Start 2P', cursive; /* Sets the primary font with a fallback to cursive */
    margin: 0; /* Removes the default margin */
    padding: 20px; /* Adds padding around the content */
    overflow-x: hidden; /* Hides horizontal overflow */
    overflow-y: scroll; /* Enables vertical scrolling */
    -ms-overflow-style: none; /* Hides scrollbar for IE and Edge */
    scrollbar-width: none; /* Hides scrollbar for Firefox */
    display: flex; /* Enables flexbox layout */
    flex-direction: column; /* Stacks child elements vertically */
    align-items: center; /* Centers children horizontally in the flex container */
    justify-content: center; /* Centers children vertically in the flex container */
    min-height: 100vh; /* Ensures the body takes at least the height of the viewport */
    cursor: url('https://i.ibb.co/dL8Jq8t/mac-cursor-32x.png'), auto; /* Sets custom cursor */
	-webkit-overflow-scrolling: touch; /* Smooth scrolling for touch devices */
    overflow: scroll; /* Enables scrollable content even with the scrollbar hidden */
}

/* Hide scrollbar for Chrome, Safari, and Opera */
body::-webkit-scrollbar {
    display: none;
}

:root::-webkit-scrollbar{
  display: none;
}

:root {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* This targets all webkit-based browsers, including Safari on iOS */
::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}
/* Targeting dynamically generated controls for a consistent cursor */
.jp-seek-bar, .jp-volume-bar, .jp-seek-bar *, .jp-volume-bar *, button, .volume-label, .current-time, .duration, .jp-play-bar, .jp-progress {
    cursor: url('https://i.ibb.co/dL8Jq8t/mac-cursor-32x.png'), pointer !important;
}

/* Ensuring custom cursor consistency */
a, button {
    cursor: url('https://i.ibb.co/dL8Jq8t/mac-cursor-32x.png'), pointer !important;
}



a:hover {
    text-shadow: 0 0 1px #ffffff, 0 0 4px #ffffff;
}


/* Header Image Style */
#header-image {
    width: 100%;
    height: auto;
    aspect-ratio: 2.9 / 1;
    object-fit: cover;
    margin-bottom: 20px;
}



button:hover {
    background-color: #ff00ff; /* Change to your preferred hover color */
    color: black;
}

/* Adding a custom style for input fields to match the theme */
input, textarea {
    background-color: #222;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px;
}

input:focus, textarea:focus {
    border-color: #ff00ff;
    outline: none;
}



/* Component Layout */
.component-container {
    max-width: 600px;
    width: 100%;
    padding: 10px;
    border: 1px solid white;
    background-color: #000;
    margin-bottom: 5px;
    box-sizing: border-box;
}

/* Now Playing Styles */
.now-playing {
    font-size: 16px;
    margin-bottom: 10px;
    text-align: center;
}

/* Volume Label Styling */
.volume-label {
    background-color: black; /* Black background */
    color: white; /* White text for contrast */
    padding: 5px; /* Padding around the text */
    border-radius: 5px; /* Optional: Rounded corners */
    display: inline-block; /* To properly apply padding and background */
    margin-bottom: 5px; /* Space between label and volume bar */
}

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #d3d3d3; /* Retro grey background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* High z-index to cover everything */
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center content vertically */
    transform: translateY(-20px); /* Adjust vertical position */
}

.loading-logo {
    max-width: 150px; /* Adjust as needed for appropriate size */
    margin-bottom: 20px; /* Space between logo and loading bar */
}

.loading-bar-container {
    width: 300px; /* Set the width of the progress bar */
    padding: 7px;
    background-color: #000;
    border-radius: 7px;
}

.loading-bar {
    height: 10px;
    width: 0%;
    background-color: #fff; /* Retro white progress bar */
    border-radius: 5px;
    position: relative;
}

/* Add a pulsing effect to the loading bar */
.loading-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.5) 10px,
        rgba(255, 255, 255, 0.5) 20px
    );
    animation: loading-pulse 3s infinite;
}

@keyframes loading-pulse {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100px 0;
    }
}

/* Hide the loading screen by default */
.loading-screen.hide {
    display: none;
}






.clickable-icon {
    position: fixed; /* Use fixed if you want the icon to stay at the bottom even when scrolling */
    bottom: 70px; /* Adjust the padding at the bottom */
    left: 50%; /* Center the icon horizontally */
    transform: translateX(-50%); /* Offset the icon by half its width to truly center it */
    z-index: 1000; /* Ensure it's above other elements */
    padding: 5px; /* Add padding around the icon */
}

.clickable-icon img {
    cursor: pointer;
    width: 50px; /* Adjust as needed */
    height: 50px; /* Adjust as needed */
    display: block; /* Ensures that the image takes the padding from its parent */
}


/* Controls Styles with Retro Rounded Buttons and Enhanced Hover Effect */
.jp-controls button, .jp-mute, .jp-unmute {
    font-family: 'Press Start 2P', cursive; /* Retro pixelated font */
    cursor: pointer;
    background: #000;
    color: white;
    padding: 10px 10px;
    font-size: 0.75rem;
    transition: background-color 0.3s, color 0.3s, transform 0.1s, box-shadow 0.3s; /* Smooth transitions for colors and shadow */
    display: inline-block;
    margin: 0 5px;
    text-transform: uppercase;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.6); /* Glowing effect for buttons */
}

/* Enhanced hover effect with color changes and a shadow glow */
.jp-controls button:hover, .jp-mute:hover, .jp-unmute:hover {
    background-color: #222; /* Dark grey background on hover */
    color: #0f0; /* Classic retro green text on hover */
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.7); /* Intensify the glow effect on hover */
}

/* 'Pressed' effect when buttons are active */
.jp-controls button:active, .jp-mute:active, .jp-unmute:active {
    transform: translateY(2px); /* Slight move down to simulate pressing */
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.7); /* Less glow to simulate the button being pressed */
	color: #0f0;
}
#disclaimer-box {
    margin: 20px auto;
    text-align: center;
    width: 90%;
    max-width: 800px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #000;
    transition: border 0.4s ease;
    margin-bottom: 20px;
}

#other-places-toggle, #disclaimer-toggle, #social-media-toggle {
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    background: #000;
    color: white;
    padding: 8px 15px; /* Reduced padding for a more moderate size */
    font-size: 0.75rem;
    transition: background-color 0.3s, color 0.3s, transform 0.1s, box-shadow 0.3s;
    display: block; /* Change to block to stack vertically */
    width: 100%; /* Adjust width to be a percentage of the container */
    max-width: 300px; /* Set a max-width to avoid overly long buttons */
    margin: 10px auto; /* Center the buttons and provide vertical spacing */
    text-transform: uppercase;
}

#other-places-toggle:hover, #disclaimer-toggle:hover, #social-media-toggle:hover {
    background-color: #222;
    color: #0f0;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
}

#other-places-toggle:active, #disclaimer-toggle:active, #social-media-toggle:active {
    transform: translateY(2px);
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
}

#disclaimer-content {
    color: white;
    display: none;
    font-size: 0.65rem;
    line-height: 1.5;
    padding: 0 20px;
    text-align: center;
    width: auto;
    max-width: 100%;
}

#other-places-box, #social-media-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow items to wrap within the container */
    margin-top: 10px;
}

#other-places-box img, #social-media-box img {
    width: 100px;
    height: auto;
    margin: 10px;
}


.social-icon {
    width: 100px; /* Increase icon size for better visibility */
    height: 100px;
    margin: 0 10px;
}

#social-media-box img {
    width: 100px; /* Increase icon size for better visibility */
    height: 100px;
    margin: 10px;
}


/* Ad Section Styles */
#ddd-section {
    width: 90%; /* Adjust width to fit the layout */
    max-width: 600px; /* Match the width of other components */
    margin: 20px auto; /* Vertical spacing and centered alignment */
    text-align: center; /* Center the ad image */
}

#ddd-section img {
    max-width: 100%; /* Ensure the image fits in the container */
    height: auto; /* Maintain aspect ratio */
    max-height: 200px; /* Maximum height for ad images */
}

/* Seek bar within the progress bar */
.jp-seek-bar {
    background-color: transparent; /* Ensure it's transparent so the play bar shows through */
    position: absolute;
    height: 100%;
    width: 100%;
  }
  /* Actual play bar showing the current progress */
.jp-play-bar {
    background-color: #fff;
    height: 100%;
    border-radius: 5px;
  }
/* Container for the progress bar */
.jp-progress {
  background-color: #333;
  cursor: pointer;
  height: 10px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 0 4px #fff, 0 0 7px #fff, 0 0 10px #fff;
  transition: box-shadow 0.3s ease-in-out;
  border-radius: 5px;
}
/* Container for the volume bar */
.jp-volume-bar {
    background-color: #333;
    cursor: pointer;
    height: 10px;
    position: relative;
    display: flex;
    justify-content: flex-start; /* Align children to the start for correct volume representation */
    align-items: center;
    margin: 20px 0;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 0 4px #fff, 0 0 7px #fff, 0 0 10px #fff;
    transition: box-shadow 0.3s ease-in-out;
    border-radius: 5px;
  }
  
  /* Actual play bar showing the current volume */
  .jp-volume-bar-value {
    background-color: #fff;
    height: 100%;
    border-radius: 5px;
    transition: width 0.3s ease; /* Smooth transition for width */
    width: 80%; /* This should be dynamically set based on the current volume */
  }
  
/* Hover effect to enhance visibility */
.jp-volume-bar:hover, .jp-progress:hover {
    box-shadow: 0 0 6px #fff, 0 0 9px #fff, 0 0 12px #fff;
}

.track-item {
    color: white;
    text-decoration: none;
    display: block;
    padding: 12px; /* Slightly increased padding for better spacing */
    border: 1px solid white;
    margin-bottom: 10px; /* Increased margin for better separation */
    text-align: center;
    cursor: pointer;
    background: #000;
    box-sizing: border-box; /* Ensures padding doesn't affect overall width */
    transition: box-shadow 0.3s, background-color 0.3s, color 0.3s; /* Smooth transitions */
    border-radius: 10px; /* Adds rounded corners */
}


.track-item.playing {
    background-color: #555;
    box-shadow: 0 0 6px #fff, 0 0 8px #fff, 0 0 10px #fff; /* Enhanced glow effect */
    text-shadow: 0 0 2px #ffffff, 0 0 5px #ffffff; /* Add glow effect to text */
}

.track-item:hover {
    box-shadow: 0 0 6px #fff, 0 0 8px #fff, 0 0 10px #fff; /* Enhanced hover glow */
}

/* LIVE Track Styling */
.live-track {
    background-color: rgba(255, 99, 71, 0.1); /* Slight transparent red background */
    color: #FF6347; /* Sets the text color to red */
    padding: 12px; /* Slightly increased padding */
    margin-bottom: 12px; /* Increased margin for better separation */
    border: 2px solid #FF6347; /* Red border */
    display: block;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; /* Smooth transitions for hover effects */
}

.live-track:hover, .live-track.playing {
    background-color: rgba(255, 99, 71, 0.2); /* Slightly darker transparent red on hover/active */
    color: white; /* Change text color to white for contrast */
    border-color: #FF6347; /* Maintain red border color */
    box-shadow: 0 0 8px #fff, 0 0 10px #fff, 0 0 12px #fff; /* Enhanced glow effect */
}

#track-selection {
    width: 100%;
    max-width: 450px; /* Limit width to match other components */
    margin: 10px auto; /* Center the container */
    padding: 10px; /* Add padding for spacing */
    background-color: #000; /* Consistent background */
    overflow: hidden; /* Prevent overflow */
    border-radius: 10px; /* Slightly rounded corners for a smoother look */
   
}


/* Media Player Controls Styling */
.jp-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Adjust the margin to create more space between the controls and the time info */
    margin-top: 0px; /* This negative margin pulls the controls up towards the header */
}

#track-select-popup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place on scroll */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Center the div on the page */
    width: 80%; /* Width of the popup */
    max-width: 400px; /* Maximum width of the popup */
    padding: 20px;
    background-color: black; /* Background color */
    color: white; /* Text color */
    font-family: 'Press Start 2P', cursive; /* Font family */
    border: 2px solid white; /* Border color */
    z-index: 1050; /* Ensure it's on top of other elements */
    text-align: center; /* Center the text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Optional: Add some shadow for better visibility */
    border-radius: 10px; /* Optional: Rounded corners */
	opacity: 95%;
}




/* Time Information Styling Adjustments */
.time-info {
    position: absolute;
    bottom: -33px; /* Adjusted to move it down from the seek bar */
    left: 10px;
    right: 10px; /* Spacing from the right edge */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 20px); /* Adjust width taking left and right padding into account */
}
.current-time, .duration {
    font-size: 0.75rem;
    background-color: black; /* To ensure text is readable over the progress bar */
    padding: 2px 4px; /* Padding to provide spacing around the text */
    color: white; /* Ensuring text color is white for readability */
}



/* Tablet and Small Desktops */
@media screen and (max-width: 768px) {
    .jp-controls button, .jp-mute, .jp-unmute {
        padding: 10px;
        font-size: 3vw;
        min-width: 50px;
        min-height: 34px;
    }

    .jp-progress{
        width: 80vw;
        height: 6vh;
    }

    .track-item, .now-playing {
        padding: 1em;
        font-size: 3.5vw;
        margin-bottom: 1em;
    }

    #header-image {
        max-height: 25vh;
		margin-bottom: 40px; /* Adjust this value as needed */
    }
    .jp-controls {
        /* Adjust the margin-top if necessary for smaller screens */
        margin-top: 0px; /* Adjust this value as needed */
    }
    .time-info {
        font-size: 3.5vw;
        margin: 1em 0;
		bottom: 30px; /* Adjust this value as needed */
    }
    #disclaimer-box {
        max-width: 700px; /* Increase max width for larger screens */
    }
    .jp-volume-controls, .jp-volume-bar, .volume-text {
        display: none;
    }
	.live-track {
		color: #FF6347; /* Lighter red color, e.g., Tomato red */
	}

	.live-track.playing, .live-track:hover {
		color: #FF6347; /* Consistent color on hover and when playing */
	}
}
/* Mobile-specific adjustments */
@media screen and (max-width: 480px) {
    .jp-progress {
        margin-top: 40px; /* Increased space for the time info */
        height: 10px; /* Adjust if needed */
    }
    #track-selection {
        margin: 10px auto; /* Adjusts margin for smaller screens */
        padding: 5px;
		
		/* Reduces padding for smaller screens */
    }

    .track-item {
        padding: 14px; /* Reduced padding for smaller screens */
        font-size: 4vw; /* Adjusted font size for readability on smaller screens */
    }

    /* Adjust the container for the time indicators */
    .time-info {
        display: flex;
        justify-content: space-between; /* This will space out the children (current time and duration) */
        position: absolute; /* Position absolute to place it relative to jp-progress */
        width: 100%; /* Full width to allow justify-content to space children properly */
        top: -35px; /*st this value so that time-info sits above the progress bar */
        left: 0;
        padding: 0 10px; /* Padding to ensure content doesn't touch the edges */
    }
    .current-time, .duration {
        position: relative;
        background-color: transparent;
        padding: 2px 10px;/*Adjust padding to ensure they don't touch each other or the progress bar */
        margin-top: 5px; /* Ensures vertical spacing from the progress bar */
    }

    .current-time {
        left: 0; /* Place the current time at the start of the seek bar */
    }

    .clickable-icon {
        bottom: 10px; /* Lower the icon on mobile. Adjust the value as needed. */
    }
    .jp-volume-controls, .jp-volume-bar, .volume-text {
        display: none;
    }
	/* Controls Styles with Retro Rounded Buttons and Enhanced Hover Effect */
	.jp-controls button, .jp-mute, .jp-unmute {
		padding: 2px 2px; /* Reduced padding on top and bottom for a slimmer look */
	
	
	}
	    .jp-controls button, .jp-mute, .jp-unmute {
        padding: 2px 8px; /* Further reduced padding for even slimmer buttons */
    }


	.track-item.playing {
		background-color: #555;
		box-shadow: 0 0 5px #fff, 0 0 6px #fff, 0 0 6px #fff; /* Smooth white glow on hover */
		text-shadow: 0 0 1px #ffffff, 0 0 4px #ffffff; /* Add glow effect to text */
	}

	/* Smoother and Whiter Glow on Hover for Track Items */
	.track-item:hover {
		box-shadow: 0 0 5px #fff, 0 0 6px #fff, 0 0 6px #fff; /* Smooth white glow on hover */
	}


	/* LIVE Track Styling */
	.live-track {
		background-color: rgba(255, 99, 71, 0.1); /* Slight transparent red background */
		color: #FF6347; /* Sets the text color to red */
		padding: 10px; /* Retains padding for better visual spacing */
		margin-bottom: 10px; /* Ensures spacing between this and next elements */
		border: 2px solid #FF6347; /* Sets the border to a red color */
		display: block; /* Ensures it's displayed as a block for full-width */
		text-align: center; /* Centers the text within */
		font-weight: bold; /* Ensures the text is bold */
		cursor: pointer; /* Indicates it's clickable */
		transition: background-color 0.3s, color 0.3s; /* Smooth transitions for hover effects */
	}

	/* Adjusting for hover and active states */
	.live-track:hover, .live-track.playing {
		background-color: rgba(255, 99, 71, 0.2); /* Slightly darker transparent red on hover/active for a subtle effect */
		color: white; /* Change text color to white for contrast */
		border-color: #FF6347; /* Maintain the red border color */
		box-shadow: 0 0 6px #fff, 0 0 9px #fff, 0 0 12px #fff;
	}
#other-places-toggle, #disclaimer-toggle, #social-media-toggle {
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    background: #000;
    color: white;
    padding: 9px 12px;
    margin-bottom: 5px; /* Adjust this value as needed to increase spacing */
    display: inline-block; 
}

#disclaimer-box {
    margin: 8px auto;
    text-align: center;
    width: 100%;
    max-width: 800px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #000;
    transition: border 0.4s ease;
    margin-bottom: 15px;
}

#disclaimer-content {
    color: white;
    display: none;
    font-size: 0.65rem;
    line-height: 1.5;
    padding: 10px 10px;
    text-align: center;
    width: auto;
    max-width: 100%;
}

#other-places-box, #social-media-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#other-places-box img, #social-media-box img {
    width: 100px;
    height: auto;
    margin: 10px;
}

.social-icon {
    width: 100px;
    height: 100px;
    margin: 0 10px;
}

}
@media screen and (min-width: 481px) {
    .jp-volume-controls {
        display: flex; /* Use flexbox for alignment */
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
        position: fixed; /* Fix position relative to viewport */
        left: 0; /* Align to the left edge */
        right: 0; /* Align to the right edge */
        bottom: 10px; /* Distance from the bottom */
        z-index: 10; /* Ensure it's above other elements */
    }

    .volume-label {
        text-align: center; /* Center the text label */
        margin-bottom: 5px; /* Space between label and volume bar */
    }

    .jp-volume-bar {
        width: 90%; /* Set the width of the volume bar */
        margin: 0 auto; /* Center the volume bar */
		margin-bottom: 10px;
    }
}
/* Ad Section Styles */
#ddd-section {
    width: 100%; /* Adjust the width to take the full container width */
    max-width: 200px; /* Set a maximum width to ensure it's not too large */
    margin: 20px auto; /* Maintain vertical spacing and centered alignment */
    text-align: center; /* Center the ad content */
    padding: 20px; /* Add some padding for spacing */


}

#ddd-section img {
    width: 100%; /* Make the image responsive to the container's width */
    height: auto; /* Maintain aspect ratio */
    max-height: 200px; /* Set a maximum height for the images */
}
/* Fade In and Fade Out Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

#ddd-section img.fadeIn {
    animation: fadeIn 1s ease-in;
}

#ddd-section img.fadeOut {
    animation: fadeOut 1s ease-out;
}

@media screen and (min-width: 1024px) {
    #disclaimer-box {
        max-width: 900px; /* Further increase max width for very large screens */
    }