body {
    font-family: 'Arial', sans-serif;
    height: 100vh;
    margin: 0;
    animation: background-test 15s ease infinite; /* Apply the animation */
}

@keyframes background-test {
    0% { background-color: #74ebd5; }   /* Start color */
    50% { background-color: #acb6e5; }  /* Middle color */
    100% { background-color: #74ebd5; }  /* End color (loop back to start) */
}

.container {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 20px; /* Reduced padding for smaller screens */
    max-width: 90%; /* Maximum width is 90% of the viewport */
    width: 400px; /* Set a fixed width for larger screens */
    text-align: center;
    position: absolute; /* Keep absolute positioning */
    left: -500px; /* Start off-screen to the left */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for vertical centering */
    animation: move-in 1s ease forwards; /* Animation to move in */
}

/* Media query for smaller screens */
@media (max-width: 500px) {
    .container {
        padding: 15px; /* Adjust padding for smaller screens */
        width: 90%; /* Make the width 90% of the viewport */
        max-width: 100%; /* Allow full width on very small screens */
    }
}

/* Adjusted keyframes for moving in from the left */
@keyframes move-in {
    0% {
        left: 0px; /* Start off-screen */
    }
    100% {
        left: 50%; /* Move to center */
        transform: translate(-50%, -50%); /* Centering the container */
    }
}

h2 {
    margin-bottom: 20px;
    font-size: 2em; /* Responsive font size */
    color: #333;
}

label {
    font-size: 1em; /* Responsive font size */
    margin: 10px 0 5px;
    display: block;
    color: #555;
}

input[type="text"], 
input[type="password"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color 0.3s;
}

input[type="text"]:focus, 
input[type="password"]:focus {
    border-color: #74ebd5;
    outline: none;
}

.submit-button {
    width: 100%;
    padding: 10px;
    background-color: #74ebd5;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.2em; /* Responsive font size */
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-button:hover {
    background-color: #5bc0be;
}

/* Additional responsive adjustments */
@media (max-width: 768px) {
    h2 {
        font-size: 1.8em; /* Smaller font size for tablets */
    }

    label {
        font-size: 0.9em; /* Smaller label font size for tablets */
    }

    input[type="text"], 
    input[type="password"] {
        font-size: 0.9em; /* Smaller input font size for tablets */
    }

    .submit-button {
        font-size: 1em; /* Smaller button font size for tablets */
    }
}

@media (max-width: 500px) {
    h2 {
        font-size: 1.5em; /* Smaller font size for mobile */
    }

    label {
        font-size: 0.8em; /* Smaller label font size for mobile */
    }

    input[type="text"], 
    input[type="password"] {
        font-size: 0.8em; /* Smaller input font size for mobile */
    }

    .submit-button {
        font-size: 0.9em; /* Smaller button font size for mobile */
    }
}