{% extends 'layout.html' %}
{% block content %}

<div class="container">
    <video id="backgroundVideo" autoplay loop muted>
      <source src="/static/images/Background_Loop.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <img src="/static/images/mindustry_logo.png" alt="Logo" class="logo-overlay">
  </div>
<div class= "position">

<p>Mindustry is a tower defence game that you can collect resources, making factories to make new materials, creating new robots to conquer other teratory and explore new stuff in the solar system.</p>

<p>Collect - Collect resources found around the planet.</p>

<p>Defence - Defend your base with the next upcoming attack</p>

<p>Destroy - Destroy your enemy base with your units</p>

<p>Destruction - This game is filled with chaos</p>

<p>Destruction - This game is filled with chaos</p>
<p>Destruction - This game is filled with chaos</p>
<p>Destruction - This game is filled with chaos</p>
<p>Destruction - This game is filled with chaos</p>
<p>Destruction - This game is filled with chaos</p>
<img style="margin-left: auto;margin-right: auto; text-align: justify;" src="\static\images\building_tracks.gif" alt="tracks">
<img style="margin-left: auto;margin-right: auto; text-align: justify;" src="\static\images\destruction.gif" alt="hi">

</div>

<nav class="nav-bottom">
    <ul class="nav-bottom-links">
        <div id="arrow-right">
            <li><a href="/tutorial">(Tutorial) -></a></li>
        </div>
    </ul>
</nav>

{% endblock %}