/* Basic styles */ 

a {
    color: #FF0000;
    text-decoration: none;
}

body {
    font-family: Arial, sans-serif;
    background-color: #EEEEEE;
}

label {
display: block;
margin-bottom: 8px;
}

h1 {
text-align: center;
font-family: Arial, sans-serif;
}

h2 {
text-align: center;
margin-bottom: 20px;
font-family: Arial, sans-serif;
}


/* Login Screen */

form {
            margin-bottom: 20px;
}

        .image-container {
            text-align: center; /* Center the image horizontally */
            margin-bottom: 20px; /* Add some space between the image and the form */
            width: 100%; /* Make container take full width */
        }

        .centered-image {
            max-width: 15%; /* Make image responsive */
            height: auto; /* Maintain aspect ratio */
        }

        .container {
            max-width: 400px; /* Limit the form container width for better readability */
            margin: 0 auto; /* Center the form horizontally */
            padding: 10px; /* Add some padding */
            box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
        }

/* Input types */

input[type="text"],
input[type="password"],
input[type="email"] {
            width: 380px;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
}

input[type="submit"] {
            padding: 10px 20px;
            background-color: #C4D4E0;
            color: #000000;
            border: none;
            border-radius: 4px;
            cursor: pointer;
}

input[type="submit"]:hover {
            background-color: #666666;
            color: #C4D4E0;
}

        /* Button hover effect */
        input[type="submit"]:hover {
            background-color: #000000; 
            color: #C4D4E0; 
        }