{% extends "base" %}

{% block content %}

<div class="info_wrapper">
    <div class="info">
        <div>
            <h1>
                Planetwars
            </h1>
            <h3 style="color: #bbb">
                powered by MOZAIC
            </h3>
        </div>
        <div class="steps">
            <a class="step" href='/mapbuilder'>
                <div class="step_content">
                    <h2>Step 1:</h2>
                    <div>
                        <h3>(Optional)</h3>
                        <h3>Build a map</h3>
                    </div>
                </div>
            </a>
            <a class="step" href='/lobby'>
                <div class="step_content">
                    <h2>Step 2:</h2>
                    <h3>Create a game</h3>
                </div>
            </a>
            <a class="step" href='/info'>
                <div class="step_content">
                    <h2>Step 3:</h2>
                    <h3>Play!</h3>
                </div>
            </a>
        </div>
        <div>
            <p style="font-size: 1.4em;">If you want to build your own bot, and own the competition. Checkout <a href="/info">more information</a></p>
        </div>
        <div>
            <h1 class="contribute">
                <a href='https://github.com/ZeusWPI/Planetwars' target="_blank">
                    Contribute! <span class="heart"></span>
                </a>
            </h1>
        </div>
    </div>
</div>

{% endblock %}