/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url('https://charliesangels.neocities.org/background.png');
  color: white;
  font-family: IM Fell English;
}

.im-fell-english-regular {
  font-family: "IM Fell English", serif;
  font-weight: 400;
  font-style: normal;
}

.im-fell-english-regular-italic {
  font-family: "IM Fell English", serif;
  font-weight: 400;
  font-style: italic;
}

.main-header {
  text-align: center;
  font-family: 'IM Fell English', serif;
  font-size: 48px;
  color: white;
  text-shadow: 2px 2px 0px #ff0044;
  margin-top: 40px;
}

.bottom-text {
  position: fixed;
  bottom: 20px;        /* distance from bottom */
  left: 50%;
  transform: translateX(-50%);
  color: white;          /* or whatever fits your theme */
  font-family: 'IM Fell English', sans-serif;
  font-size: 16px;
  text-shadow: 0 0 8px purple;
  pointer-events: none; /* lets clicks pass through */
  z-index: 9999;
}

.floating-image {
  position: fixed;         /* stays in viewport */
  width: 150px;            /* adjust size */
  height: auto;
  pointer-events: auto;   
  z-index: 9999;
  transition: transform 5s ease-in-out; /* smooth movement */
}

.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, pink 0%, transparent 70%);
  pointer-events: none;
  animation: sparkleFade 1s ease-out forwards;
  transform: rotate(45deg); /* makes it diamond-shaped */
  mix-blend-mode: screen;   /* gives it a glowing overlay look */
  filter: blur(0.5px);      /* slight glow softness */
}

@keyframes sparkleFade {
  0% {
    opacity: 1;
    transform: scale(0.8);
    background: radial-gradient(circle, rgba(255,182,193,1) 0%, transparent 70%); /* light pink */
  }
  60% {
    background: radial-gradient(circle, rgba(255,192,128,1) 0%, transparent 70%); /* peachy */
  }
  100% {
    opacity: 0;
    transform: scale(2);
    background: radial-gradient(circle, rgba(255,223,128,0.8) 0%, transparent 70%); /* warm yellow */
  }
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: rgba(255, 240, 250, 0.95);
  color: #333;
  font-family: 'IM Fell English', serif;
  padding: 20px 30px;
  border: 2px solid pink;
  border-radius: 20px;
  box-shadow: 0 0 20px pink, 0 0 40px gold;
  text-align: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}


/* When visible */
.popup.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* Close button */
.close-btn {
  margin-top: 10px;
  background: pink;
  border: none;
  padding: 5px 15px;
  border-radius: 10px;
  font-family: 'IM Fell English', serif;
  cursor: pointer;
  color: white;
  text-shadow: 0 0 5px hotpink;
  transition: background 0.3s ease;
}
.close-btn:hover {
  background: hotpink;
}

.fast-fairy {
  transition: transform 1s ease-in-out !important; /* faster movement */
  width: 120px; /* optional smaller size */
}


#puzzle-counter {
  position: fixed;       /* stays on screen */
  top: 20px;
  right: 20px;
  background-color: rgba(255, 0, 0, 0.85); /* bold red */
  border: 3px solid #900;                 /* thick dark red border for pixel effect */
  padding: 12px 20px;                     /* rectangular shape */
  font-family: "lores-15-bold-alt-oakland", sans-serif;  /* retro pixel font */
  font-size: 24px;
  color: white;
  text-shadow: 2px 2px 0 #600;            /* pixel shadow */
  border-radius: 0;                        /* sharp corners */
  box-shadow: 4px 4px 0 #600;             /* 8-bit “3D” effect */
  z-index: 9999;
  pointer-events: none;                    /* static, non-clickable */
  user-select: none;                       /* prevents selection */
}

#puzzle-counter #counter-number {
  font-size: 28px; /* bigger number */
  font-weight: bold;
}


#puzzle-counter:hover {
  box-shadow: 2px 2px 0 #600;             /* smaller shadow, “pressed” look */
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.7; }
}

#counter-number {
  animation: blink 1s infinite;
}



* {
  cursor: url('https://charliesangels.neocities.org/wand-smol.png') 8 8, auto;
}