{% load static %}

{% block content %}
<link rel="stylesheet" href="{% static 'venturini_pg/mystyle.css' %}">

<div style="
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: -10px;
    margin-bottom: 25px;
">
    {% if is_stem %}
        <img src="{% static 'venturini_pg/Calculator.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/DNA.png' %}" style="height: 100px;">
    {% else %}
        <img src="{% static 'venturini_pg/iPhone_16_Wallpaper3.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/Samsung_Galaxy_S24_Wallpaper1.png' %}" style="height: 100px;">
    {% endif %}
</div>


<h2 style="text-align:center; color:#800000; font-weight:800; margin-top:0; margin-bottom: 10px">
    Istruzioni Terza Attività
</h2>

<div style="max-width:800px; margin:auto; margin-top:20px; font-size:20px; line-height:1.45;">

    <p>
     In questa terza attività dell'esperimento la composizione del tuo gruppo rimarrà invariata rispetto alla seconda attività. <br>
        Ciascun membro del tuo gruppo riceverà le stesse istruzioni e vedrà le stesse schermate.
    </p>

    <h2 style="text-align:center; color:#800000; font-weight:500; margin-top:0;">
    Cosa Devi Fare?
</h2>

    <p>
        Differentemente dall’attività precedente, in questa nuova attività dovrai prendere solo
una <strong>decisione di contribuzione <u>non</u> condizionata</strong>, ovvero decidere quanti punti
contribuire al Fondo Comune.
    </p>

       <h2 style="text-align:center; color:#800000; font-weight:500; margin-top:0;margin-bottom:14px;">
    Come si Determinano i Guadagni?
</h2>

    <p>
        I guadagni individuali, per ogni membro del gruppo, sono determinati come spiegato
precedentemente:
    </p>
<p>
    <strong>
      Guadagno individuale = 10 - (punti contribuiti) +
      (2 × totale dei punti contribuiti nel gruppo) / (numero di partecipanti nel gruppo)
    </strong>
  </p>

</div>

<div style="text-align: center; margin-top: 30px;">
        <p style="margin: 0 0 8px 0;">
            Quando hai letto le istruzioni, clicca su Continua.
        </p>
        <button class="otree-btn-next btn btn-bordeaux">Continua</button>
</div>

<div style="
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    align-items: center;
    gap: 25px 20px;
    margin-top: 25px;
    margin-bottom: 30px;
">
    {% if is_stem %}
        <img src="{% static 'venturini_pg/Blackboard.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/Lab.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/Emc.png' %}" style="height: 70px;">
        <img src="{% static 'venturini_pg/sencos.png' %}" style="height: 100px;">
    {% else %}
        <img src="{% static 'venturini_pg/Samsung_Galaxy_S25_Wallpaper1.png' %}" style="height: 90px;">
        <img src="{% static 'venturini_pg/Samsung_Galaxy_S24_Wallpaper2.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/iPhone_16_Wallpaper2.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/iPhone_16_Wallpaper1.png' %}" style="height: 100px;">
    {% endif %}
</div>

{% endblock %}