<div class="container" style="max-width:750px;">
    <div class="ml-sm-n5 ml-n4" style="height:116px; width:157px; clip-path:url(#planet); background:{{c!accent!}} url({{u!planet image!}}) center; background-size:cover; background-blend-mode:multiply; position:relative; z-index:2;"></div>
    <div class="card p-3" style="margin-top:-3.5rem;">
        <div class="row">
            <div class="col-lg-3">
                <div class="card p-3 bg-faded h-100">
                    <div>
                        <h1 class="font-weight-light text-center"> 
                            {{!name!}}
                        </h1>
                        <p class="font-italic text-center">
                            {{!pronouns!}}
                        </p>
                        <hr class="mt-3 mb-1">
                        <div class="row">
                            <div class="col-lg-12 col-sm-3">
                                <a href="{{u!link 1 URL!}}" class="d-block btn mt-3" style="background:{{c!accent!}}; color:{{c!button text!}};">
                                    <i class="fa-brands fa-instagram fa-fw"></i>
                                </a>
                            </div>
                            <div class="col-lg-12 col-sm-3">
                                <a href="{{u!link 2 URL!}}" class="d-block btn mt-3" style="background:{{c!accent!}}; color:{{c!button text!}};">
                                    <i class="fa-brands fa-twitter fa-fw"></i>
                                </a>
                            </div>
                            <div class="col-lg-12 col-sm-3">
                                <a href="{{u!link 3 URL!}}" class="d-block btn mt-3" style="background:{{c!accent!}}; color:{{c!button text!}};">
                                    <i class="fa-brands fa-deviantart fa-fw"></i>
                                </a>
                            </div>
                            <div class="col-lg-12 col-sm-3">
                                <a href="#" title="{{!discord tag!}}" class="d-block btn mt-3 tooltipster" style="background:{{c!accent!}}; color:{{c!button text!}};">
                                    <i class="fa-brands fa-discord fa-fw"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col py-lg-2 mt-3 mt-lg-0">
                <div class="card d-block bg-faded p-3 d-block d-lg-flex flex-column">
                    <div class="d-block" style="flex:1 1 270px; min-height:270px; overflow-y:auto;">
                        {{%description%
                        <p>
                            {{l%paragraph%}}
                        </p>
                        %end%}}
                    </div>
                </div>
            </div>
            <div class="col-lg-2 mt-3 mt-lg-0">
                <div class="card bg-faded px-3 pb-3 h-100">
                    <div class="text-center mt-3">
                        <i class="fa-solid fa-cat-space fa-2x" style="color:{{c!accent!}};"></i>
                    </div>
                    <div class="row my-auto">
                        {{%friends%
                        <div class="col-lg-12 col-6">
                            <a href="{{u%profile link%}}" title="{{%name%}}" class="btn rounded p-lg-4 p-5 mt-3 border-0 w-100 tooltipster" style="background:url({{u%icon image%}}) center; background-size:cover;">
                            </a>
                        </div>
                        %end%}}
                    </div>
                </div>
            </div>
            <div class="col-lg-2 mt-3 mt-lg-0">
                <div class="card bg-faded px-3 pb-3 h-100">
                    <div class="text-center mt-3">
                        <i class="fa-solid fa-planet-moon fa-2x" style="color:{{c!accent!}};"></i>
                    </div>
                    <div class="row my-auto">
                        {{%characters%
                        <div class="col-lg-12 col-6">
                            <a href="{{u%character link%}}" title="{{%name%}}" class="btn rounded p-lg-4 p-5 mt-3 border-0 w-100 tooltipster" style="background:url({{u%icon image%}}) center; background-size:cover;">
                            </a>
                        </div>
                        %end%}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="d-flex justify-content-end mr-4" style="color:{{c!accent!}}; margin-top:-1.5rem;">
        <i class="fa-solid fa-star fa-2x mr-n5 mt-n5" style="transform:rotate(50deg);"></i>
        <span style="position:relative; z-index:2;">
            <i class="fa-solid fa-star mr-1" style="transform:rotate(-50deg);"></i>
            <i class="fa-solid fa-star fa-3x mr-n5 mt-n1"></i>
        </span>
    </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>
  
<svg height="0" width="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="planet">
    <path d="M30.3,62.5c-75.4,74.1,9.8,58,63.1,17.7c56.1-34.5,104-109.3,7.5-66C68-7.8,22.4,24.2,30.3,62.5L30.3,62.5z M120.4,39 c-2.2-6.4-6-12.8-10.8-17.7C132.7,12.1,137.3,21.1,120.4,39z M33.5,73.4c2.6,6.3,7,12.3,12.1,16.8C22.6,99.6,16.6,91.5,33.5,73.4z"/>
    <path d="M123.2,57c2.2,36.4-38.8,50-61.7,42.3C81.7,89,106.2,72.1,123.2,57z"/>
  </clipPath>
</svg>