------------------------
    
    
    F2U Royal (Accented Version)
    > code by jiko
    > last updated 19/03/2026
    
    
    -- RULES -----------------------------------
    
    > read my TOS before using!
      [ https://toyhou.se/~bulletins/127417.code-rules ]
    
    
    -- HOW TO USE CODE -------------------------
    
    > go to your display settings
      [ https://toyhou.se/~account/display ]
    
    > turn OFF WYSIWYG for Profile Text
    > turn ON Code Editor
    
    > go to character/user profile and paste code!
    
    
    -- CUSTOMISATION ---------------------------
    
    > edit the VARIABLES below and the rest of the
    code will automatically adjust itself!
    
    > to change anything outside the given list,
    you must manually edit the code
    
    
----------------------------------------------->
<div id="VARIABLES" style="



/* == PALETTE =============================== */;

--accent:          #aaaaaa;
--text-in-accent:  #ffffff;


/* == STYLISATION =========================== */;

--outer-radius:  0px;
--inner-radius:  0px;

--hr-style:   1px solid var(--accent);
--hr-opacity:  1;


/* == FONTS ================================= */;

--header-font:     'Times', serif;        /* == the BIG text == */
--subheader-font:  'Georgia', serif;      /* == the quote text == */
--body-font:       'Avenir', sans-serif;  /* == the regular text == */



">
<div class="mx-auto my-5" style="max-width:950px; font-family:var(--body-font); scrollbar-color:var(--accent) rgba(0,0,0,0);">
<!------------------------------------------------


    [1] BRIEF INTRO


------------------------------------------------->
<div class="row no-gutters">
    
    
    <!-- BASIC INFO
    --------------------------------------------->
    <div class="col-lg p-2 order-lg-1 order-2">
    <div class="card d-block bg-faded p-3 h-100" style="border-radius:var(--outer-radius); border-style:double solid; border-width:5px 1px">
        
        
        <!-- TITLE ------------------------------>
        <div class="text-lg-left text-center text-uppercase font-italic" style="font-family:var(--header-font); font-weight:900; color:var(--accent);
        font-size:40px; letter-spacing:1px;"><!-- adjust [font-size] and [letter-spacing] if needed -->
            
            Name Here
            
        </div>
        <hr class="mt-2 mb-3" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
        
        
        <!-- BASIC INFO ------------------------->
        <div class="row no-gutters m-n2">
            
            <div class="col-md-6 p-2">
                <div class="justify-content-between">
                    <span class="text-uppercase text-muted" style="letter-spacing:1px;">Full Name</span>
                    <span class="pl-2 text-right">
                        
                        content
                    
                    </span>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="col-md-6 p-2">
                <div class="justify-content-between">
                    <span class="text-uppercase text-muted" style="letter-spacing:1px;">Alias</span>
                    <span class="pl-2 text-right">
                        
                        content
                    
                    </span>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="col-md-6 p-2">
                <div class="justify-content-between">
                    <span class="text-uppercase text-muted" style="letter-spacing:1px;">Age</span>
                    <span class="pl-2 text-right">
                        
                        content
                    
                    </span>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="col-md-6 p-2">
                <div class="justify-content-between">
                    <span class="text-uppercase text-muted" style="letter-spacing:1px;">Gender</span>
                    <span class="pl-2 text-right">
                        
                        content
                    
                    </span>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="col-md-6 p-2">
                <div class="justify-content-between">
                    <span class="text-uppercase text-muted" style="letter-spacing:1px;">Pronouns</span>
                    <span class="pl-2 text-right">
                        
                        content
                    
                    </span>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="col-md-6 p-2">
                <div class="justify-content-between">
                    <span class="text-uppercase text-muted" style="letter-spacing:1px;">Orientation</span>
                    <span class="pl-2 text-right">
                        
                        content
                    
                    </span>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="col-md-6 p-2">
                <div class="justify-content-between">
                    <span class="text-uppercase text-muted" style="letter-spacing:1px;">Race</span>
                    <span class="pl-2 text-right">
                        
                        or species
                    
                    </span>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="col-md-6 p-2">
                <div class="justify-content-between">
                    <span class="text-uppercase text-muted" style="letter-spacing:1px;">Job</span>
                    <span class="pl-2 text-right">
                        
                        content
                    
                    </span>
                </div>
            </div>
            
            
        <!-- add more above this line! -->
        </div>
    </div>
    </div>
    
    
    <!-- FOCAL IMAGE
    --------------------------------------------->
    <div class="col-lg-5 p-2 order-lg-2 order-1">
    <div class="card bg-faded p-3 h-100" style="border-radius:var(--outer-radius); border-style:double solid; border-width:5px 1px">
        
        
        <!-- SHORT PHRASE ----------------------->
        <div class="mb-3">
            <hr class="mt-0 mb-2" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
            <p class="text-center text-uppercase font-italic" style="font-family:var(--subheader-font); font-weight:900; color:var(--accent);">
                
                Quote here!
                
            </p>
            <hr class="mb-0 mt-2" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
        </div>
        
        
        <!-- IMAGE ------------------------------>
        <div class="card h-100" style="border-radius:var(--outer-radius);">
            <div class="h-100" style="min-height:100px; background-color:var(--accent); border-radius:var(--inner-radius);
            
            
            background-image:url(IMG_URL_HERE);
            
            
            background-size:cover;
            background-position:center;
            background-repeat:no-repeat;">
            
            
            <!--
            > this makes the image taller on mobile (deletable)
            > adjust [height:250px] if needed!
            -->
            <div class="d-lg-none d-block" style="height:250px"></div>
            </div>
        </div>
    </div>
    </div>
</div>
<!------------------------------------------------


    [2] PERSONAL INFO


------------------------------------------------->
<div class="row no-gutters">
    
    
    <!-- DIVIDER
    --------------------------------------------->
    <div class="col-lg-auto p-2 order-1">
        <div class="card p-2 h-100" style="border-radius:var(--outer-radius); background-color:var(--accent); color:var(--text-in-accent);">
            
            <!-- replace [fa-star] to an icon of your choice! -->
            <i class="fa-regular fa-star mx-auto"></i>
            
        </div>
    </div>
    
    
    <!-- DESIGN NOTES
    --------------------------------------------->
    <div class="col-lg-4 p-2 order-lg-2 order-3">
    <div class="card d-lg-flex d-block bg-faded px-2 py-3 h-100 flex-column" style="border-radius:var(--outer-radius); border-style:double solid; border-width:5px 1px">
        
        
        <!-- SHORT PHRASE ----------------------->
        <div class="flex-grow-2 px-2 mb-3">
            <hr class="mt-0 mb-2" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
            <p class="text-center text-uppercase font-italic" style="font-family:var(--subheader-font); font-weight:900; color:var(--accent);">
                
                Quote here!
                
            </p>
            <hr class="mb-0 mt-2" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
        </div>
        
        
        <!-- LIST ------------------------------->
        <ul class="flex-grow-1 pl-4 pr-3 mb-0" style="list-style:square; flex:1 1 200px; min-height:200px; overflow:auto; scrollbar-width:thin;">
            
            
            <li class="pl-3 my-1">
                this will scroll on desktop, flat on mobile!
            </li>
            
            <li class="pl-3 my-1">
                content
            </li>
            
            <li class="pl-3 my-1">
                content
            </li>
            
            
        <!-- add more above this line! -->
        </ul>
        
        
        <!-- LINK ------------------------------->
        <div class="flex-grow-2 mt-3 mb-n2">
            <div style="border-radius:var(--inner-radius); background-color:var(--accent);">
            <a class="btn btn-outline-secondary w-100 border-0" style="border-radius:var(--inner-radius); color:var(--text-in-accent);"
                
                href="LINK_HERE">
                Reference Image
                
            </a>
            </div>
        </div>
    </div>
    </div>
    
    
    <!-- PROFILE
    --------------------------------------------->
    <div class="col-lg p-2 order-lg-3 order-2">
    <div class="card d-block bg-faded p-3 h-100" style="border-radius:var(--outer-radius); border-style:double solid; border-width:5px 1px">
        
        
        <!-- HEADER ----------------------------->
        <div class="text-lg-right text-center text-uppercase font-italic" style="font-family:var(--header-font); font-weight:900; color:var(--accent);
        font-size:40px; letter-spacing:1px;"><!-- adjust [font-size] and [letter-spacing] if needed -->
            
            Profile
            
        </div>
        <hr class="mt-2 mb-3" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
        
        
        <!-- SUMMARY ---------------------------->
        <div class="text-justify">
            
            
            <p>This section does not scroll.</p>
            
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
            
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
            
            
        </div>
        
        
    </div>
    </div>
</div>
<!------------------------------------------------


    [3] BATTLE INFO


------------------------------------------------->
<div class="row no-gutters">
    
    
    <!-- DIVIDER
    --------------------------------------------->
    <div class="col-lg-auto p-2 order-3">
        <div class="card p-2 h-100" style="border-radius:var(--outer-radius); background-color:var(--accent); color:var(--text-in-accent);">
            
            <!-- replace [fa-star] to an icon of your choice! -->
            <i class="fa-regular fa-star mx-auto"></i>
            
        </div>
    </div>
    
    
    <!-- STATS
    --------------------------------------------->
    <div class="col-lg-4 p-2 order-1">
    <div class="card d-block bg-faded p-3 h-100 flex-column" style="border-radius:var(--outer-radius); border-style:double solid; border-width:5px 1px">
        
        
        <!-- HEADER ----------------------------->
        <div class="text-lg-left text-center text-uppercase font-italic" style="font-family:var(--header-font); font-weight:900; color:var(--accent);
        font-size:40px; letter-spacing:1px;"><!-- adjust [font-size] and [letter-spacing] if needed -->
            
            Stats
            
        </div>
        <hr class="mb-0 mt-2" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
        
        
        <!-- THIS OR THAT STATS ----------------->
        <!--
        
        WINNING TRAIT === <span>
        LOSING TRAIT ==== <span>
        
        if it's 50/50, just leave it as <span>!
        
        -->
        <div class="my-3 text-uppercase" style="letter-spacing:1px;">
            
            
            <div class="mt-3">
                <div class="justify-content-between">
                    
                    <span>solitary</span>
                    <span>social</span>
                    
                </div>
                <div class="progress mt-2 rounded-0" style="height:5px;">
                    
                    <!-- change [ width:50% ] to any number between 0-100% -->
                    <div style="width:50%;
                    
                    
                    border-right:5px solid var(--accent);"
                    class="progress-bar bg-transparent"></div>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="mt-3">
                <div class="justify-content-between flex-row-reverse">
                    
                    <span>observant</span>
                    <span>dense</span>
                    
                </div>
                <div class="progress mt-2 rounded-0" style="height:5px;">
                    
                    <!-- change [ width:50% ] to any number between 0-100% -->
                    <div style="width:50%;
                    
                    
                    border-right:5px solid var(--accent);"
                    class="progress-bar bg-transparent"></div>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="mt-3">
                <div class="justify-content-between">
                    
                    <span>logical</span>
                    <span>emotional</span>
                    
                </div>
                <div class="progress mt-2 rounded-0" style="height:5px;">
                    
                    <!-- change [ width:50% ] to any number between 0-100% -->
                    <div style="width:50%;
                    
                    
                    border-right:5px solid var(--accent);"
                    class="progress-bar bg-transparent"></div>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="mt-3">
                <div class="justify-content-between">
                    
                    <span>organised</span>
                    <span>messy</span>
                    
                </div>
                <div class="progress mt-2 rounded-0" style="height:5px;">
                    
                    <!-- change [ width:50% ] to any number between 0-100% -->
                    <div style="width:50%;
                    
                    
                    border-right:5px solid var(--accent);"
                    class="progress-bar bg-transparent"></div>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="mt-3">
                <div class="justify-content-between">
                    
                    <span>assertive</span>
                    <span>passive</span>
                    
                </div>
                <div class="progress mt-2 rounded-0" style="height:5px;">
                    
                    <!-- change [ width:50% ] to any number between 0-100% -->
                    <div style="width:50%;
                    
                    
                    border-right:5px solid var(--accent);"
                    class="progress-bar bg-transparent"></div>
                </div>
            </div>
            
            
        </div>
    </div>
    </div>
    
    
    <!-- BATTLE SKILLS
    --------------------------------------------->
    <div class="col-lg p-2 order-2 flex-column d-lg-flex d-block">
    <div class="card bg-faded py-3 px-2 h-100" style="border-radius:var(--outer-radius); border-style:double solid; border-width:5px 1px">
        
        
        <!-- SHORT PHRASE ----------------------->
        <div class="flex-grow-2 px-2 mb-3">
            <hr class="mt-0 mb-2" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
            <p class="text-center text-uppercase font-italic" style="font-family:var(--subheader-font); font-weight:900; color:var(--accent);">
                
                Quote here!
                
            </p>
            <hr class="mb-0 mt-2" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
        </div>
        
        
        <!-- LIST ------------------------------->
        <div class="flex-grow-1 px-2 pb-3 mb-0" style="list-style:square; flex:1 1 250px; height:250px; overflow:auto; scrollbar-width:thin;">
            
            
            <div class="mt-0">
                <div class="text-uppercase mb-2 text-muted" style="letter-spacing:1px;">
                    
                    <!-- replace [fa-bookmark] to an icon of your choice! -->
                    <i class="fa-regular fa-bookmark mr-1"></i>
                    Skill Name
                    
                </div>
                <div class="card bg-transparent pl-3 rounded-0" style="border-width:0 0 0 5px">
                    
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
                    
                    <p>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                    
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="mt-4">
                <div class="text-uppercase mb-2 text-muted" style="letter-spacing:1px;">
                    
                    <!-- replace [fa-bookmark] to an icon of your choice! -->
                    <i class="fa-regular fa-bookmark mr-1"></i>
                    Skill Name
                    
                </div>
                <div class="card bg-transparent pl-3 rounded-0" style="border-width:0 0 0 5px">
                    
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                    
                </div>
            </div>
            
            
        <!-- add more above this line! -->
        </div>
    </div>
    </div>
</div>
<!------------------------------------------------


    [4] HISTORY


------------------------------------------------->
<div class="row no-gutters">
    
    
    <!-- FOCAL IMAGE
    --------------------------------------------->
    <div class="col-lg-5 p-2">
    <div class="card bg-faded p-3 h-100" style="border-radius:var(--outer-radius); border-style:double solid; border-width:5px 1px">
        
        
        <!-- SHORT PHRASE ----------------------->
        <div class="mb-3">
            <hr class="mt-0 mb-2" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
            <p class="text-center text-uppercase font-italic" style="font-family:var(--subheader-font); font-weight:900; color:var(--accent);">
                
                Quote!
                
            </p>
            <hr class="mb-0 mt-2" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
        </div>
        
        
        <!-- IMAGE ------------------------------>
        <div class="card h-100" style="border-radius:var(--outer-radius);">
            <div class="h-100" style="min-height:400px; background-color:var(--accent); border-radius:var(--inner-radius);
            
            
            background-image:url(IMG_URL_HERE);
            
            
            background-size:cover;
            background-position:left;
            background-repeat:no-repeat;">
            </div>
        </div>
    </div>
    </div>
    
    
    <!-- HISTORY
    --------------------------------------------->
    <div class="col-lg p-2 order-lg-2 order-3 flex-column d-lg-flex d-block">
    <div class="card d-lg-flex d-block bg-faded px-2 h-100 flex-column" style="border-radius:var(--outer-radius); border-style:double solid; border-width:5px 1px">
        
        
        <!-- HEADER ----------------------------->
        <div class="flex-grow-2 px-2 pt-3 mb-3">
            <p class="text-lg-right text-center text-uppercase font-italic" style="font-family:var(--header-font); font-weight:900; color:var(--accent);
        font-size:40px; letter-spacing:1px;"><!-- adjust [font-size] and [letter-spacing] if needed -->
                
                History
                
            </p>
            <hr class="mb-0 mt-2" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
        </div>
        
        
        <!-- LIST ------------------------------->
        <div class="flex-grow-1 px-2 pb-3 mb-0" style="list-style:square; flex:1 1 250px; min-height:250px; overflow:auto; scrollbar-width:thin;">
            
            
            <div class="mt-0">
                <div class="text-uppercase mb-2 text-muted" style="letter-spacing:1px;">
                    
                    <i class="fa-regular fa-bookmark mr-1"></i>
                    Subheader
                    
                </div>
                <div class="card bg-transparent pl-3 rounded-0" style="border-width:0 0 0 5px">
                    
                    <p>This section will scroll on desktop, flat on mobile!</p>
                    
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="mt-4">
                <div class="text-uppercase mb-2 text-muted" style="letter-spacing:1px;">
                    
                    <i class="fa-regular fa-bookmark mr-1"></i>
                    Subheader
                    
                </div>
                <div class="card bg-transparent pl-3 rounded-0" style="border-width:0 0 0 5px">
                    
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
                    
                    <p>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                    
                </div>
            </div>
            
            
        <!-- add more above this line! -->
        </div>
    </div>
    </div>
</div>
<!------------------------------------------------


    [5] TRIVIA


------------------------------------------------->
<div class="row no-gutters">
    
    
    <!-- DIVIDER
    --------------------------------------------->
    <div class="col-lg-auto p-2 order-1">
        <div class="card p-2 h-100" style="border-radius:var(--outer-radius); background-color:var(--accent); color:var(--text-in-accent);">
            
            <!-- replace [fa-star] to an icon of your choice! -->
            <i class="fa-regular fa-star mx-auto"></i>
            
        </div>
    </div>
    
    
    <!-- TRIVIA
    --------------------------------------------->
    <div class="col-lg p-2 order-2">
    <div class="card d-lg-flex d-block bg-faded px-2 py-3 h-100 flex-column" style="border-radius:var(--outer-radius); border-style:double solid; border-width:5px 1px">
        
        
        <!-- HEADER ----------------------------->
        <div class="flex-grow-2 px-2 mb-3">
            <div class="text-lg-left text-center text-uppercase font-italic" style="font-family:var(--header-font); font-weight:900; color:var(--accent);
            font-size:40px; letter-spacing:1px;"><!-- adjust [font-size] and [letter-spacing] if needed -->
                
                Trivia
                
            </div>
            <hr class="mt-2 mb-0" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
        </div>
        
        
        <!-- LIST ------------------------------->
        <ul class="flex-grow-1 pl-4 pr-3 mb-0" style="list-style:square; flex:1 1 200px; min-height:200px; overflow:auto; scrollbar-width:thin;">
            
            
            <li class="pl-3 my-1">
                this will scroll on desktop, flat on mobile!
            </li>
            
            <li class="pl-3 my-1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
            </li>
            
            <li class="pl-3 my-1">
                Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
            </li>
            
            
        <!-- add more above this line! -->
        </ul>
    </div>
    </div>
    
    
    <!-- TRIVIA PART 2
    --------------------------------------------->
    <div class="col-lg-4 p-2 order-3">
    <div class="card bg-faded p-3 h-100 flex-column" style="border-radius:var(--outer-radius); border-style:double solid; border-width:5px 1px">
        
        
        <!-- SHORT PHRASE ----------------------->
        <div class="mb-3">
            <hr class="mt-0 mb-2" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
            <p class="text-center text-uppercase font-italic" style="font-family:var(--subheader-font); font-weight:900; color:var(--accent);">
                
                Quote here!
                
            </p>
            <hr class="mb-0 mt-2" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
        </div>
        
        
        <!-- LIST ------------------------------->
        <div class="mt-0">
            
            <div class="my-2">
                <div class="justify-content-between">
                    <span class="text-uppercase text-muted" style="letter-spacing:1px;">Aesthetic</span>
                    <span class="pl-2 text-right">
                        
                        <!-- name 1-2 main aesthetics/motifs -->
                        content
                    
                    </span>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="my-2">
                <div class="justify-content-between">
                    <span class="text-uppercase text-muted" style="letter-spacing:1px;">Alignment</span>
                    <span class="pl-2 text-right">
                        
                        <!-- refer to the dnd alignment chart -->
                        content
                    
                    </span>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="my-2">
                <div class="justify-content-between">
                    <span class="text-uppercase text-muted" style="letter-spacing:1px;">MBTI</span>
                    <span class="pl-2 text-right">
                        
                        content
                        
                    </span>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="my-2">
                <div class="justify-content-between">
                    <span class="text-uppercase text-muted" style="letter-spacing:1px;">Sin</span>
                    <span class="pl-2 text-right">
                        
                        content
                        
                    </span>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="my-2">
                <div class="justify-content-between">
                    <span class="text-uppercase text-muted" style="letter-spacing:1px;">Virtue</span>
                    <span class="pl-2 text-right">
                        
                        content
                        
                    </span>
                </div>
            </div>
            <hr>
            
            <!----------------------------------->
            
            <div class="my-2">
                <div class="justify-content-between">
                    <span class="text-uppercase text-muted" style="letter-spacing:1px;">Obtained</span>
                    <span class="pl-2 text-right">
                        
                        <!-- via creation/trade/adopt/gift -->
                        content
                        
                    </span>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="my-2">
                <div class="justify-content-between">
                    <span class="text-uppercase text-muted" style="letter-spacing:1px;">Status</span>
                    <span class="pl-2 text-right">
                        
                        <!-- alive/dead/complicated -->
                        content
                        
                    </span>
                </div>
            </div>
            
            <!----------------------------------->
            
            <div class="my-2">
                <div class="justify-content-between">
                    <span class="text-uppercase text-muted" style="letter-spacing:1px;">Value</span>
                    <span class="pl-2 text-right">
                        
                        content
                        
                    </span>
                </div>
            </div>
            
            
        <!-- add more above this line! -->
        </div>
    </div>
    </div>
</div>
<!-----------------------------------------------


    [6] RELATIONSHIPS


------------------------------------------------->
<div class="m-2">
<div class="card bg-faded py-3 p-2" style="border-radius:var(--outer-radius); border-style:double solid; border-width:5px 1px;">
<div class="px-2" style="">
<!--

> if you want this to scroll, add [max-height:400px; overflow-y:auto; scrollbar-width:thin;] in the STYLE above!

> to "flip" the relationship, add [ flex-row-reverse ] next to the [ row no-gutters ]
you may need to change [ text-lg-left ] to [ text-lg-right ], or vice versa

-->
    
    
    <!-- RELATION 01
    --------------------------------------------->
    <div class="row no-gutters m-n2 pt-0">
        <div class="col-auto mx-auto p-2">
        <div class="card rounded-0" style="border-radius:var(--inner-radius);">
            
            
            <!-- ICON | squared images work best but any size okay -->
            <img src="IMG_URL_HERE"
            
            
            style="width:200px; height:200px; object-fit:cover; object-position:center;
            border-radius:var(--inner-radius);">
        </div>
        </div>
        <div class="col-lg p-2">
        <div class="text-lg-left text-center">
            <a class="text-uppercase font-italic" style="font-family:var(--header-font); font-weight:900; color:var(--accent);
            font-size:40px; letter-spacing:1px;"
            
                href="IMG_URL_HERE">
                Name
                
            </a>
            <hr class="mb-0 mt-2" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
        </div>
        <div class="mt-3">
            
            
            <!-- RELATION -->
            <div class="row no-gutters align-items-center">
                <div class="col">
                <p class="text-uppercase font-italic" style="font-family:var(--subheader-font); font-weight:900;">
                    
                    Relation
                    
                </p>
                </div>
                <!--
                
                FULL === <i class="fa-solid fa-heart"></i>
                EMPTY == <i class="fa-regular fa-heart text-muted"></i>
                
                -->
                <div class="col-auto">
                    
                    <i class="fa-solid fa-heart"></i>
                    <i class="fa-solid fa-heart"></i>
                    <i class="fa-solid fa-heart"></i>
                    <i class="fa-regular fa-heart text-muted"></i>
                    <i class="fa-regular fa-heart text-muted"></i>
                    
                </div>
            </div>
            
            
            <!-- SUMMARY -->
            <div class="mt-2">
                
                
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
                
                <p>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                
                
            </div>
        </div>
        </div>
    </div>
    
    
    <!-- RELATION 02
    --------------------------------------------->
    <div class="row no-gutters flex-row-reverse m-n2 pt-3">
        <div class="col-auto mx-auto p-2">
        <div class="card rounded-0" style="border-radius:var(--inner-radius);">
            
            
            <!-- ICON | squared images work best but any size okay -->
            <img src="IMG_URL_HERE"
            
            
            style="width:200px; height:200px; object-fit:cover;
            border-radius:var(--inner-radius);">
        </div>
        </div>
        <div class="col-lg p-2">
        <div class="text-lg-right text-center">
            <a class="text-uppercase font-italic" style="font-family:var(--header-font); font-weight:900; color:var(--accent);
            font-size:40px; letter-spacing:1px;"
            
                href="LINK_HERE">
                Name
                
            </a>
            <hr class="mb-0 mt-2" style="border-top:var(--hr-style); opacity:var(--hr-opacity);">
        </div>
        <div class="mt-3">
            
            
            <!-- RELATION -->
            <div class="row no-gutters align-items-center">
                <div class="col">
                <p class="text-uppercase font-italic" style="font-family:var(--subheader-font); font-weight:900;">
                    
                    Relation
                    
                </p>
                </div>
                <!--
                
                FULL === <i class="fa-solid fa-heart"></i>
                EMPTY == <i class="fa-regular fa-heart text-muted"></i>
                
                -->
                <div class="col-auto">
                    
                    <i class="fa-solid fa-heart"></i>
                    <i class="fa-solid fa-heart"></i>
                    <i class="fa-solid fa-heart"></i>
                    <i class="fa-regular fa-heart text-muted"></i>
                    <i class="fa-regular fa-heart text-muted"></i>
                    
                </div>
            </div>
            
            
            <!-- SUMMARY -->
            <div class="mt-2">
                
                
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                
                
            </div>
        </div>
        </div>
    </div>
    
    
<!-- add more above this line! -->
</div>
</div>
</div>
<!-----------------------------------------------


    [7] CODE CREDITS


------------------------------------------------->
<div class="text-right mr-2">
    <a href="https://toyhou.se/10484081." class="text-monospace text-reset small faded">
        CODE BY JIKO
    </a>