.diary-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 120px;
  left: 40px;
}

.diary-menu li {
  font-family: 'Press Start 2P', cursive;
  font-size: 14px;
  color: #ffccff;
  text-shadow: 0 0 5px #ffffff80;
  margin-bottom: 24px;
   line-height: 1.8;
}

.diary-menu li:hover {
  color: white;
  text-shadow: 0 0 8px #fff, 0 0 12px #ffccff;
  cursor: pointer;
}
.diary-menu li a {
  display: inline-block;
  padding-bottom: 20px;
  color: #ffccff;
  font-family: 'Press Start 2P', cursive;
  font-size: 12px;
  text-shadow: 0 0 5px #ffffff80;
}



body {
  font-family: 'Press Start 2P', cursive;
  background: linear-gradient(135deg, #0a0a23, #ffd1dc);
  background-attachment: fixed;
  background-size: cover;
  margin: 0;
  padding: 0;
}



nav a {
  text-decoration: none;
  color: #ff99cc;
  font-weight: bold;
  font-size: 16px;
  padding: 10px;
}

nav a:hover {
  animation: sparkle 1s infinite alternate;
  color: #ffffff;
  text-shadow: 0 0 5px #fff, 0 0 10px #ff99cc;
}


@keyframes sparkle {
  0% {
    text-shadow: 0 0 2px #fff, 0 0 5px #ff99cc, 0 0 8px #ff99cc;
  }
  50% {
    text-shadow: 0 0 5px #fff, 0 0 10px #ff66cc, 0 0 15px #ff66cc;
  }
  100% {
    text-shadow: 0 0 2px #fff, 0 0 5px #ff99cc, 0 0 8px #ff99cc;
  }
}


h1, h2, h3 {
  font-family: 'Press Start 2P', cursive;
  color: #ffffff;
  text-align: center;
}

p {
  font-size: 16px;
  color: #ddd;
  line-height: 1.6;
  padding: 0 20px;
  font-style: pixel
}



.sparkle-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background-size: cover;
  z-index: 999;
  opacity: 0.3;
  mix-blend-mode: screen;
}



.realstic bubbles span:nth-child(1) { left: 10%; animation-duration: 8s; }
.realstic bubbles span:nth-child(2) { left: 30%; animation-duration: 10s; }
.realstic bubbles span:nth-child(3) { left: 50%; animation-duration: 12s; }
.realstic bubbles span:nth-child(4) { left: 70%; animation-duration: 9s; }
.realstic bubbles span:nth-child(5) { left: 90%; animation-duration: 11s; }

@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100vh) scale(1.5);
    opacity: 0;
  }
}

.fireflies {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.fireflies span {
  position: absolute;
  display: block;
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #ffff99 20%, transparent 70%);
  border-radius: 50%;
  opacity: 0.8;
  animation: floatFirefly 10s linear infinite;
}

.fireflies span:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
.fireflies span:nth-child(2) { top: 50%; left: 25%; animation-delay: 2s; }
.fireflies span:nth-child(3) { top: 70%; left: 40%; animation-delay: 4s; }
.fireflies span:nth-child(4) { top: 30%; left: 60%; animation-delay: 6s; }
.fireflies span:nth-child(5) { top: 80%; left: 75%; animation-delay: 1s; }
.fireflies span:nth-child(6) { top: 10%; left: 85%; animation-delay: 3s; }
.fireflies span:nth-child(7) { top: 60%; left: 10%; animation-delay: 5s; }
.fireflies span:nth-child(8) { top: 40%; left: 90%; animation-delay: 7s; }
.fireflies span:nth-child(9) { top: 25%; left: 50%; animation-delay: 8s; }
.fireflies span:nth-child(10){ top: 65%; left: 35%; animation-delay: 9s; }

@keyframes floatFirefly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-20px, -30px) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translate(20px, 30px) scale(1);
    opacity: 0.7;
  }
}

