header h1 {
  font-size: clamp(3rem, 20vw, 10rem); /* min 3rem, preferred 20% of viewport width, max 10rem */
  text-align: center;
  text-transform: uppercase;
  position: relative;
  color: #030006;
  font-weight: bold;
  letter-spacing: 5px;

  /* Neon glow base */
  text-shadow: 
    0 0 10px #ff00de,
    0 0 20px #00eaff,
    0 0 40px #ff00de,
    0 0 80px #00eaff;

  animation: glowShift 4s infinite alternate, glitch 2s infinite;
}

/* Red & Blue ghost layers */
header h1::before,
header h1::after {
  content: attr(data-text); /* Copies the same text */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  color: #fff;
  z-index: -1;
}

header h1::before {
  left: 1px; /* Red offset */
  text-shadow: -2px 0 red;
  animation: glitchRed 2s infinite linear alternate-reverse;
}

header h1::after {
  left: -1px; /* Blue offset */
  text-shadow: 2px 0 cyan;
  animation: glitchBlue 2s infinite linear alternate-reverse;
}

/* Neon pulse */
@keyframes glowShift {
  0% { text-shadow: 0 0 10px #ff0080, 0 0 20px #ff0080, 0 0 40px #ff0080; }
  50% { text-shadow: 0 0 10px #00ffe0, 0 0 20px #00ffe0, 0 0 40px #00ffe0; }
  100% { text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 40px #ffff00; }
}

/* Jitter */
@keyframes glitch {
  0% { transform: none; }
  20% { transform: skew(5deg); }
  40% { transform: skew(-5deg) translate(-1px, 2px); }
  60% { transform: skew(3deg) translate(3px, -2px); }
  80% { transform: skew(-2deg) translate(-2px, 2px); }
  100% { transform: none; }
}

/* Ghost text animations */
@keyframes glitchRed {
  0% { clip-path: inset(0 0 80% 0); transform: translate(-2px, -2px); }
  50% { clip-path: inset(20% 0 40% 0); transform: translate(2px, 2px); }
  100% { clip-path: inset(60% 0 0 0); transform: translate(-1px, 1px); }
}

@keyframes glitchBlue {
  0% { clip-path: inset(60% 0 0 0); transform: translate(2px, -1px); }
  50% { clip-path: inset(10% 0 50% 0); transform: translate(-2px, 2px); }
  100% { clip-path: inset(0 0 70% 0); transform: translate(1px, -2px); }
}

body {
  overflow-x: hidden; /* prevents horizontal scroll */
  background: #030006; /* dark background for neon effect */
}

header {
  position: relative; /* keep glitch working */
  top: 0;
  margin: 0;
  padding-top: 20px;
  text-align: center;
  overflow: hidden; /* clips any child elements that go outside header */
}

/* Center main content vertically under the header */
main {
  display: flex;
  flex-direction: column;
  align-items: center; /* horizontal centering */
  margin-top: 40px; /* space below header */
  text-align: center; /* center text inside main */
  width: 100%;
}

/* Style the form */
form#loginForm {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px; /* fixed width for inputs */
  gap: 15px; /* space between inputs */
}

/* Form headings */
form#loginForm h2 {
  font-size: 1.5em;
  margin-bottom: 20px;
  color: #333;
}

/* Inputs */
form#loginForm input[type="email"],
form#loginForm input[type="password"] {
  width: 100%;
  padding: 10px;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

/* Submit button */
form#loginForm button {
  padding: 10px 20px;
  font-size: 1em;
  border: none;
  border-radius: 5px;
  background-color: #75c06b;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

form#loginForm button:hover {
  background-color: #5ea155;
}

/* Sign up text and button */
.signup-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.signup-container p {
  font-size: 0.9em;
  color: #333;
}

.signup-container button {
  padding: 8px 18px;
  font-size: 0.95em;
  border-radius: 5px;
  border: none;
  background-color: #4a90e2;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.signup-container button:hover {
  background-color: #357abd;
}

footer {
    text-align: center;
}

.diamonds-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* clicks pass through */
}

.diamond {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: 0 0 10px #fff, 0 0 20px #75c06b;
  animation: sparkle 3s infinite alternate, floatDiamond linear infinite;
}

/* Sparkle animation */
@keyframes sparkle {
  0% { transform: rotate(45deg) scale(1); opacity: 0.5; }
  50% { transform: rotate(45deg) scale(1.5); opacity: 1; }
  100% { transform: rotate(45deg) scale(1); opacity: 0.5; }
}

/* Floating animation */
@keyframes float {
  0% { transform: translateX(-50%) translateY(0px) rotate(0deg); }
  25% { transform: translateX(calc(-50% + 50px)) translateY(-30px) rotate(45deg); }
  50% { transform: translateX(-50%) translateY(0px) rotate(90deg); }
  75% { transform: translateX(calc(-50% - 50px)) translateY(30px) rotate(-45deg); }
  100% { transform: translateX(-50%) translateY(0px) rotate(0deg); }
}
h2 {
    color: #9bf18e;
    font-size: 2em;
    margin-top: 40px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Style input fields */
form input[type="text"],
form input[type="email"],
form input[type="password"] {
    width: 250px;
    padding: 10px 15px;
    margin: 8px 0;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    transition: border-color 0.3s, box-shadow 0.3s;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus {
    border-color: #75c06b;
    box-shadow: 0 0 5px #75c06b;
    outline: none;
}

/* Style buttons */
form button {
    background-color: #75c06b;
    color: white;
    padding: 10px 25px;
    margin-top: 15px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

form button:hover {
    background-color: #5aa053;
    transform: scale(1.05);
}