::selection {
    background-color: rgba(124, 124, 156, 0.5); /* Soft background color */
}

::-moz-selection { /* For Firefox */
    background-color: rgba(124, 124, 156, 0.5);
}

body {
    overflow-x: hidden;
}

*
{
    z-index: 1;
}

.blur-container {
    position: relative;
}

.blur-blob {
    z-index: -1;
    position: absolute;
    width: 600px;
    height: 600px;
    background: linear-gradient(45deg, #0078ff, #333333, #aaaaaa);
    opacity: 0.4;
    filter: blur(200px);
    border-radius: 50%;
    animation: float1 8s ease-in-out infinite;
}

/* Randomize animation */
.blur-blob:nth-child(1) {
    animation-name: float1, float2, float3, float4;
    animation-duration: 6s, 8s, 7s, 9s;
}

.blur-blob:nth-child(2) {
    animation-name: float2, float3, float4, float1;
    animation-duration: 8s, 7s, 9s, 6s;
}

.blur-blob:nth-child(3) {
    animation-name: float3, float4, float1, float2;
    animation-duration: 7s, 9s, 6s, 8s;
}

/* Random floating animations */
@keyframes float1 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(30px, 40px); }
    100% { transform: translate(0, 0); } /* Moves back to the center smoothly */
}

@keyframes float2 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-35px, 25px); }
    100% { transform: translate(0, 0); } /* Moves back to the center smoothly */
}

@keyframes float3 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(40px, 30px); }
    100% { transform: translate(0, 0); } /* Moves back to the center smoothly */
}

@keyframes float4 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-30px, -35px); }
    100% { transform: translate(0, 0); } /* Moves back to the center smoothly */
}

/* Responsive: Make blobs smaller on phones */
@media (max-width: 768px) {
    .blur-blob {
        width: 300px;
        height: 300px;
    }

    @keyframes float1 {
        0% { transform: translate(0, 0); }
        50% { transform: translate(50px, -70px); }
        100% { transform: translate(0, 0); }
    }

    @keyframes float2 {
        0% { transform: translate(0, 0); }
        50% { transform: translate(-60px, 50px); }
        100% { transform: translate(0, 0); }
    }

    @keyframes float3 {
        0% { transform: translate(0, 0); }
        50% { transform: translate(70px, 60px); }
        100% { transform: translate(0, 0); }
    }

    @keyframes float4 {
        0% { transform: translate(0, 0); }
        50% { transform: translate(-50px, -60px); }
        100% { transform: translate(0, 0); }
    }
}

.fluid-blob {
    position: absolute;
    top: 20%;
    left: 30%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle at 30% 30%, #111111, #222222, #000000);
    filter: blur(120px);
    z-index: -1;
    animation: blobMorph 30s ease-in-out infinite;
    clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
    );
}

@keyframes blobMorph {
    0%, 100% {
        clip-path: polygon(
            50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            21% 91%,
            32% 57%,
            2% 35%,
            39% 35%
        );
    }
    50% {
        clip-path: polygon(
            40% 10%,
            70% 30%,
            90% 40%,
            80% 60%,
            70% 90%,
            50% 80%,
            20% 90%,
            30% 60%,
            10% 40%,
            30% 30%
        );
    }
}