{% extends "global/Page.html" %}
{% load static otree %}
{% block styles %}
<link href="{% static 'main_app/style.css' %}" rel="stylesheet"> {% endblock %}
{% block title %}Game Play{% endblock %}
{% block content %}
<div class="card bg-transparent">
    <div class="card-body">
        <div class="container" style="height: 90%">
            <div class="row">
                <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
                    <h2><b>THE GAME PLAY</b></h2><br>
                    <ul style="font-size: 19px;text-align: left;">
                        <li>
                            In each month all players are asked simultaneously: “<e style="color: blue"><i>How much
                                    energy do you want to
                                    conserve this month?</i></e>” You may choose to conserve anywhere from <e style="color: blue">0</e>
                            to <e style="color: blue">10</e> energy tokens
                            each month, keeping the other tokens to your <e style="color: #a700a8">private account</e>.
                        </li><br>
                        <li>
                            <b>After each month</b> (once all players have made their choices) the month’s results be
                            displayed to all players. You’ll get updates on the <e style="color: blue">group
                                conservation account</e> and your
                            <e style="color: #a700a8">private account</e>. Your personal decision will not be shared
                            with other players.
                        </li><br>
                        <li>
                            <b>At the end of the game</b> (after 12 months) each player will be paid based on the rules
                            described on the next page.
                        </li>
                    </ul>
                </div>
                <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                    <!-- <img src="{% static 'main_app/3. THE GAME PLAY.png' %}" class="img-fluid" alt="Responsive image"/> -->
                </div>
            </div>
        </div>
        <button class="otree-btn-next btn" style="background: #8d8d8d; margin-left: 200px; width: 100px">Next</button>
    </div>
</div>
{% endblock %}