• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource Ami's Lab 2.0 | Mobile Friendly Freebies

Ambiloquous said:
Toggle Tabs
Non-toggling tabs code. Ignore the name.

I have arisen from the BBCode grave. I'm not entirely satisfied with this inconsistent looking layout, but I finished it, so I thought I'd put it out anyway. In the process, I have reminded myself again how difficult it is to put in understandable comments. (Not that my comments are understandable. :v)

Tabs
Hidden Scroll


Click Tabs
  • LOREM IPSUM
    ALIAS
    Blue Moon
    ROLE
    Point
    TIER
    II–III

    GROUP
    Amores III
    BRANCH
    Little Latonia
    BATCH
    Noche
    MENTOR
    Daybreak

    NOTABLE SKILLS
    Aqua Scrying, Birdspeak
    NOTES
    Check Report on Operation Rose Train for details on patterns and expertise
    ARTIST
    PicardLouis
    DESCRIPTION

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc.

    EXPANDED

    Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.

    Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.
Scroll


Code: 
[comment]-- Fonts --> [font=Macondo][font=Heebo]:>[/font][/font][/comment][border=0; 

/* Probably best if you don't change anything I haven't commented next to */

margin: auto; 
max-width: 950px;
padding: 0;

--h: clamp(380px, 90vh, 900px);

/* Colours */
--base: #4A6491; /* #3f98c9 */
--outline: #D0E4F2;
--accent: #30395C; /* #12619D */
--accent-2: #85A5CC; /* #89C2E1 */

/* Images -- image URL in url(''), percentages are x-value y-value image positioning */
/* Tab 1 Image */
--img-1: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c9aa5b64-52aa-4d3f-85c2-366bd57804bc/ddatbzg-bb7eb3a5-ff48-4edf-bbd8-6860c9df322b.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2M5YWE1YjY0LTUyYWEtNGQzZi04NWMyLTM2NmJkNTc4MDRiY1wvZGRhdGJ6Zy1iYjdlYjNhNS1mZjQ4LTRlZGYtYmJkOC02ODYwYzlkZjMyMmIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bWn_j0HI_JgX_II9d0OUx9pGYF8QDP6yVPesmNSsyjk') 50% 100% / cover;
/* Tab 3 Images */
--img-2: url('https://pbs.twimg.com/media/ErkL6MHW8AIheQn?format=jpg&name=large') 50% 25% / cover;
--img-3: url('https://pbs.twimg.com/media/ErkL6NNXAAExA29?format=jpg&name=large') 50% 70% / cover;
--img-4: url('https://images.squarespace-cdn.com/content/v1/5f15cec690ad1413ae255f7e/1601332574045-P8HM3NEM3W08PP9TTG5A/image-asset.png?format=1500w') 50% 30% / cover;

/* Border Properties */
--b-r: 8px; /* Border radius -- a greater number makes it rounder and vice versa */
--b-w: 8px; /* Border width */
--bg-w: (var(--icon-s) + (2 * var(--b-w)));

--tabs-h: 250px;
--tab-f-s: 25px;

/* Icon Properties */
--icon-s: 90px; /* Background box size -- changing it might mess up code */
--icon-f-s: 55px; /* Icon size */

--bar-w: 72px;

/* Title Properties */
--title-f-s: 2em; /* Font size -- change by .1 increments, increasing size might mess it up on smaller screens */
--title-f: 'Macondo', sans-serif; /* Font family -- change font tag above if you change this */
--title-p: max(10px, 5%);

/* Gradient Opacity */
--grad-o: 50%; 

/* Content Properties */
--con-p: clamp(10px, 2%, 20px); /* Padding */
--con-c: azure; /* Text colour */
--con-f-s: 1.05em; /* Font size -- change by .1 increments */
--con-f: 'Heebo', sans-serif; /* Font family -- change font tag above if you change this */

/* Divider Height */
--div-h: 2px;

/* Header Properties */
--head-f-s: 1.3em; /* Font size -- change by .1 increments */
--head-p: 6px;
][comment]-- Tab Note --[/comment][border=0;
padding: 0;
color: var(--outline);
font-family: var(--con-f);
line-height: 1.8;]Click Tabs [fa]fa-solid fa-arrow-down[/fa][/border][comment]-- Main --[/comment][border=0;
position: relative; 
display: flex; 
flex-flow: row nowrap; 
align-items: center; 
box-sizing: border-box; 
width: 100%;
height: var(--h); 
padding: calc(var(--bg-w)) 0 0 0;][comment]-- Icon Border --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][comment]
-- Icon Box --[/comment][border=0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: var(--icon-s);
height: var(--icon-s);
border-radius: var(--b-r);
background: var(--base);
padding: 0;][/border][comment]
-- Icon Box End --[/comment][/border][comment]
-- Icon Border End --[/comment][comment]

-- Title Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0;
overflow: hidden;][comment]-- Title Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent) -80%, rgba(0, 0, 0, 0), var(--accent));
padding: 0;][/border][/border][comment]
-- Header Box End --[/comment][comment]

-- Tab Bar Background --[/comment][border=0;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: var(--accent-2);
pointer-events: none;][/border][comment]
-- Tab Bar Background End --[/comment][comment]

-- Actual Tabs --[/comment][border=0;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
margin-left: 20px;
box-sizing: border-box;
width: 66px;
height: var(--tabs-h);
padding: 0;
line-height: 60px;
overflow: hidden;][tabs]

[tab=0][comment]

------------ Tab 1 Body ------------

[/comment][border=0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]

-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]

-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]LOREM IPSUM[/border][comment]
-- Title End --[/comment][comment]

-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent) -20%, rgba(0, 0, 0, 0) 40%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]

-- Tab Border --[/comment][border=0;
position: absolute;
top: calc(0px - 14px);
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]

-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-user fa-fade[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]

-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]-- Image + Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: stretch;
padding: calc(var(--con-p) / 2);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
margin: calc(var(--con-p) / 2);
flex: 1 1 200px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
min-height: 280px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-1);
padding: 0;][/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: calc(var(--con-p) / 1.75);
flex: 2 1 300px;
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Blue Moon [fa]fa-solid fa-moon[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Point
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]TIER[/border] II–III
[comment]-- Divider --[/comment][border=0; padding: 0; 
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]GROUP[/border] Amores III
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]BRANCH[/border] Little Latonia
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]BATCH[/border] Noche
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]MENTOR[/border] Daybreak
[comment]-- Divider --[/comment][border=0; padding: 0; 
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]NOTABLE SKILLS[/border] Aqua Scrying, Birdspeak
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]NOTES[/border] Check [i]Report on Operation Rose Train[/i] for details on patterns and expertise
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] PicardLouis[/border][/border][comment]
-- Image + Text End --[/comment][comment]
-- More Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--con-p);][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]DESCRIPTION[/border]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc. 

[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]EXPANDED[/border]
Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.

Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.[/border][comment]-- More Text End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]

[tab=0][comment]

------------ Tab 2 Body ------------

[/comment][border=0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]

-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]

-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]IPSUM LOREM[/border][comment]
-- Title End --[/comment][comment]

-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent) -10%, rgba(0, 0, 0, 0) 50%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]

-- Tab Border --[/comment][border=0;
position: absolute;
top: 50px;
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]

-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-clock fa-fade[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]

-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--con-p);][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]HISTORY[/border]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc. 

Nullam non nisi est sit amet. Massa eget egestas purus viverra accumsan. Neque viverra justo nec ultrices dui. Tellus mauris a diam maecenas sed enim ut. Sed adipiscing diam donec adipiscing. Adipiscing tristique risus nec feugiat in fermentum. Lectus nulla at volutpat diam ut venenatis tellus in. Consequat mauris nunc congue nisi vitae. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Enim ut sem viverra aliquet eget sit amet tellus. 

[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]EXPANDED[/border]
Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.

Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.[/border][comment]-- Text End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]

[tab=0][comment]

------------ Tab 3 Body ------------

[/comment][border=0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]

-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]

-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]DOLOR SIT[/border][comment]
-- Title End --[/comment][comment]

-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent), rgba(0, 0, 0, 0) 60%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]

-- Tab Border --[/comment][border=0;
position: absolute;
top: 115px;
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]

-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-users fa-fade[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]

-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]

-- Image + Header + Text 1 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-2);
padding: 0;][/border][/border][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent), rgba(0, 0, 0, 0), var(--accent) 180%);
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO GUARDS THE NIGHT[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) 0 0 var(--con-p);
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Nightingale [fa]fa-solid fa-crow[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Shield
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border] 
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][/border][comment]
-- Image + Header + Text 1 End --[/comment][comment]

-- Header + Text + Image 2 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap-reverse;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-left-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent) -80%, rgba(0, 0, 0, 0), var(--accent));
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO PONDERS THE DUSK[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) var(--con-p) 0 0;
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Sundown [fa]fa-solid fa-sun-haze[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Core
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border] 
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][comment]-- Header + Text End --[/comment][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-3);
padding: 0;][/border][/border][/border][comment]
-- Header + Text + Image 2 End --[/comment][comment]

-- Image + Header + Text 3 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-4);
padding: 0;][/border][/border][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent), rgba(0, 0, 0, 0), var(--accent) 180%);
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO WALKS AMONG CLOUDS[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) 0 0 var(--con-p);
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Nimbus [fa]fa-solid fa-cloud[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Step
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border] 
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][/border][comment]
-- Image + Header + Text 3 End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]

[tab=0][comment]

------------ Tab 4 Body ------------

[/comment][border=0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]

-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]

-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]SIT DOLOR[/border][comment]
-- Title End --[/comment][comment]

-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent) 10%, rgba(0, 0, 0, 0) 70%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]

-- Tab Border --[/comment][border=0;
position: absolute;
top: 180px;
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]

-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-list fa-fade[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]

-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--con-p);][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]QUOTES[/border]
"There is a moon sole in the blue night."
"Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac."
"In tellus integer feugiat scelerisque varius morbi enim nunc faucibus."
[comment]-- Divider --[/comment][border=0; padding: 0; 
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]MUSIC[/border] [MEDIA=youtube]4kVO6PQyVhY[/MEDIA]
[comment]-- Divider --[/comment][border=0; padding: 0; 
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]MISC[/border] Lorem ipsum dolor sit amet elit, sed do eiusmod aliqua.[/border][comment]-- Text End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]

[/tabs][/border][comment]
-- Actual Tabs End --[/comment][/border][comment]
-- Main End --[/comment][comment]-- Scroll Note --[/comment][border=0;
padding: 0;
color: var(--base);
font-family: var(--con-f);
text-align: right;
line-height: 1.8;]Scroll [fa]fa-solid fa-arrow-down[/fa][/border][/border]
Click to expand...

Used this, tagged you in it cause there was nowhere to reference you in the code and I was terrified of breaking it 😌 if you wanna see what I did with it, click "Kalmia" in my sig <3 now to steal another of your codes <3 <3 <3
 
Ambiloquous said:
Folder Tabs
If you have noticed that this code looks like the one above, you are not wrong. When I first came up with the idea of the folder design, it was supposed to be an accordion-tab combination, but suffice to say it didn't work out. Now they're separate templates with very different vibes. This also scrolls if your text overflows.

I'm not too satisfied with this one (it barely even resembles a folder), but my first tab creation was too exact to another's measurements, and I felt like I had to show off at least one tab code, so this one took the fall.

Tabs
Visible Scroll


Click Tabs

  • SURNAME:
    Doe

    GIVEN NAME:
    Jane

    GENDER:
    Female

    AGE:
    22

    BIRTHDATE:
    03/02/1999

    BIRTHPLACE:
    Unknown


    NOTE:
    Do not approach without bubble tea
Art by bobatae