.realistic-bubbles span {
  position: absolute;
  display: block;
  width: 30px; /* Size of the bubble */
  height: 30px;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 40%, rgba(173,216,230,0.2) 60%);
  border-radius: 50%;
  animation: floatBubble 12s ease-in-out infinite;
  opacity: 0.5;
  filter: blur(0.5px);
  mix-blend-mode: screen;
}


@keyframes floatBubble {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-200px) scale(1.3);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-400px) scale(1);
    opacity: 0;
  }
}


.realistic-bubbles {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2;
}


@keyframes thunderFlash {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0.9;
  }
  10% {
    opacity: 0;
  }
  15% {
    opacity: 0.7;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.thunder {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle, rgba(204,153,255,0.5), rgba(0,0,0,0));
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1000;
  animation: thunderFlash 20s infinite ease-in-out;


}


.play-btn:hover {
  background-color: #ff66aa;
}


.home-star {
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 28px;
  text-decoration: none;
  color: #ffff66; /* soft yellow */
  text-shadow:
    0 0 6px #ffff66,
    0 0 12px #ffeb3b,
    0 0 18px #fff176;
  z-index: 1000;
  transition: transform 0.2s ease-in-out;
}

.home-star:hover {
  transform: scale(1.3) rotate(10deg);
  text-shadow:
    0 0 10px #fff,
    0 0 18px #ffeb3b,
    0 0 30px #ffff66;
  color: white;
  cursor: pointer;
}

.book {
  transform-style: preserve-3d;
  animation: flipPage 1.2s ease forwards;
  transform-origin: left center;
  opacity: 0;
}

@keyframes flipPage {
  0% {
    transform: rotateY(-100deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}  
.diary-header {
  position: fixed;
  top: 5px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #5c4c8a;
  font-family: 'Indie Flower', cursive;
  padding: 2px 0;
  margin: 0;
  background: transparent;
  z-index: 999;
  opacity: 0.8;
}

}

.fireflies span {
  position: absolute;
  display: block;
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #ffff99 20%, transparent 70%);
  border-radius: 50%;
  opacity: 0.8;
  animation: floatFirefly 10s linear infinite;
}

.fireflies span:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
.fireflies span:nth-child(2) { top: 50%; left: 25%; animation-delay: 2s; }
.fireflies span:nth-child(3) { top: 70%; left: 40%; animation-delay: 4s; }
.fireflies span:nth-child(4) { top: 30%; left: 60%; animation-delay: 6s; }
.fireflies span:nth-child(5) { top: 80%; left: 75%; animation-delay: 1s; }
.fireflies span:nth-child(6) { top: 10%; left: 85%; animation-delay: 3s; }
.fireflies span:nth-child(7) { top: 60%; left: 10%; animation-delay: 5s; }
.fireflies span:nth-child(8) { top: 40%; left: 90%; animation-delay: 7s; }
.fireflies span:nth-child(9) { top: 25%; left: 50%; animation-delay: 8s; }
.fireflies span:nth-child(10){ top: 65%; left: 35%; animation-delay: 9s; }

@keyframes floatFirefly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-20px, -30px) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translate(20px, 30px) scale(1);
    opacity: 0.7;
  }
}

.realistic-bubbles span {
  position: absolute;
  display: block;
  width: 30px; /* Size of the bubble */
  height: 30px;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 40%, rgba(173,216,230,0.2) 60%);
  border-radius: 50%;
  animation: floatBubble 12s ease-in-out infinite;
  opacity: 0.5;
  filter: blur(0.5px);
  mix-blend-mode: screen;
}


@keyframes floatBubble {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-200px) scale(1.3);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-400px) scale(1);
    opacity: 0;
  }
}

}

