:root {
    --start-gradient-color1: rgba(162, 217, 206, 0.8); /* Light green */
    --end-gradient-color1: rgba(240, 230, 255, 0.8);   /* Lavender/pale purple */

    --start-gradient-color2: rgba(179, 229, 252, 0.7);
    --end-gradient-color2: rgba(128, 222, 234, 0.7);

    --start-gradient-color3: rgba(200, 230, 201, 0.6);
    --end-gradient-color3: rgba(165, 214, 167, 0.6);
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #3a3a5f; /* Dark slate text color */
    line-height: 1.6;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: 
        linear-gradient(135deg, var(--start-gradient-color1), var(--end-gradient-color1)),
        linear-gradient(-45deg, var(--start-gradient-color2), var(--end-gradient-color2)),
        linear-gradient(225deg, var(--start-gradient-color3), var(--end-gradient-color3));
    background-size: 400% 400%, 600% 600%, 800% 800%; /* Larger than the actual size */
    animation: 
        wave-animation1 30s ease infinite,
        wave-animation2 45s ease infinite,
        wave-animation3 60s ease infinite;
}

@keyframes wave-animation1 {
    0% { background-position: 0% 50%, 0% 50%; }
    100% { background-position: 400% 50%, 600% 50%; }
}

@keyframes wave-animation2 {
    0% { background-position: 0% 50%, 0% 50%; }
    100% { background-position: -600% 50%, 1200% 50%; }
}

@keyframes wave-animation3 {
    0% { background-position: 0% 50%, 0% 50%; }
    100% { background-position: -800% 50%, 1600% 50%; }
}

.container {
    text-align: center;
    max-width: 600px;
    padding: 40px;
    background-color: #ffffff; /* White container */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #3a5fa3; /* Conservative deep blue for heading */
}

p {
    font-size: 1.1em;
    color: #6b6b94; /* Softer slate for paragraph text */
}

.button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #ff79da; /* Bright pink button background */
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #ff4a76; /* Darker pink on hover */
}