/* ===== VIGNETTE + WORN PAPER TEXTURE ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("Images/literature-background2.gif")
center / cover no-repeat fixed;
      filter: grayscale(70%) contrast(1.1);
      background-color: #000;
      font-family: 'Nunito', sans-serif;
      color: #e6e6eb;
      display: flex;
      justify-content: center;
      align-items: center;
}

/* ===== BASE PAGE ===== */
body {
  background-color: #0f0f0f;
  color: #eee;
  font-family: "Times New Roman", serif;
  margin: 0;
  padding: 30px;
  overflow-y: auto;
}

.page-title {
  text-align: center;
  margin-bottom: 50px;
  letter-spacing: 2px;
}

/* ===== LIBRARY ===== */
.library {
  display: flex;
  flex-direction: column;
  gap: 60px;
  position: relative;
  z-index: 2;
}

/* ===== SHELF ===== */
.shelf {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 12px solid #5a3b2e;
}

/* ===== BOOK BASE ===== */
.book {
  width: 60px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;

  writing-mode: vertical-rl;
  text-orientation: mixed;

  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1px;

  box-shadow: 3px 3px 10px rgba(0,0,0,0.7);
  transition: transform 0.25s ease, box-shadow 0.25s ease;

  position: relative;
}

/* ===== BOOK HOVER ===== */
.book:hover {
  transform: translateY(-14px) rotate(0deg);
  box-shadow: 6px 6px 16px rgba(0,0,0,0.9);
}

/* ===== WHISPERS ===== */
.book::after {
  content: attr(data-whisper);
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);

  font-size: 11px;
  color: #d6d6d6;
  background: rgba(0,0,0,0.75);
  padding: 4px 8px;
  border-radius: 4px;

  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.35s ease;

  z-index: 5;
}

.book:hover::after {
  opacity: 1;
}

/* ===== BOOK TILTS ===== */
.tilt-1 { transform: rotate(-2deg); }
.tilt-2 { transform: rotate(1.5deg); }
.tilt-3 { transform: rotate(-1deg); }
.tilt-4 { transform: rotate(2.5deg); }

/* ===== BOOK COLORS ===== */
.book-red    { background: #7a1f1f; color: #f2f2f2; }
.book-black  { background: #151515; color: #f2f2f2; }
.book-cream  { background: #c9bfa7; color: #111; }
.book-green  { background: #2f4f3a; color: #f2f2f2; }
.book-blue   { background: #2d3e50; color: #f2f2f2; }
.book-purple { background: #4b2f5c; color: #f2f2f2; }
.book-brown  { background: #4a3324; color: #f2f2f2; }
.book-grey   { background: #777; color: #111; }

/* BACKGROUND */
body {
  margin: 0;
  background: #0b0b0b;
  color: #eaeaea;
  font-family: serif;
  overflow-y: auto;
}

/* FLOATING WHISPERS */
.whispers {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.whispers span {
  position: absolute;
  font-size: 0.8rem;
  opacity: 0.15;
  animation: float 20s linear infinite;
}

.whispers span:nth-child(1) { top: 10%; left: 15%; animation-duration: 18s; }
.whispers span:nth-child(2) { top: 30%; left: 70%; animation-duration: 25s; }
.whispers span:nth-child(3) { top: 60%; left: 40%; animation-duration: 22s; }
.whispers span:nth-child(4) { top: 80%; left: 10%; animation-duration: 30s; }
.whispers span:nth-child(5) { top: 50%; left: 80%; animation-duration: 26s; }
.whispers span:nth-child(6) { top: 90%; left: 17%; animation-duration: 11s; }
.whispers span:nth-child(7) { top: 40%; left: 57%; animation-duration: 23s; }
.whispers span:nth-child(8) { top: 21%; left: 27%; animation-duration: 19s; }
.whispers span:nth-child(9) { top: 100%; left: 50%; animation-duration: 23s; }
.whispers span:nth-child(10) { top: 79%; left: 69%; animation-duration: 23s; }

@keyframes float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-200px);
  }
}