body { 
    font-family: Arial, sans-serif; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
    background-color: #0f2443; /* Background color */
}

form { 
    display: flex; 
    flex-direction: column; 
    background-color: white; /* Form background color */
    padding: 30px; /* Padding for a spacious layout */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    width: 300px; /* Set a specific width for the form */
}

.logo {
    width: 100%; /* Makes the logo responsive */
    max-width: 100px; /* Set a larger maximum width for the logo */
    margin-bottom: 20px; /* Space below the logo */
    display: block; /* Center the logo */
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
}

input { 
    margin: 15px 0; 
    padding: 12px; 
    border: 1px solid #9c9a9a; /* Input border */
    border-radius: 5px; /* Rounded corners for inputs */
}

button { 
    padding: 12px 20px; /* Add horizontal padding for a better size */
    background-color: #0f2443; /* Button color matches background */
    color: white; /* Button text color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners for button */
    cursor: pointer; /* Pointer cursor on hover */
    align-self: center; /* Center the button */
}

button:hover { 
    background-color: #0d1e32; /* Darker shade on hover */
}