body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Sets the font family for the entire page, prioritizing 'Segoe UI' and falling back to other similar fonts if unavailable */
    background-color: #f0f2f5; /* Sets a light gray background color for the entire page */
    margin: 0; /* Removes the default margin around the body to ensure consistent spacing */
    padding: 0; /* Removes the default padding around the body */
    display: flex; /* Enables flexbox layout, allowing the body to act as a flexible container */
    flex-direction: column; /* Arranges the child elements of the body in a vertical column */
    align-items: center; /* Centers the child elements horizontally within the body */
    color: #333; /* Sets the default text color to a dark gray (#333) for readability */
}

.header {
    background-color: #0044cc; /* Sets the background color of the header to a shade of blue */
    width: 100%; /* Ensures the header takes up the full width of its container */
    padding: 20px; /* Adds padding inside the header for spacing */
    text-align: center; /* Centers the text and inline elements within the header */
    color: white; /* Sets the default text color within the header to white */
}

.header img {
    width: 100px; /* Sets the width of the image inside the header to 100 pixels */
    vertical-align: middle; /* Aligns the image vertically in the middle with surrounding text */
}

.header h1 {
  /*  display: inline; /* Keeps the h1 element inline with other elements */
    display: inline-block; /* Allows margin adjustments, including margin-top */
	margin-top: 20px; /* Moves the h1 element 20 pixels lower */
    margin-left: 10px; /* Adds some space to the left of the h1 element */
    font-size: 2em; /* Sets the font size of the h1 text */
    font-weight: 700; /* Makes the h1 text bold */
}

.h2_yellow {
    font-size: 1.2em; /* Sets the font size of the h2 element */
    margin-top: 5px; /* Adds a margin above the h2 element */
 	font-weight: bold; /* Makes the h2 text bold */
    color: yellow; /* Changes the text color of the h2 element to yellow */
}
.container {
    display: flex; /* Enables flexbox layout, allowing child elements to be arranged in a flexible and responsive manner */
    flex-direction: column; /* Arranges the child elements of the container in a vertical column */
    background-color: white; /* Sets the background color of the container to white */
    padding: 20px; /* Adds 20 pixels of padding inside the container for spacing */
    margin-top: 20px; /* Adds a 20-pixel margin at the top of the container to separate it from elements above */
    width: 90%; /* Sets the container to take up 90% of the width of its parent element */
    max-width: 500px; /* Ensures the container does not exceed 500 pixels in width */
    border-radius: 10px; /* Rounds the corners of the container with a 10-pixel radius */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow below the container for a lifted appearance */
}

.container h3 {
    text-align: center; /* Centers the text within the h3 element */
    margin-bottom: 20px; /* Adds a 20-pixel margin below the h3 element to separate it from elements below */
    font-size: 1.5em; /* Sets the font size of the h3 element */
    color: #333; /* Changes the text color of the h3 element to a dark gray (#333) */
    font-weight: 500; /* Sets the font weight of the h3 element to a medium-bold */
}
.container input[type="email"],
.container input[type="password"],
.container input[type="text"] {
    width: 100%; /* Ensures that the input fields take up the full width of their container */
    padding: 15px; /* Adds 15 pixels of padding inside the input fields for spacing */
    margin: 10px 0; /* Adds 10 pixels of margin above and below the input fields to create space between them */
    border: 1px solid #ccc; /* Sets a light gray border around the input fields */
    border-radius: 8px; /* Rounds the corners of the input fields with an 8-pixel radius */
    box-sizing: border-box; /* Ensures that the padding and border are included in the width and height of the input fields */
    font-size: 1em; /* Sets the font size of the text inside the input fields to 1em (16px by default) */
}

.container input[type="submit"] {
    width: 100%; /* Ensures that the submit button takes up the full width of its container */
    padding: 15px; /* Adds 15 pixels of padding inside the button for spacing */
    background-color: #0044cc; /* Sets the background color of the submit button to a shade of blue */
    color: white; /* Sets the text color of the button to white */
    border: none; /* Removes the default border from the button */
    border-radius: 8px; /* Rounds the corners of the button with an 8-pixel radius */
    font-size: 1.2em; /* Sets the font size of the button text slightly larger than normal text for emphasis */
    font-weight: 600; /* Makes the button text bold */
    cursor: pointer; /* Changes the cursor to a pointer when hovering over the button, indicating it's clickable */
    transition: background-color 0.3s; /* Adds a smooth transition effect when the button's background color changes */
}

.container input[type="submit"]:hover {
    background-color: #003399; /* Changes the background color of the button to a darker blue when hovered over */
}

.error-message {
    color: red; /* Sets the text color of the error messages to red */
    margin-top: 5px; /* Adds 5 pixels of margin above the error messages to create space between them and the input fields */
    font-size: 0.9em; /* Sets the font size of the error messages slightly smaller than normal text */
}