/* Reset some basic elements */
body, h1, p {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Overall body styling */
body {
    background-color: white; /* White background */
    color: #333; /* Dark gray text for readability */
    text-align: center; /* Center aligning the content */
    padding: 50px 0; /* Some padding at the top and bottom */
    line-height: 1.6; /* Line height for better readability */
}

/* Container for the content */
.maintenance-container {
    width: 80%;
    max-width: 600px; /* Max width for larger screens */
    margin: 0 auto; /* Center the container */
    padding: 10px;
}

/* Logo styling */
#logo {
    max-width: 200px; /* Adjust this value to change the size of the logo */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 20px; /* Space below the logo */
}

#lower-half{
    margin-bottom: 10px;
}

/* Heading styling */
h1 {
    font-size: 24px; /* Size of the heading */
    margin-bottom: 10px; /* Space below the heading */
}

/* Paragraph styling */
p {
    font-size: 16px; /* Size of the paragraph text */
}

#maintenance {
    max-width: 500px; /* Adjust this value to change the size of the logo */
    height: auto; /* Maintain aspect ratio */
    margin-top: -75px; /* Space below the logo */

}

/* Slide-up animation */
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

#logo, h1, p {
    animation: slideUp 1.5s ease-out;
    opacity: 0; /* Start with invisible text */
    animation-fill-mode: forwards; /* Keep the state at the end of the animation */
}