body {
    background-color: black;
    margin: 0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #f777f3;
    text-align: center;
}

h2 img {
    max-width: 30%;
    max-height: 30%;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    border: 5px solid #ff3bbe;
}

h3 {
    color: #f777f3;
    text-align: center;
}

.button-container {
    display: flex;
    justify-content: center;
    margin-top: 150px;
    position: relative;
}

/* Image Button */
.image-button {
    border-radius: 50%;
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    animation: pulse 2s infinite ease-in-out;

}
/* Original Image Button animation */
@keyframes pulse {
    0% {
        transform: translateY(0); /* Start at original position */
    }

    50% {
        transform: translateY(-8px); /* Move up */
    }

    100% {
        transform: translateY(0px); /* Go back to original position */
    }
}

.image-button img {
    max-width: 20%;
    height: auto;
}

/* Radial Menu */
.radial-menu {
    display: none; /* Menu hidden by default */
    position: absolute; /* To position it around the button */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    list-style: none;
    padding: 0;
    margin: 0;
}

    /* Show the menu when it's toggled */
    .radial-menu.show {
        display: block;
    }

    /* Position items around the circle */
    .radial-menu ul {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
    }

        .radial-menu ul li {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: #ff3bbe;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

    .radial-menu.show ul li {
        opacity: 1;
        transform: translate(0); /* Make items visible */
    }

    /* Spread the items around the circle */
    .radial-menu ul li:nth-child(1) {
        transform: rotate(0deg) translateX(120px) rotate(0deg);

    }

    .radial-menu ul li:nth-child(2) {
        transform: rotate(60deg) translateX(120px) rotate(-60deg);
    }

    .radial-menu ul li:nth-child(3) {
        transform: rotate(120deg) translateX(120px) rotate(-120deg);
    }

    .radial-menu ul li:nth-child(4) {
        transform: rotate(180deg) translateX(120px) rotate(-180deg);
    }

    .radial-menu ul li:nth-child(5) {
        transform: rotate(240deg) translateX(120px) rotate(-240deg);
    }

    .radial-menu ul li:nth-child(6) {
        transform: rotate(300deg) translateX(120px) rotate(-300deg);
    }
    /*
    .radial-menu ul li:nth-child(7) {
        transform: rotate(240deg) translateX(90px) rotate(-240deg);
    }

    .radial-menu ul li:nth-child(8) {
        transform: rotate(280deg) translateX(90px) rotate(-280deg);
    }

    .radial-menu ul li:nth-child(9) {
        transform: rotate(320deg) translateX(90px) rotate(-320deg);
    }
*/
    /* Styling for menu items */
    .radial-menu ul li a {
        color: white;
        text-decoration: none;
        font-size: 14px;
    }

    /* Style for image inside the radial button */
    .radial-menu ul li img {
        width: 100%; /* Fill the circular button */
        height: 100%; /* Make sure the image is fully contained */
        object-fit: cover; /* Ensures the image is contained without distortion */
        border-radius: 50%; /* Keep the image circular */
    }

    /* Hover effect for items 
    .radial-menu ul li:hover {
        background-color: #ff7b7b;
        transform: scale(1.2);
    }
*/