Code: 
[comment][font=Concert One][font=Tauri]:D[/font][/font][/comment][border=transparent;
margin: auto;
max-width: 750px;
padding: 0px;][border=transparent;
position: relative;
padding: 0px 0px 8px 0px;
width: calc(4 * 60px + 5px);
font-family: 'Concert One', sans-serif;
text-align: center;
line-height: 80%;]Click Tabs
[fa]fas fa-sort-down[/fa][/border][/border][border=transparent;

/* Probably best if you don't change anything I haven't commented next to */

position: relative;
left: calc(0px - var(--left));
margin: auto;
margin-top: calc(0px - var(--tab-t));
margin-bottom: min(var(--folder-h-max), var(--folder-h));
max-width: 750px;
padding: 0px;
font-size: 1.05em; /* Label font size, increase or decrease by .01 increments */

--left: 10px;

--tab-t: -3px;
--tab-w: 60px;
--tab-h: 30px;
--tab-br: 10px; /* Border radius, increase for rounder corners, decrease for less */


--folder-t: calc(var(--tab-t) + var(--tab-h));
--folder-h: 400px;
--folder-h-max: 80vh;
--folder-p: 30px;
--folder-f-c: #362f1a; /* Text colour */

--symbol-t: 1px;
--symbol-l: calc(var(--tab-w) / 2);
--symbol-s: 22px;
--symbol-c: white; /* Tab symbol colour */

--label-w: 90px; /* Label width, change if the label gets too long and goes to the next line (or not) */
--label-f: 'Concert One', sans-serif; /* Label font, change font tag above code if you change this */

--field-m: 5px 0px 0px 8px;
--field-p: 6px 8px 4px 8px;
--field-br: 0px 10px 0px 0px;
--field-b: 0px solid rgba(40, 20, 0, 0.5);
--field-f: 'Tauri', sans-serif; /* Field font, change font tag above code if you change this */
--field-f-s: 0.8em; /* Field font size, increase or decrease by .1 increments, dependent on label font size */
--field-c: rgba(255, 255, 255, 0.2); /* Field background colour */

--image-m: 20px;
--image-w: 190px;
--image-h: 230px;
--image-b-1: 8px solid white;
--image-b-2: 22px solid white;
--image-s: 5px 5px rgba(0, 0, 0, 0.15);

/* Folder background gradients */
--c-1: linear-gradient(152deg, rgb(190, 217, 91) 50%, rgb(170, 197, 71) 50%);
--c-2: linear-gradient(152deg, rgb(242, 86, 127) 50%, rgb(222, 66, 107) 50%);
--c-3: linear-gradient(152deg, rgb(83, 181, 168) 50%, rgb(63, 161, 148) 50%);
--c-4: linear-gradient(152deg, rgb(242, 208, 109) 50%, rgb(222, 188, 89) 50%);

/* Image URLs, change percentage after slash if image is sized too big or small in frame (or just default to cover) */
--img-1: url('https://i.pinimg.com/564x/cd/59/13/cd591354799b13123880267dd01a34fc.jpg') 50% 0% / cover;
--img-2: url('https://i.pinimg.com/564x/20/61/12/206112aea38842875ac18cd20257c501.jpg') 50% 0% / 150%;
--img-3: url('https://i.pinimg.com/564x/18/1f/e5/181fe5c4987998c0b5ec6e3671ddf63b.jpg') 50% 0% / 130%;
--img-4: url('https://i.pinimg.com/564x/d7/54/9b/d7549b8db90da9f594fbbd588a807519.jpg') 50% 0% / cover;][comment]-- Tab 1 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: var(--left);
box-sizing: border-box;
width: calc(var(--tab-w) + (var(--left) / 2));
height: var(--tab-h);
padding: 0px;
border-radius: var(--tab-br) var(--tab-br) 0px 0px;
background: var(--c-1);
pointer-events: none;][/border][comment]-- Tab 2 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-w) + (var(--left) / 2) + var(--left));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: 0px;
border-radius: var(--tab-br) var(--tab-br) 0px 0px;
background: var(--c-2);
pointer-events: none;][/border][comment]-- Tab 3 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc((2 * var(--tab-w)) + (var(--left) / 2) + var(--left));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: 0px;
border-radius: var(--tab-br) var(--tab-br) 0px 0px;
background: var(--c-3);
pointer-events: none;][/border][comment]-- Tab 4 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc((3 * var(--tab-w)) + (var(--left) / 2) + var(--left));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: 0px;
border-radius: var(--tab-br) var(--tab-br) 0px 0px;
background: var(--c-4);
pointer-events: none;][/border][comment]-- Actual Tabs --[/comment][tabs]

[tab=.][comment]-- Tab Symbols 1 --[/comment][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(var(--symbol-l) + 2px);
padding: 0px;
color: var(--symbol-c);
font-size: var(--symbol-s);
line-height: 100%;
pointer-events: none;][fa]fas fa-info-circle[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(3 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 3px);
line-height: 100%;
pointer-events: none;][fa]fas fa-lock[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(5 * var(--symbol-l) + 6px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-address-book[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(7 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-file-alt[/fa][/border][comment]-- Tab Body 1 --[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: var(--folder-p);
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-1);
overflow: auto;][comment]-- Image 1 --[/comment][border=transparent;
margin: var(--image-m);
width: var(--image-w);
height: var(--image-h);
padding: 0px;
border: var(--image-b-1);
border-top: var(--image-b-2);
border-bottom: var(--image-b-2);
background: var(--img-1);
box-shadow: var(--image-s);
float: right;
transform: rotate(10deg);][/border][comment]-- Text --[/comment]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]SURNAME:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Doe[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]GIVEN NAME:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Jane[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]GENDER:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Female[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]AGE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]22[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]BIRTHDATE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]03/02/1999[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]BIRTHPLACE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Unknown[/border]

[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]NOTE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Do not approach without bubble tea[/border][/border][/tab]


[tab=.][comment]-- Tab Symbols 2 --[/comment][border=transparent;
position: absolute;
top: calc(var(--symbol-t) + 4px);
left: calc(var(--symbol-l) + 10px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 8px);
line-height: 100%;
pointer-events: none;][fa]fas fa-info[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(3 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 3px);
line-height: 100%;
pointer-events: none;][fa]fas fa-unlock-alt[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(5 * var(--symbol-l) + 6px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-address-book[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(7 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-file-alt[/fa][/border][comment]-- Tab Body 2 --[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: var(--folder-p);
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-2);
overflow: auto;][comment]-- Image 2 --[/comment][border=transparent;
margin: var(--image-m);
width: var(--image-w);
height: var(--image-h);
padding: 0px;
border: var(--image-b-1);
border-top: var(--image-b-2);
border-bottom: var(--image-b-2);
background: var(--img-2);
box-shadow: var(--image-s);
float: right;
transform: rotate(-10deg);][/border][comment]-- Text --[/comment]PERSONALITY:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Blah blah lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit et augue placerat suscipit. Aenean gravida lacus dui, euismod eleifend tellus maximus sed. Nulla ultricies tincidunt auctor. Mauris fringilla at dui sit amet dapibus. Duis consectetur eros eu nibh accumsan sagittis. Quisque sed mauris non purus eleifend pulvinar vitae ut arcu. Curabitur vitae porttitor mauris. Aliquam erat volutpat. Phasellus in leo augue. Fusce sed vehicula massa. Fusce erat neque, auctor laoreet efficitur sed, sodales a tellus.[/border]
BIOGRAPHY:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Blah blah average life dolor sit amet, consectetur adipiscing elit. Aliquam vel velit et augue placerat suscipit. Aenean gravida lacus dui, euismod eleifend tellus maximus sed. Nulla ultricies tincidunt auctor. Mauris fringilla at dui sit amet dapibus. Duis consectetur eros eu nibh accumsan sagittis. Quisque sed mauris non purus eleifend pulvinar vitae ut arcu. Curabitur vitae porttitor mauris. Aliquam erat volutpat. Phasellus in leo augue. Fusce sed vehicula massa. Fusce erat neque, auctor laoreet efficitur sed, sodales a tellus. Nunc lectus diam, dignissim sit amet pellentesque placerat, gravida vitae risus. Aliquam gravida commodo ex vitae lacinia. Donec et quam lectus. Sed ut convallis mauris, aliquet tristique tellus.[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]NOTE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]There is no concrete evidence of her accepted past[/border][/border][/tab]


[tab=.][comment]-- Tab Symbols 3 --[/comment][border=transparent;
position: absolute;
top: calc(var(--symbol-t) + 4px);
left: calc(var(--symbol-l) + 10px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 8px);
line-height: 100%;
pointer-events: none;][fa]fas fa-info[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(3 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 3px);
line-height: 100%;
pointer-events: none;][fa]fas fa-lock[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(5 * var(--symbol-l) + 6px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]fas fa-address-book[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(7 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-file-alt[/fa][/border][comment]-- Tab Body 3 --[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: var(--folder-p);
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-3);
overflow: auto;][comment]-- Image 3 --[/comment][border=transparent;
margin: var(--image-m);
width: var(--image-w);
height: var(--image-h);
padding: 0px;
border: var(--image-b-1);
border-top: var(--image-b-2);
border-bottom: var(--image-b-2);
background: var(--img-3);
box-shadow: var(--image-s);
float: right;
transform: rotate(10deg);][/border][comment]-- Text --[/comment]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]PARENTS:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]John Doe, Jessica Doe[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]SIBLINGS:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Joe Doe[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]PARTNER:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]N/A[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]FRIENDS:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Lulu Ly, Carell Kirishima[/border]

[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]NOTE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Her friends are strangely tight-lipped about her[/border][/border][/tab]


[tab=.][comment]-- Tab Symbols 4 --[/comment][border=transparent;
position: absolute;
top: calc(var(--symbol-t) + 4px);
left: calc(var(--symbol-l) + 10px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 8px);
line-height: 100%;
pointer-events: none;][fa]fas fa-info[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(3 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 3px);
line-height: 100%;
pointer-events: none;][fa]fas fa-lock[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(5 * var(--symbol-l) + 6px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-address-book[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(7 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]fas fa-file-alt[/fa][/border][comment]-- Tab Body 4 --[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: var(--folder-p);
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-4);
overflow: auto;][comment]-- Image 4 --[/comment][border=transparent;
margin: var(--image-m);
width: var(--image-w);
height: var(--image-h);
padding: 0px;
border: var(--image-b-1);
border-top: var(--image-b-2);
border-bottom: var(--image-b-2);
background: var(--img-4);
box-shadow: var(--image-s);
float: right;
transform: rotate(-10deg);][/border][comment]-- Text --[/comment]LIKES:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]This, that, do be polite[/border]
DISLIKES:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]This, that, don't be dumb[/border]
HOBBIES:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Blah blah, tennis, roller skating[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]NOTE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);] Money seems to be her greatest motivator[/border][/border][/tab]


[/tabs][/border][border=transparent;
position: relative;
top: -35px;
margin: auto;
max-width: 750px;
padding: 0px;
font-family: 'Concert One', sans-serif;
font-size: 0.9em;
text-align: right;]Art by bobatae[/border]
Click to expand...
Btw Ami, is there a way to make the scroll hidden in this code?
 
Anaxileah said:
Used this, tagged you in it cause there was nowhere to reference you in the code and I was terrified of breaking it 😌 if you wanna see what I did with it, click "Kalmia" in my sig <3 now to steal another of your codes <3 <3 <3
Click to expand...

HRFGHDFJJ I love the shades of green, and your writing is always nomnomcronch. Thank u for the offering, it was delicious. ❤️ 💕
 
Anaxileah said:
Btw Ami, is there a way to make the scroll hidden in this code?
Click to expand...
Oh yeah def! I forgot why I didn’t hide the scroll for that, and I would fix it for you right now except I’m out. 😔 If you can wait or if you think you can figure it out yourself, go for it!
 
Ambiloquous said:
Oh yeah def! I forgot why I didn’t hide the scroll for that, and I would fix it for you right now except I’m out. 😔 If you can wait or if you think you can figure it out yourself, go for it!
Click to expand...
No worries! I am too dumb brain to figure it out, but when you do, I would love to steal it 😈
 
Ambiloquous said:
I put it in the og post just in case someone else would prefer the same. Tell me if it works for you bc I didn't check it on all my devices.
Click to expand...
Could you help me find where to input the scroll on mine? I had to make edits for the CS and I have no idea how to even approach your magic 😅 if not, I can try to figure it out, no worries <3
 
Ambiloquous said:
I put it in the og post just in case someone else would prefer the same. Tell me if it works for you bc I didn't check it on all my devices.
Click to expand...
I used the original for Avalon in my signature, I'm gonna see if I can figure out what you made different, if you wanna check her out.
 
Anaxileah said:
Could you help me find where to input the scroll on mine? I had to make edits for the CS and I have no idea how to even approach your magic 😅 if not, I can try to figure it out, no worries <3
Click to expand...

I added another border element inside the tab body elements that basically just hides the scroll, and while the example below only shows the first tab body, you have to change it for every tab body. The orange highlighted lines are the properties that I changed, and the red lines are the properties/tags I added.

[comment]-- Tab Body 1 --[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: 0px;
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-1);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: var(--folder-p) calc(30px + var(--folder-p)) var(--folder-p) var(--folder-p);
overflow: auto;][comment]-- Image 1 --[/comment]

... Content Here ...

[/border][/border][/border]
 
Ambiloquous said:
I added another border element inside the tab body elements that basically just hides the scroll, and while the example below only shows the first tab body, you have to change it for every tab body. The orange highlighted lines are the properties that I changed, and the red lines are the properties/tags I added.

[comment]-- Tab Body 1 --[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: 0px;
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-1);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: var(--folder-p) calc(30px + var(--folder-p)) var(--folder-p) var(--folder-p);
overflow: auto;][comment]-- Image 1 --[/comment]

... Content Here ...

[/border][/border][/border]
Click to expand...
🙏 you are a priceless BBCode deity <3 ilysm

I had started to figure it out and was copy pasting the first tab's info, then I got confused when they were different colors, then started freaking out when I tried pasting them all individually 😂 you saved me
 
Ambiloquous said:
My Terminal
One day, I looked at my terminal and thought "hey, I could code this".

It turns out I couldn't. The fonts don't exist in the Google library, web colours are somehow not as vibrant as system defaults and a bunch of other little things that made it just a little bit off. But the closest I could get isn't too shabby either.

Textbox
No Scroll








user — -zsh
Last login: Fri Aug 6 10:55:00 on ttys000
user@User-Mac ~ %
Click to expand...

Used this in my thread, thanks!
 
Ambiloquous said:
Sushimunch
It's a sushi code. And there's tabs. That's it, that's all.

If you want this to be mobile friendly, it's probably best to keep your message short. I didn't add scroll to this one because I only remembered it existed after I'd coded everything else, and then it made Pusheen and the chopsticks wonk, and lazy as I was, I gave up and called it a day. Besides, I made this for fun, not for actual use smh. Utility? What's that? Don't know her.

