.menu-page {
  background: #f5f5f5;
  font-family: Arial, sans-serif;
  text-align: center;
}


.menu {
  margin-top: 60px;
}


.menu-btn {
  display: block;
  width: 220px;
  margin: 18px auto;
  padding: 15px;
  font-size: 18px;
  text-decoration: none;

  color: black;
  background: transparent;

  border: 2px solid black;
  border-radius: 12px;

  box-shadow: 4px 4px 0px black;

  transition: 
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}


.menu-btn:hover {
  transform: scale(1.1);

  box-shadow:
    0 0 10px rgba(0, 255, 0, 0.7),
    0 0 20px rgba(0, 255, 0, 0.5),
    4px 4px 0px black;

  background: rgba(0, 255, 0, 0.05);
}


.menu-btn:active {
  transform: scale(1.05);
}







/* SPACE BACKGROUND */
.space-page {
  margin: 0;
  background: black;
  color: white;
  font-family: Arial, sans-serif;
  overflow: hidden;
  height: 100vh;
}

/* CENTER CREDITS */
.credits {
  position: relative;
  z-index: 2;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

/* TITLE */
.credits h1 {
  font-size: 48px;
  margin-bottom: 40px;
  letter-spacing: 4px;
}

/* FLOATING TEXT */
.float {
  font-size: 24px;
  margin: 12px 0;
  animation: float 6s ease-in-out infinite;
}

/* DELAYS (so it doesn’t move all at once) */
.delay1 { animation-delay: 1s; }
.delay2 { animation-delay: 2s; }
.delay3 { animation-delay: 3s; }
.delay4 { animation-delay: 4s; }
.delay5 { animation-delay: 5s; }
.delay6 { animation-delay: 6s; }
.delay7 { animation-delay: 7s; }

/* FLOAT ANIMATION */
@keyframes float {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-12px) rotate(0.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* STAR LAYERS */
.stars, .stars2, .stars3 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: repeat;
  top: 0;
  left: 0;
}

.stars {
  background-image: radial-gradient(white 1px, transparent 1px);
  background-size: 100px 100px;
  animation: moveStars 100s linear infinite;
}

.stars2 {
  background-image: radial-gradient(white 1px, transparent 1px);
  background-size: 200px 200px;
  animation: moveStars 200s linear infinite;
  opacity: 0.6;
}

.stars3 {
  background-image: radial-gradient(white 1px, transparent 1px);
  background-size: 300px 300px;
  animation: moveStars 300s linear infinite;
  opacity: 0.3;
}

/* STAR MOVEMENT */
@keyframes moveStars {
  from { background-position: 0 0; }
  to   { background-position: -1000px 1000px; }
}

/* DISTORTED LETTER FEEL */
.distort p {
  letter-spacing: 2px;
  animation: warp 4s infinite ease-in-out;
}

/* WARPING MOTION */
@keyframes warp {
  0% {
    transform: translateX(0) skewX(0deg);
    filter: blur(0px);
  }
  25% {
    transform: translateX(-2px) skewX(-1deg);
  }
  50% {
    transform: translateX(2px) skewX(1deg);
    filter: blur(0.4px);
  }
  75% {
    transform: translateX(-1px) skewX(0.5deg);
  }
  100% {
    transform: translateX(0) skewX(0deg);
    filter: blur(0px);
  }
}

/* GLITCH TITLE */
.glitch {
  position: relative;
  animation: glitchFlicker 2.5s infinite;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  width: 100%;
  color: white;
  background: black;
  overflow: hidden;
}

.glitch::before {
  top: -2px;
  text-shadow: -2px 0 green;
  animation: glitchTop 1.5s infinite linear;
}

.glitch::after {
  top: 2px;
  text-shadow: 2px 0 green;
  animation: glitchBottom 1.2s infinite linear;
}

/* GLITCH ANIMATIONS */
@keyframes glitchTop {
  0% { clip-path: inset(0 0 90% 0); }
  50% { clip-path: inset(10% 0 80% 0); }
  100% { clip-path: inset(0 0 90% 0); }
}

@keyframes glitchBottom {
  0% { clip-path: inset(80% 0 0 0); }
  50% { clip-path: inset(70% 0 10% 0); }
  100% { clip-path: inset(80% 0 0 0); }
}

@keyframes glitchFlicker {
  0%, 100% { opacity: 1; }
  45% { opacity: 0.7; }
  50% { opacity: 0.3; }
  55% { opacity: 1; }
}






.snowflake {
  position: fixed;
  top: -10px;
  color: white;
  font-size: 20px;
  user-select: none;
  pointer-events: none;
  animation: fall 10s linear infinite;
}

/* Variations for each flake */
.snowflake:nth-child(1) { left: 5%;  animation-duration: 8s; font-size: 12px; }
.snowflake:nth-child(2) { left: 20%; animation-duration: 12s; font-size: 18px; }
.snowflake:nth-child(3) { left: 35%; animation-duration: 10s; font-size: 15px; }
.snowflake:nth-child(4) { left: 50%; animation-duration: 14s; font-size: 22px; }
.snowflake:nth-child(5) { left: 65%; animation-duration: 11s; font-size: 16px; }
.snowflake:nth-child(6) { left: 80%; animation-duration: 9s;  font-size: 20px; }

/* Fall animation */
@keyframes fall {
  0%   { top: -10px; transform: translateX(0); }
  50%  { transform: translateX(20px); }
  100% { top: 100vh; transform: translateX(-20px); }
}



body {
  cursor: pointer; /* options: pointer, crosshair, none, url(image.cur), etc. */
}