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

body {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  background: #1e3a8a
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23ffffff" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  min-height: 100vh;
  color: #000;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px;
}

.header {
  background: linear-gradient(to bottom, #4169e1 0%, #1e3a8a 50%, #000080 100%);
  border: 3px outset #4169e1;
  border-radius: 0;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.header h1 {
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  font-size: 2.2em;
  font-weight: bold;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.nav {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

.nav a {
  color: #ffffff;
  text-decoration: none;
  padding: 8px 16px;
  background: linear-gradient(to bottom, #87ceeb 0%, #4682b4 50%, #1e90ff 100%);
  border: 2px outset #87ceeb;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
  font-size: 14px;
}

.nav a:hover {
  background: linear-gradient(to bottom, #ffd700 0%, #ffa500 50%, #ff8c00 100%);
  border: 2px inset #ffd700;
  transform: translateY(1px);
}

.nav a:active {
  border: 2px inset #87ceeb;
  transform: translateY(2px);
}

.card {
  background: linear-gradient(to bottom, #f0f8ff 0%, #e6f3ff 50%, #ddeeff 100%);
  border: 3px outset #c0c0c0;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

.card h2 {
  color: #000080;
  font-size: 1.8em;
  margin-bottom: 15px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid #000080;
  padding-bottom: 5px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #000080;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 8px;
  border: 2px inset #c0c0c0;
  background: #ffffff;
  font-size: 14px;
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border: 2px inset #4169e1;
  background: #f0f8ff;
}

.btn {
  background: linear-gradient(to bottom, #32cd32 0%, #228b22 50%, #006400 100%);
  color: white;
  padding: 10px 20px;
  border: 3px outset #32cd32;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}

.btn:hover {
  background: linear-gradient(to bottom, #3cb371 0%, #2e8b57 50%, #228b22 100%);
  transform: translateY(1px);
}

.btn:active {
  border: 3px inset #32cd32;
  transform: translateY(2px);
}

.btn-danger {
  background: linear-gradient(to bottom, #ff6347 0%, #dc143c 50%, #b22222 100%);
  border: 3px outset #ff6347;
}

.btn-danger:hover {
  background: linear-gradient(to bottom, #ff7f50 0%, #ff4500 50%, #dc143c 100%);
}

.btn-danger:active {
  border: 3px inset #ff6347;
}

.switch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.switch-card {
  background: linear-gradient(to bottom, #fffacd 0%, #f0e68c 50%, #daa520 100%);
  border: 3px outset #daa520;
  padding: 15px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease;
}

.switch-card:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.switch-card h3 {
  color: #8b4513;
  margin-bottom: 10px;
  font-size: 1.3em;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid #8b4513;
  padding-bottom: 3px;
}

.switch-card p {
  margin-bottom: 8px;
  color: #2f4f4f;
  font-size: 13px;
}

.switch-card .website {
  color: #0000ee;
  text-decoration: underline;
}

.switch-card .website:hover {
  color: #ff0000;
  text-decoration: none;
}

.switch-card .website:visited {
  color: #800080;
}

.alert {
  padding: 12px;
  margin-bottom: 15px;
  border: 2px solid;
  font-weight: bold;
}

.alert-success {
  background: linear-gradient(to bottom, #90ee90 0%, #32cd32 100%);
  color: #006400;
  border-color: #228b22;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.alert-error {
  background: linear-gradient(to bottom, #ffa07a 0%, #ff6347 100%);
  color: #8b0000;
  border-color: #dc143c;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.user-info {
  background: linear-gradient(to bottom, #e0e0e0 0%, #c0c0c0 50%, #a0a0a0 100%);
  border: 2px outset #c0c0c0;
  padding: 12px;
  margin-bottom: 15px;
  text-align: center;
  font-weight: bold;
  color: #000;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Table styles for admin panel */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  background: #c0c0c0;
  border: 3px outset #c0c0c0;
}

table th {
  background: linear-gradient(to bottom, #4682b4 0%, #1e90ff 100%);
  color: white;
  padding: 8px;
  border: 2px outset #4682b4;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

table td {
  background: #f0f8ff;
  padding: 8px;
  border: 1px inset #c0c0c0;
}

table tr:nth-child(even) td {
  background: #e6f3ff;
}

/* Scrollbar styling for that 2000s feel */
::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  background: #c0c0c0;
  border: 1px inset #c0c0c0;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #87ceeb 0%, #4682b4 100%);
  border: 1px outset #87ceeb;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #4682b4 0%, #1e90ff 100%);
}

/* Blinking text effect for that authentic 2000s feel */
@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

.blink {
  animation: blink 1s infinite;
}

/* Marquee-style animation for headers */
@keyframes marquee {
  0% {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  }
  25% {
    text-shadow: 2px 2px 4px rgba(255, 0, 0, 0.8);
  }
  50% {
    text-shadow: 2px 2px 4px rgba(0, 255, 0, 0.8);
  }
  75% {
    text-shadow: 2px 2px 4px rgba(0, 0, 255, 0.8);
  }
  100% {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  }
}

.header h1:hover {
  animation: marquee 2s infinite;
}

/* Mobile responsiveness with 2000s flair */
@media (max-width: 768px) {
  .container {
    padding: 5px;
  }

  .header h1 {
    font-size: 1.8em;
    letter-spacing: 1px;
  }

  .nav {
    flex-direction: column;
    align-items: center;
  }

  .nav a {
    margin: 2px 0;
    width: 150px;
    text-align: center;
  }

  .switch-grid {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 15px;
  }
}

/* Special effects for links */
a {
  transition: all 0.3s ease;
}

/* Retro form styling */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Status bar effect */
.header::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
  margin-top: 10px;
  animation: rainbow 3s linear infinite;
}

@keyframes rainbow {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}