Edit: Plz forgive me, I was sleep deprived when I posted this. I've added auto scrolling, so make your message as long as you like.

😌 If you think it reminds you of a certain username floating above this, you may be right. @Sushi Muncher

Tabs
Hidden Scroll


Click Sushi!


  • Name: Sushimunch
    Favourite Food: Sushi
    Hobby: Munching sushi

    Message: Munching sushi is an art form of the highest degree. You are still green, young one.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis dui dui. Ut ipsum mi, gravida eget velit a, commodo bibendum libero. Ut placerat ante sed elit fermentum, id egestas neque laoreet. Praesent gravida vestibulum lorem, laoreet accumsan ante mollis vestibulum. Nam eu congue ipsum, vitae rutrum est. Fusce auctor enim nec justo sollicitudin ornare. Fusce ultrices tincidunt elit.

    Praesent gravida vestibulum lorem, laoreet accumsan ante mollis vestibulum. Nam eu congue ipsum, vitae rutrum est. Fusce auctor enim nec justo sollicitudin ornare. Fusce ultrices tincidunt elit. Praesent convallis dui dui. Ut ipsum mi, gravida eget velit a, commodo bibendum libero. Ut placerat ante sed elit fermentum, id egestas neque laoreet.




Code: 
[comment]-- Font -->[/comment][font=Didact Gothic][border=transparent;
position: relative;
margin: auto;
max-width: 775px;
padding: 0px;][border=transparent;
visibility: hidden;
display: inline-block;
padding: 0px;]A[/border]Click Sushi![/border][border=transparent;

/* Break code, break code! */

position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
margin: auto;
margin-top: calc(0px - var(--chop-t));
margin-bottom: 2vh;
box-sizing: border-box;
max-width: 775px;
height: var(--h);
padding: 0px;
border-radius: var(--br);
border: var(--b);
background: var(--board);
box-shadow: 5px 5px rgba(255, 250, 250, 0.7);

--color: #673d2f; /* Border and text colour */

--h: max(370px, 55vh);
--br: 10px;
--b: 2px solid var(--color);
--board: linear-gradient(rgba(255, 255, 250, 0.2), rgba(255, 255, 250, 0.2)), radial-gradient(circle at top right, rgba(0, 0, 0, 0) calc(100% - 115px), rgba(205,144, 76, 0.2) calc(100% - 115px)), url('https://static.vecteezy.com/system/resources/previews/000/360/749/non_2x/wood-texture-vector.jpg') 50% 50% / cover;

--tabs-w: 100px;

--sushi-t: calc((var(--h) / 2) - 125px);
--sushi-d: 49px;
--sushi-l: 28px;
--sushi-s: 54px;
--sushi-bg: url('https://images.vexels.com/media/users/3/230800/isolated/preview/6fae7b492e567aae76ab5220a894087c-cute-sushi-cartoon.png') 50% 50% / 110%, linear-gradient(to bottom, rgb(255, 255, 255, 0) 22%, #af9187 22% 70%, rgb(255, 255, 255, 0) 70%);
--sushi-f: blur(1px);

--dish-t: calc((var(--h) / 2) + 83px);
--dish-l: 17px;
--dish-s: 70px;
--dish-bg: radial-gradient(circle at top right, rgb(238, 83, 79) 65%, rgb(228, 73, 69) 65%);  /* Dish gradient */
--dish-sh: -3px 3px rgba(0, 0, 0, 0.1);

--dish-d-s: 48%;
--dish-c-bg: radial-gradient(circle at top right, rgb(202, 65, 62) 70%, rgb(182, 45, 42) 70%); /* Dish circle gradient */

--chop-t: -1vh;
--chop-l: calc(100% - var(--chop-s) + var(--body-e) + 6.2vh);
--chop-s: 32vh;
--chop-bg: url('http://icons.iconarchive.com/icons/google/noto-emoji-food-drink/1024/32444-chopsticks-icon.png') 50% 50% / 100%;
--chop-c: polygon(0 0, 100% 0, 100% 26%, 26% 100%, 0 100%);
--chop-tr: scaleX(-1) rotate(-35deg);

--sticker-t: calc(max(370px, 55vh) - (var(--sticker-s) / 1.15));
--sticker-l: calc(100% - var(--sticker-s));
--sticker-s: 20vh;

/* Pusheen image URLs */
--sticker-1: url('https://cdn130.picsart.com/256429381027212.png?r1024x1024') no-repeat 50% 50% / 100%;
--sticker-2: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2Foriginals%2F5d%2F34%2Fff%2F5d34ff495c8b919ce281461ddda10c1b.png&f=1&nofb=1') no-repeat 50% 50% / 80%;
--sticker-3: url('https://cdn.custom-cursor.com/packs/2582/pusheen-and-fish-cursor-pack.png') no-repeat 95% 50% / cover;
--sticker-4: url('https://cdn131.picsart.com/287157513004211.png') no-repeat 50% 50% / 75%;

--body-t: calc((var(--h) - var(--body-h)) / 2);
--body-h: calc(var(--h) - var(--body-e));
--body-e: 5vh;
--body-p: 20px;
--body-f-c: var(--color);
--body-f-s: 1em; /* Font size, increase or decrease by .1 increments */
--body-bg: rgba(250, 250, 240, 0.4);]

[border=transparent;
box-sizing: border-box;
width: var(--tabs-w);
line-height: 3.5;][comment]-- Dish --[/comment][border=transparent;
position: absolute;
top: var(--dish-t);
left: var(--dish-l);
width: var(--dish-s);
height: var(--dish-s);
padding: 0px;
border-radius: var(--br);
border: var(--b);
background: var(--dish-bg);
box-shadow: var(--dish-sh);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=transparent;
flex: 0 0 var(--dish-d-s);
height: var(--dish-d-s);
padding: 0px;
border-radius: 50%;
border: var(--b);
background: var(--dish-c-bg);][/border][/border][comment]-- Actual Tabs --[/comment][tabs]

[comment]-- Tab 1 --[/comment]
[tab=.][comment]-- Sushi Tabs --[/comment][border=transparent;
position: absolute;
top: var(--sushi-t);
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + var(--sushi-d));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (2 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (3 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent;
position: absolute;
top: var(--chop-t);
left: var(--chop-l);
width: var(--chop-s);
height: var(--chop-s);
float: right;
padding: 0px;
background: var(--chop-bg);
-webkit-clip-path: var(--chop-c);
clip-path: var(--chop-c);
-webkit-transform: var(--chop-tr);
transform: var(--chop-tr);
z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent;
position: absolute;
top: var(--sticker-t);
left: var(--sticker-l);
width: var(--sticker-s);
height: var(--sticker-s);
padding: 0px;
background: var(--sticker-1);
z-index: 2;][/border][comment]-- Body --[/comment][border=transparent;
position: absolute;
top: var(--body-t);
left: var(--tabs-w);
box-sizing: border-box;
width: calc(100% - var(--tabs-w) - var(--body-t));
height: var(--body-h);
border-radius: var(--br);
border: var(--b);
padding: 0px;
background: var(--body-bg);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--body-p);
color: var(--color);
font-size: var(--body-f-s);
line-height: 130%;][b]Name:[/b] Sushimunch
[b]Favourite Food:[/b] Sushi
[b]Hobby:[/b] Munching sushi

[b]Message:[/b] Munching sushi is an art form of the highest degree. You are still green, young one.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis dui dui. Ut ipsum mi, gravida eget velit a, commodo bibendum libero. Ut placerat ante sed elit fermentum, id egestas neque laoreet. Praesent gravida vestibulum lorem, laoreet accumsan ante mollis vestibulum. Nam eu congue ipsum, vitae rutrum est. Fusce auctor enim nec justo sollicitudin ornare. Fusce ultrices tincidunt elit.

Praesent gravida vestibulum lorem, laoreet accumsan ante mollis vestibulum. Nam eu congue ipsum, vitae rutrum est. Fusce auctor enim nec justo sollicitudin ornare. Fusce ultrices tincidunt elit. Praesent convallis dui dui. Ut ipsum mi, gravida eget velit a, commodo bibendum libero. Ut placerat ante sed elit fermentum, id egestas neque laoreet.[comment]-- Spacing --[/comment][border=transparent;
box-sizing: border-box;
height: calc(var(--sticker-s) - var(--body-p) - var(--body-e));
padding: 0px;][/border][/border][/border][/border][/tab]

[comment]-- Tab 2 --[/comment]
[tab=.][comment]-- Sushi Tabs --[/comment][border=transparent;
position: absolute;
top: var(--sushi-t);
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + var(--sushi-d));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (2 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (3 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent;
position: absolute;
top: var(--chop-t);
left: var(--chop-l);
width: var(--chop-s);
height: var(--chop-s);
float: right;
padding: 0px;
background: var(--chop-bg);
-webkit-clip-path: var(--chop-c);
clip-path: var(--chop-c);
-webkit-transform: var(--chop-tr);
transform: var(--chop-tr);
z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent;
position: absolute;
top: var(--sticker-t);
left: var(--sticker-l);
width: var(--sticker-s);
height: var(--sticker-s);
padding: 0px;
background: var(--sticker-2);
z-index: 2;][/border][comment]-- Body --[/comment][border=transparent;
position: absolute;
top: var(--body-t);
left: var(--tabs-w);
box-sizing: border-box;
width: calc(100% - var(--tabs-w) - var(--body-t));
height: var(--body-h);
border-radius: var(--br);
border: var(--b);
padding: 0px;
background: var(--body-bg);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--body-p);
color: var(--color);
font-size: var(--body-f-s);
line-height: 130%;]Sushimunch munch[comment]-- Spacing --[/comment][border=transparent;
box-sizing: border-box;
height: calc(var(--sticker-s) - var(--body-p) - var(--body-e));
padding: 0px;][/border][/border][/border][/border][/tab]

[comment]-- Tab 3 --[/comment]
[tab=.][comment]-- Sushi Tabs --[/comment][border=transparent;
position: absolute;
top: var(--sushi-t);
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + var(--sushi-d));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (2 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (3 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent;
position: absolute;
top: var(--chop-t);
left: var(--chop-l);
width: var(--chop-s);
height: var(--chop-s);
float: right;
padding: 0px;
background: var(--chop-bg);
-webkit-clip-path: var(--chop-c);
clip-path: var(--chop-c);
-webkit-transform: var(--chop-tr);
transform: var(--chop-tr);
z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent;
position: absolute;
top: var(--sticker-t);
left: var(--sticker-l);
width: var(--sticker-s);
height: var(--sticker-s);
padding: 0px;
background: var(--sticker-3);
z-index: 2;][/border][comment]-- Body --[/comment][border=transparent;
position: absolute;
top: var(--body-t);
left: var(--tabs-w);
box-sizing: border-box;
width: calc(100% - var(--tabs-w) - var(--body-t));
height: var(--body-h);
border-radius: var(--br);
border: var(--b);
padding: 0px;
background: var(--body-bg);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--body-p);
color: var(--color);
font-size: var(--body-f-s);
line-height: 130%;]Sushimunch munch munch[comment]-- Spacing --[/comment][border=transparent;
box-sizing: border-box;
height: calc(var(--sticker-s) - var(--body-p) - var(--body-e));
padding: 0px;][/border][/border][/border][/border][/tab]

[comment]-- Tab 4 --[/comment]
[tab=.][comment]-- Sushi Tabs --[/comment][border=transparent;
position: absolute;
top: var(--sushi-t);
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + var(--sushi-d));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (2 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (3 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent;
position: absolute;
top: var(--chop-t);
left: var(--chop-l);
width: var(--chop-s);
height: var(--chop-s);
float: right;
padding: 0px;
background: var(--chop-bg);
-webkit-clip-path: var(--chop-c);
clip-path: var(--chop-c);
-webkit-transform: var(--chop-tr);
transform: var(--chop-tr);
z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent;
position: absolute;
top: var(--sticker-t);
left: var(--sticker-l);
width: var(--sticker-s);
height: var(--sticker-s);
padding: 0px;
background: var(--sticker-4);
z-index: 2;][/border][comment]-- Body --[/comment][border=transparent;
position: absolute;
top: var(--body-t);
left: var(--tabs-w);
box-sizing: border-box;
width: calc(100% - var(--tabs-w) - var(--body-t));
height: var(--body-h);
border-radius: var(--br);
border: var(--b);
padding: 0px;
background: var(--body-bg);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--body-p);
color: var(--color);
font-size: var(--body-f-s);
line-height: 130%;]Sushimunch munch munch munch[comment]-- Spacing --[/comment][border=transparent;
box-sizing: border-box;
height: calc(var(--sticker-s) - var(--body-p) - var(--body-e));
padding: 0px;][/border][/border][/border][/border][/tab]

[/tabs][/border]

[/border][/font]
Click to expand...
how are you actually so talented?? 🥺

do you think I'd be able to use this as an interest check - or is it more for an IC reply?

edit; i used your code here!
 
Last edited:
v i o l e t said:
how are you actually so talented?? 🥺

do you think I'd be able to use this as an interest check - or is it more for an IC reply?

edit; i used your code here!
Click to expand...

🥺 Thank you sm! And yeah, use it however you feel like — the code is for whatever you interpret it as. <3
 
Would it be okay if I used the relationships tab of this code on it's own? Resource - Ami's Lab 2.0 | Mobile Friendly Freebies

I plan to only use it in PMs. I actually asked for help in how to get the section of the code working on it's own already before someone reminded be I should ask permission, so I can take down the post if needed.
 
bastion said:
Would it be okay if I used the relationships tab of this code on it's own? Resource - Ami's Lab 2.0 | Mobile Friendly Freebies

I plan to only use it in PMs. I actually asked for help in how to get the section of the code working on it's own already before someone reminded be I should ask permission, so I can take down the post if needed.
Click to expand...
Yeah, that’s totally fine! Feel free to take apart or rearrange my code.
 
Music Players
Specifically for SoundCloud. I made this about a year ago but never posted because I thought nobody would need something like this.

The reason I added
Semi-Broken
as a tag is because on mobile, SoundCloud media elements now seem to by default redirect you to their site if you click on the element. Probably would've been better if I chose another sound file storing platform, but I didn't do that so...

Semi-Broken
Music Player
No Scroll


NEXUS
Hiroyuki Sawano


Code: 
[comment]-- Font -->[font=Kanit]:z[/font][/comment][border=0;

/* Probably best if you don't change anything I haven't commented next to */

position: relative;
margin: auto;
box-sizing: border-box;
height: calc(var(--b-w) + 30px);
padding: 0;

/* Increase width for longer titles/subtitles, decrease for shorter */
max-width: 250px;

/* Colours */
--c-1: #F2E416;
--c-2: #49D3F2;
--c-3: #4c94c5;
--c-4: #38577b;

--b-w: 69px;

/* Title Variables */
--t-f-s: 1.4em; /* Font size, increase by increments of .1 */
--t-f: 'Kanit', sans-serif; /* Font family, change font tag above if you change this */

/* Subtitle Variables */
--s-c: #b2d7df; /* Text colour */
--s-f-s: 0.9em; /* Font size, increase by increments of .1 */
--s-f: 'Kanit', sans-serif;/* Font family, change font tag above if you change this */

display: flex;
flex-flow: row nowrap;
align-items: center;
overflow-x: auto;][comment]

-- Button Border --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: calc(var(--b-w) + 20px);
height: calc(var(--b-w) + 20px);
border-radius: 50%;
border: 4px solid var(--c-3);
padding: 0;
display: flex;
flex-flow: row nowrap;
align-items: center;][comment]

