/* --- Page base --- */
body {
  margin: 0;
  min-height: 100vh;
  background-color: #1a1a1a;
  color: white;
  font-family: sans-serif;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Column wrapper: text (top) -> slideshow (middle) -> audio (bottom) */
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* --- Heading --- */
.center-text {
  font-size: 3rem;
  font-family: 'Pacifico', cursive;
  color: #f6aff8;
  text-shadow:
    0 0 5px #3f1e8a,
    0 0 10px #3f1e8a,
    0 0 20px #3f1e8a,
    0 0 40px #3f1e8a;
}

/* --- Slideshow --- */
.slideshow-container {
  width: 100%;
  max-width: 500px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
}
.slide { display: none; }
.slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.fade { animation: fadeEffect 2.5s; }
@keyframes fadeEffect { from {opacity: .4;} to {opacity: 1;} }
/* Fallback: show first slide if JS doesn't run */
.slideshow-container .slide:first-child { display: block; }

/* --- Audio --- */
.audio-player {
  margin-top: 8px;
  display: inline-block;
  background-color: #1a1a1a;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 5px #3f1e8a, 0 0 10px #3f1e8a, 0 0 20px #3f1e8a;
}
.audio-player audio {
  width: 300px;
  filter: invert(1) hue-rotate(180deg);
}

/* --- Counter button (fixed at top-left) --- */
#counter-btn {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1000;
  background-color: #3f1e8a;
  color: white;
  font-size: 1.2rem;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 5px #3f1e8a, 0 0 10px #3f1e8a, 0 0 20px #3f1e8a;
  cursor: pointer;
  transition: transform .1s;
}
#counter-btn:hover { transform: scale(1.05); }
#counter-btn:active { transform: scale(0.95); }