/* #081E3F for navy blue and #B6862C for gold. */
/* Centering all content on the page */
.container {
    background-color: #081E3F; /* navy blue */
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally center the elements */
    justify-content: flex-start; /* Move content up */
    padding-top: 30px; /* Adjust this value as needed */
    height: 100vh; /* Full height of the viewport */
    color: white; /* Default text color */
}

/* Styling for the title */
.title h1 {
    font-family: Roboto, sans-serif;
    margin-bottom: 20px;
    font-size: 3rem;
    color: #FFFFFF;
}

/* Styling for the welcome message */
.join p {
    font-family: Roboto, sans-serif;
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #FFFFFF;
}

/* Styling for already a member sign in */
.signin p {
    font-family: Roboto, sans-serif;
    font-size: 1rem;
    margin-bottom: 20px;
    color: #FFFFFF;
}

/* Styling for the "Sign In" link */
.signin a {
    color: #B6862C; /* Gold color for the link */
    text-decoration: none;
}

.signin a:hover {
    text-decoration: underline; /* Underline the link on hover */
}

/* Styling for the form */
.form {
    display: flex;
    flex-direction: column;
    width: 300px; /* You can adjust the width of the form */
    margin-bottom: 20px;
}

.form input {
    padding: 10px;
    font-size: 1rem;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff; /* Ensure background color is white */
    color: #081E3F; /* Text color navy blue */
    width: 100%; /* Ensure the input fields take the full width of the form */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.form input, .form select {
    padding: 10px;
    font-size: 1rem;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff; /* Ensure background color is white */
    color: #081E3F; /* Text color navy blue */
    width: 100%; /* Ensure the input fields take the full width of the form */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Sign Up Button Styling */
.signup-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Ensure the button takes the full width of the form */
    padding: 10px;
    background-color: #B6862C; /* Gold */
    color: #081E3F; /* Navy blue */
    font-family: Roboto, sans-serif;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
}

.signup-button:hover {
    background-color: #FFF; /* White */
    color: #081E3F; /* Navy blue */
}

/* Error message styling */
.error {
    color: red;
    margin-top: 10px;
    text-align: center;
}