:root {
    --color-a: #00c6ff;
    --color-b: #0072ff;
}

body {
    /* De basis is simpel, de JS doet het zware werk */
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, var(--color-a) 0%, var(--color-b) 100%);
    background-attachment: fixed;
}

.main-container {
    background: rgba(255, 255, 255, 0.5); /* Licht transparant wit */
    padding: 4rem 2rem;
    margin: 1rem;
    border-radius: 35px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    text-align: center;
    max-width: 90%;
    width: 450px;
    border: 2px solid rgba(255,255,255,0.5); /* Zachte rand */
    backdrop-filter: blur(5px); /* Trendy blur effect op de achtergrond */
    pointer-events: none;
    user-select: none;
}

.emoji {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
    animation: wave 2s infinite ease-in-out; /* Subtiele animatie */
}

h1 {
    color: #333;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

p {
    font-size: 1.2rem;
    line-height: 1.5;
    color: #555;
    font-weight: 400;
}

.sub-text {
    margin-top: 3rem;
    font-size: 0.9rem;
    color: rgba(0,0,0,0.5);
    font-style: italic;
}

/* Een kleine golfbeweging voor de emoji */
@keyframes wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Mobiele aanpassingen */
@media (max-width: 600px) {
    .main-container {
        padding: 2rem 1rem;
    }
    h1 { font-size: 1.5rem; }
    p { font-size: 1rem; }
}