{% extends "global/Page.html" %}
{% load otree static %}

{% block of styles %}
<style>
.text {
    font-family: Calibri;
    font-style: Normal;
    font-size: large;
    line-height: 1.7;
    text-align: justify;

}
.otree-btn-next{
    background-color: red;
    position: absolute;
    right: 20%;
}
.title {
    font-size: xx-large;
    font-weight: bold;
    font-family: Serif;
}
.text_b {
    font-family: Serif;
    font-style: Normal;
    font-size: large;
    line-height: 1.7;
    text-align: justify;
    font-weight: bold;
}

.positioning{
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

</style>
{% endblock %}
{{ block content }}

<div class="title">
    Stage 1
</div>
<br>
<div class="text">
There are 2 steps in this stage:


</div>
<br>

<div class="text">
    <ul>
        <li>In the first step, we will ask you to answer a series of questions. </li>




<li>In the second step, based on your responses to the questions, we will assign you a jersey (either <span style="color: blue">blue</span> or <span style="color: green">green</span>) and a hat (either <span style="color: red">red</span> or <span style="color: yellow">yellow</span>).  An experimenter will come to your seat and give you the assigned jersey and hat once you have finished answering the questions. An avatar will be assigned to you based on the color of the jersey and hat assigned to you. This avatar will be displayed on the top left corner of your screen for the remainder of the experiment. The four possible avatars are below:</li>

</ul>
</div>
<br>
<div class="text">
<img class="positioning" src="/static/imgs/img1.png">
</div>

<br>





    {{ next_button }}

{{ endblock }}