{% load otree static %}

{% block title %}

{% endblock %}

{% block content %}
    <style>
        .ui-top {
            width: 100%;
            text-align: center;
            margin-bottom: 20px;
        }
        .content {
            display: flex;
            flex-direction: column;  /* Change back to column */
            align-items: center;  /* Centers children horizontally */
            width: 100%;
        }
        .left-and-posts {
            display: flex;
            flex-direction: row;
            width: 100%;
        }
        .ui-left {
            flex: 1;
            text-align: center;
            margin-right: 20px;
        }
        .posts {
            flex: 2;
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-right: 40%;  /* Adjust this percentage to move the images more or less */
        }
        .post {
            position: relative;  /* Establishes a point of reference for absolute positioning */
            width: 80%;
            margin-bottom: 20px;  /* Adds space between posts */
        }
        .post img {
            width: 150%;
            display: block;
        }

    </style>
<br>
<br>
             Kindly go through the following social media posts, and click the "Next" button when you're done.
<br>
<br>

    <div class="ui-top">
        <img src="{% static 'images/RedditUITop.png' %}" alt="UI Top">
    </div>

    <div class="content">
        <div class="left-and-posts">
            <div class="ui-left">
                <!-- Any content that should be on the left side, if any, should be placed here -->
            </div>
            <div class="posts">
                <div class="post">
                    <img src="{% static 'images/Reddit_Inoculation.png' %}" alt="Post 1">
                </div>
                <div class="post">
                    <img src="{% static 'images/RedditB_Disclosure.png' %}" alt="Post 2">
                </div>
            </div>
        </div>
        <div class="button-container">
            {% next_button %}
        </div>
    </div>
<script>
</script>
{% endblock %}