{% extends "global/Page.html" %}
{% load static otree %}
{% block styles %}
<link href="{% static 'main_app/style.css' %}" rel="stylesheet"> {% endblock %}
{% block title %}Game Structure{% endblock %}
{% block content %}
<div class="card bg-transparent">
    <div class="card-body">
        <div class="container">
            <div class="row">
                <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
                    <h2><b>THE GAME STRUCTURE</b></h2><br>
                    <ul style="font-size: 18px;text-align: left;">
                        <li>
                            There are <b>22 players</b>, who live in the same apartment building.
                        </li>
                        <li>
                            Each player gets <b>10 energy tokens</b> (worth <b>$0.10 each</b>) at the start of each
                            month. Each token represents 1 unit of energy use beyond your basic needs.
                        </li>
                        <li>
                            You will play <b>12 rounds</b> (for each “month” of a year). In each month, every player
                            faces the same monthly decision problem: how much energy to keep in your <b>
                                <e style="color: #a700a8">private account</e>
                            </b>
                            versus how much to conserve (by putting it in the <b>
                                <e style="color: blue">group conservation account</e>
                            </b>).
                        </li>
                        <li><b>
                                To meet the <e style="color: blue">60%</e> (=<e style="color: blue">1,584 tokens</e>)
                                energy reduction goal, each player should donate an average of 6 energy tokens every
                                month to the group conservation account.
                            </b></li>
                    </ul>
                </div>
                <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                    <!-- <img src="{% static 'main_app/2. THE GAME STRUCTURE.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 %}