body {
    text-rendering: optimizeLegibility;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 40px; /* Adjust padding as needed */
    color: #111;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background: #fff;
}

.main-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.text-content {
    max-width: 300px; /* Or any suitable width */
}

#grid-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 100%; /* Makes the height equal to the width, keeping the container square */
    overflow: hidden;
}

@media (min-width: 768px) {
    #grid-container {
        width: 500px;
        height: 500px;
        padding-bottom: 50px;
    }
}

@media (max-width: 767px) {
    .main-container {
        flex-direction: column-reverse;
        align-items: left;
    }
}

/* Animation moving to the right and back */
@keyframes slideOutSlideInRight {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Animation moving to the left and back */
@keyframes slideOutSlideInLeft {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes upAndDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes downAndUp {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Add as many different animations as you want... */


.rectangle {
    position: absolute;
    animation: slideOutSlideIn 60s linear infinite; /* Adjust time as needed */
}