* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        linear-gradient(
            135deg,
            #e8f5e9,
            #fffde7
        );

    color: #2f4f3a;
}


/* Main Card */

.container {

    width: 100%;
    max-width: 650px;

    padding: 45px 35px;

    text-align: center;

    background:
        rgba(255,255,255,0.9);

    border-radius: 28px;

    box-shadow:
        0 20px 50px rgba(46,125,50,0.15);

    border:
        1px solid rgba(76,175,80,0.2);

    animation:
        fadeIn 0.8s ease-in-out;
}


/* Optional leaf icon */

.leaf {

    font-size: 3rem;

    margin-bottom: 20px;

    animation:
        float 3s ease-in-out infinite;
}


/* Heading */

h1 {

    font-size:
        clamp(2rem,5vw,3rem);

    margin-bottom: 20px;

    color:
        #276738;

}


.subtitle {
    font-size: clamp(1rem, 4vw, 1.25rem);
    line-height: 1.6;
    margin-bottom: 25px;
}

.intro {
    display: inline;
}

.highlight {
    display: inline-block;
    white-space: nowrap;

    background: #c8e6c9;
    color: #1b5e20;

    padding: 5px 12px;
    border-radius: 20px;

    font-weight: 600;
}

@media (max-width: 600px) {
    .intro {
        display: block;
    }
}

/* Main message */

.message {

    font-size:
        1.05rem;

    line-height:
        1.8;

    color:
        #49634f;

    margin-bottom:
        30px;

}


/* Footer */

.footer {

    font-size:
        1rem;

    color:
        #558b2f;

    font-weight:
        600;

    line-height:
        1.6;
}


/* Language Selector */

#languageSwitcher {

    margin-top:
        30px;

    padding:
        12px 22px;

    border-radius:
        30px;

    border:
        none;

    cursor:
        pointer;

    background:
        white;

    font-size:
        1rem;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.1);
}


/* Loading */

.loading {

    opacity:
        0.5;
}


/* Animations */

@keyframes float {

    0%,100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-10px);

    }

}


@keyframes fadeIn {

    from {

        opacity:
            0;

        transform:
            translateY(20px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* Mobile */

@media(max-width:600px) {

    .container {

        padding:
            35px 25px;

    }


    p {

        font-size:
            1rem;

    }

}
/* Language Selector */

#languageSwitcher {

    margin-top: 40px;

    display: flex;

    justify-content: center;

    gap: 20px;

}


#languageSwitcher button {

    padding:
        12px 28px;

    border-radius:
        30px;

    border:
        none;

    cursor:
        pointer;

    font-size:
        1rem;

    font-weight:
        700;

    color:
        white;

    transition:
        all 0.3s ease;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.12);

}


/* English button */

#languageSwitcher button:first-child {

    background:
        linear-gradient(
            135deg,
            #22c55e,
            #16a34a
        );

}


/* Spanish button */

#languageSwitcher button:last-child {

    background:
        linear-gradient(
            135deg,
            #06b6d4,
            #2563eb
        );

}


#languageSwitcher button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 25px rgba(0,0,0,0.18);

}