@font-face {
  font-family: 'HazelHand';
  src: url('Fonts/shadowsintolight-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'HazelHand', 'Georgia', serif;
  background-image: url('Images/forest-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #cfd7b0;
  text-align: center;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.veil {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -1;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* This adds space between buttons + other elements */
  text-align: center;
  padding: 2rem;
}

h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

p {
  font-size: 1.2rem;
  line-height: 1.6;
}

/* ====== BUTTON ====== */
.button {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  background-color: rgba(28, 28, 28, 0.6);
  color: #fef08a;
  border: 1px solid #fef08a;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.3s ease;
}

.button:hover {
  background-color: #fef08a;
  color: #1c1c1c;
}

/* ====== FIREFLIES ====== */
.fireflies span {
  position: absolute;
  width: 0px;
  height: 0px;
  background: transparent;
  border-radius: 50%;
  box-shadow:
  0 0 12px 6px rgba(230, 255, 174, 0.3),
  0 0 24px 12px rgba(255, 240, 138, 0.2);
  animation: flicker 3s infinite ease-in-out alternate,
             drift var(--drift-speed) infinite ease-in-out;
  opacity: 0.35;
  --scale: 1;
  --drift-speed: 8s;
}

@keyframes flicker {
  0% {
    opacity: 0.2;
    transform: scale(0.9);
    box-shadow: 0 0 6px 2px rgba(254, 240, 138, 0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
    box-shadow: 0 0 12px 6px rgba(254, 240, 138, 0.6);
  }
  100% {
    opacity: 0.4;
    transform: scale(1);
    box-shadow: 0 0 8px 4px rgba(254, 240, 138, 0.4);
  }
}

@keyframes drift {
  0%   { transform: translate(0, 0) scale(var(--scale)); }
  25%  { transform: translate(10px, -15px) scale(var(--scale)); }
  50%  { transform: translate(-10px, 10px) scale(var(--scale)); }
  75%  { transform: translate(15px, 5px) scale(var(--scale)); }
  100% { transform: translate(0, 0) scale(var(--scale)); }
}

/* === INDIVIDUAL FIREFLIES (RANDOMIZED) === */
.fireflies span:nth-child(1)  { top: 10%; left: 15%; animation-delay: 0s;   --scale: 1.1; --drift-speed: 9s; }
.fireflies span:nth-child(2)  { top: 20%; left: 40%; animation-delay: 1s;   --scale: 0.7; --drift-speed: 6s; }
.fireflies span:nth-child(3)  { top: 50%; left: 70%; animation-delay: 2s;   --scale: 1.3; --drift-speed: 10s; }
.fireflies span:nth-child(4)  { top: 30%; left: 85%; animation-delay: 1.3s; --scale: 1.0; --drift-speed: 7s; }
.fireflies span:nth-child(5)  { top: 60%; left: 20%; animation-delay: 2.1s; --scale: 0.8; --drift-speed: 8s; }
.fireflies span:nth-child(6)  { top: 70%; left: 50%; animation-delay: 0.8s; --scale: 1.2; --drift-speed: 9s; }
.fireflies span:nth-child(7)  { top: 40%; left: 60%; animation-delay: 1.6s; --scale: 1.4; --drift-speed: 11s; }
.fireflies span:nth-child(8)  { top: 80%; left: 75%; animation-delay: 0.4s; --scale: 0.9; --drift-speed: 7s; }
.fireflies span:nth-child(9)  { top: 90%; left: 30%; animation-delay: 2.8s; --scale: 1.3; --drift-speed: 10s; }
.fireflies span:nth-child(10) { top: 25%; left: 55%; animation-delay: 1.9s; --scale: 0.6; --drift-speed: 6s; }
.fireflies span:nth-child(11) { top: 15%; left: 25%; animation-delay: 2.2s; --scale: 1.2; --drift-speed: 9s; }
.fireflies span:nth-child(12) { top: 35%; left: 10%; animation-delay: 1.5s; --scale: 1.0; --drift-speed: 8s; }
.fireflies span:nth-child(13) { top: 75%; left: 65%; animation-delay: 2.9s; --scale: 1.4; --drift-speed: 12s; }
.fireflies span:nth-child(14) { top: 55%; left: 35%; animation-delay: 1.1s; --scale: 0.7; --drift-speed: 7s; }
.fireflies span:nth-child(15) { top: 45%; left: 90%; animation-delay: 0.3s; --scale: 1.1; --drift-speed: 8s; }
.fireflies span:nth-child(16) { top: 80%; left: 10%; animation-delay: 2.5s; --scale: 0.8; --drift-speed: 6s; }
.fireflies span:nth-child(17) { top: 10%; left: 60%; animation-delay: 1.4s; --scale: 1.2; --drift-speed: 10s; }
.fireflies span:nth-child(18) { top: 65%; left: 80%; animation-delay: 0.7s; --scale: 1.3; --drift-speed: 11s; }
.fireflies span:nth-child(19) { top: 30%; left: 30%; animation-delay: 2.7s; --scale: 0.9; --drift-speed: 9s; }
.fireflies span:nth-child(20) { top: 5%;  left: 50%; animation-delay: 0.9s; --scale: 1.1; --drift-speed: 7s; }