@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.Main_menu{
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    margin: 0; /* Remove default body margin */
    padding: 0; /* Remove default body padding */
    animation: fadeIn 1s ease-in-out;
}

.Index {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    min-height: 100vh;
    margin: 0; /* Remove default body margin */
    padding: 0; /* Remove default body padding */
    animation: fadeIn 1s ease-in-out;
}

.main_menu{
    animation: fadeIn 1s ease-in-out;
}

.username, .password {
    display: flex;
    flex-direction: row; /* Keep items in a row */
    align-items: center; /* Vertically align label and input within the row */
    margin-bottom: 10px;
    width: 100%; /* Allow divs to take full width to help with centering */
    justify-content: center; /* Center the content within these divs */
}

.username h2, .password h2 {
    margin-right: 10px; /* Add some space between the label and the input */
    width: 100px; /* Give labels a fixed width to align inputs */
    text-align: right; /* Align label text to the right */
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}

.username input[type="text"], .password input[type="text"] {
    flex-grow: 1; /* Allow input to take up remaining space */
    max-width: 200px; /* Limit the width of the input field */
    box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.25);
    border-width: 0.2px;
}

.header{
    text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5);
}

.slogan{
    text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.25);
}

img {
    height: 100px;
    width: 100px;
}

.Login_button
{
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    background-color: rgb(28, 160, 255);
    font-size: 20;
    color: white;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 2px;
    width: 80px;
    height: 50px;
    cursor: pointer;
}

.manage_pupil_button
{
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    background-color: rgb(28, 160, 255);
    font-size: 20;
    color: white;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 2px;
    width: 80px;
    height: 50px;
    
}