.gif-container {
    position: relative;
    display: inline-block;
    cursor: pointer; /* Make the whole container clickable */
}

.gif-container img, .gif-container canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

.gif-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0; /* Remove margin */
    background-color: rgba(0, 0, 0, 0.7); /* Slightly darker for better visibility */
    color: #FFF; /* Bright text color for contrast */
    padding: 10px; /* More padding for better readability */
    border-radius: 0 5px 0 0; /* Rounded top-right corner */
    font-weight: bold; /* Make text bold */
    text-transform: uppercase; /* All caps */
    font-size: 16px; /* Slightly larger font size */
    display: block; /* Always show this by default */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

.gif-overlay-style {
    display: flex;
    align-items: center; /* Centers content vertically */
    justify-content: center; /* Centers content horizontally (optional) */
    gap: 10px; /* Adds some space between the icon and text */
}

.gif-container.playing .gif-overlay {
    display: none; /* Initially hide overlay when GIF is playing */
}

.gif-container.playing:hover .gif-overlay {
    display: block; /* Show overlay on hover when GIF is playing */
    background-color: rgba(0, 0, 0, 0.85); /* Darker on hover for emphasis */
}

.gif-overlay-hidden {
    display: none; /* Hide overlay by default */
}