<div class="container" style="max-width:700px;">
    <div class="card p-5" style="border-radius:1.5rem; border-color:{{c!accent color!}};">
        <div class="row">
            <div class="col order-2 order-lg-1 mt-lg-0 mt-3">
                <h1 class="display-3 font-italic">
                    welcome!
                </h1>
                <p>{{!name!}}. {{!age!}}. {{!pronouns!}}.</p>
                <hr style="border-color:{{c!accent color!}};">
                <div class="text-justify" style="max-height:135px; overflow:auto;">
                    {{l!description!}}
                </div>
                <hr style="border-color:{{c!accent color!}};">
                <div class="justify-content-between">
                    <a href="{{!link 1 URL!}}" class="btn" style="background:{{c!accent color!}}; color:{{c!link color!}}; border-radius:1rem; font-size:1.5em;">
                        <i class="fa-brands fa-instagram fa-fw"></i>
                    </a>
                    <a href="#" title="{{!discord tag!}}" class="btn tooltipster" style="background:{{c!accent color!}}; color:{{c!link color!}}; border-radius:1rem; font-size:1.5em;">
                        <i class="fa-brands fa-discord fa-fw"></i>
                    </a>
                    <a href="{{!link 3 URL!}}" class="btn" style="background:{{c!accent color!}}; color:{{c!link color!}}; border-radius:1rem; font-size:1.5em;">
                        <i class="fa-brands fa-twitter fa-fw"></i>
                    </a>
                    <a href="{{!link 4 URL!}}" class="btn" style="background:{{c!accent color!}}; color:{{c!link color!}}; border-radius:1rem; font-size:1.5em;">
                        <i class="fa-brands fa-deviantart fa-fw"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-5 order-lg-2 order-1">
                <div class="h-100" style="min-height:200px; border-radius:1rem; background:{{c!accent color!}} url({{!side image URL!}}) center; background-size:cover; background-blend-mode:multiply;"></div>
            </div>
        </div>
    </div>
    <div class="d-flex justify-content-center">
        <div class="card border-0 mt-n4">
            <h2 class="display-4 px-4">
                {{!username!}}
            </h2>
        </div>
    </div>
    <div class="mt-3 text-center">
        <a href="htmlobster" title="html by noll" class="tooltipster">
            <i class="fa-solid fa-lobster"></i>
        </a>
    </div>
</div>