-- Button Cover --[/comment][border=0;
position: absolute;
top: calc(50% - (var(--b-w) / 2));
left: calc(50% - (var(--b-w) / 2));
width: var(--b-w);
height: var(--b-w);
border-radius: 50%;
background: var(--c-2);
padding: 0;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
pointer-events: none;
z-index: 2;][border=0;
position: relative;
left: 2px;
width: 30px;
height: 40px;
padding: 0;
background: var(--c-1);
clip-path: polygon(0 0, 100% 50%, 0 100%, 40% 50%);][/border][/border][comment]

-- Music Player Container --[/comment][border=0;
margin: 19px;
flex: 0 0 43px;
height: 44px;
padding: 0;
overflow: hidden;
transform: scale(1.6);
opacity: 0;
z-index: 2;][border=0;
position: relative;
top: -11px;
left: -8px;
width: 62px;
height: 54px;
padding: 0;
overflow: hidden;][comment]

-- SoundCloud Media Element --[/comment][MEDIA=soundcloud]baleygrr/promare-ost-nexus-ft-laco#track_id=625180077[/MEDIA][/border][/border][/border][comment]

-- Title --[/comment][border=0;
position: absolute;
top: 10px;
left: 60px;
box-sizing: border-box;
width: auto;
min-width: 180px;
max-width: calc(100% - 60px);
height: 50px;
background: var(--c-1);
clip-path: polygon(0% 22%, 100% 0%, calc(100% - 30px) 100%, 0% 96%);
padding: 14px 40px 0px 35px;
color: var(--c-3);
font-size: var(--t-f-s);
font-family: var(--t-f);
letter-spacing: 2px;
z-index: 1;][border=0;
display: inline;
padding: 0;]NEXUS[/border][/border][comment]

-- Subtitle --[/comment][border=0;
position: absolute;
top: 56px;
left: 60px;
box-sizing: border-box;
width: auto;
min-width: 150px;
max-width: calc(100% - 60px);
height: 30px;
background: var(--c-4);
clip-path: polygon(0% 0%, calc(100% - 14px) 4%, 100% 100%, 0% 76%);
padding: 3px 20px 0px 28px;
color: var(--s-c);
font-size: var(--s-f-s);
font-family: var(--s-f);
z-index: 0;][border=0;
display: inline;
padding: 0;]Hiroyuki Sawano[/border][/border][/border]

Swarms of Song
Belle (2021)


Code: 
[comment]-- Font -->[font=Alata]:z[/font][/comment][border=0;

/* Probably best if you don't change anything I haven't commented next to */

position: relative;
margin: auto;
box-sizing: border-box;
height: 84px;
padding: 0;

/* Increase width for longer titles/subtitles, decrease for shorter */
max-width: 460px;

/* Colours */
--c-0: #F2B3CA;
--c-1: rgba(220, 70, 240);
--c-2: rgba(100, 70, 230);
--c-3: rgba(160, 70, 240);
--c-t: white; /* Text + Icon colour */

/* Left Text Variables */
--l-f-s: clamp(11px, 2.8vw, 1.1em); /* Font size, increase by increments of .1 */
--l-f: 'Alata', sans-serif; /* Font family, change font tag above if you change this */

/* Right Text Variables */
--r-f-s: clamp(11px, 2.8vw, 1.1em); /* Font size, increase by increments of .1 */
--r-f: 'Alata', sans-serif;/* Font family, change font tag above if you change this */

display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
overflow-y: hidden;
overflow-x: auto;][comment]

-- Diamond --[/comment][border=0;
--w: 84px;
position: absolute;
top: 0;
left: calc(50% - (var(--w) / 2));
width: var(--w);
height: var(--w);
padding: 0;
background: radial-gradient(var(--c-0) -30%, var(--c-1) 40%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
pointer-events: none;
z-index: 2;

display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=0;
position: relative;
left: 4px;
padding: 0;
color: var(--c-t);
font-size: 26px;][fa]far fa-play[/fa][/border][/border][comment]

-- Left Text --[/comment][border=0;
--h: 38px;
--gap: 32px;
box-sizing: border-box;
position: absolute;
top: calc(50% - (var(--h) / 2));
left: 0;
width: calc(50% - var(--gap));
height: var(--h);
padding: 10px calc((var(--h) / 2) + 10px);
background: linear-gradient(to right, var(--c-2) 40%, var(--c-3));
clip-path: polygon(100% 0%, calc(100% - (var(--h) / 2)) 50%, 100% 100%, calc((var(--h) / 2) + 10px) 100%, 0% 50%, calc((var(--h) / 2) + 10px) 0%);
z-index: 1;

display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][border=0;
padding: 0;
color: var(--c-t);
font-size: var(--l-f-s);
font-family: var(--l-f);]Swarms of Song[/border][/border][comment]

-- Right Text --[/comment][border=0;
--h: 38px;
--gap: 32px;
box-sizing: border-box;
position: absolute;
top: calc(50% - (var(--h) / 2));
left: calc(50% + var(--gap));
width: calc(50% - var(--gap));
height: var(--h);
padding: 10px calc((var(--h) / 2) + 10px);
background: linear-gradient(to left, var(--c-2) 40%, var(--c-3));
clip-path: polygon(calc(100% - (var(--h) / 2) - 10px) 0%, 100% 50%, calc(100% - (var(--h) / 2) - 10px) 100%, 0% 100%, calc((var(--h) / 2)) 50%, 0% 0%);
z-index: 1;

display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][border=0;
padding: 0;
color: var(--c-t);
font-size: var(--r-f-s);
font-family: var(--r-f);
text-overflow: ellipsis;]Belle (2021)[/border][/border][comment]

-- Music Player Container --[/comment][border=0;
flex: 0 0 43px;
height: 44px;
padding: 0;
overflow: hidden;
transform: scale(2);
opacity: 0;
z-index: 1;][border=0;
position: relative;
top: -11px;
left: -8px;
width: 62px;
height: 54px;
padding: 0;
overflow: hidden;][comment]

-- SoundCloud Media Element --[/comment][MEDIA=soundcloud]belle18977/swarms-of-song#track_id=1183724368[/MEDIA][/border][/border][/border]
 
Hey! I've been using your code for a few months now and I want to heavily thank you for your contributions to the community. It's because of this thread I'm starting to try to learn code myself so I can better apply it my own pixel art(I suck and can only frankenstein off of these right now lol). Your code is very clean and easy to learn from and your simple icon post really helped me figure out what I wanted my latest interest check look like! Thank you!
 
Charles Cheese said:
Hey! I've been using your code for a few months now and I want to heavily thank you for your contributions to the community. It's because of this thread I'm starting to try to learn code myself so I can better apply it my own pixel art(I suck and can only frankenstein off of these right now lol). Your code is very clean and easy to learn from and your simple icon post really helped me figure out what I wanted my latest interest check look like! Thank you!
Click to expand...
🥺 Aww, that’s so sweet, thank you! And don’t worry about sucking because that’s where we all start; even I Frankenstein-ed other people’s code when I first started out, and it sure didn’t look good. Good luck with your RP and your coding!
 
Ambiloquous said:
Cytus II
First is a character display based off of the character selection screen of Cytus II. Second is a D&D CS based off the interface after one chooses a character.


The reason why I copied Cytus II is as summarized: long car trip, no data, much play, brain lightbulb. It's also the one genre of games that I don't suck at — that one genre being rhythm games. The reason why the second code is a dice sheet is because the Cytus II interface suits stats, and the only thing I could relate to stats in a RP setting was TTRPGs. That and I've never seen anyone make a full layout for one of them (and now I understand why). It's D&D because D&D is the only TTRPG I can say more than one sentence about, but after I started coding the components, I realized that I didn't actually remember much of it. This led to a lot of web surfing, and I even ended up making an account on D&DBeyond for some reason.

Second code was Pain™. Layouts made using BBCode and CSS injection is agony — especially when it's something like a TTRPG sheet and your coding habits are like mine. In other words, using a new line for every CSS property stops being clean after a certain point, and I'd hit it long ago. 😩 This code actually scrolls for 20+ seconds. It hurts. Ctrl+F saves lives. Also, if you're wondering why the sheet starts looking more ugly the more you scroll, it's because my motivation died on the second "page", which ended up not really being one because scroll-snap makes mobile reading frustrating.

Honestly, I don't even know if this is a useful layout for D&D, but I spent way too much effort in this to not post so... here it is. Please give me validation.

If someone actually plans to use it (imagine someone using it, hah), I could probably make a version with a spell section.

Edit: This may have no spacing between elements if you're on an older version of any browser (since they don't support gap), which I didn't realize until now.


Image
Textbox
Hidden Scroll


Characters
Scroll


PAFF
Lv
7


NEKO
Lv
15


ROBO_Head
Lv
8


Ivy
Lv
13


Crystal PuNK
Lv
11


Bo Bo
Lv
14


Graff.J
Lv
69




