body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    background-color: #0d0d0d;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #ff00ff; /* Magenta */
    text-shadow:
        0 0 5px #ff00ff,
        0 0 10px #ff00ff,
        0 0 20px #ff00ff,
        0 0 40px #ff00ff,
        0 0 80px #ff00ff;
}

.floating-container {
    animation: float 20s ease-in-out infinite;
    position: relative;
    text-align: center;
    /* Performance improvement: Hint to the browser about upcoming transform changes. */
    will-change: transform;
}

.main-text {
    font-size: clamp(4rem, 15vw, 8rem);
    white-space: nowrap;
    margin: 0;
    padding: 0;
    cursor: pointer;
    user-select: none; /* Prevent text selection on click */
    font-weight: 700;
}

.sub-text {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    white-space: nowrap;
    cursor: pointer;
    user-select: none; /* Prevent text selection on click */
}

.main-text span,
.sub-text span {
    display: inline-block;
    position: relative;
}

.main-text.animate span,
.sub-text.animate span {
    animation: jitter 1s ease-in-out;
}

@keyframes jitter {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
    }
}

@keyframes float {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    20% {
        transform: translate(-10vw, 15vh) rotate(-5deg);
    }
    40% {
        transform: translate(15vw, -10vh) rotate(3deg);
    }
    60% {
        transform: translate(-5vw, -15vh) rotate(5deg);
    }
    80% {
        transform: translate(10vw, 10vh) rotate(-2deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}