@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body {
  background-color: #000;
  color: #00ff41;
  font-family: 'VT323', monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  text-shadow: 0 0 5px #00ff41;
  overflow: hidden;
  /* Prevent scrollbars */
}

/* --- NEW: Grid Background Styles --- */
#grid-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  /* The columns will be set by JavaScript */
  grid-template-columns: repeat(var(--columns, 20), 1fr);
  z-index: 0;
  /* Behind the login form */
}

.grid-cell {
  /* Faint grid lines */
  border: 1px solid rgba(0, 255, 65, 0.1);
  transition: background-color 0.8s ease-out;
  /* Slower fade-out for the trail */
}

/* This class will be added by JavaScript on hover */
.grid-cell.lit {
  background-color: #00ff41;
  box-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41;
  transition: background-color 0.1s ease-in;
  /* Quick fade-in */
}

/* --- UPDATED: Login Form Styles --- */
.login-container {
  border: 2px solid #00ff41;
  padding: 60px;
  /* INCREASED: From 40px to 60px for more height */
  background-color: rgba(0, 10, 0, 0.8);
  box-shadow: 0 0 20px #00ff41, inset 0 0 15px rgba(0, 255, 65, 0.4);
  position: relative;
  z-index: 1;
  width: 400px;
  /* ADDED: Sets a specific width for the form */
}

/* All other styles for form elements, glitch, etc., remain the same */
.login-form {
  transition: opacity 0.5s ease-in-out;
}

.login-container.success .login-form {
  opacity: 0;
  pointer-events: none;
}

.success-message {
  text-align: center;
  font-size: 1.5em;
}

h1 {
  text-align: center;
  font-size: 1.8em;
  margin-bottom: 30px;
}

.input-group {
  margin-bottom: 25px;
}

label {
  display: block;
  margin-bottom: 8px;
}

input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #00ff41;
  color: #00ff41;
  font-family: inherit;
  font-size: 1em;
  padding: 8px 0;
}

input:focus {
  outline: none;
  box-shadow: 0 1px 0 0 #00ff41;
}

button {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid #00ff41;
  color: #00ff41;
  font-family: inherit;
  font-size: 1.2em;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
}

button:hover {
  background-color: rgba(0, 255, 65, 0.2);
  box-shadow: 0 0 15px #00ff41;
}

/* Glitch and Cursor styles */
.glitch {
  position: relative;
}

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

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #ff00c1;
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -2px 0 #00fff9;
  animation: glitch-anim-2 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% {
    clip-path: inset(15% 0 85% 0)
  }

  20% {
    clip-path: inset(50% 0 23% 0)
  }

  40% {
    clip-path: inset(22% 0 43% 0)
  }

  60% {
    clip-path: inset(75% 0 10% 0)
  }

  80% {
    clip-path: inset(40% 0 45% 0)
  }

  100% {
    clip-path: inset(63% 0 20% 0)
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip-path: inset(80% 0 3% 0)
  }

  20% {
    clip-path: inset(5% 0 90% 0)
  }

  40% {
    clip-path: inset(33% 0 50% 0)
  }

  60% {
    clip-path: inset(95% 0 2% 0)
  }

  80% {
    clip-path: inset(10% 0 70% 0)
  }

  100% {
    clip-path: inset(70% 0 5% 0)
  }
}

.cursor {
  animation: blink 1s step-end infinite;
}

@keyframes blink {

  from,
  to {
    color: transparent;
  }

  50% {
    color: #00ff41;
  }
}