{% block title %}
    <p class="center"> <b>Guess the Proportion of Blue Balls <br> Timeline and Instructions</b> </p>

    <style>
        .center {
          text-align: center;
        }
    </style>

{% endblock %}


{{ block content }}

<div style="background-color: #ffcccc; padding: 10px; margin-top: 50px; margin-bottom: 50px;">
  <i>Comprehension test: Please answer the question at the end of each page. If you fail more than three times in total, your session will finish,
      and you will receive 50 points for participation. <b>Remaining attempts: {{ attempts }}</b></i>.
</div>

 <style>
    body {
      font-family: Verdana, Arial, sans-serif;
      font-size: 16px;
    }

    .containerX {
                display: flex;
                justify-content: center;
                margin-top: 15px;
            }
     .column {
        display: inline-block;
    }

    .ball {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin: 5px;
    }

    .blue {
        background-color: gray;
        align-items: center;
    }

    .red {
        background-color: red;
    }
    .animation-text {
        text-align: center;
        margin-top: 5px;
        font-size: 12px;
            }
  </style>

<div style="background-color: #e1f0ff; padding: 10px;">
 <b>1. </b> You will be matched with another participant (a fellow human) who has already completed this survey.
</div><br><br>


{{ formfields }}
    {{ next_button }}


{{ endblock }}