body {
    font-family: 'Arial', sans-serif;
    background-color: #4E563D; /* Olive green for an outdoor feel */
    margin: 0;
	padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-container {
    background-color: #ffffff; /* Keep white for clarity */
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Slightly darker shadow for contrast */
    text-align: center;
    width: 400px;
	margin: 10px auto 0 auto; /* top right bottom left */
}

h2 {
    margin-bottom: 30px;
    font-size: 24px;
    color: #333333; /* Dark grey color for the heading text to stand out on white background */
}

.login-form input,
.login-form button {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #8c8c47; /* Muted green border for the inputs */
    font-size: 18px;
    color: #3b3b3b; /* Dark grey for input text for better visibility */
}

.login-form input {
    background-color: #dcded1; /* Muted green background for inputs to complement the body background */
}

.login-form input:hover, .login-form button:hover {
    background-color: #e2e4c3; /* Lighter shade for hover effect on inputs and button */
}

.login-form input:focus {
    border-color: #5a5c37; /* A darker green border when the input is focused */
    outline: none;
    box-shadow: 0 0 0 2px rgba(90, 92, 55, 0.5); /* Subtle green glow around the input when focused */
}

.login-form button {
    background-color: #d35400; /* Hunter's orange for the button */
    color: white;
    border: none;
    margin-bottom: 0;
    cursor: pointer;
    display: block;
}

.login-form button:hover {
    background-color: #e67e22; /* Lighter orange for rollover effect */
}

.links-container {
    margin-top: 30px;
}

.hyperlink {
    color: #007bff;
    text-decoration: none;
}

.hyperlink:hover {
    text-decoration: underline; /* Adds underline on hover for better user experience */
    color: #0056b3; /* A slightly darker blue for hover effect */
}

.link {
    color: #007bff;
    text-decoration: none;
}

.link:hover {
    text-decoration: underline; /* Adds underline on hover for better user experience */
    color: #0056b3; /* A slightly darker blue for hover effect */
}

.link:not(:last-child)::after {
    content: '|';
    color: #007bff;
    padding-left: 5px;
}

.separator-container {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.line {
    flex-grow: 1;
    height: 1px;
    background-color: #d3d3d3;
    border: none;
    margin: 0 10px;
}

.or-text {
    padding: 0 10px;
    color: #000; /* Or any color that suits the design */
    font-size: 18px; /* Or the size that fits well in the design */
    white-space: nowrap; /* Prevents the 'or' from wrapping to a new line */
    font-weight: bold; /* Makes the text bold */
}

.register-button {
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #8c8c47; /* A contrasting color, such as a muted green */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    transition: background-color 0.3s ease; /* Smooth transition for the hover effect */
}

.register-button:hover {
    background-color: #9ea760; /* A lighter shade of green for the hover effect */
}

.message {
    width: 100%; /* Full width */
    box-sizing: border-box; /* Padding and border are included in the width */
    padding: 10px;
    margin-bottom: 10px; /* Spacing below the message box */
    border-radius: 5px;
    text-align: center;
    display: block; /* Display as block element */
    /* The rest of your styles for background color, border, etc. */
}

.error-message {
    background-color: #ffdddd; /* Light red */
    border: 1px solid #e67e22; /* Orange border */
    color: #000; /* Darker shade of red for text */
}

.success-message {
    background-color: #ddffdd; /* Light green */
    border: 1px solid #2ecc71; /* Green border */
    color: #000; /* Darker shade of green for text */
}

.forgot-password-container {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 10px;	
}

.forgot-password-link {
    color: #007bff; /* Nice blue color */
    text-decoration: none; /* Removes the underline */
    font-size: 18px; /* Adjusts the font size */
}

.forgot-password-link:hover {
    text-decoration: underline; /* Adds underline on hover for better user experience */
    color: #0056b3; /* A slightly darker blue for hover effect */
}

.select-style {
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #dcded1; /* Muted green background for inputs to complement the body background */
    border-radius: 5px;
    border: 1px solid #8c8c47; /* Muted green border */
    font-size: 18px;
    color: #3b3b3b; /* Dark grey for input text for better visibility */
    appearance: none; /* Removes default system styling */
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22%233b3b3b%22%20d%3D%22M6.6%201.4L11.2%206%20H2z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px 12px;
}

.select-style:hover {
    background-color: #e2e4c3; /* Lighter shade for hover */
}

.select-style:focus {
    border-color: #5a5c37;
    outline: none;
    box-shadow: 0 0 0 2px rgba(90, 92, 55, 0.5);
}

@media (max-width: 768px) {

	body {
	padding: 5px 20px;
	}

    .login-container {
        width: 100%; /* Ensures the container uses the full width */
        padding: 15px; /* Slightly larger padding for better spacing */
		margin: 20px 0; 
        box-sizing: border-box; /* Ensures padding and border are included in width/height calculation */
    }
	
}