body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #f06, #9f6, #06f);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    overflow: hidden;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rotating-image {
    max-width: 300px;
    max-height: 300px;
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.fun-button {
    background-color: #ffcc00; /* Bright yellow background */
    color: #000; /* Black text */
    font-size: 1.5rem; /* Larger font size */
    font-weight: bold; /* Bold text */
    border: 2px solid #000; /* Black border */
    border-radius: 10px; /* Rounded corners */
    padding: 10px 20px; /* Padding for a button-like appearance */
    cursor: pointer; /* Pointer cursor on hover */
    transition: transform 0.2s, background-color 0.2s; /* Smooth hover effects */
}

.fun-button:hover {
    background-color: #ff9900; /* Darker yellow on hover */
    transform: scale(1.1); /* Slightly enlarge the button on hover */
}

.fun-button:active {
    background-color: #cc7a00; /* Even darker yellow when clicked */
    transform: scale(0.95); /* Slightly shrink the button when clicked */
}