body {
  background: url('images/background_exp2.png') no-repeat center center fixed;
  background-size: cover;
  margin: 0;
  padding: 0;
  font-family: 'Courier New', monospace;
  color: white;
  overflow: hidden;
}
  /* New Code */
.overlay-container {
  text-align: center;
  /* Optional: add horizontal centering */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.light-switch-img {
  position: absolute;
  top: 40%;
  left: 5%;
  width: 40px;
  cursor: pointer;
  z-index: 9999;
}


.overlay-container h1,
.overlay-container .quote {
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/*New Code End*/

.content {
  margin-top: -400px;     /* Reduce this from 70px to 20px */
  margin-bottom: 50px;
   padding-top: 100px;  /* Push it to the top of the page flex */
}
.main-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
}


.bottom-row {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative; /* no longer absolute */
}


.tv-on-shelf {
  position: absolute;
  bottom: 36%; /* Puts it right above the bookshelf */
  left: 50%;
  transform: translateX(-50%); /* Centers it horizontally */
  width: 500px; /* Adjust size as needed */
  height: auto;
  z-index: 2; /* Make sure it sits above the bookshelf */
}


/*.center-photo {
  width: 1100px;
  height: auto;
}
*/

.bookcase-wrapper {
  position: relative;
  max-width: 90vw;
  width: 1200px;
  margin: 0 auto;
}

.left-candle,
.right-candle {
  position: absolute;
  bottom: 35.6%; /* Sits the base of the candle at the top edge of the bookshelf */
}


.left-candle {
  position: fixed;
  bottom: 380px;
  left: 320px;
  width: 200px;
}

.right-candle {
  position: fixed;
  bottom: 380px;
  left: 1320px;
  width: 200px;
}


/* 👻 Spooky glitch hover effect on the title */
h1:hover {
  color: red;
  text-shadow: 1px 0 white, -1px 0 white;
  animation: glitch 0.3s infinite;
}

@keyframes glitch {
  0% { transform: translate(1px, 0); }
  50% { transform: translate(-1px, 0); }
  100% { transform: translate(1px, 0); }
}

.music-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 80px; /* Adjust size as needed */
  height: auto;
  cursor: pointer;
  z-index: 10;
}


/* Old flashlight overlay test version — no longer used
.flashlight-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background: radial-gradient(circle 120px at center, rgba(255, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.95) 100%);
  z-index: 9999;
  mix-blend-mode: multiply;
}
*/


.flashlight-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background: radial-gradient(circle 200px at center, rgba(255, 50, 50, 0.8) 0%, rgba(0, 0, 0, 0.95) 100%);
  z-index: 9999;
  transition: opacity 1.5s ease;
  opacity: 1;
  display: block;
   mix-blend-mode: normal; /* ← brings back the glow interaction */
}

/*.flashlight-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background: radial-gradient(circle 200px at center, rgba(255, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.95) 100%);
  z-index: 9999;
  transition: opacity 1.5s ease;
  opacity: 1;
  display: block;
  mix-blend-mode: screen;
}





/* 🕷️ Custom cursor (optional image upload) */
/* Replace with your own image path if you want */
body {
  cursor: url('images/creepy-cursor.png') 0 0, auto;
}