body {
    margin: 0;
    overflow: hidden; /* Hide scrollbars due to animations */
    font-family: 'Arial', sans-serif;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBackground 15s ease infinite;
}

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

.container {
    text-align: center;
    z-index: 10; /* Ensure text is above animations */
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

h1 {
    font-size: 4em;
    margin-bottom: 10px;
}

p {
    font-size: 1.5em;
}

/* Styles for animated elements (stars/bubbles) */
.star, .bubble {
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0.7; /* Default opacity */
    pointer-events: none; /* Allow mouse events to pass through */
    animation: float 10s infinite ease-in-out;
}

.star {
    width: 5px;
    height: 5px;
    background-color: gold;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.bubble {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.6);
}

@keyframes float {
    0% {
        transform: translateY(0px) translateX(0px);
    }
    25% {
        transform: translateY(-10px) translateX(10px);
    }
    50% {
        transform: translateY(0px) translateX(0px);
    }
    75% {
        transform: translateY(10px) translateX(-10px);
    }
    100% {
        transform: translateY(0px) translateX(0px);
    }
}