/* Define color variables for easy customization */
:root {
    --primary-color: #4CAF50; /* Green for buttons */
    --text-color: #333;       /* Dark gray for text */
    --border-color: #ccc;     /* Light gray for borders */
  }
  
  /* Style the form itself */
  form {
    max-width: 600px;           /* Limits form width */
    margin: 0 auto;             /* Centers the form */
    padding: 20px;              /* Adds internal spacing */
    background-color: #f9f9f9;  /* Light background */
    border: 1px solid #ddd;     /* Subtle border */
    border-radius: 8px;         /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
    font-family: Arial, sans-serif; /* Clean font */
  }
  
  /* Style the header */
  form h2 {
    color: var(--text-color);
    font-size: 24px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color); /* Separator line */
  }
  
  /* Style labels */
  form label {
    display: block;      /* Places label above input */
    margin-bottom: 5px;  /* Space between label and input */
    font-weight: bold;   /* Makes labels stand out */
  }
  
  /* Style inputs and select dropdown */
  form input[type="text"],
  form input[type="password"],
  form select {
    width: 100%;                /* Full width within container */
    padding: 10px;              /* Comfortable padding */
    border: 1px solid var(--border-color); /* Subtle border */
    border-radius: 4px;         /* Rounded edges */
    box-sizing: border-box;     /* Includes padding in width */
    margin-bottom: 15px;        /* Space between fields */
    transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transitions */
  }
  
  /* Enhance focus state for accessibility and feedback */
  form input[type="text"]:focus,
  form input[type="password"]:focus,
  form select:focus {
    border-color: #66afe9;      /* Blue border on focus */
    outline: none;              /* Removes default outline */
    box-shadow: 0 0 5px rgba(102, 175, 233, 0.5); /* Glow effect */
  }
  
  /* Style the submit button */
  form input[type="submit"] {
    width: auto;                /* Button width based on content */
    background-color: var(--primary-color); /* Green background */
    color: white;               /* White text */
    padding: 15px 20px;         /* Larger padding */
    border: none;               /* No border */
    border-radius: 4px;         /* Rounded corners */
    cursor: pointer;            /* Hand cursor on hover */
    font-size: 16px;            /* Readable text size */
    transition: background-color 0.3s; /* Smooth color change */
  }
  
  /* Hover effect for submit button */
  form input[type="submit"]:hover {
    background-color: #45a049;  /* Slightly darker green */
  }