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

{% block styles %}
<style>
.content {
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    text-align: left;
}
.page-header {
    margin: 0px;
}

.otree-body.container {
    margin: 0px auto 0px;
    font-weight: normal;
    padding-top: 5%;
}


</style>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}
<div class="row content">
    <div class="col-8">
    <p>Congratulations!</p>

    <p>You answered all questions in the quiz correctly and can continue with the paid rounds.</p>
    <p>Remember:</p>
    <ul>
    <li>On some rounds, Option A will be on the LEFT,
    and in others it will be on the RIGHT.</li>

    <li>In each round, you will choose one of the two options by pressing either the "A" key on your keyboard for the LEFT option
    or the  "L" key on your keyboard for the RIGHT option.</li>
    </ul>
  <center>
    {% next_button %}
  </div>
</div>
{% endblock %}