.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 10px; /* Space between images */}

.image-grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}


/* Base styles for all images */
.image-grid {
    transition: opacity 0.5s ease;
}

.image-grid img {
    /* Ensure images have dimensions even before loading */
    min-height: 100px;
    min-width: 100px;
    /* Prevent FOUC (Flash of Unstyled Content) */
    opacity: 1;
    /* Ensure proper rendering during animations */
    backface-visibility: hidden;
    /* Better animation performance */
    will-change: transform;
    /* Add transition for hover effects */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Add hover effects to all images */
.image-grid img:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 10; /* Ensure hovered image appears above others */
    cursor: pointer;
}

/* Default fade-in animation for images without specific animations */
@keyframes fadeIn {
    0% { 
        opacity: 0; 
        transform: scale(0.8);
    }
    100% { 
        opacity: 1; 
        transform: scale(1);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*#vitastarbucks {
    animation: spin 2s linear forwards;
}*/

@keyframes flip {
    0% { transform: perspective(400px) rotateY(0); }
    100% { transform: perspective(400px) rotateY(180deg); }
}

@keyframes flipAndBack {
    0% { transform: perspective(400px) rotateY(0); }
    30% { transform: perspective(400px) rotateY(180deg); }
    100% { transform: perspective(400px) rotateY(0); }
}

/* Slide from left to right */
@keyframes slideRight {
    0% { 
        transform: translateX(-100%); 
        opacity: 0;
    }
    100% { 
        transform: translateX(0); 
        opacity: 1;
    }
}

/* Slide from right to left */
@keyframes slideLeft {
    0% { 
        transform: translateX(100%); 
        opacity: 0;
    }
    100% { 
        transform: translateX(0); 
        opacity: 1;
    }
}

/* Slide from top to bottom */
@keyframes slideDown {
    0% { 
        transform: translateY(-100%); 
        opacity: 0;
    }
    100% { 
        transform: translateY(0); 
        opacity: 1;
    }
}

/* Bounce effect */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

/* Zoom in effect */
@keyframes zoomIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Zoom in and out effect */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Shake effect */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

/* Swing effect */
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Slide and rotate */
@keyframes slideAndRotate {
    0% {
        transform: translateX(-100%) rotate(0deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotate(360deg);
        opacity: 1;
    }
}

/* Fade in with blur */
@keyframes blurFadeIn {
    0% {
        opacity: 0;
        filter: blur(20px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

/*#babyvita {
    animation: flipAndBack 1s forwards;
}

#vedgie1 {
    animation: flip 1s forwards;
}

#vedgie2 {
    animation: flip 1s forwards;
}
*/
/* Apply new animations to the other images */
/*img[alt="Vitai (plural of Vita) meeting to discuss plans for taking over the world"] {
    animation: slideRight 1.5s forwards;
}

img[alt="The supervisor of the Vitai comes in, forcing them to cancel their plans for world dominance"] {
    animation: slideLeft 1.5s forwards;
}

#vitaspin {
    animation: slideAndRotate 2s forwards;
}*/

/* Reusable animation classes that you can add to any image */
.pulse-animation {
    animation: pulse 1.5s infinite ease-in-out !important;
}

.shake-animation {
    animation: shake 0.8s ease-in-out !important;
}

.swing-animation {
    animation: swing 1s ease-in-out !important;
}

.blur-fade-animation {
    animation: blurFadeIn 1.5s forwards !important;
}


.flex-imagecontainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow items to wrap to next line */
    gap: 20px; /* Space between items */
    margin: 20px;
    padding: 20px;
    border-radius: 10px;
    max-width: 1200px; /* Limit container width */
    margin-left: auto;
    margin-right: auto; /* Center the container */
}

/* Control the size of images in the flex container */
.flex-imagecontainer img {
    width: 300px; /* Fixed width for each image */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensures images cover their container nicely */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Add hover effects to flex container images */
.flex-imagecontainer img:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 10;
    cursor: pointer;
}

/* For adding text between images */
.image-caption {
    width: 300px; /* Match image width */
    margin: 10px 0;
    text-align: center;
    font-size: 16px;
    color: #333;
}

#vitaspin {
    animation: slideAndRotate 2s forwards;
    transition: all 0.3s ease;
}

/* Add the hover effect to make vitaspin spin infinitely when hovered */
#vitaspin:hover {
    animation: spin 2s linear infinite;
    transform-origin: center; /* Ensures the image spins around its center */
}

/* Speech bubble styling */
.speech-bubble {
    position: absolute;
    top: -60px;
    right: -20px;
    background-color: white;
    color: #333;
    padding: 10px 15px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-size: 18px;
    font-weight: bold;
    z-index: 100;
    animation: pop-in 0.3s ease-out;
}

/* Add a little triangle at the bottom of the speech bubble */
.speech-bubble:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: white;
    border-bottom: 0;
    margin-left: -10px;
}

/* Animation for when the speech bubble appears */
@keyframes pop-in {
    0% { 
        transform: scale(0);
        opacity: 0;
    }
    80% {
        transform: scale(1.1);
    }
    100% { 
        transform: scale(1);
        opacity: 1;
    }
}

/* Style for when Vita gets really annoyed */
.speech-bubble.angry {
    background-color: #ff5252;
    color: white;
    font-size: 22px;
    animation: shake 0.5s ease-in-out;
}

/* Shake animation for the angry speech bubble */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.speech-bubble.angry:after {
    border-top-color: #ff5252;
}

/* Container for images that need relative positioning (like vitaspin) */
.image-container {
    position: relative;
}

header {
    background-color: #e3ee80;
    padding: 10px;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: rgb(192, 95, 201);
    text-decoration: none;
    font-size: 18px;
    padding: 8px 16px;
    display: inline-block;
}

nav ul li a:hover {
    background-color: #d6b3ff;
    border-radius: 5px;
}