body {
    font-family: Arial, sans-serif;
}

.login-container {
    width: 400px;
    height: 350px;
    margin: 100px auto;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
    position: absolute; /* Positioning relative to the viewport */
    top: 50%; /* Center vertically, then move down */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact centering */

    /* Optional: add some margin-top to move it slightly down */
    margin-top: 20px; /* Adjust value as needed */

    display: flex; /* Enables flexbox */
    flex-direction: column; /* Stacks children vertically */
    justify-content: space-around; /* Distributes space around elements */
    align-items: center; /* Centers items horizontally */
}

input[type="text"],
input[type="password"] {
    width: calc(100%-40px); /* Adjust width to be less than 100% to center */
    margin: 10px auto; /* Adds margin to the top and bottom, auto centers horizontally */
    padding: 15px; /* Adds some padding inside the input fields */
    border: 1px solid #ddd; /* Example border, adjust as needed */
    border-radius: 4px; /* Slightly rounded corners, optional */
    display: block; /* Makes the input block level for margin auto to work */
}

button {
    width: calc(100%); /* Same width as input fields */
    margin: 10px auto; /* Same margin as input fields */
    /* ... existing styles ... */
    background-color: #0074de; /* Light blue color; adjust as needed */
    border-radius: 18px; /* Rounded corners; adjust the radius as needed */
    border: none; /* Removes the default border; add a border if you like */
    padding: 10px 50px; /* Adjust padding to make the button larger or smaller */
    color: white; /* Text color; adjust as needed */
    font-weight: bold; /* Optional: makes the text bold */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
    display: block;
}

button:hover {
    background-color: #9ACFEA; /* Slightly different shade for hover effect */
}


.logo {
    display: block;
    margin: 0 auto 10px; /* Center the logo and add some margin below */
    width: 100px; /* Adjust as needed */
    height: auto; /* Keep the aspect ratio */
}