/* Base styles */
:root {
      --primary: #e2e8f0;
      --secondary: #94a3b8;
      --accent: #38bdf8;
      --background: #0f172a;
      --text: #f1f5f9;
}

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      transition: all 0.3s ease;
}

body {
      font-family: 'Inter', -apple-system, sans-serif;
      background: var(--background);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      line-height: 1.6;
      padding: 0.5rem;
}

main {
      max-width: 800px;
      margin: 0 auto;
      padding: 4rem 2rem;
      text-align: center;
}

/* Typography */
h1 {
      font-size: 3rem;
      background: linear-gradient(to right, var(--accent), var(--primary));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-align: center;
      opacity: 0;
      animation: fadeUp 0.8s ease forwards;
}

p {
      animation: fadeUp 0.8s ease forwards;
}

fieldset {
      border: 2px solid var(--secondary);
      border-radius: 8px;
      padding: 2rem;
      opacity: 0;
      animation: fadeUp 0.8s ease forwards 0.4s;
}

legend {
      color: var(--accent);
      padding: 0 1rem;
      font-weight: bold;
}

/* Form Styling */
form {
      display: flex;
      flex-direction: column;
      gap: 0rem;
      max-width: 500px;
      margin: 0 auto;
}

label {
      color: var(--secondary);
      text-align: left;
      margin-bottom: 0.5rem;
}

input,
textarea {
      width: 100%;
      padding: 0.8rem;
      background: transparent;
      border: 1px solid var(--secondary);
      border-radius: 4px;
      color: var(--text);
      outline: none;
}

input:focus,
textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
}

textarea {
      min-height: 90px;
      resize: vertical;
}

/* Submit Button */
input[type="submit"] {
      background: transparent;
      border: 1px solid var(--secondary);
      color: var(--text);
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s ease;
      margin-top: 1rem;
}

input[type="submit"]:hover {
      border-color: var(--accent);
      box-shadow: 0 0 15px var(--accent);
      transform: translateY(-2px);
}

/* Error Handling */
ul {
      list-style-type: none;
      color: #ff6b6b;
      margin: 1rem 0;
      text-align: center;
}

li {
      margin-bottom: 0.5rem;
}

p {
      color: var(--secondary);
      text-align: center;
      margin: 1rem 0;
}

/* Animations */
@keyframes fadeUp {
      from {
            opacity: 0;
            transform: translateY(20px);
      }

      to {
            opacity: 1;
            transform: translateY(0);
      }
}

/* Responsive */
@media (max-width: 768px) {
      h1 {
            font-size: 2.5rem;
      }

      fieldset {
            padding: 1rem;
      }
}

/* Dark mode optimization */
@media (prefers-color-scheme: dark) {
      :root {
            --primary: #e2e8f0;
            --secondary: #94a3b8;
            --accent: #38bdf8;
            --background: #0f172a;
            --text: #f1f5f9;
      }
}