Code: 
[font=Electrolize][border=transparent;
padding: 0px;

/* Probably best if you don't change anything I haven't commented next to */

--w: 1100px; /* Max width */
--p: 30px;
--bg: radial-gradient(circle at 50%, rgba(140, 140, 140, 0.8), rgba(var(--color-b), 0.9));
--b-s: 0px -40px rgba(60, 60, 60, 0.3);

/* Main colours, use RGB numbers */
--color-b: 0, 0, 0; /* Background colour */
--color-a: 255, 255, 230; /* Text and accent colour */

--title-f: hue-rotate(210deg); /* Title hue, change number for a different colour */

--icon-m: 38px;
--icon-w: 155px;
--icon-h: min(70vh, 400px);
--icon-b: 10px;
--icon-g: linear-gradient(rgba(var(--color-b), 0.6), rgba(0, 0, 0, 0) 40%);

--head-p: 12px 0px 6px 0px;
--head-s: 1.45em;

--bar-h: 3px;

--lv-m: 2px;

--lv-b: 1px;
--lv-p: 1px 8px 1px 8px;
--lv-s: 0.8em;
--lv-b-s: 0px 4px rgba(var(--color-a), 0.3);

--lv-n-m: 4px;
--lv-n-s: 1.2em;

/* Icon variables below in order are:
-- XP bar colour
-- XP bar percentage
-- XP bar gradient; best not to touch this
-- Image URL, change % (x-axis) and px or vh (y-axis) before / to shift image position in icon, change % after / to change image size in icon */

/* Icon 1 variables */
--color-1: #5abf97;
--bar-p-1: 35%;
--bar-g-1: linear-gradient(to right, var(--color-1) var(--bar-p-1), rgba(var(--color-a), 0.3) var(--bar-p-1));
--img-1: url('https://vignette.wikia.nocookie.net/cytus/images/3/35/Paff.png/revision/latest?cb=20180121100521') no-repeat 35% 20px / 215%;

/* Icon 2 variables */
--color-2: #c481a1;
--bar-p-2: 25%;
--bar-g-2: linear-gradient(to right, var(--color-2) var(--bar-p-2), rgba(var(--color-a), 0.3) var(--bar-p-2)); 
--img-2: url('https://vignette.wikia.nocookie.net/cytus/images/f/fd/Neko.png/revision/latest?cb=20180121105710') no-repeat 50% min(3.7vh, 30px) / 190%;

/* Icon 3 variables */
--color-3: #83b5be;
--bar-p-3: 18%;
--bar-g-3: linear-gradient(to right, var(--color-3) var(--bar-p-3), rgba(var(--color-a), 0.3) var(--bar-p-3)); 
--img-3: url('https://vignette.wikia.nocookie.net/cytus/images/f/f3/ROBO_Head.png/revision/latest?cb=20180121105711') no-repeat 50% 35px / 220%;

/* Icon 4 variables */
--color-4: #ba1d1e;
--bar-p-4: 64%;
--bar-g-4: linear-gradient(to right, var(--color-4) var(--bar-p-4), rgba(var(--color-a), 0.3) var(--bar-p-4)); 
--img-4: url('https://vignette.wikia.nocookie.net/cytus/images/2/28/Ivy001_-05621.png/revision/latest?cb=20190113095915') no-repeat 45% 10px / 190%;

/* Icon 5 variables */
--color-5: #a0505e;
--bar-p-5: 50%;
--bar-g-5: linear-gradient(to right, var(--color-5) var(--bar-p-5), rgba(var(--color-a), 0.3) var(--bar-p-5)); 
--img-5: url('https://vignette.wikia.nocookie.net/cytus/images/3/3e/Crystal_PuNK2.png/revision/latest?cb=20190904225142') no-repeat 48% 10px / 280%;

/* Icon 6 variables */
--color-6: #82ac35;
--bar-p-6: 40%;
--bar-g-6: linear-gradient(to right, var(--color-6) var(--bar-p-6), rgba(var(--color-a), 0.3) var(--bar-p-6)); 
--img-6: url('https://vignette.wikia.nocookie.net/cytus/images/2/2e/BoBo.png/revision/latest?cb=20200819113732') no-repeat 5% 0px / 210%;

/* Icon 7 variables */
--color-7: #c79b4e;
--bar-p-7: 78%;
--bar-g-7: linear-gradient(to right, var(--color-7) var(--bar-p-7), rgba(var(--color-a), 0.3) var(--bar-p-7)); 
--img-7: url('https://i.imgur.com/wHbPkah.png') no-repeat 30% 15px / 240%;][comment]-- Title --[/comment][border=transparent;
position: relative;
margin: auto;
box-sizing: border-box;
max-width: var(--w);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
z-index: 2;][border=transparent;
margin-left: calc(var(--p) / 2);
margin-right: var(--lv-n-m);
padding: 0px;
font-size: 1.8em;
line-height: 1.5;
filter: var(--title-f);]Characters[/border][border=transparent;
margin-left: var(--lv-n-m);
border-radius: var(--lv-b);
background: rgb(var(--color-a));
padding: var(--lv-p);
color: rgba(var(--color-b), 0.8);
font-size: var(--lv-s);
line-height: 1;
box-shadow: var(--lv-b-s);]Scroll [fa]fas fa-caret-right[/fa][/border][/border][comment]-- Profile Container --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
max-width: var(--w);
height: calc(var(--icon-h) + (2 * var(--p)));
padding: var(--p) 0px var(--p) 0px;
border-radius: var(--icon-b);
background: var(--bg);
box-shadow: var(--b-s);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: calc(var(--icon-h) + (2 * var(--p)));
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
overflow-x: auto;
overflow-y: hidden;]

[comment]-- Icon 1 --[/comment][border=transparent;
flex: 0 0 var(--icon-w);
margin-left: var(--icon-m);
box-sizing: border-box;
height: var(--icon-h);
border-radius: var(--icon-b);
background: var(--icon-g), var(--img-1), rgb(var(--color-b));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--head-p);
color: rgb(var(--color-a));
font-size: var(--head-s);
font-kerning: normal;
line-height: 1;
text-align: center;]PAFF[/border][comment]-- XP Bar --[/comment][border=transparent;
width: 100%;
height: var(--bar-h);
background: var(--bar-g-1);
padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent;
margin-top: var(--lv-m);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- Lv Box --[/comment][border=transparent;
border-radius: var(--lv-b);
background: rgb(var(--color-a));
padding: var(--lv-p);
color: rgba(var(--color-b), 0.8);
font-size: var(--lv-s);
line-height: 1;
box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent;
margin-left: var(--lv-n-m);
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--lv-n-s);
font-variant: normal;
font-weight: normal;]7[/border][/border][/border]

[comment]-- Icon 2 --[/comment][border=transparent;
flex: 0 0 var(--icon-w);
margin-left: var(--icon-m);
box-sizing: border-box;
height: var(--icon-h);
border-radius: var(--icon-b);
background: var(--icon-g), var(--img-2), rgb(var(--color-b));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--head-p);
color: rgb(var(--color-a));
font-size: var(--head-s);
font-kerning: normal;
line-height: 1;
text-align: center;]NEKO[/border][comment]-- XP Bar --[/comment][border=transparent;
width: 100%;
height: var(--bar-h);
background: var(--bar-g-2);
padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent;
margin-top: var(--lv-m);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- Lv Box --[/comment][border=transparent;
border-radius: var(--lv-b);
background: rgb(var(--color-a));
padding: var(--lv-p);
color: rgba(var(--color-b), 0.8);
font-size: var(--lv-s);
line-height: 1;
box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent;
margin-left: var(--lv-n-m);
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--lv-n-s);
font-variant: normal;
font-weight: normal;]15[/border][/border][/border]

[comment]-- Icon 3 --[/comment][border=transparent;
flex: 0 0 var(--icon-w);
margin-left: var(--icon-m);
box-sizing: border-box;
height: var(--icon-h);
border-radius: var(--icon-b);
background: var(--icon-g), var(--img-3), rgb(var(--color-b));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--head-p);
color: rgb(var(--color-a));
font-size: var(--head-s);
font-kerning: normal;
line-height: 1;
text-align: center;]ROBO_Head[/border][comment]-- XP Bar --[/comment][border=transparent;
width: 100%;
height: var(--bar-h);
background: var(--bar-g-3);
padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent;
margin-top: var(--lv-m);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- Lv Box --[/comment][border=transparent;
border-radius: var(--lv-b);
background: rgb(var(--color-a));
padding: var(--lv-p);
color: rgba(var(--color-b), 0.8);
font-size: var(--lv-s);
line-height: 1;
box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent;
margin-left: var(--lv-n-m);
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--lv-n-s);
font-variant: normal;
font-weight: normal;]8[/border][/border][/border]

[comment]-- Icon 4 --[/comment][border=transparent;
flex: 0 0 var(--icon-w);
margin-left: var(--icon-m);
box-sizing: border-box;
height: var(--icon-h);
border-radius: var(--icon-b);
background: var(--icon-g), var(--img-4), rgb(var(--color-b));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--head-p);
color: rgb(var(--color-a));
font-size: var(--head-s);
font-kerning: normal;
line-height: 1;
text-align: center;]Ivy[/border][comment]-- XP Bar --[/comment][border=transparent;
width: 100%;
height: var(--bar-h);
background: var(--bar-g-4);
padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent;
margin-top: var(--lv-m);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- Lv Box --[/comment][border=transparent;
border-radius: var(--lv-b);
background: rgb(var(--color-a));
padding: var(--lv-p);
color: rgba(var(--color-b), 0.8);
font-size: var(--lv-s);
line-height: 1;
box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent;
margin-left: var(--lv-n-m);
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--lv-n-s);
font-variant: normal;
font-weight: normal;]13[/border][/border][/border]

[comment]-- Icon 5 --[/comment][border=transparent;
flex: 0 0 var(--icon-w);
margin-left: var(--icon-m);
box-sizing: border-box;
height: var(--icon-h);
border-radius: var(--icon-b);
background: var(--icon-g), var(--img-5), rgb(var(--color-b));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--head-p);
color: rgb(var(--color-a));
font-size: var(--head-s);
font-kerning: normal;
line-height: 1;
text-align: center;]Crystal PuNK[/border][comment]-- XP Bar --[/comment][border=transparent;
width: 100%;
height: var(--bar-h);
background: var(--bar-g-5);
padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent;
margin-top: var(--lv-m);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- Lv Box --[/comment][border=transparent;
border-radius: var(--lv-b);
background: rgb(var(--color-a));
padding: var(--lv-p);
color: rgba(var(--color-b), 0.8);
font-size: var(--lv-s);
line-height: 1;
box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent;
margin-left: var(--lv-n-m);
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--lv-n-s);
font-variant: normal;
font-weight: normal;]11[/border][/border][/border]

[comment]-- Icon 6 --[/comment][border=transparent;
flex: 0 0 var(--icon-w);
margin-left: var(--icon-m);
box-sizing: border-box;
height: var(--icon-h);
border-radius: var(--icon-b);
background: var(--icon-g), var(--img-6), rgb(var(--color-b));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--head-p);
color: rgb(var(--color-a));
font-size: var(--head-s);
font-kerning: normal;
line-height: 1;
text-align: center;]Bo Bo[/border][comment]-- XP Bar --[/comment][border=transparent;
width: 100%;
height: var(--bar-h);
background: var(--bar-g-6);
padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent;
margin-top: var(--lv-m);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- Lv Box --[/comment][border=transparent;
border-radius: var(--lv-b);
background: rgb(var(--color-a));
padding: var(--lv-p);
color: rgba(var(--color-b), 0.8);
font-size: var(--lv-s);
line-height: 1;
box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent;
margin-left: var(--lv-n-m);
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--lv-n-s);
font-variant: normal;
font-weight: normal;]14[/border][/border][/border]

[comment]-- Icon 7 --[/comment][border=transparent;
flex: 0 0 var(--icon-w);
margin-left: var(--icon-m);
margin-right: var(--icon-m);
box-sizing: border-box;
height: var(--icon-h);
border-radius: var(--icon-b);
background: var(--icon-g), var(--img-7), rgb(var(--color-b));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--head-p);
color: rgb(var(--color-a));
font-size: var(--head-s);
font-kerning: normal;
line-height: 1;
text-align: center;]Graff.J[/border][comment]-- XP Bar --[/comment][border=transparent;
width: 100%;
height: var(--bar-h);
background: var(--bar-g-7);
padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent;
margin-top: var(--lv-m);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- Lv Box --[/comment][border=transparent;
border-radius: var(--lv-b);
background: rgb(var(--color-a));
padding: var(--lv-p);
color: rgba(var(--color-b), 0.8);
font-size: var(--lv-s);
line-height: 1;
box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent;
margin-left: var(--lv-n-m);
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--lv-n-s);
font-variant: normal;
font-weight: normal;]69[/border][/border][/border]

[/border][/border][/border][/font]

PAFF
Scroll
BARD
Lv
7
EXP
11 900/34 000
Race
HUMAN
Alignment
LAWFUL NEUTRAL
Background
ENTERTAINER
STR
+0
10
DEX
+0
10
CON
+0
10
INT
+0
10
WIS
+0
10
CHA
+0
10
Saving Throws
Proficiency Bonus
+3
Inspiration
0
STR
+0
DEX
+3
CON
+0
INT
+0
WIS
+0
CHA
+3
STR
Athletics
+0
DEX
Acrobatics
+0

Sleight of Hand
+0

Stealth
+0
INT
Arcana
+3

History
+0

Investigation
+3

Nature
+0

Religion
+0
WIS
Animal Handling
+0

Insight
+0

Medicine
+0

Perception
+0

Survival
+0
CHA
Deception
+3

Intimidation
+0

Performance
+3

Persuasion
+0
Passive Wisdom
(Perception)
10
Passive Intelligence
(Investigation)
13
Passive Wisdom
(Insight)
10
HP
26/38
Temp HP
0
SPD
30ft
INIT
0
Armour Class
10
Hit Dice
1D8
"A quote or something — whatever you want; this is here to fill space."
Attacks & Spells
ATTACK 1
ATK BONUS
DMG/TYPE
ATTACK 2
ATK BONUS
DMG/TYPE
ATTACK 3
ATK BONUS
DMG/TYPE
ATTACK 4
ATK BONUS
DMG/TYPE
Notes about attacks here
Another line
Proficiencies
ARMOUR
Armour 1

WEAPONS
Weapon 1, Weapon 2

TOOLS
Tool 1, Tool 2

LANGUAGES
Language 1, Language 2
Features & Traits
CLASS FEATURES
Feature 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feature 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feature 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

RACIAL TRAITS
Trait 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Trait 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Trait 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

FEATS
Feat 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feat 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
CP
5
SP
0
EP
0
GP
20
PP
0
Equipment
ARMOUR
AC
Equipment 1
Equipment 2
Equipment 3
Equipment 4
Equipment 5
Equipment 6
Equipment 7
Equipment 8
Equipment 9
Equipment 10
Equipment 11
Equipment 12
Personality Traits
I like to read and memorize poetry. It keeps me calm and brings me fleeting moments of happiness.
I don’t talk about the thing that torments me. I’d rather not burden others with my curse.
Ideals
I’ll stop the spirits that haunt me or die trying.
Bonds
I keep my thoughts and discoveries in a journal. My journal is my legacy.
Flaws
I have certain rituals that I must follow every day. I can never break them.



