/* Styles for the random game button */
.random-game-button {
    display: block;
    width: 30%; 
    padding: 1px;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    background-color: transparent; 
    color: white; 
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    border: 2px solid white; 
    margin: 3vh auto;
    border-radius: 15px;
}
.random-game-button:hover {
    background-color: #45a049; 
}



	.flex-container {
           display: flex;
           position: relative;
           flex-wrap: wrap;
           justify-content: center;
           gap: 20px;
           padding: 5rem;
           
	}

        .game {
            border-radius: 30rem;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease-in-out;
        }


        .game:hover {
            transform: scale(1.05);
        }

.game-image {
    width: 100%;
    height: auto;
    width: 288px; /* Set the width to 288px */
    height: 288px; /* Set the height to 288px */
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    object-fit: cover; /* Ensure the image is scaled correctly */
    transition: transform 0.5s ease-in-out, box-shadow 0.3s ease-in-out; /* Add a transition effect with a slower zoom */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow effect */
}

.game:hover .game-image {
    transform: scale(1.05); /* Scale the image up on hover */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Increase the shadow effect on hover */
}

.game-image {
    animation: subtle-pulse 4s infinite; /* Add a subtle pulse animation */
    animation-delay: 1s; /* Delay the animation by 1 second */
}

@keyframes subtle-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.01);
    }
    100% {
        transform: scale(1);
    }
}

.game:hover .game-image {
    animation: none; /* Stop the pulse animation on hover */
}

        .game-info {
            padding: 10px;
            text-align: center;
            background-color: #555555; /* Light blue shading color */
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;

        }

        .game-title {
            font-size: 20px;
            margin-bottom: 10px;
            color: #fff;
        }

        .play-button {
            background-color: #555555; /* Lighter black color */
            color: #fff;
            padding: 10px 20px;
            border-radius: 20px;
            text-decoration: none;
            transition: background-color 0.3s ease-in-out;
        }

        .play-button:hover {
            background-color: #454545; /* Darker shade of black on hover */
        }