<div class="container mt-5" style="max-width:700px;">
    <div class="px-lg-5" style="background:{{c!accent color!}};">
        <div class="card bg-faded rounded-0 border-0 p-sm-5 p-3 mx-sm-5 mx-4">
            <div class="card p-3">
                <h1 class="display-2 text-center mb-0">
                    welcome!
                </h1>
                <hr class="w-100">
                <p>
                    {{l!description!}}
                </p>
            </div>
            <div class="justify-content-between">
                <a href="{{u!link 1 URL!}}" class="btn px-sm-4 card d-inline-block mt-3" style="color:inherit;">
                    <i class="fa-brands fa-instagram fa-fw"></i>
                </a>
                <a href="{{u!link 2 URL!}}" class="btn px-sm-4 card d-inline-block mt-3" style="color:inherit;">
                    <i class="fa-brands fa-twitter fa-fw"></i>
                </a>
                <a href="{{u!link 3 URL!}}" class="btn px-sm-4 card d-inline-block mt-3" style="color:inherit;">
                    <i class="fa-brands fa-deviantart fa-fw"></i>
                </a>
                <a title="{{!discord tag!}}" class="btn px-sm-4 card d-inline-block mt-3 tooltipster" style="color:inherit;">
                    <i class="fa-brands fa-discord fa-fw"></i>
                </a>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="card p-3 mt-3" style="height:calc(100% - 1rem);">
                        <h2 class="display-4 text-center">
                            likes
                        </h2>
                        <ul class="fa-ul mb-0">
                            {{%likes%
                            <li>
                                <span class="fa-li"><i class="fa-solid fa-heart" style="color:{{c!accent color!}};"></i></span>
                                {{%like%}}
                            </li>
                            %end%}}
                        </ul>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card p-3 mt-3" style="height:calc(100% - 1rem);">
                        <h2 class="display-4 text-center">
                            dislikes
                        </h2>
                        <ul class="fa-ul mb-0">
                            {{%dislikes%
                            <li>
                                <span class="fa-li"><i class="fa-solid fa-skull" style="color:{{c!accent color!}};"></i></span>
                                {{%dislike%}}
                            </li>
                            %end%}}
                        </ul>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card mt-3 p-3">
                        <h2 class="display-4 text-center mb-0">
                            characters
                        </h2>
                        <hr class="w-100 mb-0">
                        <div class="row">
                            {{%featured characters%
                            <div class="col-lg mt-3">
                                <a href="{{%character link%}}" class="btn p-5 rounded border-0 w-100" style="background:{{c!accent color!}} url({{u%character icon%}}) center; background-size:cover; background-blend-mode:multiply;"></a>
                            </div>
                            %end%}}
                        </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>
</div>