{{ extends "global/Page.html" }}
{{ block title }}{{ endblock }}

{{ block content }}

<div style="max-width:700px; margin:auto; padding:20px; background-color:#f9f9f9; border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,0.1);">

    <h2 style="color:#2a7ae2; text-align:center;">Welcome!</h2>

    <div style="background-color:#fff3cd; border-left:4px solid #ffc107; padding:12px 16px; border-radius:6px; margin-bottom:16px;">
        <p style="font-size:15px; line-height:1.6; margin:0;">
            <strong>Important:</strong> Before starting the experiment, please make sure you are in an environment in which you can concentrate without external exposure to audio or video content.
        </p>
    </div>

    <p style="font-size:16px; line-height:1.6;">
        Thank you for participating in this study. In this experiment, you will make a series of decisions about allocating funds.
        Your choices will influence both your personal payoff and the support of an independent water security organization.
    </p>

    <div style="background-color:#e8f4f8; border-left:4px solid #2a7ae2; padding:12px 16px; border-radius:6px; margin-bottom:16px;">
        <p style="font-size:14px; line-height:1.6; margin:0;">
            <strong>What is a water security organization?</strong><br>
            According to the United Nations, water security is defined as <em>"the capacity of a population to safeguard sustainable access to adequate quantities of acceptable quality water for sustaining livelihoods, human well-being, and socio-economic development, for ensuring protection against water-borne pollution and water-related disasters, and for preserving ecosystems in a climate of peace and political stability."</em>
        </p>
    </div>

    <p style="font-size:16px; line-height:1.6;">
        Please read all instructions carefully and answer honestly. Rest assured, your responses are completely anonymous.
    </p>

    <p style="font-size:16px; line-height:1.6; text-align:center; color:#555;">
        Let's get started! 🚀
    </p>

</div>

<button type="submit" class="submit-btn">Next</button>

<style>
    .submit-btn {
        display: block;
        width: 100%;
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        font-size: 1.2em;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .submit-btn:hover {
        background-color: #45a049;
    }
</style>

{{ endblock }}