{{ block content }}
<div class="card bg-light m-3">
    <div class="card-body">
    <h3>
        Vamos a empezar
    </h3>

        <p>En la página siguiente jugarás la primera ronda de las diez rondas. Esta es la matriz de pagos del primer juego que verán tanto tú como el otro jugador </p>


    <table class='table table-bordered text-center'
           style='width: auto; margin: auto'>
        <tr>
            <th colspan=2 rowspan=2></th>
            <th colspan=2 style="color: forestgreen">El otro participante</th>
        </tr>
        <tr>
                <th style="color: forestgreen">A</th>
                <th style="color: forestgreen">B</th>
        </tr>
        <tr>
            <th rowspan=2><span style="transform: rotate(-90deg); color: #007dc1"">Tú</span></th>
            <th><b style="color: #007dc1"> A</b></th>
                <td> <b style="color: #007dc1"> {{C.PAYOFF_B}}</b>, <b style="color: forestgreen">{{C.PAYOFF_B}}</b></td>
                <td> <b style="color: #007dc1"> {{ C.PAYOFF_D }}</b>, <b style="color: forestgreen">{{C.PAYOFF_A}}</b></td>
        </tr>
        <tr>
            <th><b style="color: #007dc1"> B</b></th>
                <td><b style="color: #007dc1"> {{C.PAYOFF_A}}</b>,<b style="color: forestgreen"> {{ C.PAYOFF_D }}</b></td>
                <td><b style="color: #007dc1"> {{C.PAYOFF_A}}</b>, <b style="color: forestgreen">{{C.PAYOFF_A}}</b></td>
        </tr>
    </table>
<br>

    </div>
</div>
{{ next_button }}
{{ endblock }}