body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: url('creme.png');
    background-size: cover;
    background-position: center;
    background-repeat: repeat; /* This will make the background image repeat */
}

.container {
    position: relative;
    height: 100%;
}

.center-image {
    display: block;
    margin: 0 auto; /* Centers the image horizontally */
    max-width: 100%;
    height: auto;
    opacity: 0; /* Initially hidden */
    transition: opacity 2s ease; /* Transition opacity over 2 seconds */
}

.center-image-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center-image-container img {
    max-width: 30%; /* Adjusted to 60% of the container's width */
    height: auto; /* Maintain aspect ratio */
}

h1 {
    position: absolute;
    text-transform: uppercase;
    top: 55%; /* Adjust vertical position to the center */
    left: 50%;
    transform: translate(-50%, -50%); /* Center horizontally and vertically */
    margin: 0;
    color: rgb(141, 141, 141); /* Adjust text color as needed */
    font-size: 80px; /* Adjust font size as needed */
    text-align: center;
    opacity: 0; /* Initially hidden */
    transition: opacity 2s ease; /* Transition opacity over 2 seconds */
}

h2 {
    position: absolute;
    bottom: 20%; /* Adjust vertical position */
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: rgb(2, 106, 39); /* Adjust text color as needed */
    font-size: 100px; /* Adjust font size as needed */
    text-align: center;
    opacity: 0; /* Initially hidden */
    transition: opacity 2s ease; /* Transition opacity over 2 seconds */
}


.login-section {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: Arial, sans-serif; /* Fallback font */
    opacity: 0; /* Initially hidden */
    transition: opacity 2s ease; /* Transition opacity over 2 seconds */
}

.login-section p {
    margin-bottom: 10px; /* Adjust spacing between text and input */
    color: black; /* Adjust text color as needed */
    font-size: 20px; /* Adjust font size as needed */
}

.login-section input {
    width: 300px; /* Adjust input width as needed */
    padding: 10px; /* Adjust input padding as needed */
    border: 2px solid #ccc; /* Adjust input border as needed */
    border-radius: 8px; /* Adjust input border radius as needed */
    font-size: 18px; /* Adjust font size as needed */
    margin-bottom: 10px; /* Add margin between input rows */
}


.center-image, h1, h2, .login-section {
    opacity: 0;
    transition: opacity 2s ease, transform 2s ease;
}

.center-image.loaded, h1.loaded, h2.loaded, .login-section.loaded {
    opacity: 1; /* Fade in when loaded */
}


/* Media Queries for responsiveness */
@media only screen and (max-width: 768px) {
    .center-image-container img {
        max-width: 80%; /* Make the image larger for smaller screens */
    }

    h1 {
        font-size: 27px; /* Adjust the font size for smaller screens */
        line-height: 1.2; /* Adjust line height as needed */
        max-height: 60px; /* Set a maximum height to accommodate two lines */
        overflow: hidden; /* Hide any overflow beyond two lines */
        display: inline-block; /* Ensure the element stretches out properly */
        width: 100%; /* Allow the element to fill its container */
        margin: 0px; /* Reset margin to ensure proper stretching */
        padding: 5px;
    }

    h2 {
        font-size: 50px; /* Decrease font size for smaller screens */
        bottom: 30%;
    }
}