Code: 
[font=Electrolize][border=transparent;
padding: 0px;

/* Probably best if you don't change anything I haven't commented next to */

--w: 1100px; /* Max width */
--p: min(28px, 7vw);
--b-r: 10px;
--bg: radial-gradient(circle at 50%, rgba(140, 140, 140, 0.8), rgba(var(--color-b), 0.9));
--b-s: 0px -40px rgba(60, 60, 60, 0.3);

/* Main colours, use RGB numbers */
--color-b: 0, 0, 0; /* Background colour */
--color-a: 255, 255, 230; /* Text and accent colour */
--color-1: #5abf97; /* Accent colour, don't use just rgb numbers here, use the full rgb() if you plan to use it or stick with hex code */

--title-f: hue-rotate(210deg); /* Name title hue, change number for a different colour */
--note-m: 8px;

--basic-gap: 0 8px;

--img-flex: 2 1;
--img-m: 40px;
--img-w: 210px;
--img-h: min(70vh, 450px);
--img: url('https://vignette.wikia.nocookie.net/cytus/images/3/35/Paff.png/revision/latest?cb=20180121100521') no-repeat 35% 2% / cover; /* Image URL, change % (x-axis) and px or vh (y-axis) before / to shift image position in icon */

--f-s: 1em;

--stats-flex: 3 1;
--stats-w: 220px;
--stats-b: 1px solid rgba(var(--color-a), 0.4);

--stats-gap: 10px 20px;
--stats-p: 12px;

--class-p: 20px;
--class-s: 1.6em;

--lv-box-b: 1px;
--lv-box-p: 1px 8px 1px 8px;
--lv-box-s: 0.8em;
--lv-box-b-s: 0px 4px rgba(var(--color-a), 0.3);
--lv-num-m: 18px;
--lv-num-s: 2.2em;

--bar-gap: 6px;
--bar-t-gap: 2px;
--bar-c: rgba(var(--color-a), 0.75);
--bar-s: 0.9em;
--bar-h: 10px;

--xp-per: 35%; /* EXP bar percentage */
--xp-g: linear-gradient(to right, var(--color-1) var(--xp-per), rgba(var(--color-a), 0.3) var(--xp-per));

--field-p: 6px 10px;
--field-bg: rgba(var(--color-b), 0.3);
--field-c: rgba(var(--color-a), 0.7);

--stat-flex: 1 1 145px;
--stat-w: 40px;

--sav-bon-ins-flex: 1 1 120px;

--pro-bon-s: 30px;

--pro-s: var(--bar-h);
--pro-b-r: 50%;

/* Proficiency circles, change value to var(--color-1); if proficient, else put rgba(var(--color-a), 0.45); */
--pro-str: rgba(var(--color-a), 0.45);
--pro-dex: var(--color-1);
--pro-con: rgba(var(--color-a), 0.45);
--pro-int: rgba(var(--color-a), 0.45);
--pro-wis: rgba(var(--color-a), 0.45);
--pro-cha: var(--color-1);

--skills-gap: 2px 20px;

--skill-flex: 1 1 175px;
--skill-body-flex: 1 1;
--skill-body-w: 175px;
--skill-s: 0.98em;
--skill-l-h: 1.4;

/* Proficiency circles, change value to var(--color-1); if proficient, else put rgba(var(--color-a), 0.45); */
--skill-athletic: rgba(var(--color-a), 0.45);
--skill-acrobat: rgba(var(--color-a), 0.45);
--skill-sleight: rgba(var(--color-a), 0.45);
--skill-stealth: rgba(var(--color-a), 0.45);
--skill-arcana: var(--color-1);
--skill-history: rgba(var(--color-a), 0.45);
--skill-invest: var(--color-1);
--skill-nature: rgba(var(--color-a), 0.45);
--skill-religion: rgba(var(--color-a), 0.45);
--skill-animal: rgba(var(--color-a), 0.45);
--skill-insight: rgba(var(--color-a), 0.45);
--skill-medicine: rgba(var(--color-a), 0.45);
--skill-percept: rgba(var(--color-a), 0.45);
--skill-survival: rgba(var(--color-a), 0.45);
--skill-decept: var(--color-1);
--skill-intimidat: rgba(var(--color-a), 0.45);
--skill-perform: var(--color-1);
--skill-persuasion: rgba(var(--color-a), 0.45);

--pas-flex: 1 1 280px;
--pas-t-a: left;

--hp-per: 68%; /* HP percentage */
--hp-g: linear-gradient(to right, var(--color-1) var(--hp-per), rgba(var(--color-a), 0.3) var(--hp-per));

--com-atk-prof-flex: 1 1 200px;
--com-atk-prof-gap: 20px;

--com-flex: 1 1 100px;

--box-field-l-h: 1.3;

--field-block-m: 3px 0px 5px 12px;
--field-block-b: 3px solid var(--color-1);
--field-block-p: 0px 0px 0px 8px;

--p-flex: 1 1 70px;
--p-gap: 8px 12px;

/* Money circles, change value to var(--color-1); if character has that piece, else put rgba(var(--color-a), 0.45); */
--cp: var(--color-1);
--sp: rgba(var(--color-a), 0.45);
--ep: rgba(var(--color-a), 0.45);
--gp: var(--color-1);
--pp: rgba(var(--color-a), 0.45);

--pers-gap: 11px;
--pers-field-l-h: 1.4;][comment]-- Title --[/comment][border=transparent;
position: relative;
margin: auto;
box-sizing: border-box;
max-width: var(--w);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
z-index: 2;][border=transparent;
margin-left: calc(var(--p) / 2);
padding: 0px;
font-size: 1.8em;
line-height: 1.5;
filter: var(--title-f);]PAFF[/border][border=transparent;
margin-left: var(--note-m);
border-radius: var(--lv-box-b);
background: rgb(var(--color-a));
padding: var(--lv-box-p);
color: rgba(var(--color-b), 0.8);
font-size: var(--lv-box-s);
line-height: 1;
box-shadow: var(--lv-box-b-s);]Scroll [fa]fas fa-caret-down[/fa][/border][/border][comment]-- CS Container --[/comment][border=transparent;
position: relative;
margin: auto;
box-sizing: border-box;
max-width: var(--w);
height: calc(var(--img-h) + (2 * var(--p)));
padding: 0px var(--p);
border-radius: var(--b-r);
background: var(--bg);
box-shadow: var(--b-s);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
position: relative;
top: 0px;
left: 0px;
box-sizing: border-box;
width: calc(100% + (2 * var(--p)));
height: calc(var(--img-h) + (2 * var(--p)));
padding: 0px;
overflow-y: auto;][comment]-- Content Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: calc(100% - (2 * var(--p)));
height: auto;
padding: 0px;][comment]

-- Basics Page --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: auto;
padding: var(--p) 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
gap: var(--basic-gap);][comment]

-- Image --[/comment][border=transparent;
flex: var(--img-flex);
box-sizing: border-box;
min-width: var(--img-w);
height: var(--img-h);
background: var(--img);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;][/border][comment]

-- Overall Stats Container --[/comment][border=transparent;
flex: var(--stats-flex);
box-sizing: border-box;
min-width: var(--stats-w);
height: auto;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-start;][comment]

-- Class Container --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--class-p) 0px;
border-top: var(--stats-b); 
border-bottom: var(--stats-b);
color: rgb(var(--color-a));
font-size: var(--class-s);
text-align: center;]BARD[/border][comment]

-- Lv + EXP Container --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--stats-p) 0px;
border-bottom: var(--stats-b);
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
gap: var(--stats-gap);][comment]-- Lv Container --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- Lv Box --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--lv-box-p);
border-radius: var(--lv-box-b);
background: rgb(var(--color-a));
color: rgba(var(--color-b), 0.8);
font-size: var(--lv-box-s);
line-height: 1;
box-shadow: var(--lv-box-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent;
margin-left: var(--lv-num-m);
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--lv-num-s);
font-variant: normal;
font-weight: normal;
line-height: 1;]7[/border][/border][comment]-- EXP Container --[/comment][border=transparent;
flex: 1 1 50%;
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- EXP Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: var(--bar-c);
font-size: var(--bar-s);
line-height: 1.3;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--bar-t-gap);][border=transparent;
padding: 0px;]EXP [fa]fas fa-caret-right[/fa][/border][comment]-- Points --[/comment][border=transparent;
padding: 0px;]11 900/34 000[/border][/border][comment]-- EXP Bar --[/comment][border=transparent;
width: 100%;
box-sizing: border-box;
height: var(--bar-h);
padding: 0px;
background: var(--xp-g);][/border][/border][/border][comment]

-- Race + Alignment + Background Container --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--stats-p) 0px;
border-bottom: var(--stats-b);
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
gap: var(--stats-gap);][comment]-- Race Container --[/comment][border=transparent;
flex: 1 1;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Race Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Race[/border][comment]-- Race Field --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;]HUMAN[/border][/border][comment]-- Alignment Container --[/comment][border=transparent;
flex: 1 1;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Alignment Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Alignment[/border][comment]-- Alignment Field --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;]LAWFUL NEUTRAL[/border][/border][comment]-- Background Container --[/comment][border=transparent;
flex: 1 1;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Background Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Background[/border][comment]-- Background Field --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;]ENTERTAINER[/border][/border][/border][comment]

-- Ability Score Container --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--stats-p) 0px;
border-bottom: var(--stats-b);
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
gap: var(--stats-gap);][comment]-- STR Container --[/comment][border=transparent;
flex: var(--stat-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--bar-gap);][comment]-- STR Label --[/comment][border=transparent;
flex: 0 0 var(--stat-w);
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]STR[/border][comment]-- STR Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent;
padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent;
padding: 0px;]10[/border][/border][/border][comment]-- DEX Container --[/comment][border=transparent;
flex: var(--stat-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--bar-gap);][comment]-- DEX Label --[/comment][border=transparent;
flex: 0 0 var(--stat-w);
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]DEX[/border][comment]-- DEX Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent;
padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent;
padding: 0px;]10[/border][/border][/border][comment]-- CON Container --[/comment][border=transparent;
flex: var(--stat-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--bar-gap);][comment]-- CON Label --[/comment][border=transparent;
flex: 0 0 var(--stat-w);
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]CON[/border][comment]-- CON Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent;
padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent;
padding: 0px;]10[/border][/border][/border][comment]-- INT Container --[/comment][border=transparent;
flex: var(--stat-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--bar-gap);][comment]-- INT Label --[/comment][border=transparent;
flex: 0 0 var(--stat-w);
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]INT[/border][comment]-- INT Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent;
padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent;
padding: 0px;]10[/border][/border][/border][comment]-- WIS Container --[/comment][border=transparent;
flex: var(--stat-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--bar-gap);][comment]-- WIS Label --[/comment][border=transparent;
flex: 0 0 var(--stat-w);
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]WIS[/border][comment]-- WIS Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent;
padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent;
padding: 0px;]10[/border][/border][/border][comment]-- CHA Container --[/comment][border=transparent;
flex: var(--stat-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--bar-gap);][comment]-- CHA Label --[/comment][border=transparent;
flex: 0 0 var(--stat-w);
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]CHA[/border][comment]-- CHA Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent;
padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent;
padding: 0px;]10[/border][/border][/border][/border][comment]

