/* Style the entire page */
body {
    font-family: Arial, sans-serif; /* Sets a clean, common font */
    background-color: #f0f0f0; /* Light grey background */
    display: flex; /* Use Flexbox layout model on the body */
    justify-content: center; /* Center direct children (the login-container) horizontally */
    align-items: center; /* Center direct children (the login-container) vertically */
    min-height: 100vh; /* Ensure body takes at least the full viewport height */
    margin: 0; /* Remove default body margin */
}

/* Style the box containing the login elements */
.login-container {
    background-color: #ffffff; /* White background for the box */
    padding: 40px; /* Increase space inside the container */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 0 5px #fbf7ff, 0 4px 8px rgba(0, 0, 0, 0.1); /* Purple frame plus subtle shadow */
    width: 90%; /* Make the container take up most of the width on small screens */
    max-width: 400px; /* But limit its maximum width on larger screens */
    box-sizing: border-box; /* Include padding and border in the width calculation */
    text-align: center; /* Center the 'Login' heading */
}

/* Style the 'Login' heading */
.login-container h2 {
    margin-bottom: 25px; /* More space below the heading */
    color: #333; /* Dark grey color for heading */
    font-size: 2em; /* Make heading larger */
}

/* Style the form elements container (not strictly needed but good practice) */
.login-form {
    display: flex; /* Use flexbox to stack items vertically */
    flex-direction: column; /* Stack items one above the other */
    align-items: stretch; /* Make items stretch to fill container width */
}

/* Style the labels above input fields */
.login-form label {
    display: block; /* Make labels appear on their own line */
    margin-bottom: 8px; /* Space below labels */
    font-weight: bold; /* Make label text bold */
    color: #555; /* Slightly lighter grey for labels */
    text-align: left; /* Align label text to the left */
    font-size: 1.1em; /* Slightly larger label font */
}

/* Style the email and password input fields */
.login-form input[type="email"],
.login-form input[type="password"] {
    width: 100%; /* Make inputs fill the container width */
    padding: 15px; /* INCREASED space inside the input fields (makes them taller) */
    margin-bottom: 20px; /* INCREASED space below each input field */
    border: 1px solid #ccc; /* Light grey border */
    border-radius: 5px; /* Slightly more rounded corners */
    box-sizing: border-box; /* Includes padding and border in the element's total width */
    font-size: 1.1em; /* Make text inside input larger */
}

/* Style the Sign In button */
.login-form button {
    width: 100%; /* Make button fill the container width */
    padding: 15px; /* INCREASED space inside the button (makes it taller) */
    background-color: #007BFF; /* Blue background color */
    color: white; /* White text */
    border: none; /* Remove default button border */
    border-radius: 5px; /* Slightly more rounded corners */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    font-size: 1.2em; /* Make button text larger */
    font-weight: bold;
    margin-top: 10px; /* Add some space above the button */
    transition: background-color 0.2s ease; /* Smooth background color change on hover */
}

/* Style the button when the mouse hovers over it */
.login-form button:hover {
    background-color: #0056b3; /* Darker blue when hovering */
}