/* Basic Reset & Body Styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%; /* Ensure html takes full height */
}

body {
    font-family: "Caveat", cursive;
    min-height: 100%; /* Use min-height to allow content to grow */
    /* Flexbox for centering the .content div */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e0e0e0; /* Slightly different fallback background */
    position: relative; /* Needed for absolute positioning of blob */
    overflow: hidden; /* IMPORTANT: Prevent scrollbars from blob animation */
    color: #454545; /* Darker text color for contrast */
    
}


/* Content Styling */
.content {
    position: relative; /* Needed to stack above the blob */
    z-index: 1;        /* Ensure content is ON TOP */
    text-align: center; /* Center the text *inside* this div */
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.75); /* Semi-transparent white background */
    border-radius: 15px;
    max-width: 90%;     /* Prevent it getting too wide on large screens */
    /*width: 600px;        Max width */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

h1 {
    margin-bottom: 15px;
    color: #333;
}

p {
    line-height: 1.6;
}


/* The Blob */
.blob {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Apply the centering transform INITIALLY */
    transform: translate(-50%, -50%);
    width: 60vw; /* Use viewport width units for responsiveness */
    height: 60vw; /* Maintain aspect ratio */
    max-width: 500px; /* Limit max size */
    max-height: 500px; /* Limit max size */
    min-width: 300px; /* Ensure it's visible on small screens */
    min-height: 300px; /* Ensure it's visible on small screens */
    background: linear-gradient(
        135deg,
        #ff6b6b, /* Coral */
        #feca57, /* Yellow */
        #48dbfb, /* Light Blue */
        #9b59b6  /* Purple added */
    );
    background-size: 300% 300%; /* Larger background size for smoother gradient animation */
    border-radius: 50%; /* Start as a circle */
    z-index: 0;        /* Ensure blob is BEHIND content */
    filter: blur(60px); /* Softens the edges - adjust as needed */
    opacity: 0.8;       /* Slightly transparent */

    /* Animation */
    animation:
        animateBlobShape 20s ease-in-out infinite alternate,
        animateBlobGradient 15s ease-in-out infinite alternate; /* Separate gradient animation */
}

/* Keyframes for the SHAPE Animation */
@keyframes animateBlobShape {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        border-radius: 60% 40% 30% 70% / 70% 30% 70% 40%;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1) rotate(180deg);
        border-radius: 30% 70% 50% 50% / 50% 60% 40% 50%;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.9) rotate(360deg);
        border-radius: 60% 40% 30% 70% / 70% 30% 70% 40%;
    }
}

/* Keyframes for the GRADIENT Animation */
@keyframes animateBlobGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Optional: Second blob example (using pseudo-element) */
/* body::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // Initial centering needed here too
    width: 55vw;
    height: 55vw;
    max-width: 450px;
    max-height: 450px;
    min-width: 280px;
    min-height: 280px;
    background: linear-gradient(
        45deg,
        #5f27cd, // Deep Purple
        #00d2d3, // Teal
        #ffaf40  // Orange
    );
    background-size: 300% 300%;
    border-radius: 50%;
    z-index: -1; // Even further back
    filter: blur(70px);
    opacity: 0.7;
    animation:
        animateBlobShape 25s ease-in-out infinite alternate-reverse,
        animateBlobGradient 20s ease-in-out infinite alternate-reverse;
    animation-delay: -5s; // Start at a different point
} */