body {
  margin: 0;
  font-family: Trebuchet MS, Verdana, sans-serif;
  color: #f4ddff;
  overflow-x: hidden;
  cursor: url("https://cur.cursors-4u.net/nature/nat-10/nat927.cur"), auto;

  background:
    radial-gradient(circle at 20% 20%, #6b00a8 0%, transparent 25%),
    radial-gradient(circle at 80% 30%, #1b001f 0%, transparent 30%),
    radial-gradient(circle at 40% 80%, #9b00ff 0%, transparent 25%),
    repeating-radial-gradient(circle, #120014 0px, #120014 12px, #3b0055 13px, #000 26px);

  background-attachment: fixed;
}

.stars {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(white 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.25;
  animation: sparkle 8s linear infinite;
  pointer-events: none;
}

@keyframes sparkle {
  from { transform: translateY(0px); }
  to { transform: translateY(-40px); }
}

.page {
  width: 90%;
  max-width: 1000px;
  margin: 30px auto;
  position: relative;
  z-index: 1;
}

header {
  text-align: center;
  background: rgba(0, 0, 0, 0.75);
  border: 3px solid #b300ff;
  border-radius: 25px;
  padding: 25px;
  box-shadow: 0 0 25px #b300ff;
}

h1 {
  font-size: 42px;
  color: #f3c6ff;
  text-shadow: 0 0 8px #ff66ff, 0 0 18px #8a00ff, 0 0 30px #ff00ff;
  letter-spacing: 2px;
}

h2 {
  color: #ffb3ff;
  text-shadow: 0 0 7px #cc00ff;
}

.tagline {
  font-style: italic;
  color: #ffccff;
  font-size: 18px;
}

.layout {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.sidebar {
  width: 250px;
  background: rgba(10, 0, 15, 0.85);
  border: 2px dashed #d580ff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 0 18px #63008f;
}

main {
  flex: 1;
}

.box {
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid #9d00ff;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 15px #7b00b5;
}

.mini-box {
  margin-top: 20px;
  padding: 12px;
  border: 1px solid #ff99ff;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
}

a {
  color: #ff99ff;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: white;
  text-shadow: 0 0 8px #ff00ff;
  letter-spacing: 2px;
}

ul {
  list-style-type: "✦ ";
  padding-left: 20px;
}

.music-box,
.grin {
  text-align: center;
}

.song-title {
  color: #ffccff;
  font-weight: bold;
  text-shadow: 0 0 8px #cc00ff;
}

footer {
  text-align: center;
  margin-top: 20px;
  color: #e6b3ff;
  font-size: 14px;
}

/* navigation */

.nav-links {
  list-style-type: none;
  padding-left: 0;
}

.nav-links li {
  margin-bottom: 10px;
}

.nav-links a {
  display: block;
  padding: 8px 12px;
  background: rgba(90, 0, 130, 0.5);
  border: 1px solid #ff99ff;
  border-radius: 12px;
  color: #ffccff;
  text-align: center;
  box-shadow: 0 0 8px #7b00b5;
}

.nav-links a:hover {
  background: #b300ff;
  color: white;
  transform: scale(1.05);
}

/* marquee */

marquee {
  margin-top: 20px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #cc00ff;
  padding: 10px;
  color: #ffccff;
  font-weight: bold;
  text-shadow: 0 0 8px #ff00ff;
  border-radius: 15px;
}

/* spinning 3D text */

.spinning-text {
  position: fixed;
  bottom: 30px;
  right: 30px;
  font-size: 24px;
  font-weight: bold;
  color: #ffccff;
  text-shadow: 0 0 5px #ff00ff, 0 0 10px #9900ff, 0 0 20px #6600ff;
  animation: spin 8s linear infinite;
  transform-style: preserve-3d;
  z-index: 999;
}

@keyframes spin {
  from { transform: rotateY(0deg) rotateX(0deg); }
  to { transform: rotateY(360deg) rotateX(360deg); }
}

/* floating eyes */

.eyes {
  position: fixed;
  font-size: 40px;
  color: #ff66ff;
  text-shadow: 0 0 10px #ff00ff, 0 0 20px #9900ff;
  animation: blink 4s infinite;
  z-index: 998;
}

.left-eye {
  top: 120px;
  left: 30px;
}

.right-eye {
  bottom: 150px;
  right: 50px;
}

@keyframes blink {
  0%, 45%, 100% { opacity: 1; }
  50% { opacity: 0.1; }
}

/* 3D cube */

.cube-scene {
  position: fixed;
  top: 90px;
  right: 45px;
  width: 90px;
  height: 90px;
  perspective: 600px;
  z-index: 999;
}

.cube {
  width: 90px;
  height: 90px;
  position: relative;
  transform-style: preserve-3d;
  animation: cubeSpin 8s infinite linear;
}

.cube div {
  position: absolute;
  width: 90px;
  height: 90px;
  background: rgba(40, 0, 60, 0.8);
  border: 2px solid #ff99ff;
  color: #ffccff;
  font-size: 28px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 8px #ff00ff;
  box-shadow: 0 0 15px #9900ff;
}

.cube div:nth-child(1) { transform: rotateY(0deg) translateZ(45px); }
.cube div:nth-child(2) { transform: rotateY(90deg) translateZ(45px); }
.cube div:nth-child(3) { transform: rotateY(180deg) translateZ(45px); }
.cube div:nth-child(4) { transform: rotateY(-90deg) translateZ(45px); }
.cube div:nth-child(5) { transform: rotateX(90deg) translateZ(45px); }
.cube div:nth-child(6) { transform: rotateX(-90deg) translateZ(45px); }

@keyframes cubeSpin {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}

/* playing cards */

.playing-card {
  position: fixed;
  width: 110px;
  height: 160px;
  perspective: 1000px;
  z-index: 997;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(145deg, rgba(40, 0, 60, 0.95), rgba(90, 0, 120, 0.9));
  border: 2px solid #ff99ff;
  border-radius: 18px;
  box-shadow: 0 0 18px #9900ff, inset 0 0 20px rgba(255, 255, 255, 0.08);
  color: #ffccff;
  transform-style: preserve-3d;
  animation: wonderFloat 6s ease-in-out infinite;
  overflow: hidden;
}

.card-inner::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: rotate(25deg);
}

.corner {
  position: absolute;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 0 8px #ff00ff;
}

.top {
  top: 10px;
  left: 12px;
}

.bottom {
  bottom: 10px;
  right: 12px;
  transform: rotate(180deg);
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  text-shadow: 0 0 10px #ff00ff, 0 0 20px #9900ff;
}

.card-one {
  top: 250px;
  left: 20px;
}

.card-two {
  bottom: 180px;
  left: 60px;
}

.card-three {
  top: 390px;
  right: 30px;
}

@keyframes wonderFloat {
  0% { transform: rotateY(-18deg) rotateX(8deg) translateY(0px) rotateZ(-2deg); }
  50% { transform: rotateY(20deg) rotateX(-10deg) translateY(-20px) rotateZ(2deg); }
  100% { transform: rotateY(-18deg) rotateX(8deg) translateY(0px) rotateZ(-2deg); }
}

/* dreamy filter */

.dream-filter {
  position: fixed;
  inset: 0;
  pointer-events: none;
  backdrop-filter: blur(0.4px);
  background: radial-gradient(circle, transparent 50%, rgba(120, 0, 180, 0.18));
  z-index: 9999;
}

/* fall effect */

.fall-effect {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, transparent, #120014);
  animation: fallAway 2.5s ease forwards;
  z-index: 10000;
  pointer-events: none;
}

@keyframes fallAway {
  0% {
    opacity: 1;
    transform: scale(0.2) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: scale(2.8) rotate(360deg);
  }
}

/* moon */

.moon {
  position: fixed;
  top: 35px;
  left: 45px;
  font-size: 90px;
  color: #e7b3ff;
  text-shadow: 0 0 25px #cc00ff, 0 0 50px #9900ff;
  animation: moonFloat 6s ease-in-out infinite;
  z-index: 996;
}

@keyframes moonFloat {
  50% { transform: translateY(15px) rotate(8deg); }
}

.moon-magic {
  filter: hue-rotate(60deg) contrast(1.2);
}

.moon-clock {
  position: fixed;
  top: 135px;
  left: 95px;
  font-size: 38px;
  animation: clockSpin 8s linear infinite;
  z-index: 997;
}

@keyframes clockSpin {
  to { transform: rotateY(360deg) rotateZ(360deg); }
}

/* cheshire smile */

.cheshire-smile {
  position: fixed;
  bottom: 90px;
  right: 190px;
  color: #ffb3ff;
  font-size: 42px;
  text-align: center;
  text-shadow: 0 0 15px #ff00ff, 0 0 35px #9900ff;
  animation: smileFade 5s infinite;
  z-index: 998;
}

.cheshire-smile span {
  font-size: 70px;
}

@keyframes smileFade {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}

/* potions */

.potion {
  position: fixed;
  width: 45px;
  height: 70px;
  background: linear-gradient(to bottom, #ffccff 0%, #d580ff 20%, #8b00c9 100%);
  border-radius: 12px 12px 18px 18px;
  border: 2px solid #ffccff;
  box-shadow: 0 0 15px #cc00ff, 0 0 30px #9900ff;
  animation: potionFloat 5s ease-in-out infinite;
  z-index: 996;
}

.potion::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 12px;
  width: 18px;
  height: 15px;
  background: #ffccff;
  border-radius: 4px;
  box-shadow: 0 0 10px #ff99ff;
}

.potion::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 12px;
  width: 10px;
  height: 35px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 10px;
}

.potion-one {
  top: 310px;
  right: 160px;
}

.potion-two {
  bottom: 120px;
  left: 180px;
  animation-delay: 1.5s;
}

@keyframes potionFloat {
  0% { transform: translateY(0px) rotate(-5deg); }
  50% { transform: translateY(-25px) rotate(8deg) scale(1.08); }
  100% { transform: translateY(0px) rotate(-5deg); }
}

/* hover magic */

.box:hover,
.sidebar:hover,
.playing-card:hover,
.cube-scene:hover {
  transform: scale(1.03);
  filter: brightness(1.25);
  transition: 0.3s;
}

/* portal */

.rabbit-portal {
  position: fixed;
  bottom: 35px;
  right: 35px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #ffccff 0px, #9900ff 8px, #000 18px);
  box-shadow: 0 0 35px #cc00ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 36px;
  animation: portalSpin 4s linear infinite;
  z-index: 996;
}

@keyframes portalSpin {
  to { transform: rotate(360deg); }
}

/* popup */

.popup-window {
  position: fixed;
  top: 190px;
  left: 300px;
  width: 230px;
  background: #170020;
  border: 2px solid #ff99ff;
  box-shadow: 0 0 18px #cc00ff;
  color: #ffccff;
  z-index: 999;
  border-radius: 10px;
  overflow: hidden;
}

.popup-top {
  background: #8b00c9;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  cursor: move;
  font-weight: bold;
}

.popup-top button {
  background: black;
  color: #ffccff;
  border: 1px solid #ffccff;
}

.popup-window p {
  padding: 0 12px;
}

/* inventory */

.inventory {
  position: fixed;
  bottom: 25px;
  left: 25px;
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid #d580ff;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 0 18px #9900ff;
  z-index: 998;
}

.inventory h3 {
  margin: 0 0 8px;
  color: #ffccff;
  text-align: center;
}

.inventory button {
  display: block;
  width: 100%;
  margin: 5px 0;
  background: #310044;
  color: #ffccff;
  border: 1px solid #ff99ff;
  border-radius: 8px;
  padding: 5px;
}

.inventory button:hover {
  background: #9b00ff;
}

/* diary */

.diary-entry {
  position: relative;
}

.diary-entry h2 {
  border-bottom: 1px dashed #ff99ff;
  padding-bottom: 8px;
}

.mood {
  color: #ffccff;
  font-style: italic;
  text-shadow: 0 0 8px #cc00ff;
}

.diary-entry::before {
  content: "✧";
  position: absolute;
  top: 15px;
  right: 20px;
  color: #ffb3ff;
  font-size: 24px;
  text-shadow: 0 0 10px #ff00ff;
}

/* guestbook */

.guestbook-box {
  position: relative;
  overflow: hidden;
}

.guestbook-wrapper {
  padding: 10px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(80, 0, 120, 0.8), rgba(20, 0, 40, 0.9));
  box-shadow: 0 0 25px #9900ff, inset 0 0 20px rgba(255, 255, 255, 0.05);
  border: 2px solid #ff99ff;
}

.guestbook-frame {
  border: none;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.8);
  filter: hue-rotate(15deg) saturate(1.2) brightness(0.92);
}

.guestbook-text {
  color: #ffccff;
  text-shadow: 0 0 8px #cc00ff;
  margin-bottom: 15px;
}

.guestbook-box::before {
  content: "✧ ✦ ☾";
  position: absolute;
  top: 10px;
  right: 20px;
  color: #ffb3ff;
  font-size: 22px;
  text-shadow: 0 0 8px #ff00ff, 0 0 18px #9900ff;
  animation: sparkleFloat 4s ease-in-out infinite;
}

@keyframes sparkleFloat {
  50% { transform: translateY(-8px) rotate(8deg); }
}

/* shrines */

.shrine-box {
  position: relative;
  overflow: hidden;
}

.shrine-box::before {
  content: "✧";
  position: absolute;
  top: 15px;
  right: 20px;
  color: #ff99ff;
  font-size: 26px;
  text-shadow: 0 0 8px #ff00ff, 0 0 18px #9900ff;
  animation: shrineSparkle 3s ease-in-out infinite;
}

.shrine-subtitle {
  color: #ffccff;
  font-style: italic;
  text-shadow: 0 0 8px #cc00ff;
  margin-bottom: 15px;
}

@keyframes shrineSparkle {
  50% { transform: scale(1.2) rotate(10deg); }
}

/* links */

.links-box {
  position: relative;
}

.cool-links {
  list-style: none;
  padding-left: 0;
}

.cool-links li {
  margin-bottom: 18px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 153, 255, 0.35);
  box-shadow: 0 0 12px rgba(153, 0, 255, 0.25);
  transition: 0.3s;
}

.cool-links li:hover {
  transform: translateX(6px) scale(1.02);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 18px #9900ff;
}

.cool-links a {
  color: #ffb3ff;
  font-size: 18px;
  text-shadow: 0 0 8px #cc00ff;
}

.cool-links span {
  display: block;
  margin-top: 5px;
  color: #f4ddff;
  opacity: 0.9;
}

/* gallery */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 2px solid #ff99ff;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 18px #9900ff;
  transition: 0.4s;
}

.gallery-item img {
  width: 100%;
  display: block;
  transition: 0.4s;
}

.gallery-item:hover {
  transform: scale(1.04) rotate(-1deg);
  box-shadow: 0 0 28px #cc00ff;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-item::before {
  content: "✧";
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 24px;
  color: #ffccff;
  z-index: 2;
  text-shadow: 0 0 8px #ff00ff;
  animation: sparklePulse 2.5s infinite;
}

@keyframes sparklePulse {
  50% { transform: scale(1.3) rotate(10deg); }
}

/* scrollbar */

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #120014;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #ff99ff, #9900ff);
  border-radius: 12px;
  border: 2px solid #120014;
}

::-webkit-scrollbar-thumb:hover {
  background: #cc00ff;
}

* {
  scrollbar-color: #9900ff #120014;
}

/* mobile */

@media only screen and (max-width: 700px) {
  .layout {
    flex-direction: column;
  }

  .sidebar {
    width: auto;
  }

  h1 {
    font-size: 30px;
  }

  .cube-scene,
  .playing-card,
  .moon-clock,
  .cheshire-smile,
  .potion,
  .rabbit-portal,
  .inventory,
  .popup-window {
    display: none;
  }
}