table {
    width: 100%;
    table-layout: auto;
    vertical-align: top;
}

td {
    border: 0px solid #000;
}

.home-button {
    float: right;
    height: 60px;
    width: 120px;
}

.dropdown {
    position: relative;
    display: inline-flex;
    z-index: 100;
}

/* Dropdown content */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    background-color: white;
    min-width: 200px;
}

    /* Links inside dropdown content */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
    display: block;
}

.animation {
    position: relative;
    z-index: 10;
}

.base-pic {
    width: 60%;
    display: block;
    /* Ensure the base picture is visible first */
}

.overlay-pic {
    position: absolute;
    width: 60%; /* Adjust size as needed */
    top: 0; /* Position over the base picture - adjust as needed */
    left: 20%; /* Position over the base picture - adjust as needed */
    opacity: 0; /* Start hidden */
    animation-name: appear;
    animation-duration: 0.5s; /* Duration of the appearance effect */
    animation-fill-mode: forwards; /* Keep the final state (visible) */
    animation-iteration-count: 1; /* Run only once */
}

/* Keyframes for the appearance animation (e.g., fade in) */
@keyframes appear {
    0% {
        opacity: 0;
        transform: scale(0.5); /* Optional: add a pop-in effect */
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Stagger the animation delays for each picture */
.pic-1 {
    animation-delay: 1s; /* First picture appears after 1 second */
}

.pic-2 {
    animation-delay: 2s; /* Second picture after 2 seconds total (1s delay after the first one starts) */
}

.pic-3 {
    animation-delay: 3s;
}

.pic-4 {
    animation-delay: 4s;
}

.pic-5 {
    animation-delay: 5s;
}

.pic-6 {
    animation-delay: 6s;
}

.pic-7 {
    animation-delay: 7s;
}

.pic-8 {
    animation-delay: 8s;
}

.pic-9 {
    animation-delay: 9s;
}