body {
    background-color: #2c2c2c;
    color: #ffffff;
}

button {
    margin-top: 10px;
}

#gridContainer div {
    background-color: #ffffff;
    /* padding: 20px; */
    /* margin: 5px; */
    border: 1px solid #555;
    font-size: 24px;
}

img.square-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* Make the images square */
    object-fit: contain; /* Ensures the image fits within its container */
    /* object-fit: cover; Ensures the image fits within its container */
}

.hidden {
    opacity: 0;
    transition: opacity 0.5s ease; /* Fade-out animation */
    pointer-events: none; /* Prevent interaction when hidden */
}

/* Show the grid with fade-in animation */
.visible {
    opacity: 1;
    transition: opacity 0.5s ease; /* Fade-in animation */
}