<div class="container rounded px-0 py-5 mt-5" style="background:{{c!accent!}} url({{u!background image!}}) center; background-size:cover; background-blend-mode:multiply; box-shadow:0 0 15px {{c!box shadow!}};">
    <div class="row">
        <div class="col-lg-4 align-items-center order-lg-1 order-2">
            <div class="card my-5 py-3 px-4 border-0 w-100 mr-4" style="max-width:200px; border-radius:0 0.25rem 0.25rem 0;">
                <div class="rounded" style="padding:50%; background:{{c!accent!}} url({{u!album cover!}}) center; background-size:cover; background-blend-mode:luminosity;"></div>
                <div class="progress mt-3" style="height:4px;">
                  <div class="progress-bar" role="progressbar" style="width:{{n!progress of song!}}%; background:{{c!accent!}};" aria-valuenow="{{n!progress of song!}}" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="justify-content-between mt-3" style="font-size:1.5em;">
                    <i class="fa-solid fa-backward"></i>
                    <div class="justify-content-center">
                        <div style="position:absolute; margin-top:-8px; 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 link!}}">
                            </audio>
                        </div>
                        <i class="fa-solid fa-play"></i>
                    </div>
                    <i class="fa-solid fa-forward"></i>
                </div>
                <div class="text-center mt-2">
                    {{!song name - artist!}}
                </div>
            </div>
        </div>
        <div class="col-lg justify-content-end mt-5 mt-lg-0 order-lg-2 order-1">
            <div class="card my-5 py-3 px-4 border-0 w-100 ml-4" style="max-width:500px; border-radius:0.25rem 0 0 0.25rem;">
                <h1 class="display-2 font-italic">
                    <span style="color:{{c!accent!}};">w</span>elcome!
                </h1>
                <div>
                    <p>
                        {{!name!}}. {{!age!}}. {{!pronouns!}}.
                    </p>
                    {{%description%
                    <p>
                        {{%paragraph%}}
                    </p>
                    %end%}}
                </div>
                <div class="row">
                    <div class="col mt-3">
                        <a href="{{u!link 1 URL!}}" class="btn btn-primary border-0 py-2 w-100" style="background:{{c!accent!}};">
                            <i class="fa-brands fa-instagram"></i>
                        </a>
                    </div>
                    <div class="col mt-3">
                        <a href="{{u!link 2 URL!}}" class="btn btn-primary border-0 py-2 w-100" style="background:{{c!accent!}};">
                            <i class="fa-brands fa-twitter"></i>
                        </a>
                    </div>
                    <div class="col mt-3">
                        <a href="{{u!link 3 URL!}}" class="btn btn-primary border-0 py-2 w-100" style="background:{{c!accent!}};">
                            <i class="fa-brands fa-deviantart"></i>
                        </a>
                    </div>
                    <div class="col mt-3">
                        <a href="{{u!link 4 URL!}}" class="btn btn-primary border-0 py-2 w-100" style="background:{{c!accent!}};">
                            <i class="fa-brands fa-trello"></i>
                        </a>
                    </div>
                    <div class="col mt-3">
                        <a href="#" title="{{!discord tag!}}" class="btn btn-primary border-0 py-2 w-100 tooltipster" style="background:{{c!accent!}};">
                            <i class="fa-brands fa-discord"></i>
                        </a>
                    </div>
                </div>
            </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>