{{ define "main" }}
    <h2>{{ .Title }}</h2>

    <hr>

    <div class="container">
        <div class="box" style="width: 50%">
            <h2>Character</h2>

            <p>Here's my WoL, and she's stayed consistent shortly after I purchased Shadowbringers.</p>

            <img style="display: block; margin-left: auto; margin-right: auto;margin-bottom:10px;width:50%" src="char.jpg" />

            <table>
                <tr>
                    <th>Gender</th>
                    <td>Female♀</td>
                </tr>
                <tr>
                    <th>Race</th>
                    <td>Viera/Veena</td>
                </tr>
                <tr>
                    <th>Height</th>
                    <td>6' 3" (191 cm)</td>
                </tr>
                <tr>
                    <th>Nameday</th>
                    <td>14th Sun of the 4th Umbral Moon</td>
                </tr>
                <tr>
                    <th>City-state</th>
                    <td>Gridania</td>
                </tr>
                <tr>
                    <th>Guardian Deity</th>
                    <td>Nophica</td>
                </tr>
            </table>
        </div>

        <div style="width: 50%">
            <div class="box" style="height: 600px">
                <h2>Artwork</h2>

                <p>Here's some fan art of my WoL, I want to do more general FFXIV fan art in the future too!</p>

                <div style="height: 500px; overflow: auto">
                {{ partial "art-section" . }}
                </div>
            </div>

            <div class="box">
                <h2>Notable Achievements</h2>

                <ul>
                    <li>Completed my Sightseeing Log</li>
                    <li>Found all Aether Currents</li>
                </ul>
            </div>
        </div>
    </div>

    <style>
        .container {
            display: flex;
            column-gap: 15px;
        }

        .box {
            display: block;
            width: 100%;
            border: 1px solid gray;
            padding: 5px;
        }
    </style>
{{ end }}