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

{{ block content }}

<div style="max-width:650px;margin:0 auto;padding:25px;border:1px solid #ddd;border-radius:10px;background:#fafafa;box-shadow:0 2px 6px rgba(0,0,0,0.1);">

    <h3 style="text-align:center;margin-bottom:15px;">Questions</h3>

    <p style="font-size:16px;margin-bottom:20px;">
        Please answer the following <strong>True/False</strong> questions about the short film you just watched.
    </p>

    <div style="padding:15px 20px;background:white;border:1px solid #ccc;border-radius:8px;margin-bottom:20px;">
        {{ formfields }}
    </div>

    <p style="font-size:14px;color:#555;margin-top:15px;text-align:center;">
        <i>Note: Some questions may be tricky; just answer as best you can.</i>
    </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 }}