-- Saving Throws Container --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--stats-p) 0px;
border-bottom: var(--stats-b);
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
gap: var(--stats-gap);][comment]-- Saving Throw Label + Bonus + Inspiration Container[/comment][border=transparent;
flex: 0 0 100%;
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--stats-gap);][comment]-- Saving Throws Label --[/comment][border=transparent;
flex: var(--sav-bon-ins-flex);
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Saving Throws[/border][comment]-- Proficiency Bonus Container --[/comment][border=transparent;
flex: var(--sav-bon-ins-flex);
box-sizing: border-box;
padding: 0px;
font-size: var(--f-s);
line-height: 1;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--lv-num-m);][comment]-- Proficiency Bonus Label --[/comment][border=transparent;
flex: 1 1;
padding: 0px;
color: rgb(var(--color-a));
text-align: right;]Proficiency Bonus[/border][comment]-- Proficiency Bonus Circle --[/comment][border=transparent;
flex: 0 0 var(--pro-bon-s);
height: var(--pro-bon-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--color-1);
padding: 0px;
color: rgb(var(--color-b));
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]+3[/border][/border][comment]-- Inspiration Container --[/comment][border=transparent;
flex: var(--sav-bon-ins-flex);
box-sizing: border-box;
padding: 0px;
font-size: var(--f-s);
line-height: 1;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--lv-num-m);][comment]-- Inspiration Label --[/comment][border=transparent;
flex: 1 1;
padding: 0px;
color: rgb(var(--color-a));
text-align: right;]Inspiration[/border][comment]-- Inspiration Circle --[/comment][border=transparent;
flex: 0 0 var(--pro-bon-s);
height: var(--pro-bon-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--color-1);
padding: 0px;
color: rgb(var(--color-b));
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]0[/border][/border][/border][comment]-- STR Container --[/comment][border=transparent;
flex: var(--stat-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--bar-gap);][comment]-- STR Proficiency --[/comment][border=transparent;
flex: 0 0 var(--pro-s);
box-sizing: border-box;
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--pro-str);
padding: 0px;][/border][comment]-- STR Label --[/comment][border=transparent;
flex: 0 0 var(--stat-w);
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]STR[/border][comment]-- STR Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;
text-align: right;]+0[/border][/border][comment]-- DEX Container --[/comment][border=transparent;
flex: var(--stat-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--bar-gap);][comment]-- DEX Proficiency --[/comment][border=transparent;
flex: 0 0 var(--pro-s);
box-sizing: border-box;
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--pro-dex);
padding: 0px;][/border][comment]-- DEX Label --[/comment][border=transparent;
flex: 0 0 var(--stat-w);
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]DEX[/border][comment]-- DEX Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;
text-align: right;]+3[/border][/border][comment]-- CON Container --[/comment][border=transparent;
flex: var(--stat-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--bar-gap);][comment]-- CON Proficiency --[/comment][border=transparent;
flex: 0 0 var(--pro-s);
box-sizing: border-box;
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--pro-con);
padding: 0px;][/border][comment]-- CON Label --[/comment][border=transparent;
flex: 0 0 var(--stat-w);
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]CON[/border][comment]-- CON Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;
text-align: right;]+0[/border][/border][comment]-- INT Container --[/comment][border=transparent;
flex: var(--stat-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--bar-gap);][comment]-- INT Proficiency --[/comment][border=transparent;
flex: 0 0 var(--pro-s);
box-sizing: border-box;
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--pro-int);
padding: 0px;][/border][comment]-- INT Label --[/comment][border=transparent;
flex: 0 0 var(--stat-w);
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]INT[/border][comment]-- INT Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;
text-align: right;]+0[/border][/border][comment]-- WIS Container --[/comment][border=transparent;
flex: var(--stat-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--bar-gap);][comment]-- WIS Proficiency --[/comment][border=transparent;
flex: 0 0 var(--pro-s);
box-sizing: border-box;
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--pro-wis);
padding: 0px;][/border][comment]-- WIS Label --[/comment][border=transparent;
flex: 0 0 var(--stat-w);
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]WIS[/border][comment]-- WIS Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;
text-align: right;]+0[/border][/border][comment]-- CHA Container --[/comment][border=transparent;
flex: var(--stat-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--bar-gap);][comment]-- CHA Proficiency --[/comment][border=transparent;
flex: 0 0 var(--pro-s);
box-sizing: border-box;
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--pro-cha);
padding: 0px;][/border][comment]-- CHA Label --[/comment][border=transparent;
flex: 0 0 var(--stat-w);
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]CHA[/border][comment]-- CHA Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;
text-align: right;]+3[/border][/border][/border][/border][comment]
-- Overall Stats End --[/comment][/border][comment]
-- Basics Page End --[/comment][comment]

---------------------- NEW PAGE ----------------------

-- Skills + Combat + Attacks + Prof Page --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
min-height: calc((var(--p) * 2) + var(--img-h));
padding: var(--p) 0px;][comment]

-- Skills Container --[/comment][border=transparent;
flex: 3 1 100%;
box-sizing: border-box;
padding: 0px 0px calc(var(--stats-p) / 2) 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
gap: var(--skills-gap);][comment]-- STR Skills --[/comment][border=transparent;
flex: var(--skill-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-end;][comment]-- STR Header Container --[/comment][border=transparent;
flex: 0 0;
width: 100%;
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--bar-gap);][comment]-- STR Box --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--lv-box-p);
border-radius: var(--lv-box-b);
background: rgb(var(--color-a));
color: rgba(var(--color-b), 0.8);
font-size: var(--lv-box-s);
line-height: 1;
box-shadow: var(--lv-box-b-s);]STR[/border][border=transparent;
flex: 1 1;
box-sizing: border-box;
border: var(--stats-b);
padding: 0px;][/border][/border][comment]-- STR Header End --[/comment][border=transparent;
flex: var(--skill-body-flex);
box-sizing: border-box;
width: var(--skill-body-w);
color: rgb(var(--color-a));
font-size: var(--skill-s);
line-height: var(--skill-l-h);][comment]-- Athletics Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-athletic);
padding: 0px;][/border]Athletics [comment]-- Athletics Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+0[/border][/border][/border][comment]-- STR Skills End --[/comment][comment]-- DEX Skills --[/comment][border=transparent;
flex: var(--skill-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-end;][comment]-- DEX Header Container --[/comment][border=transparent;
flex: 0 0;
width: 100%;
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--bar-gap);][comment]-- DEX Box --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--lv-box-p);
border-radius: var(--lv-box-b);
background: rgb(var(--color-a));
color: rgba(var(--color-b), 0.8);
font-size: var(--lv-box-s);
line-height: 1;
box-shadow: var(--lv-box-b-s);]DEX[/border][border=transparent;
flex: 1 1;
box-sizing: border-box;
border: var(--stats-b);
padding: 0px;][/border][/border][comment]-- DEX Header End --[/comment][border=transparent;
flex: var(--skill-body-flex);
box-sizing: border-box;
width: var(--skill-body-w);
color: rgb(var(--color-a));
font-size: var(--skill-s);
line-height: var(--skill-l-h);][comment]-- Acrobatics Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-acrobat);
padding: 0px;][/border]Acrobatics [comment]-- Acrobatics Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+0[/border]
[comment]-- Sleight of Hand Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-sleight);
padding: 0px;][/border]Sleight of Hand [comment]-- Sleight of Hand Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+0[/border]
[comment]-- Stealth Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-stealth);
padding: 0px;][/border]Stealth [comment]-- Stealth Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+0[/border][/border][/border][comment]-- DEX Skills End --[/comment][comment]-- INT Skills --[/comment][border=transparent;
flex: var(--skill-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-end;][comment]-- INT Header Container --[/comment][border=transparent;
flex: 0 0;
width: 100%;
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--bar-gap);][comment]-- INT Box --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--lv-box-p);
border-radius: var(--lv-box-b);
background: rgb(var(--color-a));
color: rgba(var(--color-b), 0.8);
font-size: var(--lv-box-s);
line-height: 1;
box-shadow: var(--lv-box-b-s);]INT[/border][border=transparent;
flex: 1 1;
box-sizing: border-box;
border: var(--stats-b);
padding: 0px;][/border][/border][comment]-- INT Header End --[/comment][border=transparent;
flex: var(--skill-body-flex);
box-sizing: border-box;
width: var(--skill-body-w);
color: rgb(var(--color-a));
font-size: var(--skill-s);
line-height: var(--skill-l-h);][comment]-- Arcana Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-arcana);
padding: 0px;][/border]Arcana [comment]-- Arcana Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+3[/border]
[comment]-- History Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-history);
padding: 0px;][/border]History [comment]-- History Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+0[/border]
[comment]-- Investigation Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-invest);
padding: 0px;][/border]Investigation [comment]-- Investigation Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+3[/border]
[comment]-- Nature Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-nature);
padding: 0px;][/border]Nature [comment]-- Nature Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+0[/border]
[comment]-- Religion Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-religion);
padding: 0px;][/border]Religion [comment]-- Religion Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+0[/border][/border][/border][comment]-- INT Skills End --[/comment][comment]-- WIS Skills --[/comment][border=transparent;
flex: var(--skill-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-end;][comment]-- WIS Header Container --[/comment][border=transparent;
flex: 0 0;
width: 100%;
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--bar-gap);][comment]-- WIS Box --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--lv-box-p);
border-radius: var(--lv-box-b);
background: rgb(var(--color-a));
color: rgba(var(--color-b), 0.8);
font-size: var(--lv-box-s);
line-height: 1;
box-shadow: var(--lv-box-b-s);]WIS[/border][border=transparent;
flex: 1 1;
box-sizing: border-box;
border: var(--stats-b);
padding: 0px;][/border][/border][comment]-- WIS Header End --[/comment][border=transparent;
flex: var(--skill-body-flex);
box-sizing: border-box;
width: var(--skill-body-w);
color: rgb(var(--color-a));
font-size: var(--skill-s);
line-height: var(--skill-l-h);][comment]-- Animal Handling Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-animal);
padding: 0px;][/border]Animal Handling [comment]-- Animal Handling Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+0[/border]
[comment]-- Insight Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-insight);
padding: 0px;][/border]Insight [comment]-- Insight Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+0[/border]
[comment]-- Medicine Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-medicine);
padding: 0px;][/border]Medicine [comment]-- Medicine Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+0[/border]
[comment]-- Perception Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-percept);
padding: 0px;][/border]Perception [comment]-- Perception Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+0[/border]
[comment]-- Survival Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-survival);
padding: 0px;][/border]Survival [comment]-- Survival Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+0[/border][/border][/border][comment]-- WIS Skills End --[/comment][comment]-- CHA Skills --[/comment][border=transparent;
flex: var(--skill-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-end;][comment]-- CHA Header Container --[/comment][border=transparent;
flex: 0 0;
width: 100%;
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--bar-gap);][comment]-- CHA Box --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--lv-box-p);
border-radius: var(--lv-box-b);
background: rgb(var(--color-a));
color: rgba(var(--color-b), 0.8);
font-size: var(--lv-box-s);
line-height: 1;
box-shadow: var(--lv-box-b-s);]CHA[/border][border=transparent;
flex: 1 1;
box-sizing: border-box;
border: var(--stats-b);
padding: 0px;][/border][/border][comment]-- CHA Header End --[/comment][border=transparent;
flex: var(--skill-body-flex);
box-sizing: border-box;
width: var(--skill-body-w);
color: rgb(var(--color-a));
font-size: var(--skill-s);
line-height: var(--skill-l-h);][comment]-- Deception Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-decept);
padding: 0px;][/border]Deception [comment]-- Deception Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+3[/border]
[comment]-- Intimidation Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-intimidat);
padding: 0px;][/border]Intimidation [comment]-- Intimidation Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+0[/border]
[comment]-- Performance Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-perform);
padding: 0px;][/border]Performance [comment]-- Performance Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+3[/border]
[comment]-- Persuasion Proficiency --[/comment][border=transparent;
display: inline-block;
margin-right: var(--bar-gap);
box-sizing: border-box;
width: var(--pro-s);
height: var(--pro-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--skill-persuasion);
padding: 0px;][/border]Persuasion [comment]-- Persuasion Number --[/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);]+0[/border][/border][/border][comment]-- CHA Skills End --[/comment][/border][comment]
-- Skills End --[/comment][comment]

-- Passives Container --[/comment][border=transparent;
flex: 1 1 100%;
box-sizing: border-box;
border-top: var(--stats-b);
border-bottom: var(--stats-b);
padding: var(--stats-p) 0px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--stats-gap);][comment]-- Passive Perception Container --[/comment][border=transparent;
flex: var(--pas-flex);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--stats-gap);][comment]-- Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;
text-align: var(--pas-t-a);]Passive Wisdom [border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);](Perception)[/border][/border][comment]-- Passive Perception Circle --[/comment][border=transparent;
flex: 0 0 var(--pro-bon-s);
box-sizing: border-box;
height: var(--pro-bon-s);
border-radius: var(--pro-b-r);
background: var(--color-1);
padding: 0px;
color: rgb(var(--color-b));
font-size: var(--f-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]10[/border][/border][comment]-- Passive Investigation Container --[/comment][border=transparent;
flex: var(--pas-flex);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--stats-gap);][comment]-- Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;
text-align: var(--pas-t-a);]Passive Intelligence [border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);](Investigation)[/border][/border][comment]-- Passive Investigation Circle --[/comment][border=transparent;
flex: 0 0 var(--pro-bon-s);
box-sizing: border-box;
height: var(--pro-bon-s);
border-radius: var(--pro-b-r);
background: var(--color-1);
padding: 0px;
color: rgb(var(--color-b));
font-size: var(--f-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]13[/border][/border][comment]-- Passive Insight Container --[/comment][border=transparent;
flex: var(--pas-flex);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--stats-gap);][comment]-- Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;
text-align: var(--pas-t-a);]Passive Wisdom [border=transparent;
display: inline;
padding: 0px;
color: var(--bar-c);](Insight)[/border][/border][comment]-- Passive Insight Circle --[/comment][border=transparent;
flex: 0 0 var(--pro-bon-s);
box-sizing: border-box;
height: var(--pro-bon-s);
border-radius: var(--pro-b-r);
background: var(--color-1);
padding: 0px;
color: rgb(var(--color-b));
font-size: var(--f-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]10[/border][/border][/border][comment]
-- Passives End --[/comment][comment]

-- Combat + Attacks + Prof Container --[/comment][border=transparent;
flex: 3 1 100%;
box-sizing: border-box;
border-bottom: var(--stats-b);
padding: var(--stats-p) 0px;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--com-atk-prof-gap);][comment]

-- Combat Container --[/comment][border=transparent;
flex: var(--com-atk-prof-flex);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;][comment]

