Limbus Company Wiki TH Template (Uncolored Lines/Borders)

<h1 class="display-3 d-inline-block" style="width:90%">NAME</h1><span class="text-right d-inline-block" style="width:10%"><a data-toggle="tooltip" title="Coded by Mentomori, based on the layout of limbuscompany.wiki.gg" data-placement="left" href="https://toyhou.se/Mentomori"><i class="fa-solid fa-code align-top"></i></a></span>
<hr class="mt-0 mb-1">
<!-- NAV -->
<ul class="nav nav-pills nav-fill my-3">
    <li class="nav-item mr-1"><a class="nav-link active card bg-faded" href="#overview" data-toggle="pill">Overview</a></li>
    <li class="nav-item"><a class="nav-link card bg-faded" href="#story" data-toggle="pill">Story</a></li>
</ul>
<div class="tab-content">
    <!-- OVERVIEW -->
    <div class="tab-pane active fade show" id="overview">
        <!-- Sinner Warning Text -->
        <div class="text-danger p-1 mb-2 text-center font-weight-bold" style="border:dotted 2px">Sinner note goes here…</div>
        <!-- Sidebar Info -->
        <div class="clearfix">
            <div class="float-right d-inline-block ml-3 small card rounded-0" style="background-color:COLOR;color:COLOR;width:260px;padding:1px;">
                <h1 class="text-center my-1" style="filter:invert(100) grayscale(100) contrast(100)">NAME</h1>
                <div class="p-1 bg-faded">
                    <!-- Sidebar Image -->
                    <img src="IMGURL">
                </div>
                <!-- Color -->
                <div class="bg-faded p-1" style="margin-top:1px;">
                    <span class="d-inline-block font-weight-bold align-top text-body" style="width:40%">Color</span><span class="d-inline-block text-center" style="background-color:COLOR;width:60%;border:solid black 1px"><span style="filter:invert(100) grayscale(100) contrast(100)">COLOR</span></span>
                </div>
                <!-- Affiliation -->
                <div class="bg-faded p-1 text-body" style="margin-top:1px;">
                    <span class="d-inline-block font-weight-bold align-top" style="width:40%">Affiliation</span><span class="d-inline-block" style="width:60%;">AFFILIATION</span>
                </div>
                <h1 class="text-center my-1" style="filter:invert(100) grayscale(100) contrast(100)">Biographical Info</h1>
                <!-- Gender -->
                <div class="bg-faded p-1 text-body" style="margin-top:1px;">
                    <span class="d-inline-block font-weight-bold align-top" style="width:40%">Gender</span><span class="d-inline-block" style="width:60%;">GENDER</span>
                </div>
                <!-- Height -->
                <div class="bg-faded p-1 text-body" style="margin-top:1px;">
                    <span class="d-inline-block font-weight-bold align-top" style="width:40%">Height</span><span class="d-inline-block" style="width:60%;">HEIGHT</span>
                </div>
                <!-- Birthday -->
                <div class="bg-faded p-1 text-body" style="margin-top:1px;">
                    <span class="d-inline-block font-weight-bold align-top" style="width:40%">Birthday</span><span class="d-inline-block" style="width:60%;">BIRTHDAY</span>
                </div>
                <!-- Native District -->
                <div class="bg-faded p-1 text-body" style="margin-top:1px;">
                    <span class="d-inline-block font-weight-bold align-top" style="width:40%">Native District</span><span class="d-inline-block" style="width:60%;">DISTRICT</span>
                </div>
                <!-- Relations -->
                <div class="bg-faded p-1 text-body" style="margin-top:1px;">
                    <span class="d-inline-block font-weight-bold align-top" style="width:40%">Relations</span><span class="d-inline-block" style="width:60%;">RELATIONS</span>
                </div>
                <h1 class="text-center my-1"><a href="#other" style="color:inherit;text-decoration:none;filter:invert(100) grayscale(100) contrast(100)" data-toggle="collapse">Other ±</a></h1>
                <div id="other" class="collapse show">
                    <!-- Literary Source -->
                    <div class="bg-faded p-1 text-body" style="margin-top:1px;">
                        <span class="d-inline-block font-weight-bold align-top" style="width:40%">Literary Source</span><span class="d-inline-block" style="width:60%;"><a href="SOURCEURL">SOURCE</a></span>
                    </div>
                    <!-- Nationality -->
                    <div class="bg-faded p-1 text-body" style="margin-top:1px;">
                        <span class="d-inline-block font-weight-bold align-top" style="width:40%">Nationality</span><span class="d-inline-block" style="width:60%;">NATIONALITY</span>
                    </div>
                    <!-- Voiceclaim -->
                    <div class="bg-faded p-1 text-body" style="margin-top:1px;">
                        <span class="d-inline-block font-weight-bold align-top" style="width:40%">Voiceclaim</span><span class="d-inline-block" style="width:60%;">VOICE</span>
                    </div>
                </div>
            </div>
            <div class="d-flex flex-wrap lead font-weight-normal text-center" style="filter:drop-shadow(0 0 0.04rem black);color:COLOR;">
                <!-- Sinner Icon -->
                <img src="IMGURL" style="width:100px;" class="mr-2 mb-2">
                <!-- Quote -->
                <span>"Quote in native language"</span>
                <span class="m-auto font-italic">"Quote if the native language is English (delete the other two)"</span>
                <span class="mt-auto ml-auto font-italic">"Quote in English"</span>
            </div>
            <br>
            <!-- Intro -->
            <p>Talk about intro here…</p>
            <!-- Contents -->
            <div class="d-inline-block bg-faded card rounded-0 p-2 small">
                <b>Contents</b> [<a href="#ocontents" data-toggle="collapse">toggle</a>] <ol style="list-style-position:inside;padding:0px" class="collapse show m-0" id="ocontents">
                    <li class="pt-1"><a href="#appearance">Appearance</a></li>
                    <li class="pt-1"><a href="#personality">Personality</a></li>
                    <li class="pt-1"><a href="#mirror">Mirror Worlds</a></li>
                    <li class="pt-1"><a href="#trivia">Trivia</a></li>
                </ol>
            </div>
            <!-- Appearance -->
            <h1 class="mb-0 mt-4" id="appearance">Appearance</h1>
            <div class="d-flex">
                <hr class="w-100 my-1">
            </div>
            <p>Talk about appearance here…</p>
            <!-- Personality -->
            <h1 class="mb-0 mt-4" id="personality">Personality</h1>
            <div class="d-flex">
                <hr class="w-100 my-1">
            </div>
            <p>Talk about personality here…</p>
            <!-- Mirror Worlds -->
            <h1 class="mb-0 mt-4" id="mirror">Mirror Worlds</h1>
            <div class="d-flex">
                <hr class="w-100 my-1">
            </div>
            <ul>
                <li>World of …<ul>
                        <li>Summary</li>
                    </ul>
                </li>
            </ul>
            <!-- Trivia -->
            <h1 class="mb-0 mt-4" id="trivia">Trivia</h1>
            <div class="d-flex">
                <hr class="w-100 my-1">
            </div>
            <ul>
                <li>Trivia item</li>
            </ul>
        </div>
    </div>
    <!-- STORY -->
    <div class="tab-pane fade" id="story">
        <!-- Contents -->
        <div class="d-inline-block bg-faded card rounded-0 p-2 small">
            <b>Contents</b> [<a href="#scontents" data-toggle="collapse">toggle</a>] <ol style="list-style-position:inside;padding:0px" class="collapse show m-0" id="scontents">
                <li class="pt-1"><a href="#backstory">Backstory</a></li>
                <li class="pt-1"><a href="#developments">Developments</a></li>
                <li class="pt-1"><a href="#relations">Relations</a>
                    <ol style="list-style-position:inside;list-style-type:lower-alpha;" class="pl-4">
                        <li><a href="#CHAR1">CHAR1</a></li>
                        <li><a href="#GROUP">GROUP</a>
                            <ol style="list-style-position:inside;list-style-type:lower-roman;" class="pl-4">
                                <li><a href="#CHAR2">CHAR2</a></li>
                            </ol>
                        </li>
                    </ol>
                </li>
            </ol>
        </div>
        <!-- Backstory -->
        <h1 class="mb-0 mt-4" id="backstory">Backstory</h1>
        <div class="d-flex">
            <hr class="w-100 my-1">
        </div>
        <p>Talk about backstory here…</p>
        <!-- Developments -->
        <h1 class="mb-0 mt-4" id="developments">Developments</h1>
        <div class="d-flex">
            <hr class="w-100 my-1">
        </div>
        <p>Talk about developments here…</p>
        <!-- Relations -->
        <h1 class="mb-0 mt-4" id="relations">Relations</h1>
        <div class="d-flex">
            <hr class="w-100 my-1">
        </div>
        <!-- CHAR1 -->
        <h3 class="mb-0" id="CHAR1"><a href="CHARURL">CHAR1</a></h3>
        <p>Talk about relationship here…</p>
        <!-- LCB Colleauges -->
        <h3 class="mb-0 mt-4" id="GROUP">GROUP</h3>
        <div class="pl-4 mt-2">
            <!-- CHAR3 -->
            <h6 class="mb-0" id="CHAR2"><a href="CHARURL">CHAR2</a></h6>
            <p>Talk about relationship here…</p>
        </div>
    </div>
</div>