/* Background styling for body with ID "bd" */
#bd {
    background-image: url('/images/webbgd.jpg'); /* Background image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Ensures the background covers the viewport height */
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    position: relative; /* Enables positioning for the overlay */
}

/* Overlay to add semi-transparent effect */
#bd::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent overlay */
    z-index: 1; /* Ensures overlay stays behind the form content */
}

/* Ensure the form content is above the overlay */
.form-container {
    position: relative;
    z-index: 2; /* Places form content above the overlay */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the logo and form within this container */
    text-align: center;
}

/* Logo container styling */
.logo-container {
    margin-bottom: 20px; /* Space between logo and form */
}

.logo {
    background-color: rgba(255, 255, 255, 0.0);
    border-radius: 8px;
    max-width: 100%; /* Makes the logo responsive */
    height: auto;
}

/* Centered form styling */
form {
    background-color: rgba(200, 200, 200, 0.8);
    padding: 20px;
    border: 2px solid #000000;
    border-radius: 8px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.9);
    max-width: 400px;
    width: 90%;
    text-align: center;
}

/* Style for input fields */
input[type="text"], input[type="password"] {
    width: 80%; /* Consistent width */
    padding: 10px;
    margin: 10px 0;
    box-sizing: border-box;
    font-size: 1rem;
    border: 1px solid #ccc; /* Light border */
    border-radius: 5px; /* Rounded corners */
}

/* Input field focus state */
input[type="text"]:focus, input[type="password"]:focus {
    border-color: #24724f; /* Change border color on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 5px rgba(36, 114, 79, 0.5); /* Subtle shadow */
}

/* Styling the button */
button {
    width: 80%; /* Match the width of input fields */
    padding: 10px;
    margin: 10px 0;
    font-size: 1rem;
    background-color: #24724f;
    border: none;
    color: white;
    border-radius: 8px; /* Rounded corners */
    cursor: pointer;
    font-weight: bold;
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.9)
}

/* Button hover state */
button:hover {
    background-color: #45a049;
}

/* Button active state */
button:active {
    background-color: #1e5e41;
}

/* Error message styling */
.error {
    color: red;
    font-size: 1.2rem;
    margin-top: 10px;
    font-weight: bold;
}

/* Styling for labels */
#text {
    color: #000000;
    font-family: 'Arial', sans-serif;
    font-size: 1.3rem;
    font-weight: bold;
}

#text2 {
    font-family: 'Arial', sans-serif;
    font-size: 1.3rem;
    font-weight: bold;
    color: #FFFFFF;
}

#text3 {
    font-family: 'Arial', sans-serif;
    font-size: 3rem;
    font-weight: bold;
    color: #000000;
}

/* Media query for mobile devices */
@media (max-width: 600px) {
    /* Increase logo size on mobile devices */
    .logo {
        max-width: 90%; /* Increase the logo's max-width */
        height: auto;
    }

    /* Optional: Adjust the logo container's margin */
    .logo-container {
        margin-bottom: 30px; /* Increase space between logo and form */
    }

    .form-container {
        width: 100%; /* Container takes full width */
        padding: 0 10px; /* Horizontal padding */
    }

    form {
        padding: 15px; /* Reduce padding */
        max-width: 100%; /* Form adapts to screen width */
        background-color: rgba(255, 255, 255, 0.8); /* Increase opacity */
    }

    input[type="text"], input[type="password"], button {
        width: 90%; /* Adjust input field width */
        font-size: 2rem; /* Increase font size */
    }

    /* Adjust the spacing and size of labels and headings */
    #text, #text2 {
        font-size: 1.3rem;
    }

    #text3 {
        font-size: 2.3rem; /* Adjust title size */
    }

    /* Adjust error message font size */
    .error {
        font-size: 1rem;
    }
}