{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}

    Zu Beginn einige Fragen zu Ihrer Person
{% endblock %}


{% block content %}


    <div style="display: flex; align-items: center; gap: 12px;">
            <span> Ich bin </span>
    {% formfield player.dem_age %}
            <span> Jahre alt. </span>
    </div>

    <div style="display: flex; align-items: center; gap: 12px;">
        <span> Ich bin </span>
    {% formfield player.dem_gender %}
    </div>

    <br>
    <div style="display: flex; align-items: center; gap: 12px;">
    {% formfield player.dem_school %}
    </div>


    <div style="display: flex; align-items: center; gap: 12px;">
    {% formfield player.dem_land %}
    </div>


    <br>
    {% next_button %}


    <style>
.btn-primary {
    background-color: #003360 !important;
    border-color: #003360 !important;
}
.btn-primary:hover {
    background-color: #001f3f !important;
    border-color: #001f3f !important;
}
    </style>
{% endblock %}




{% block styles %}
    <style xmlns="http://www.w3.org/1999/html">
    #header {
        display: block;
        font-weight: normal;
        font-size: 14px;
        text-align: right;
        background-color: #003360;
        color: white;
    }

    .table{
        width: 800px;
    }

    </style>
    {% endblock %}