html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: black;
  font-family: "Times New Roman", serif;
}

/* Main flex container */
.container {
  display: flex;
  min-height: 100vh;
}

/* Left and right bars */
.left-bar, .right-bar {
  flex: 1;
  background-color: black;
  color: red;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.right-bar {
  flex: 1;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* pushes content to the bottom */
  align-items: center;        /* horizontally center the image */
  padding: 10px;
}

.right-bar .right-image {
  max-width: 100%;    /* prevent overflow */
  height: auto;       /* keep aspect ratio */
  display: block;
}

.left-bar {
  flex: 1;
  background-color: black;
  color: red;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  height: 100vh; /* fixed viewport height */
  overflow-y: scroll; /* scroll independently */
}

.left-bar::-webkit-scrollbar {
  display: none;
}


.left-bar p {
  margin: 0;
  font-size: 10px;
  line-height: 1.2;
}

/* Center content */
.center-content {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100%; /* allow child to use full height */
}

/* Image container */
.image-container {
  position: relative;
  display: block;
  width: 100%;
  height: 100%; /* now the img has a reference for 100% height */
}

/* Center image */
.image-container img {
  width: 100%;   
  height: 100%;  
  object-fit: cover; /* keeps aspect ratio but crops excess */
  display: block;
  
}


/* Overlay all text on top of image */
.overlay-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: black;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5%;        /* smaller, relative padding so text scales */
  box-sizing: border-box;
  overflow-wrap: break-word;  /* ensures long text wraps inside the container */
}

/* Glowing header */
.overlay-text h1 {
    position: absolute;
  top: 20px;  /* distance from top of container */
  left: 50%;
  transform: translateX(-50%);
  animation: glowPulse 5s ease-in-out infinite alternate;
  margin-bottom: 15px;
  font-size: 4rem;
}

/* Glow animation */
@keyframes glowPulse {
  0% { text-shadow: 0 0 5px red, 0 0 10px darkred, 0 0 15px red; }
  50% { text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px red; }
  100% { text-shadow: 0 0 5px red, 0 0 10px darkorange, 0 0 15px red; }
}

/* Paragraphs and lists overlayed on image */
.overlay-text p {
  color: black; /* base text color */
  font-size: 2rem;
  line-height: 1.3;
  text-shadow: 
    0 0 2px orange,
    0 0 5px red,
    0 0 7px darkred;
}

#music-toggle {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 120px;
  height: 120px;
  cursor: pointer;
  z-index: 9999;
  object-fit: contain;
  filter: drop-shadow(0 0 1px red) drop-shadow(0 0 2px orange);
  transition: filter 0.3s ease, transform 0.2s ease;
}

#music-toggle:hover {
  filter: drop-shadow(0 0 3px orange) drop-shadow(0 0 4px red);
  transform: scale(1.05);
}

/* Container near the music button */
#volume-container {
  position: fixed;
  top: 65px; /* below music button */
  right: 10px;
  width: 150px;       
  height: 100px;      
  z-index: 9999;
  overflow: visible;
}

/* Slider itself, hidden by default (off-screen) */
#volume-slider {
  position: absolute;
  top: 50%;               /* vertically center within container */
  transform: translateY(-50%);
  right: -150px;           /* off-screen */
  width: 120px;
  cursor: pointer;
  opacity: 0.8;
  transition: right 0.3s ease, opacity 0.3s ease;
}

/* Slide out when hovering near container */
#volume-container:hover #volume-slider {
  right: 0;               /* fully visible */
}

/* Track - Chrome/Safari */
#volume-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: #223;
  border-radius: 3px;
  box-shadow: 0 0 5px red, 0 0 10px orange, inset 0 0 3px red, inset 0 0 6px orange;
}

/* Thumb - Chrome/Safari */
#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* disable default Chrome style */
  appearance: none;
  width: 10px;   /* thumb width */
  height: 10px;  /* thumb height */
  background-color: yellow;
  border: 1px solid orange;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -3.5px; /* centers 10px thumb on 6px track */
  box-shadow: 0 0 5px orange, 0 0 10px red;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
/* Track - Firefox */
#volume-slider::-moz-range-track {
  width: 100%;
  height: 6px;
  background: #223;
  border-radius: 3px;
  box-shadow: 0 0 5px red, 0 0 10px orange, inset 0 0 3px red, inset 0 0 6px orange;
  border: none;
}

#volume-slider {
  background: transparent; /* removes the white/gray default bar in Firefox */
}


/* Progress - Firefox (filled part) */
#volume-slider::-moz-range-progress {
  background: #444;
  height: 6px;
  border-radius: 3px;
  box-shadow: inset 0 0 3px red, inset 0 0 6px orange;
}

/* Thumb - Firefox */
#volume-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background-color: yellow;
  border: 1px solid orange;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px orange, 0 0 10px red;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  margin-top: 0; /* centers thumb on 6px track */
}

/* Hover effect - both browsers */
#volume-slider:hover::-webkit-slider-thumb,
#volume-slider:hover::-moz-range-thumb {
  transform: scale(1.2);
  box-shadow: 0 0 10px orange, 0 0 15px red;
}

#volume-slider:hover::-webkit-slider-runnable-track,
#volume-slider:hover::-moz-range-track {
  box-shadow: 0 0 6px red, 0 0 12px orange, inset 0 0 4px red, inset 0 0 8px orange;
}

.overlay-text ul {
  list-style: disc;
  padding-left: 20px;
}

#now-playing {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.8); /* solid dark background to prevent blending */
  color: #fff !important;
  font-size: 14px;
  border-radius: 10px;
  font-family: "Courier New", monospace;
  z-index: 10000; /* force it above everything */
  text-shadow: 0 0 5px orange, 0 0 10px red;
  mix-blend-mode: normal !important; /* override any inherited blending */
  filter: none !important; /* kill inherited filters */
  opacity: 1 !important;
  pointer-events: none;
}

#now-playing * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
}