<div class="container" style="max-width:700px;">
    <div class="card p-5" style="border-radius:1.5rem; border-color:{{c!accent color!}}; background:#;">
        <div class="row">
            <div class="col-lg-4 mb-lg-0 mb-3">
                <div class="card rounded-circle p-3" style="border-color:{{c!accent color!}};">
                    <div class="rounded-circle" style="background:{{c!background color!}} url({{u!side icon!}}) center; background-size:cover; padding:50%; background-blend-mode:multiply;"></div>
                </div>
                <div class="mt-3 text-center">
                    <div class="justify-content-center">
                        <div style="position:absolute; margin-top:-8px; height:34px; width:34px; overflow:hidden;">
                            <audio controls="" loop="" style="width:100px; height:50px; opacity:0; margin:-8px -9px;">
                                <source src="{{u!song mp3 URL!}}">
                            </audio>
                        </div>
                    </div>
                    <i class="fa-solid fa-play d-block" style="font-size:1.5em;"></i>
                     {{!song title!}}
                </div>
            </div>
            <div class="col">
                <h1 class="display-3 text-right">
                    {{!name!}}. {{!pronouns!}}.
                </h1>
                <hr style="border-color:{{c!accent color!}};">
                <div class="justify-content-between">
                    <span>"</span> {{!quote!}}  <span>"</span>
                </div>
                <hr style="border-color:{{c!accent color!}};">
                <div class="justify-content-between mt-3">
                    <a href="{{u!character 1 URL!}}" class="p-5 rounded-circle" style="background:{{c!background color!}} url({{u!character 1 icon!}}) center; background-size:cover; background-blend-mode:multiply;"></a>
                    <a href="{{u!character 2 URL!}}" class="p-5 rounded-circle" style="background:{{c!background color!}} url({{u!character 2 icon!}}) center; background-size:cover; background-blend-mode:multiply;"></a>
                    <a href="{{u!character 3 URL!}}" class="p-5 rounded-circle" style="background:{{c!background color!}} url({{u!character 3 icon!}}) center; background-size:cover; background-blend-mode:multiply;"></a>
                </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>