<div class="container mt-5" style="max-width:500px;">
    <div class="row no-gutters">
        <div class="col-sm-auto mt-4 mr-sm-n4">
            <div class="mr-sm-n3">
                <div class="card p-3" style="border-color:{{c!accent!}};">
                    <div class="rounded" style="background:{{c!accent!}} url({{u!side image!}}) center; background-size:cover; background-blend-mode:multiply; padding:50px; position:relative; z-index:2;"></div>
                </div>
            </div>
            <div class="mr-sm-n3 mt-3">
                <div class="card p-3 ml-sm-4" style="border-color:{{c!accent!}};">
                    <div class="d-flex justify-content-center justify-content-sm-start">
                            <div style="position:absolute; margin-top:-4px; margin-left:2px; height:34px; width:34px; overflow:hidden;">
                            <audio controls="" loop="" style="width:100px; height:50px; opacity:0; margin:-8px -9px;">
                                <source src="{{u!song file link!}}">
                            </audio>
                        </div>
                        <i class="fa-solid fa-music d-block text-muted fa-2x fa-fw"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col mt-sm-0 mt-4">
            <div class="card px-sm-4 pb-sm-4 pb-3" style="border-color:{{c!accent!}};">
                <div class="d-flex justify-content-center">
                    <div class="card border-0 mt-n4 mx-3 px-3">
                        <h1 class="display-4 text-center text-muted">
                            {{!username!}}
                        </h1>
                    </div>
                </div>
                <div class="text-center mx-3">
                    <span class="badge badge-pill" style="background:{{c!accent!}};">
                        {{!names!}}
                    </span>
                    <span class="badge badge-pill" style="background:{{c!accent!}};">
                        {{!pronouns!}}
                    </span>
                    <span class="badge badge-pill" style="background:{{c!accent!}};">
                        {{!age!}}
                    </span>
                </div>
                <div class="mt-3 text-justify px-3">
                    {{%description%
                    <p>
                        {{l%paragraph%}}
                    </p>
                    %end%}}
                </div>
                <div class="text-center mt-1 mx-3">
                    {{%links%
                    <a class="badge badge-pill mt-3" href="{{u%url%}}" style="background:{{c!accent!}};">
                        {{%text%}}
                    </a>
                    %end%}}
                </div>
            </div>
        </div>
    </div>
    <div class="mt-3 text-center">
        <a href="https://toyhou.se/HTMLobster" title="html by noll" class="tooltipster">
            <i class="fa-solid fa-lobster"></i>
        </a>
    </div>
</div>