.fireflies {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.fireflies span {
  position: absolute;
  display: block;
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #ffff99 20%, transparent 70%);
  border-radius: 50%;
  opacity: 0.8;
  animation: floatFirefly 10s linear infinite;
}

.fireflies span:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
.fireflies span:nth-child(2) { top: 50%; left: 25%; animation-delay: 2s; }
.fireflies span:nth-child(3) { top: 70%; left: 40%; animation-delay: 4s; }
.fireflies span:nth-child(4) { top: 30%; left: 60%; animation-delay: 6s; }
.fireflies span:nth-child(5) { top: 80%; left: 75%; animation-delay: 1s; }
.fireflies span:nth-child(6) { top: 10%; left: 85%; animation-delay: 3s; }
.fireflies span:nth-child(7) { top: 60%; left: 10%; animation-delay: 5s; }
.fireflies span:nth-child(8) { top: 40%; left: 90%; animation-delay: 7s; }
.fireflies span:nth-child(9) { top: 25%; left: 50%; animation-delay: 8s; }
.fireflies span:nth-child(10){ top: 65%; left: 35%; animation-delay: 9s; }
.fireflies span:nth-child(1) { top: 20%; right: 15%; animation-delay: 0s; }
.fireflies span:nth-child(2) { top: 50%; right: 25%; animation-delay: 2s; }
.fireflies span:nth-child(3) { top: 70%; right: 40%; animation-delay: 4s; }
.fireflies span:nth-child(4) { top: 30%; right: 60%; animation-delay: 6s; }
.fireflies span:nth-child(5) { top: 80%; right: 75%; animation-delay: 1s; }
.fireflies span:nth-child(6) { top: 10%; right: 85%; animation-delay: 3s; }
.fireflies span:nth-child(7) { top: 60%; right: 10%; animation-delay: 5s; }
.fireflies span:nth-child(8) { top: 40%; right: 90%; animation-delay: 7s; }
.fireflies span:nth-child(9) { top: 25%; right: 50%; animation-delay: 8s; }
.fireflies span:nth-child(10){ top: 65%; right: 35%; animation-delay: 9s; }

@keyframes floatFirefly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-20px, -30px) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translate(20px, 30px) scale(1);
    opacity: 0.7;
  }
}

.fireflies {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.fireflies span {
  position: absolute;
  display: block;
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #ffff99 20%, transparent 70%);
  border-radius: 50%;
  opacity: 0.8;
  animation: floatFirefly 10s linear infinite;
  box-shadow: 0 0 8px #ffffaa, 0 0 12px #fff799;
}

@keyframes floatFirefly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-20px, -30px) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translate(20px, 30px) scale(1);
    opacity: 0.7;
  }
}

/* Spread them all over the screen using top & left */
.fireflies span:nth-child(1) { top: 10%; left: 12%; animation-delay: 0s; }
.fireflies span:nth-child(2) { top: 30%; left: 25%; animation-delay: 2s; }
.fireflies span:nth-child(3) { top: 60%; left: 40%; animation-delay: 4s; }
.fireflies span:nth-child(4) { top: 75%; left: 65%; animation-delay: 6s; }
.fireflies span:nth-child(5) { top: 85%; left: 85%; animation-delay: 1s; }
.fireflies span:nth-child(6) { top: 15%; left: 78%; animation-delay: 3s; }
.fireflies span:nth-child(7) { top: 55%; left: 10%; animation-delay: 5s; }
.fireflies span:nth-child(8) { top: 45%; left: 92%; animation-delay: 7s; }
.fireflies span:nth-child(9) { top: 22%; left: 50%; animation-delay: 8s; }
.fireflies span:nth-child(10){ top: 68%; left: 33%; animation-delay: 9s; }

.home-star {
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 28px;
  text-decoration: none;
  color: #ffff66; /* soft yellow */
  text-shadow:
    0 0 6px #ffff66,
    0 0 12px #ffeb3b,
    0 0 18px #fff176;
  z-index: 1000;
  transition: transform 0.2s ease-in-out;
}

.home-star:hover {
  transform: scale(1.3) rotate(10deg);
  text-shadow:
    0 0 10px #fff,
    0 0 18px #ffeb3b,
    0 0 30px #ffff66;
  color: white;
  cursor: pointer;
}


/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat942.ani), url(https://cur.cursors-4u.net/nature/nat-10/nat942.png), auto !important;} /* End https://www.cursors-4u.com */