{{ block content }}

    <style>
    label{
        font-size: 12px;
        font-weight: 300;
        color: #1c87c9;
        width: fit-content;
    }
    </style>

    <p>
        ¿Cuanto estás de dispuesto a castigar a alguien que trata a otras personas injustamente, incluso si esto te pudiera suponer costes a ti?
    </p> <br>

<style>
.buttons {
  width: 80%;
  table-layout: fixed;
  border-collapse: collapse;
}
.buttons button {
  width: 100%;
}
</style>

<div style="display: flex; justify-content: space-around">
  <div style="font-size: 14px; font-weight: 300; color: #1c87c9;width: 20%">Nada dispuesto a hacer eso</div>
<table style="margin-right: 20px;" class=buttons>
 <tr>
    <td><button name="input_button4" value=1 class="btn btn-outline-primary" btn-lg">1</button>
    <td><button name="input_button4" value=2 class="btn btn-outline-primary" btn-lg">2</button>
    <td><button name="input_button4" value=3 class="btn btn-outline-primary" btn-lg">3</button>
    <td><button name="input_button4" value=4 class="btn btn-outline-primary" btn-lg">4</button>
    <td><button name="input_button4" value=5 class="btn btn-outline-primary" btn-lg">5</button>
    <td><button name="input_button4" value=6 class="btn btn-outline-primary" btn-lg">6</button>
    <td><button name="input_button4" value=7 class="btn btn-outline-primary" btn-lg">7</button>
    <td><button name="input_button4" value=8 class="btn btn-outline-primary" btn-lg">8</button>
    <td><button name="input_button4" value=9 class="btn btn-outline-primary" btn-lg">9</button>
    <td><button name="input_button4" value=9 class="btn btn-outline-primary" btn-lg">10</button>
</table> <br>
    <div style="font-size: 14px; font-weight: 300; color: #1c87c9;width: 20%">Muy dispuesto a hacer eso</div>
</div>

{{ endblock }}