/* PASTEL RAINBOW BACKGROUND */
body {
  background: linear-gradient(135deg, #ffd6e9, #ffeef7, #e8f0ff, #f7e8ff);
  background-size: 400% 400%;
  animation: rainbowShift 12s ease infinite;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Trebuchet MS", sans-serif;
  color: #3a2a4d;
}

@keyframes rainbowShift {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

/* FALLING STARS */
.star {
  position: fixed;
  top: -10px;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 10px white;
  animation: fall 6s linear infinite;
  opacity: 0.8;
}

@keyframes fall {
  0% {transform: translateY(0) translateX(0);}
  100% {transform: translateY(100vh) translateX(20px);}
}

/* HEADER */
.fun-header {
  text-align: center;
  padding: 40px 20px;
  background: #ffffffaa;
  backdrop-filter: blur(6px);
  border-bottom: 4px dashed #ffb6d9;
}

.fun-header h1 {
  font-size: 60px;
  margin: 0;
  color: #ff7bbf;
  text-shadow: 2px 2px #ffd6f7;
}

.tagline {
  font-size: 18px;
  color: #b84a8f;
}

/* NAVIGATION */
.fun-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 25px 0;
}

.fun-nav a {
  background: #ffffffcc;
  padding: 12px 20px;
  border-radius: 20px;
  text-decoration: none;
  color: #ff7bbf;
  font-weight: bold;
  border: 2px solid #ffb6d9;
  transition: 0.3s;
}

.fun-nav a:hover {
  background: #ffd6e9;
  transform: scale(1.1) rotate(2deg);
}

/* INTRO BOX */
.intro-box {
  background: #ffffffdd;
  width: 70%;
  margin: auto;
  padding: 25px;
  border-radius: 25px;
  border: 3px solid #ffb6d9;
  box-shadow: 0px 0px 20px #ffcce6;
  text-align: center;
}

/* STICKERS */
.sticker {
  position: absolute;
  width: 80px;
  opacity: 0.9;
  transform: rotate(-5deg);
}

#notebook {
  width: 400px;
  height: 500px;
  margin: auto;
  background: #fff;
  border: 3px solid #ffb6d9;
  border-radius: 15px;
  box-shadow: 0 0 20px #ffcce6;
  overflow: hidden;
  position: relative;
}

.page {
  width: 100%;
  height: 100%;
  padding: 20px;
  font-family: "Georgia", serif;
  background: #fffafc;
  display: none;
}

.page:first-child {
  display: block;
}

.cute-list li {
  background: #ffe6f2;
  padding: 12px;
  margin: 10px 0;
  border-radius: 12px;
  border: 2px solid #ffb6d9;
}

.vent-button {
  background: #ff9bb3;
  padding: 12px 20px;
  border-radius: 20px;
  color: white;
  text-decoration: none;
  font-weight: bold;
}