.move-in {
    animation: moveIn 0.5s forwards;
}

@keyframes moveIn {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.content-container {
    max-width: 800px; /* Adjust this value based on your preference */
    margin: 0 auto; /* Centers the container */
    padding: 20px; /* Adds some padding inside the container */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Optional: adds a subtle shadow for a "floating" effect */
    margin-top: 1000px; /* Adds space above the content container */
    /* Use position:relative for slight adjustments if needed */
}

body {
    display: grid;
    gap: 20px;
    margin-top: 300px;
    justify-items: center; /* Center items horizontally */
}

/* Basic responsive adjustments */
@media (max-width: 600px) {
    body {
        display: grid;
        gap: 20px;
        margin-top: 100px;
        justify-items: center; /* Center items horizontally */
    }

    .content-container {
        margin-top: 0; /* Reduces space above the content container on small screens */
        max-width: 100%; /* Allows the container to use the full width */
        padding: 10px; /* Adjusts padding for smaller screens */
    }
}