-- HP Container --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
border-bottom: var(--stats-b);
padding: 0px 0px var(--stats-p) 0px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
gap: var(--stats-gap);][comment]-- HP Bar Container --[/comment][border=transparent;
flex: 1 1 50%;
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- HP Bar Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: var(--bar-c);
font-size: var(--bar-s);
line-height: 1.3;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--bar-t-gap);][border=transparent;
padding: 0px;]HP [fa]fas fa-caret-right[/fa][/border][comment]-- Points --[/comment][border=transparent;
padding: 0px;]26/38[/border][/border][comment]-- HP Bar --[/comment][border=transparent;
width: 100%;
box-sizing: border-box;
height: var(--bar-h);
padding: 0px;
background: var(--hp-g);][/border][/border][comment]-- Temp HP Container --[/comment][border=transparent;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-items: flex-end;
align-items: center;
gap: var(--bar-gap);][comment]-- Temp HP --[/comment][border=transparent;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Temp HP[/border][comment]-- Temp HP Circle --[/comment][border=transparent;
box-sizing: border-box;
width: var(--pro-bon-s);
height: var(--pro-bon-s);
border-radius: var(--pro-b-r);
box-sizing: border-box;
background: var(--field-bg);
padding: 0px;
color: var(--field-c);
font-size: var(--f-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]0[/border][/border][/border][comment]

-- SPD + INIT + Armour + Hit Container --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--stats-p) 0px 0px 0px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
gap: var(--stats-gap);][comment]-- SPD Class Container --[/comment][border=transparent;
flex: var(--com-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--bar-gap);][comment]-- SPD Class Label --[/comment][border=transparent;
flex: 0 0 var(--stat-w);
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]SPD[/border][comment]-- SPD Class Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;
text-align: right;]30ft[/border][/border][comment]-- INIT Container --[/comment][border=transparent;
flex: var(--com-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--bar-gap);][comment]-- INIT Label --[/comment][border=transparent;
flex: 0 0 var(--stat-w);
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]INIT[/border][comment]-- INIT Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;
text-align: right;]0[/border][/border][comment]--  Armour Class Container --[/comment][border=transparent;
flex: var(--com-flex);
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--bar-gap);][comment]--  Armour Class Label --[/comment][border=transparent;
flex: 0 0 100px;
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Armour Class[/border][comment]-- Armour Class Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;
text-align: right;]10[/border][/border][comment]-- Hit Dice Container --[/comment][border=transparent;
flex: 1 1 100%;
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--bar-gap);][comment]-- Hit Dice Label --[/comment][border=transparent;
flex: 0 0 100px;
box-sizing: border-box;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Hit Dice[/border][comment]-- Hit Dice Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: 1;
text-align: right;]1D8[/border][/border][comment]-- Extra Field --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--box-field-l-h);]"A quote or something — whatever you want; this is here to fill space."[/border][/border][comment]-- SPD + INIT + Armour + Hit End --[/comment][/border][comment]
-- Combat End --[/comment][comment]

-- Attacks + Spells Container --[/comment][border=transparent;
flex: var(--com-atk-prof-flex);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Attacks Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Attacks & Spells[/border][comment]-- Attack Field 1 --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--box-field-l-h);
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--bar-t-gap);][comment]-- Attack --[/comment][border=transparent;
padding: 0px;]ATTACK 1 [fa]fas fa-caret-right[/fa][/border][comment]-- ATK Bonus --[/comment][border=transparent;
padding: 0px;]ATK BONUS [fa]fas fa-caret-right[/fa][/border][comment]-- DMG/TYPE --[/comment][border=transparent;
padding: 0px;]DMG/TYPE[/border][/border][comment]-- Attack Field 2 --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--box-field-l-h);
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--bar-t-gap);][comment]-- Attack --[/comment][border=transparent;
padding: 0px;]ATTACK 2 [fa]fas fa-caret-right[/fa][/border][comment]-- ATK Bonus --[/comment][border=transparent;
padding: 0px;]ATK BONUS [fa]fas fa-caret-right[/fa][/border][comment]-- DMG/TYPE --[/comment][border=transparent;
padding: 0px;]DMG/TYPE[/border][/border][comment]-- Attack Field 3 --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--box-field-l-h);
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--bar-t-gap);][comment]-- Attack --[/comment][border=transparent;
padding: 0px;]ATTACK 3 [fa]fas fa-caret-right[/fa][/border][comment]-- ATK Bonus --[/comment][border=transparent;
padding: 0px;]ATK BONUS [fa]fas fa-caret-right[/fa][/border][comment]-- DMG/TYPE --[/comment][border=transparent;
padding: 0px;]DMG/TYPE[/border][/border][comment]-- Attack Field 4 --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--box-field-l-h);
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--bar-t-gap);][comment]-- Attack --[/comment][border=transparent;
padding: 0px;]ATTACK 4 [fa]fas fa-caret-right[/fa][/border][comment]-- ATK Bonus --[/comment][border=transparent;
padding: 0px;]ATK BONUS [fa]fas fa-caret-right[/fa][/border][comment]-- DMG/TYPE --[/comment][border=transparent;
padding: 0px;]DMG/TYPE[/border][/border][comment]-- Notes Field --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--box-field-l-h);]Notes about attacks here
Another line[/border][/border][comment]
-- Attacks End --[/comment][comment]
-- Combat End --[/comment][comment]

-- Proficiencies Container --[/comment][border=transparent;
flex: var(--com-atk-prof-flex);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Proficiencies Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Proficiencies[/border][comment]-- Proficiencies Field --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--box-field-l-h);]ARMOUR
[border=transparent;
display: inline-block;
margin: var(--field-block-m);
border-left: var(--field-block-b);
padding: var(--field-block-p);]Armour 1[/border]
WEAPONS
[border=transparent;
display: inline-block;
margin: var(--field-block-m);
border-left: var(--field-block-b);
padding: var(--field-block-p);]Weapon 1, Weapon 2[/border]
TOOLS
[border=transparent;
display: inline-block;
margin: var(--field-block-m);
border-left: var(--field-block-b);
padding: var(--field-block-p);]Tool 1, Tool 2[/border]
LANGUAGES
[border=transparent;
display: inline-block;
margin: var(--field-block-m);
border-left: var(--field-block-b);
padding: var(--field-block-p);]Language 1, Language 2[/border][/border][/border][comment]
-- Proficiencies End --[/comment][/border][comment]
-- Combat + Attacks + Prof End --[/comment][/border][comment]
-- Skills + Combat + Attacks + Prof End --[/comment][comment]

---------------------- NEW PAGE ----------------------

-- Equip + Persona + Features Page --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
min-height: calc((var(--p) * 2) + var(--img-h));
padding: var(--p) 0px;][comment]

-- Equip + Persona + Features Container --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
min-height: var(--img-h);
border-top: var(--stats-b);
border-bottom: var(--stats-b);
padding: var(--stats-p) 0px;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--com-atk-prof-gap);][comment]

-- Features Container --[/comment][border=transparent;
flex: 2 1 260px;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Features Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Features & Traits[/border][comment]-- Features Field --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--box-field-l-h);]CLASS FEATURES
[border=transparent;
display: inline-block;
margin: var(--field-block-m);
border-left: var(--field-block-b);
padding: var(--field-block-p);]Feature 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feature 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feature 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border]
RACIAL TRAITS
[border=transparent;
display: inline-block;
margin: var(--field-block-m);
border-left: var(--field-block-b);
padding: var(--field-block-p);]Trait 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Trait 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Trait 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border]
FEATS
[border=transparent;
display: inline-block;
margin: var(--field-block-m);
border-left: var(--field-block-b);
padding: var(--field-block-p);]Feat 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feat 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border][/border][/border][comment]
-- Features End --[/comment][comment]

-- Equip Container --[/comment][border=transparent;
flex: var(--com-atk-prof-flex);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--pers-gap);][comment]

-- Money Container --[/comment][border=transparent;
flex: 1 1;
width: 100%;
border-bottom: var(--stats-b);
padding: 4px 0px var(--stats-p) 0px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--p-gap);][comment]-- CP Container --[/comment][border=transparent;
flex: var(--p-flex);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--bar-gap);][comment]-- CP Label --[/comment][border=transparent;
flex: 1 1;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;
text-align: var(--pas-t-a);]CP[/border][comment]-- CP Circle --[/comment][border=transparent;
flex: 0 0 var(--pro-bon-s);
box-sizing: border-box;
height: var(--pro-bon-s);
border-radius: var(--pro-b-r);
background: var(--cp);
padding: 0px;
color: rgb(var(--color-b));
font-size: var(--f-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]5[/border][/border][comment]-- CP End --[/comment][comment]-- SP Container --[/comment][border=transparent;
flex: var(--p-flex);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--bar-gap);][comment]-- SP Label --[/comment][border=transparent;
flex: 1 1;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;
text-align: var(--pas-t-a);]SP[/border][comment]-- SP Circle --[/comment][border=transparent;
flex: 0 0 var(--pro-bon-s);
box-sizing: border-box;
height: var(--pro-bon-s);
border-radius: var(--pro-b-r);
background: var(--sp);
padding: 0px;
color: rgb(var(--color-b));
font-size: var(--f-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]0[/border][/border][comment]-- SP End --[/comment][comment]-- EP Container --[/comment][border=transparent;
flex: var(--p-flex);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--bar-gap);][comment]-- EP Label --[/comment][border=transparent;
flex: 1 1;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;
text-align: var(--pas-t-a);]EP[/border][comment]-- EP Circle --[/comment][border=transparent;
flex: 0 0 var(--pro-bon-s);
box-sizing: border-box;
height: var(--pro-bon-s);
border-radius: var(--pro-b-r);
background: var(--ep);
padding: 0px;
color: rgb(var(--color-b));
font-size: var(--f-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]0[/border][/border][comment]-- EP End --[/comment][comment]-- GP Container --[/comment][border=transparent;
flex: var(--p-flex);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--bar-gap);][comment]-- GP Label --[/comment][border=transparent;
flex: 1 1;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;
text-align: var(--pas-t-a);]GP[/border][comment]-- GP Circle --[/comment][border=transparent;
flex: 0 0 var(--pro-bon-s);
box-sizing: border-box;
height: var(--pro-bon-s);
border-radius: var(--pro-b-r);
background: var(--gp);
padding: 0px;
color: rgb(var(--color-b));
font-size: var(--f-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]20[/border][/border][comment]-- GP End --[/comment][comment]-- PP Container --[/comment][border=transparent;
flex: var(--p-flex);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--bar-gap);][comment]-- PP Label --[/comment][border=transparent;
flex: 1 1;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;
text-align: var(--pas-t-a);]PP[/border][comment]-- PP Circle --[/comment][border=transparent;
flex: 0 0 var(--pro-bon-s);
box-sizing: border-box;
height: var(--pro-bon-s);
border-radius: var(--pro-b-r);
background: var(--pp);
padding: 0px;
color: rgb(var(--color-b));
font-size: var(--f-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]0[/border][/border][comment]-- PP End --[/comment][/border][comment]-
- Money End --[/comment][comment]

-- Equipment Container --[/comment][border=transparent;
flex: 1 1;
width: 100%;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Equipment Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Equipment[/border][comment]-- Equipment Field --[/comment][comment]-- Attack Field 1 --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--box-field-l-h);
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--bar-t-gap);][comment]-- Armour --[/comment][border=transparent;
padding: 0px;]ARMOUR [fa]fas fa-caret-right[/fa][/border][comment]-- AC--[/comment][border=transparent;
padding: 0px;]AC[/border][/border][border=transparent;
flex: 1 1;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--pers-field-l-h);]Equipment 1
Equipment 2
Equipment 3
Equipment 4
Equipment 5
Equipment 6
Equipment 7
Equipment 8
Equipment 9
Equipment 10
Equipment 11
Equipment 12[/border][/border][/border][comment]
-- Equip End --[/comment][comment]

-- Persona Container --[/comment][border=transparent;
flex: var(--com-atk-prof-flex);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--pers-gap);][comment]-- Personality Container --[/comment][border=transparent;
flex: 1 1;
width: 100%;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Personality Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Personality Traits[/border][comment]-- Personality Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--pers-field-l-h);]I like to read and memorize poetry. It keeps me calm and brings me fleeting moments of happiness.
I don’t talk about the thing that torments me. I’d rather not burden others with my curse.[/border][/border][comment]-- Ideals Container --[/comment][border=transparent;
flex: 1 1;
width: 100%;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Ideals Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Ideals[/border][comment]-- Ideals Field --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--pers-field-l-h);]I’ll stop the spirits that haunt me or die trying.[/border][/border][comment]-- Bonds Container --[/comment][border=transparent;
flex: 1 1;
width: 100%;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Bonds Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Bonds[/border][comment]-- Bonds Field --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--pers-field-l-h);]I keep my thoughts and discoveries in a journal. My journal is my legacy.[/border][/border][comment]-- Flaws Container --[/comment][border=transparent;
flex: 1 1;
width: 100%;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Flaws Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Flaws[/border][comment]-- Flaws Field --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--pers-field-l-h);]I have certain rituals that I must follow every day. I can never break them.[/border][/border][/border][comment]
-- Persona End --[/comment][/border][comment]
--Equip + Persona + Features Container End --[/comment][/border][comment]
--Equip + Persona + Features Page End --[/comment][/border][/border]
[/border][/border][/font]
Click to expand...
hi hi ! i adapted your dnd cytus character sheet for a kingdom hearts roleplay over here if you'd like to see
i absolutely adore this sheet sooo so much that i wanted to figure out a way for it to work for my dice-light kh rp ;v; thank you so much for your hard work! 💜
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 3 (members: 0, guests: 3)

Similar threads

DaydreamNarrator
Closed found the solution
Replies
0
Views
152
DaydreamNarrator
DaydreamNarrator
Back
Top