.page-transition {
  animation: fadeIn 0.5s ease-in;
}

.neon-text {
  color: #00ff00;
  /*text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 15px #00ff00;*/
}

.neon-text-purple {
  color: #ff00ff;
  /*text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff;*/
}

.retro-separator {
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ff00, transparent);
  margin: 20px 0;
}

.retro-login-container {
  /*
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #00ff00;
  */
  border-radius: 5px;
  /*padding: 20px;*/
  /*box-shadow: 0 0 10px #00ff00;*/
}

/* Cyberpunk Redirect Button Styles */
.login-redirect-button {
  background-color: transparent !important;
  border: 2px solid var(--neon-blue) !important;
  color: var(--neon-blue) !important;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3), inset 0 0 20px rgba(0, 255, 255, 0.1) !important;
  text-transform: uppercase;
  font-family: var(--header-font) !important;
  font-weight: bold !important;
  letter-spacing: 2px;
  transition: all 0.3s ease;
  margin-bottom: 100px;
}

.login-redirect-button:hover {
  background-color: rgba(0, 255, 255, 0.1) !important;
  border-color: var(--neon-blue) !important;
  color: var(--neon-blue) !important;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.6), inset 0 0 30px rgba(0, 255, 255, 0.2) !important;
  transform: translateY(-2px);
}

.login-redirect-button:focus {
  background-color: rgba(0, 255, 255, 0.1) !important;
  border-color: var(--neon-blue) !important;
  color: var(--neon-blue) !important;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.6), inset 0 0 30px rgba(0, 255, 255, 0.2) !important;
}

.login-redirect-button:active {
  transform: translateY(0px);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4), inset 0 0 15px rgba(0, 255, 255, 0.15) !important;
}

/* Cyberpunk Select Styling */
.cyber-select {
  background-color: var(--darker-bg) !important;
  border: 1px solid var(--neon-purple) !important;
  color: white !important;
  box-shadow: 0 0 10px rgba(185, 103, 255, 0.3);
}

.cyber-select:focus {
  border-color: var(--neon-blue) !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5) !important;
  background-color: var(--darker-bg) !important;
  color: white !important;
}

.cyber-select option {
  background-color: var(--darker-bg);
  color: white;
}

.cyber-select-blue {
  background-color: var(--darker-bg) !important;
  border: 1px solid var(--neon-blue) !important;
  color: white !important;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.cyber-select-blue:focus {
  border-color: var(--neon-purple) !important;
  box-shadow: 0 0 15px rgba(185, 103, 255, 0.5) !important;
  background-color: var(--darker-bg) !important;
  color: white !important;
}

.cyber-select-blue option {
  background-color: var(--darker-bg);
  color: white;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

div.test-creds {
  max-width: 400px;
  margin: 0 auto;
  background: none;
  box-shadow: none;
  border: none;
  border-left: 3px solid #00ffff;
}