body {
  background-color: black;
  color: white;
  font-family: 'Courier New', monospace;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* center content vertically */
  align-items: center;
  text-align: center;
}

.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 */
}

.bookcase-wrapper {
  position: relative;
  width: fit-content;
  margin-bottom: -200px;
}

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


.center-photo {
  width: 1200px;
  height: auto;
}

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


.left-candle {
  left: -40px;
  width: 250px;  /* custom size */
}

.right-candle {
  right: -40px;
  width: 250px;  /* custom size */
}


/* 👻 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;
}


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