• 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

Hahaha it looks so cute, honestly! I love how the sun and clouds look like they're dangling from strings! :closed eyes open smile:

(In case anyone's wondering- my username actually came from WoW! I'm playing a Draenei Beast Master, and that race just reminded me of the Andalites from Animorphs; one of them was named Aximili-Esgarrouth-Isthill. And the name kinda stuck xD)
SLKJfsldk thank you, I'm glad you don't hate it. <3 The strings were meant to make it look like set pieces on a play, but I dunno how much it actually came through, especially without the curtains.

(I've thought of many reasons, but I didn't expect that to be one behind it. 😂)
 
Nanobytes
The first code is an accordion-tab combination in the hacker/shell(?) aesthetic. Eye-killing colours, bad padding and all. You're welcome.
😌
The second came about because I realized I could make the bar above the accordion instead — it's also a lot simpler. The code for the first one is... really long. Like scroll for 20 seconds long. Now that I think about it, you could probably take the tabs out to use on its own — if that’s what you’re looking for, just pop me a note and I’ll add that version up.

It's best to keep the tab titles at 6 characters or less, and if you change one of them, remember to change all four versions of that single tab (use Ctrl+F).

If you think this reminds you of a username above this, you're probably right. @Nano

I was planning to make a code for every commenter bc I thought like, there would be maybe one comment. But no, y'all just had to comment more. Since I don't have the energy for that, I quit this self-assigned mission. To that one commenter, plz forgive me. Know that I love y’all anyway.


Click Fingerprint



  • Basic
    Bio
    People
    Extra
    Art \\ Eh Macmillan
    Alias \\ xViva
    Age \\ unknown
    Gender \\ unknown
    Motto \\ Vivat Libertas

    Exploits \\
    - Omni Corp Database Incident -
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

    - Ladonine Research Removal -
    Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor, sit amet lobortis est. Suspendisse consectetur lorem sit amet nisl hendrerit, sed fringilla quam commodo.




Code:
[font=Overpass Mono][border=transparent;
position: relative;
top: 5px;
margin: auto;
max-width: 900px;
padding: 0px;
text-align: center;]Click Fingerprint[/border][border=transparent;

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

visibility: hidden;
position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: flex-start;
margin: auto;
box-sizing: border-box;
max-width: 900px;
padding: 0px;

--c-a: #6bcfd4; /* Accent colour */
--c-b: black; /* Base colour */
--b-w: 1px; /* Border width */
--b: var(--b-w) solid var(--c-a);

--scan-w: 160px;
--scan-h: 180px;
--scan-bg: url('https://thumbs.gfycat.com/CooperativeIcyCats-size_restricted.gif') no-repeat 50% 55% / 140%, var(--c-b);  /* Fingerprint GIF URL , if you change the image and it's too big or small in window, change percentage after slash (or default to cover) */

--bar-h: 22px;
--bar-p: 3px;

--button-m: 2px;
--button-s: 18px;
--button-p: 2px 0px 0px 1px;
--min-s: 12px;
--max-s: 12px;

--tabs-l: -10px;

--tab-l: calc(0px - var(--tabs-l) + 5px);
--tab-w: 64px;
--tab-h: 26px;
--tab-p: 2px;
--tab-b: calc(2 * var(--b-w)) solid var(--c-b);

--win-t: var(--tab-h);
--win-l: calc(0px - var(--tabs-l));
--win-w: 100%;
--win-h: min(400px, 76vh); /* Main window height, change px number for a longer or shorter content window on desktop */

--img-m: 10px 10px var(--text-p) 10px;
--img-w: 220px;
--img-h: 300px;

/* Image URLs */
--img-1: url('https://64.media.tumblr.com/54b5e64e43cee9f92c47c02a2ac46d16/tumblr_no89ppCLcw1qgrqdko1_1280.png') 50% -10% / cover;
--img-2: url('https://cdna.artstation.com/p/assets/images/images/007/635/920/large/a-04.jpg?1507515544') 50% -10% / cover;
--img-3: url('https://i.pinimg.com/originals/57/41/0c/57410ce7bd93683d95e404af331aeee0.jpg') 50% -10% / cover;

--art-p: 5px;
--art-s: 0.9em; /* Art credit font size */
--art-c: rgba(0, 0, 0, 0.5); /* Art credit background colour */

--text-p: 10px; /* Text padding */
--text-c: #9fe0e3; /* Text colour */]

[comment]-- Accordion --[/comment]
[accordion=100%]
{slide=[comment]-- Fingerprint Window --[/comment][border=transparent;
visibility: visible;
margin: auto;
box-sizing: border-box;
max-width: var(--scan-w);
height: var(--scan-h);
padding: 0px;
border: var(--b);
background: var(--scan-bg);][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][/border]}[comment]-- Slide Body --[/comment][border=transparent;
visibility: visible;
position: relative;
left: var(--tabs-l);
margin: auto;
margin-bottom: calc(var(--win-h) - var(--tab-h));
box-sizing: border-box;
width: 100%;
padding: 0px;][comment]-- Actual Tabs --[/comment][tabs]

[comment]-- Tab 1 --[/comment]
[tab=.][comment]-- Tabs --[/comment][border=transparent;
position: absolute;
top: 0px;
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--text-c);
text-align: center;
background: var(--c-b);
pointer-events: none;]Basic[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + var(--tab-w));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Bio[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (2 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]People[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (3 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Extra[/border][comment]-- Tab Window --[/comment][border=transparent;
position: absolute;
top: var(--win-t);
left: var(--win-l);
box-sizing: border-box;
width: var(--win-w);
height: var(--win-h);
padding: 0px;
border: var(--b);
background: var(--c-b);][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
width: 100%;
height: calc(var(--win-h) - var(--bar-h) - (2 * var(--b-w)));
padding: var(--text-p);
color: var(--text-c);
line-height: 130%;
overflow: auto;][comment]-- Image Window --[/comment][border=transparent;
margin: var(--img-m);
box-sizing: border-box;
width: var(--img-w);
height: var(--img-h);
float: right;
padding: 0px;
border: var(--b);
background: var(--img-1);
display: flex;
flex-flow: row wrap;
justify-content: flex-end;][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Artist Credit --[/comment][border=transparent;
align-self: flex-end;
padding: var(--art-p);
font-size: var(--art-s);
background: var(--art-c);][b]Art \\[/b] Eh Macmillan[/border][/border][b]Alias \\[/b] xViva
[b]Age \\[/b] unknown
[b]Gender \\[/b] unknown
[b]Motto \\[/b] Vivat Libertas

[b]Exploits \\[/b]
- Omni Corp Database Incident -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

- Ladonine Research Removal -
Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor, sit amet lobortis est. Suspendisse consectetur lorem sit amet nisl hendrerit, sed fringilla quam commodo.[/border][/border][/tab]


[comment]-- Tab 2 --[/comment]
[tab=.][comment]-- Tabs --[/comment][border=transparent;
position: absolute;
top: 0px;
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Basic[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + var(--tab-w));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--text-c);
text-align: center;
background: var(--c-b);
pointer-events: none;]Bio[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (2 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]People[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (3 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Extra[/border][comment]-- Tab Window --[/comment][border=transparent;
position: absolute;
top: var(--win-t);
left: var(--win-l);
box-sizing: border-box;
width: var(--win-w);
height: var(--win-h);
padding: 0px;
border: var(--b);
background: var(--c-b);][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
width: 100%;
height: calc(var(--win-h) - var(--bar-h) - (2 * var(--b-w)));
padding: var(--text-p);
color: var(--text-c);
line-height: 130%;
overflow: auto;][comment]-- Image Window --[/comment][border=transparent;
margin: var(--img-m);
box-sizing: border-box;
width: var(--img-w);
height: var(--img-h);
float: left;
padding: 0px;
border: var(--b);
background: var(--img-2);
display: flex;
flex-flow: row wrap;
justify-content: flex-end;][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Artist Credit --[/comment][border=transparent;
align-self: flex-end;
padding: var(--art-p);
font-size: var(--art-s);
background: var(--art-c);][b]Art \\[/b] 手指断了 a[/border][/border][b]Persona \\[/b]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

[b]Bio \\[/b]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet. Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor, sit amet lobortis est. Suspendisse consectetur lorem sit amet nisl hendrerit, sed fringilla quam commodo.

 Maecenas vulputate mi id nisl suscipit imperdiet. Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor.[/border][/border][/tab]

[comment]-- Tab 3 --[/comment]
[tab=.][comment]-- Tabs --[/comment][border=transparent;
position: absolute;
top: 0px;
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Basic[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + var(--tab-w));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Bio[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (2 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--text-c);
text-align: center;
background: var(--c-b);
pointer-events: none;]People[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (3 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Extra[/border][comment]-- Tab Window --[/comment][border=transparent;
position: absolute;
top: var(--win-t);
left: var(--win-l);
box-sizing: border-box;
width: var(--win-w);
height: var(--win-h);
padding: 0px;
border: var(--b);
background: var(--c-b);][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
width: 100%;
height: calc(var(--win-h) - var(--bar-h) - (2 * var(--b-w)));
padding: var(--text-p);
color: var(--text-c);
line-height: 130%;
overflow: auto;][comment]-- Image Window --[/comment][border=transparent;
margin: var(--img-m);
box-sizing: border-box;
width: var(--img-w);
height: var(--img-h);
float: right;
padding: 0px;
border: var(--b);
background: var(--img-3);
display: flex;
flex-flow: row wrap;
justify-content: flex-end;][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Artist Credit --[/comment][border=transparent;
align-self: flex-end;
padding: var(--art-p);
font-size: var(--art-s);
background: var(--art-c);][b]Art \\[/b] Eh Macmillan[/border][/border][b]Acquaintances \\[/b] loADer, 396_, wen

[b]Family \\[/b] unknown[/border][/border][/tab]

[tab=.][comment]-- Tabs --[/comment][border=transparent;
position: absolute;
top: 0px;
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Basic[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + var(--tab-w));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Bio[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (2 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]People[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (3 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--text-c);
text-align: center;
background: var(--c-b);
pointer-events: none;]Extra[/border][comment]-- Tab Window --[/comment][border=transparent;
position: absolute;
top: var(--win-t);
left: var(--win-l);
box-sizing: border-box;
width: var(--win-w);
height: var(--win-h);
padding: 0px;
border: var(--b);
background: var(--c-b);][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
width: 100%;
height: calc(var(--win-h) - var(--bar-h) - (2 * var(--b-w)));
padding: var(--text-p);
color: var(--text-c);
line-height: 130%;
overflow: auto;][b]Music \\[/b]

[comment]-- Music Window --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
max-width: calc(2 * var(--img-w));
height: auto;
padding: 0px;
border: var(--b);
display: flex;
flex-flow: row wrap;
justify-content: flex-end;][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Youtube link characters after = sign -->[/comment][MEDIA=youtube]UnIhRpIT7nc[/MEDIA][comment]-- Artist Credit --[/comment][border=transparent;
align-self: flex-end;
padding: var(--art-p);
font-size: var(--art-s);
background: var(--art-c);][b]Music \\[/b] inabakumori[/border][/border][/border][/border][/tab]

[/tabs][/border]{/slide}
[/accordion]

[/border][/font]

Click Bar
Art \\ Eh Macmillan
Alias \\ xViva
Age \\ unknown
Gender \\ unknown
Motto \\ Vivat Libertas

---​

Persona \\
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

Exploits \\
- Omni Corp Database Incident -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

- Ladonine Research Removal -
Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor, sit amet lobortis est. Suspendisse consectetur lorem sit amet nisl hendrerit, sed fringilla quam commodo.


Code:
[font=Overpass Mono][border=transparent;
position: relative;
top: 10px;
margin: auto;
max-width: 900px;
padding: 0px;
text-align: center;]Click Bar[/border][border=transparent;

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

visibility: hidden;
position: relative;
margin: auto;
max-width: 900px; /* Max width */
padding: 0px;

--c-a: #6bcfd4; /* Accent colour */
--c-b: black; /* Base colour */
--b-w: 1px; /* Border width */
--b: var(--b-w) solid var(--c-a);

--bar-h: 22px;
--bar-p: 3px;

--button-m: 2px;
--button-s: 18px;
--button-p: 1px 0px 0px 1px;
--min-s: 12px;
--max-s: 12px;

--win-t: -13px;
--win-l: 0px;
--win-w: 100%;

--img-m: 10px 10px var(--text-p) 10px;
--img-w: 240px;
--img-h: 320px;
--img: url('https://64.media.tumblr.com/54b5e64e43cee9f92c47c02a2ac46d16/tumblr_no89ppCLcw1qgrqdko1_1280.png') 50% -10% / cover; /* Image URL */

--art-p: 5px;
--art-s: 0.9em; /* Art credit font size */
--art-c: rgba(0, 0, 0, 0.5); /* Art credit background colour */

--text-p: 10px; /* Text padding */
--text-c: #9fe0e3; /* Text colour */][accordion=100%]
{slide=[comment]-- Bar --[/comment][border=transparent;
visibility: visible;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border]}[comment]-- Slide Body --[/comment][comment]-- Tab Window --[/comment][border=transparent;
visibility: visible;
position: relative;
top: var(--win-t);
left: var(--win-l);
box-sizing: border-box;
width: var(--win-w);
padding: 0px;
border: var(--b);
background: var(--c-b);][comment]-- Text --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
width: 100%;
height: calc(var(--win-h) - var(--bar-h) - (2 * var(--b-w)));
padding: var(--text-p);
color: var(--text-c);
line-height: 130%;][comment]-- Image Window --[/comment][border=transparent;
margin: var(--img-m);
box-sizing: border-box;
width: var(--img-w);
height: var(--img-h);
float: right;
padding: 0px;
border: var(--b);
background: var(--img);
display: flex;
flex-flow: row wrap;
justify-content: flex-end;][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Artist Credit --[/comment][border=transparent;
align-self: flex-end;
padding: var(--art-p);
font-size: var(--art-s);
background: var(--art-c);][b]Art \\[/b] Eh Macmillan[/border][/border][comment]-- Text --[/comment][b]Alias \\[/b] xViva
[b]Age \\[/b] unknown
[b]Gender \\[/b] unknown
[b]Motto \\[/b] Vivat Libertas

[center]---[/center]

[b]Persona \\[/b]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

[b]Exploits \\[/b]
- Omni Corp Database Incident -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

- Ladonine Research Removal -
Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor, sit amet lobortis est. Suspendisse consectetur lorem sit amet nisl hendrerit, sed fringilla quam commodo.[/border][/border]{/slide}
[/accordion][/border][/font]

This code is amazing I have been looking for a cyber neon bbcode layout and this scratched every darn itch. You my friend are an artist!
 
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 plagiarized 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.


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://static.wikia.nocookie.net/cytus/images/e/e1/Bo_Bo.png/revision/latest/scale-to-width-down/700?cb=20201103143638') 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://static.wikia.nocookie.net/cytus/images/d/dc/Graff.J_%28Full%29.png/revision/latest/scale-to-width-down/529?cb=20201218155156') 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]
If I gave you the necessary info, could you change it for me? (The character info, I mean)
 
a-accordions?? you truly live up to your profile picture my dear sir/madame because holy shit you're a goddamn magician
LKjflsdfjd no u. Just don't look at the code in a different mode and we can still pretend magic exists in this world.
 
If I gave you the necessary info, could you change it for me? (The character info, I mean)
NOT SOMEONE ACTUALLY USING THIS CODE DSLKFJDL. THANK YOU???

Yes, yes, I can, valued customer. It is kinda... lengthy and complicated, sorry about that.
 
Colour/Less
A tabs code for a certain Spec. Colorless Spectrum Colorless Spectrum

Another day, another browser incompatibility. I swear this is my trademark now, just not being able to see the full code in any browser but Chrome (and its variants) at the exact date it was posted. Today's course includes invisible quotes on Safari and no grayscale backdrop-filter showing for Firefox. Yay.

I forgot to add "Click Tabs", but it should be obvious where they are, right? Right?

Edit: Grayscale backdrop-filer shows on Firefox now. Yay.

Tabs
Hidden Scroll


COLOUR
LESS
  • BASIC INFORMATION
    NAME
    S. P. Lu
    NICKNAME
    Speculoos
    AGE
    N/A
    GENDER
    Female

    HEIGHT
    N/A
    WEIGHT
    N/A

    AFFILIATION
    N/A
    APPEARANCE
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.

    Donec sapien nulla, dapibus quis risus eget, iaculis mollis est. Sed tincidunt convallis lobortis. Sed eget odio id nunc condimentum eleifend dignissim vitae tellus. Praesent non ligula elementum, posuere eros sit amet, ultrices nulla.
    Artist: Koyori n
    Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
    - UNKNOWN


Code:
[comment][font=Rubik][font=Mulish]:^[/font][/font][/comment][border=transparent;

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

position: relative;
margin: auto;
box-sizing: border-box;
max-width: var(--w);
padding: 0px;

/* Accent Colours */
--color-1: #68b3f0; 
--color-2: #76deec;
--color-3: #fe89cd;
--color-b: #2D2E33; /* Base colour */

--w: 1000px;
--h: min(86vh, 600px);

--f-tabs-d: 10px;
--f-tabs-m: calc(max(var(--content-con-b-w), var(--stripes-d)) + var(--f-tabs-d));
--f-tabs-w: 210px;

--colour-tab-l: calc(50% - (var(--f-tabs-w) / 2) + 20px);
--colour-tab-w: 91px;

--less-tab-l: 9px;
--less-tab-w: 70px;

--tabs-h: 24px;
--tabs-w: 210px;

--d: 10px;

--stripes-d: 16px;
--stripes-w: 250px;
--stripes-h: 200px;

--stripes-bg-t-1: linear-gradient(150deg, var(--color-1) 10%, transparent calc(10% + 1px) 15%, var(--color-2) calc(15% + 1px) 25%, transparent calc(25% + 1px) 30%, var(--color-3) calc(30%  + 1px) 40%, transparent calc(40%  + 1px));
--stripes-bg-b-1: linear-gradient(-30deg, var(--color-1) 10%, transparent calc(10% + 1px) 15%, var(--color-2) calc(15% + 1px) 25%, transparent calc(25% + 1px) 30%, var(--color-3) calc(30% + 1px) 40%, transparent calc(40% + 1px));

--stripes-bg-t-2: linear-gradient(150deg, var(--color-2) 10%, transparent calc(10% + 1px) 15%, var(--color-3) calc(15% + 1px) 25%, transparent calc(25% + 1px) 30%, var(--color-1) calc(30% + 1px) 40%, transparent calc(40% + 1px));
--stripes-bg-b-2: linear-gradient(-30deg, var(--color-2) 10%, transparent calc(10% + 1px) 15%, var(--color-3)  calc(15% + 1px) 25%, transparent calc(25% + 1px) 30%, var(--color-1) calc(30% + 1px) 40%, transparent calc(40% + 1px));

--stripes-bg-t-3: linear-gradient(150deg, var(--color-3) 10%, transparent calc(10% + 1px) 15%, var(--color-1) calc(15% + 1px) 25%, transparent calc(25% + 1px) 30%, var(--color-2) calc(30% + 1px) 40%, transparent calc(40% + 1px));
--stripes-bg-b-3: linear-gradient(-30deg, var(--color-3) 10%, transparent calc(10% + 1px) 15%, var(--color-1) calc(15% + 1px) 25%, transparent calc(25% + 1px) 30%, var(--color-2) calc(30% + 1px) 40%, transparent calc(40% + 1px));

--tab-t: 8px;
--tab-l: calc(50% - 73px);
--tab-d: 60px;
--tab-w: 26px;

/* Tab Cover Borders, number before px is width */
--tab-b-1: 2px solid var(--color-1);
--tab-b-2: 2px solid var(--color-2);
--tab-b-3: 2px solid var(--color-3);

--con-w: 270px;
--con-p: 25px;
--con-gap: calc((var(--content-con-b-w) * 2) + 10px) 0px;

--content-con-b-w: 26px;
--content-con-b-w-s: 7px;
--content-con-b-bg: rgb(200, 200, 205); /* Content frame colour */

--text-con-bg: var(--color-b);

--header-m: 8px;
--header-h: 60px;
--header-p: 10px 16px;
--header-f-s: 1.8em; /* Header font size */
--header-f: 'Rubik', sans-serif; /* Header font, change font tag above if you change this */
--header-l-h: 1.5;

--header-bg-1: linear-gradient(173.3deg, var(--color-1) 49%, var(--color-b) calc(49% + 1px));
--header-t-bg-1: linear-gradient(173.3deg, var(--color-b) 49%, var(--color-1) calc(49% + 1px));

--header-bg-2: linear-gradient(173.3deg, var(--color-2) 49%, var(--color-b) calc(49% + 1px));
--header-t-bg-2: linear-gradient(173.3deg, var(--color-b) 49%, var(--color-2) calc(49% + 1px));

--header-bg-3: linear-gradient(173.3deg, var(--color-3) 49%, var(--color-b) calc(49% + 1px));
--header-t-bg-3: linear-gradient(173.3deg, var(--color-b) 49%, var(--color-3) calc(49% + 1px));

--triangle-s: 10px;

--triangle-bg-1: linear-gradient(135deg, var(--color-b) 50%, var(--color-2) calc(50% + 1px));
--triangle-bg-2: linear-gradient(135deg, var(--color-b) 50%, var(--color-3) calc(50% + 1px));
--triangle-bg-3: linear-gradient(135deg, var(--color-b) 50%, var(--color-1) calc(50% + 1px));

--text-p: 4px 20px;
--text-c: rgb(220, 220, 225); /* Text colour */
--text-f: 'Mulish', sans-serif; /* Text and image credit font, change font tag above if you change this */

--quote-p: 10px 8px 8px 10%;
--quote-f-s: 0.9em; /* Quote font size, increase or decrease by increments of .1 */

/* Image Variables
url('-- url here --') is the image URL
50% is the x-value, 0px is the y-value for image position
cover is image size, best to default to this */

--img-1: url('https://cdnb.artstation.com/p/assets/images/images/036/034/791/large/koyori-n-emily-billboard.jpg?1616558512') 50% 0px / cover; /* Image 1 */
--img-tri-bg-1: linear-gradient(160deg, transparent 85%, var(--color-2) calc(85% + 1px));
--quote-bg-1: linear-gradient(160deg, var(--color-2) 85%, var(--color-b) calc(85% + 1px));

--img-2: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4d94eabf-4257-437f-a08d-5ee63b69705f/dcaop0b-745a0982-7537-4969-ae93-0b92c2eca5c2.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRkOTRlYWJmLTQyNTctNDM3Zi1hMDhkLTVlZTYzYjY5NzA1ZlwvZGNhb3AwYi03NDVhMDk4Mi03NTM3LTQ5NjktYWU5My0wYjkyYzJlY2E1YzIuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.QusIRhdCrX6TdYrPAQOFRHc6xmUMvqAS6XyzZA9t798') 50% 0px / cover; /* Image 2 */
--img-tri-bg-2: linear-gradient(160deg, transparent 85%, var(--color-3) calc(85% + 1px));
--quote-bg-2: linear-gradient(160deg, var(--color-3) 85%, var(--color-b) calc(85% + 1px));

--img-3: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4d94eabf-4257-437f-a08d-5ee63b69705f/dd9aao3-5fded779-470b-4329-b2e8-7863f1b29606.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRkOTRlYWJmLTQyNTctNDM3Zi1hMDhkLTVlZTYzYjY5NzA1ZlwvZGQ5YWFvMy01ZmRlZDc3OS00NzBiLTQzMjktYjJlOC03ODYzZjFiMjk2MDYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.DyZa8PwHe1Sg9IYutcvv0cl_kHlHk1w5nX5Eh2GD5k0') 50% 0px / cover; /* Image 3 */
--img-tri-bg-3: linear-gradient(160deg, transparent 85%, var(--color-1) calc(85% + 1px));
--quote-bg-3: linear-gradient(160deg, var(--color-1) 85%, var(--color-b) calc(85% + 1px));][comment]

-- Filter Tab Covers --[/comment][comment]-- Colour Tab --[/comment][border=transparent;
position: absolute;
top: 0px;
left: var(--colour-tab-l);
box-sizing: border-box;
width: var(--colour-tab-w);
height: var(--tabs-h);
padding: 0px;
background: var(--text-c);
pointer-events: none;][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
color: var(--color-b);
background: linear-gradient(to right, var(--color-1), var(--color-2), var(--color-3));
background-clip: text;
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;
font-family: var(--header-f);
font-weight: bold;
filter: brightness(80%);
line-height: 1.6;
text-align: center;
padding: 0px;]COLOUR[/border][/border][comment]-- Less Tab --[/comment][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--colour-tab-l) + var(--colour-tab-w) + var(--less-tab-l));
box-sizing: border-box;
width: var(--less-tab-w);
height: var(--tabs-h);
padding: 0px;
background: var(--text-c);
color: var(--color-b);
font-family: var(--header-f);
font-weight: bold;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]LESS[/border][comment]

-- No Filter/Filter Tabs --[/comment][border=transparent;
margin: auto;
margin-bottom: var(--f-tabs-m);
width: var(--f-tabs-w);
height: var(--tabs-h);
padding: 0px;
overflow: hidden;][tabs]

[tab=000000].[/tab]

[tab=000][border=transparent;
position: absolute;
top: calc(var(--tabs-h) + var(--f-tabs-d));
left: calc(0px - var(--stripes-d));
width: calc(100% + (var(--stripes-d) * 2));
min-height: calc(var(--h) + (2 * max(var(--content-con-b-w), var(--stripes-d))));
padding: 0px;
-x-backdrop-filter: grayscale(98%);
-moz-backdrop-filter: grayscale(98%);
-o-backdrop-filter: grayscale(98%);
-webkit-backdrop-filter: grayscale(98%);
backdrop-filter: grayscale(98%);
pointer-events: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--con-gap);
z-index: 1;][comment]-- Fake Content Container --[/comment][border=transparent;
box-sizing: border-box;
flex: 5 1 var(--con-w);
min-width: var(--tabs-w);
height: calc(var(--h) + (2 * max(var(--content-con-b-w), var(--stripes-d))));
padding: 0px;][border=transparent;
padding: 0px;
opacity: 0;].[/border][/border][comment]-- Fake Image Container --[/comment][border=transparent;
box-sizing: border-box;
flex: 3 1  var(--con-w);
height: calc(var(--h) + (2 * max(var(--content-con-b-w), var(--stripes-d))));
padding: 0px;][/border][/border][/tab]

[/tabs][/border][comment]

-- Main Container --[/comment][border=transparent;
position: relative;
margin: max(var(--content-con-b-w), var(--stripes-d)) 0px;
width: 100%;
min-height: var(--h);
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--con-gap);
z-index: 0;][comment]-- Fake Content Container --[/comment][border=transparent;
box-sizing: border-box;
flex: 5 1 var(--con-w);
min-width: var(--tabs-w);
height: var(--h);
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;][comment]

-- Tabs Container --[/comment][border=transparent;
margin-top: var(--d);
box-sizing: border-box;
width: var(--tabs-w);
padding: 0px;][tabs]

[tab=.][comment]-- Tab Body 1 --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
min-height: var(--h);
background: var(--color-b);
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--con-gap);
pointer-events: none;][comment]

-- Stripes Top --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--stripes-d));
left: calc(0px - var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-t-1);
padding: 0px;
z-index: 0;][/border][comment]

-- Stripes Bottom --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--stripes-h) + var(--stripes-d));
left: calc(100% - var(--stripes-w) + var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-b-1);
padding: 0px;
z-index: 0;][/border][comment]

-- Content Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 5 1 var(--con-w);
min-width: var(--tabs-w);
height: var(--h);
padding: calc(var(--con-p) * 2) var(--con-p) 0px var(--con-p);][comment]

-- Tab Covers --[/comment][comment]-- Tab Cover 1 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-1);
border-radius: 50%;
background: var(--color-b);
color: var(--color-1);
filter: grayscale(98%);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + var(--tab-d));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-2);
border-radius: 50%;
background: var(--color-b);
color: var(--color-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-history[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + (var(--tab-d) * 2));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-3);
border-radius: 50%;
background: var(--color-b);
color: var(--color-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-sliders-h[/fa][/border][comment]

-- Content Border --[/comment][border=transparent;
position: absolute;
top: calc((var(--con-p) * 2) - var(--content-con-b-w-s));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Hidden Scroll Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0px;
overflow: hidden;
z-index: 1;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + var(--con-p));
height: 100%;
padding: 0px var(--con-p) 0px 0px;
background: var(--text-con-bg);
overflow-y: auto;
overflow-x: hidden;
pointer-events: auto;][comment]

Copy-paste the two sections below for more headers + text ↴

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-1);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-1);
background-clip: text;
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]BASIC INFORMATION[/border][/border][comment] 
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);][b]NAME[/b] [comment]-- Triangle Icon, copy section to get more triangles -->[/comment][border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border][comment]-- Triangle Icon End --[/comment] S. P. Lu
[b]NICKNAME[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] Speculoos
[b]AGE[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] N/A
[b]GENDER[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] Female

[b]HEIGHT[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] N/A
[b]WEIGHT[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] N/A

[b]AFFILIATION[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] N/A[/border][comment]
-- Text End --[/comment][comment]

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-1);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-1);
background-clip: text;
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]APPEARANCE[/border][/border][comment] 
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.

Donec sapien nulla, dapibus quis risus eget, iaculis mollis est. Sed tincidunt convallis lobortis. Sed eget odio id nunc condimentum eleifend dignissim vitae tellus. Praesent non ligula elementum, posuere eros sit amet, ultrices nulla.[/border][comment]
-- Text End --[/comment][/border][comment]
-- Hidden Scroll End --[/comment][/border][comment]
-- Hidden Scroll Container End --[/comment][/border][comment]
-- Content Container End --[/comment][comment]

-- Image Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 3 1  var(--con-w);
height: var(--h);
padding: 0px var(--con-p) calc(var(--con-p) * 2) var(--con-p);][comment]

-- Image Credit --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--con-p) - 10px);
left: 8px;
box-sizing: border-box;
color: var(--text-c);
font-size: 0.9em;
font-family: var(--text-f);
padding: 0px;
opacity: 0.8;][b]Artist:[/b] Koyori n[/border][comment]

-- Image Border --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--content-con-b-w));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Image --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-1);
padding: 0px;
z-index: 1;][comment]-- Image Triangle --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-tri-bg-1);
padding: 0px;
pointer-events: auto;][comment]

-- Image Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--quote-p);
color: var(--text-c);
background: var(--quote-bg-1);
background-clip: text;
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;
font-size: var(--quote-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);
text-align: right;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: flex-end;]Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
- UNKNOWN[/border][comment]
-- Image Text End --[/comment][/border][/border][comment]
-- Image End --[/comment][/border][comment]
-- Image Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 2 --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
min-height: var(--h);
background: var(--color-b);
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--con-gap);
pointer-events: none;][comment]

-- Stripes Top --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--stripes-d));
left: calc(0px - var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-t-2);
padding: 0px;
z-index: 0;][/border][comment]

-- Stripes Bottom --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--stripes-h) + var(--stripes-d));
left: calc(100% - var(--stripes-w) + var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-b-2);
padding: 0px;
z-index: 0;][/border][comment]

-- Content Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 5 1 var(--con-w);
min-width: var(--tabs-w);
height: var(--h);
padding: calc(var(--con-p) * 2) var(--con-p) 0px var(--con-p);][comment]

-- Tab Covers --[/comment][comment]-- Tab Cover 1 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-1);
border-radius: 50%;
background: var(--color-b);
color: var(--color-1);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + var(--tab-d));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-2);
border-radius: 50%;
background: var(--color-b);
color: var(--color-2);
filter: grayscale(98%);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-history[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + (var(--tab-d) * 2));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-3);
border-radius: 50%;
background: var(--color-b);
color: var(--color-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-sliders-h[/fa][/border][comment]

-- Content Border --[/comment][border=transparent;
position: absolute;
top: calc((var(--con-p) * 2) - var(--content-con-b-w-s));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Hidden Scroll Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0px;
overflow: hidden;
z-index: 1;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + var(--con-p));
height: 100%;
padding: 0px var(--con-p) 0px 0px;
background: var(--text-con-bg);
overflow-y: auto;
overflow-x: hidden;
pointer-events: auto;][comment]

Copy-paste the two sections below for more headers + text ↴

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-2);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-2);
background-clip: text;
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]PERSONALITY[/border][/border][comment] 
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.

[b]HOBBIES[/b] [comment]-- Triangle Icon, copy section to get more triangles -->[/comment][border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border][comment]-- Triangle Icon End --[/comment] Carrying noobs, beating up assholes
[b]LIKES[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border] N/A
[b]DISLIKES[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border] N/A[/border][comment]
-- Text End --[/comment][comment]

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-2);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-2);
background-clip: text;
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]BIOGRAPHY[/border][/border][comment] 
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.

Donec sapien nulla, dapibus quis risus eget, iaculis mollis est. Sed tincidunt convallis lobortis. Sed eget odio id nunc condimentum eleifend dignissim vitae tellus. Praesent non ligula elementum, posuere eros sit amet, ultrices nulla lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.

[b]ACQUAINTANCES[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border] N/A
[b]FRIENDS[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border] 10Green_Robo10, Pink.Sama
[b]FAMILY[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border] orangebro[/border][comment]
-- Text End --[/comment][/border][comment]
-- Hidden Scroll End --[/comment][/border][comment]
-- Hidden Scroll Container End --[/comment][/border][comment]
-- Content Container End --[/comment][comment]

-- Image Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 3 1  var(--con-w);
height: var(--h);
padding: 0px var(--con-p) calc(var(--con-p) * 2) var(--con-p);][comment]

-- Image Credit --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--con-p) - 10px);
left: 8px;
box-sizing: border-box;
color: var(--text-c);
font-size: 0.9em;
font-family: var(--text-f);
padding: 0px;
opacity: 0.8;][b]Artist:[/b] SeerLight[/border][comment]

-- Image Border --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--content-con-b-w));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Image --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-2);
padding: 0px;
z-index: 1;][comment]-- Image Triangle --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-tri-bg-2);
padding: 0px;
pointer-events: auto;][comment]

-- Image Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--quote-p);
color: var(--text-c);
background: var(--quote-bg-2);
background-clip: text;
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;
font-size: var(--quote-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);
text-align: right;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: flex-end;]Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
- WHO KNOWS[/border][comment]
-- Image Text End --[/comment][/border][/border][comment]
-- Image End --[/comment][/border][comment]
-- Image Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 3 --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
min-height: var(--h);
background: var(--color-b);
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--con-gap);
pointer-events: none;][comment]

-- Stripes Top --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--stripes-d));
left: calc(0px - var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-t-3);
padding: 0px;
z-index: 0;][/border][comment]

-- Stripes Bottom --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--stripes-h) + var(--stripes-d));
left: calc(100% - var(--stripes-w) + var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-b-3);
padding: 0px;
z-index: 0;][/border][comment]

-- Content Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 5 1 var(--con-w);
min-width: var(--tabs-w);
height: var(--h);
padding: calc(var(--con-p) * 2) var(--con-p) 0px var(--con-p);][comment]

-- Tab Covers --[/comment][comment]-- Tab Cover 1 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-1);
border-radius: 50%;
background: var(--color-b);
color: var(--color-1);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + var(--tab-d));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-2);
border-radius: 50%;
background: var(--color-b);
color: var(--color-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-history[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + (var(--tab-d) * 2));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-3);
border-radius: 50%;
background: var(--color-b);
color: var(--color-3);
filter: grayscale(98%);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-sliders-h[/fa][/border][comment]

-- Content Border --[/comment][border=transparent;
position: absolute;
top: calc((var(--con-p) * 2) - var(--content-con-b-w-s));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Hidden Scroll Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0px;
overflow: hidden;
z-index: 1;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + var(--con-p));
height: 100%;
padding: 0px var(--con-p) 0px 0px;
background: var(--text-con-bg);
overflow-y: auto;
overflow-x: hidden;
pointer-events: auto;][comment]

Copy-paste the two sections below for more headers + text ↴

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-3);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-3);
background-clip: text;
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]EXTRAS[/border][/border][comment] 
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);][b]SOMETHING[/b] [comment]-- Triangle Icon, copy section to get more triangles -->[/comment][border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-3);
padding: 0px;][/border][comment]-- Triangle Icon End --[/comment] N/A
[b]SOMETHING ELSE[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-3);
padding: 0px;][/border] N/A
[b]SOMETHING NOT[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-3);
padding: 0px;][/border] N/A
[b]SOMETHING BEYOND[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-3);
padding: 0px;][/border] N/A
[b]SOMETHING[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-3);
padding: 0px;][/border] N/A[/border][comment]
-- Text End --[/comment][comment]

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-3);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-3);
background-clip: text;
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]PLAYLIST[/border][/border][comment] 
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);][comment]-- Input characters after = in youtube link -->[/comment][MEDIA=youtube]kzdJkT4kp-A[/MEDIA][/border][comment]
-- Text End --[/comment][/border][comment]
-- Hidden Scroll End --[/comment][/border][comment]
-- Hidden Scroll Container End --[/comment][/border][comment]
-- Content Container End --[/comment][comment]

-- Image Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 3 1  var(--con-w);
height: var(--h);
padding: 0px var(--con-p) calc(var(--con-p) * 2) var(--con-p);][comment]

-- Image Credit --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--con-p) - 10px);
left: 8px;
box-sizing: border-box;
color: var(--text-c);
font-size: 0.9em;
font-family: var(--text-f);
padding: 0px;
opacity: 0.8;][b]Artist:[/b] SeerLight[/border][comment]

-- Image Border --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--content-con-b-w));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Image --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-3);
padding: 0px;
z-index: 1;][comment]-- Image Triangle --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-tri-bg-3);
padding: 0px;
pointer-events: auto;][comment]

-- Image Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--quote-p);
background: var(--quote-bg-3);
background-clip: text;
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;
color: var(--text-c);
font-size: var(--quote-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);
text-align: right;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: flex-end;]Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
- NOT ME[/border][comment]
-- Image Text End --[/comment][/border][/border][comment]
-- Image End --[/comment][/border][comment]
-- Image Container End --[/comment][/border][/tab]

[/tabs][/border][/border][comment]-- Fake Image Container --[/comment][border=transparent;
box-sizing: border-box;
flex: 3 1  var(--con-w);
height: var(--h);
padding: 0px;][/border][/border][/border]
 
Last edited:
Colour/Less
A tabs code for a certain Spec. Colorless Spectrum Colorless Spectrum

Another day, another browser incompatibility. I swear this is my trademark now, just not being able to see the full code in any browser but Chrome (and its variants) at the exact date it was posted. Today's course includes invisible quotes on Safari and no grayscale backdrop-filter showing for Firefox. Yay.

I forgot to add "Click Tabs", but it should be obvious where they are, right? Right?


COLOUR
LESS
  • BASIC INFORMATION
    NAME
    S. P. Lu
    NICKNAME
    Speculoos
    AGE
    N/A
    GENDER
    Female

    HEIGHT
    N/A
    WEIGHT
    N/A

    AFFILIATION
    N/A
    APPEARANCE
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.

    Donec sapien nulla, dapibus quis risus eget, iaculis mollis est. Sed tincidunt convallis lobortis. Sed eget odio id nunc condimentum eleifend dignissim vitae tellus. Praesent non ligula elementum, posuere eros sit amet, ultrices nulla.
    Artist: Koyori n
    Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
    - UNKNOWN


Code:
[comment][font=Rubik][font=Mulish]:^[/font][/font][/comment][border=transparent;

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

position: relative;
margin: auto;
box-sizing: border-box;
max-width: var(--w);
padding: 0px;

/* Accent Colours */
--color-1: #68b3f0;
--color-2: #76deec;
--color-3: #fe89cd;
--color-b: #2D2E33; /* Base colour */

--w: 1000px;
--h: min(86vh, 600px);

--f-tabs-d: 10px;
--f-tabs-m: calc(max(var(--content-con-b-w), var(--stripes-d)) + var(--f-tabs-d));
--f-tabs-w: 210px;

--colour-tab-l: calc(50% - (var(--f-tabs-w) / 2) + 20px);
--colour-tab-w: 91px;

--less-tab-l: 9px;
--less-tab-w: 70px;

--tabs-h: 24px;
--tabs-w: 210px;

--d: 10px;

--stripes-d: 16px;
--stripes-w: 250px;
--stripes-h: 200px;

--stripes-bg-t-1: linear-gradient(150deg, var(--color-1) 10%, transparent calc(10% + 1px) 15%, var(--color-2) calc(15%  + 1px) 25%, transparent calc(25%  + 1px) 30%, var(--color-3) calc(30%  + 1px) 40%, transparent calc(40%  + 1px));
--stripes-bg-b-1: linear-gradient(-30deg, var(--color-1) 10%, transparent calc(10%  + 1px) 15%, var(--color-2) calc(15%  + 1px) 25%, transparent calc(25%  + 1px) 30%, var(--color-3) calc(30%  + 1px) 40%, transparent calc(40%  + 1px));

--stripes-bg-t-2: linear-gradient(150deg, var(--color-2) 10%, transparent calc(10%  + 1px) 15%, var(--color-3) calc(15%  + 1px) 25%, transparent calc(25%  + 1px) 30%, var(--color-1) calc(30%  + 1px) 40%, transparent calc(40%  + 1px));
--stripes-bg-b-2: linear-gradient(-30deg, var(--color-2) 10%, transparent calc(10%  + 1px) 15%, var(--color-3)  calc(15%  + 1px) 25%, transparent calc(25%  + 1px) 30%, var(--color-1) calc(30%  + 1px) 40%, transparent calc(40%  + 1px));

--stripes-bg-t-3: linear-gradient(150deg, var(--color-3) 10%, transparent calc(10%  + 1px) 15%, var(--color-1) calc(15%  + 1px) 25%, transparent calc(25%  + 1px) 30%, var(--color-2) calc(30%  + 1px) 40%, transparent calc(40%  + 1px));
--stripes-bg-b-3: linear-gradient(-30deg, var(--color-3) 10%, transparent calc(10%  + 1px) 15%, var(--color-1) calc(15%  + 1px) 25%, transparent calc(25%  + 1px) 30%, var(--color-2) calc(30%  + 1px) 40%, transparent calc(40%  + 1px));

--tab-t: 8px;
--tab-l: calc(50% - 73px);
--tab-d: 60px;
--tab-w: 26px;

/* Tab Cover Borders, number before px is width */
--tab-b-1: 2px solid var(--color-1);
--tab-b-2: 2px solid var(--color-2);
--tab-b-3: 2px solid var(--color-3);

--con-w: 270px;
--con-p: 25px;
--con-gap: calc((var(--content-con-b-w) * 2) + 10px) 0px;

--content-con-b-w: 26px;
--content-con-b-w-s: 7px;
--content-con-b-bg: rgb(200, 200, 205);

--text-con-bg: var(--color-b);

--header-m: 8px;
--header-h: 60px;
--header-p: 10px 16px;
--header-f-s: 1.8em; /* Header font size */
--header-f: 'Rubik', sans-serif; /* Header font, change font tag above if you change this */
--header-l-h: 1.5;

--header-bg-1: linear-gradient(173.3deg, var(--color-1) 49%, var(--color-b) calc(49% + 1px));
--header-t-bg-1: linear-gradient(173.3deg, var(--color-b) 49%, var(--color-1) calc(49% + 1px));

--header-bg-2: linear-gradient(173.3deg, var(--color-2) 49%, var(--color-b) calc(49% + 1px));
--header-t-bg-2: linear-gradient(173.3deg, var(--color-b) 49%, var(--color-2) calc(49% + 1px));

--header-bg-3: linear-gradient(173.3deg, var(--color-3) 49%, var(--color-b) calc(49% + 1px));
--header-t-bg-3: linear-gradient(173.3deg, var(--color-b) 49%, var(--color-3) calc(49% + 1px));

--triangle-s: 10px;

--triangle-bg-1: linear-gradient(135deg, var(--color-b) 50%, var(--color-2) calc(50% + 1px));
--triangle-bg-2: linear-gradient(135deg, var(--color-b) 50%, var(--color-3) calc(50% + 1px));
--triangle-bg-3: linear-gradient(135deg, var(--color-b) 50%, var(--color-1) calc(50% + 1px));

--text-p: 4px 20px;
--text-c: rgb(220, 220, 225); /* Text colour */
--text-f: 'Mulish', sans-serif; /* Text and image credit font, change font tag above if you change this */

--quote-p: 10px 8px 8px 10%;
--quote-f-s: 0.9em; /* Quote font size, increase or decrease by increments of .1 */

/* Image Variables
url('-- url here --') is the image URL
50% is the x-value, 0px is the y-value for image position
cover is image size, best to default to this */

--img-1: url('https://cdnb.artstation.com/p/assets/images/images/036/034/791/large/koyori-n-emily-billboard.jpg?1616558512') 50% 0px / cover; /* Image 1 */
--img-tri-bg-1: linear-gradient(160deg, transparent 85%, var(--color-2) calc(85% + 1px));
--quote-bg-1: linear-gradient(160deg, var(--color-2) 85%, var(--color-b) calc(85% + 1px));

--img-2: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4d94eabf-4257-437f-a08d-5ee63b69705f/dcaop0b-745a0982-7537-4969-ae93-0b92c2eca5c2.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRkOTRlYWJmLTQyNTctNDM3Zi1hMDhkLTVlZTYzYjY5NzA1ZlwvZGNhb3AwYi03NDVhMDk4Mi03NTM3LTQ5NjktYWU5My0wYjkyYzJlY2E1YzIuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.QusIRhdCrX6TdYrPAQOFRHc6xmUMvqAS6XyzZA9t798') 50% 0px / cover; /* Image 2 */
--img-tri-bg-2: linear-gradient(160deg, transparent 85%, var(--color-3) calc(85% + 1px));
--quote-bg-2: linear-gradient(160deg, var(--color-3) 85%, var(--color-b) calc(85% + 1px));

--img-3: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4d94eabf-4257-437f-a08d-5ee63b69705f/dd9aao3-5fded779-470b-4329-b2e8-7863f1b29606.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRkOTRlYWJmLTQyNTctNDM3Zi1hMDhkLTVlZTYzYjY5NzA1ZlwvZGQ5YWFvMy01ZmRlZDc3OS00NzBiLTQzMjktYjJlOC03ODYzZjFiMjk2MDYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.DyZa8PwHe1Sg9IYutcvv0cl_kHlHk1w5nX5Eh2GD5k0') 50% 0px / cover; /* Image 3 */
--img-tri-bg-3: linear-gradient(160deg, transparent 85%, var(--color-1) calc(85% + 1px));
--quote-bg-3: linear-gradient(160deg, var(--color-1) 85%, var(--color-b) calc(85% + 1px));][comment]

-- Filter Tab Covers --[/comment][comment]-- Colour Tab --[/comment][border=transparent;
position: absolute;
top: 0px;
left: var(--colour-tab-l);
box-sizing: border-box;
width: var(--colour-tab-w);
height: var(--tabs-h);
padding: 0px;
background: var(--text-c);
pointer-events: none;][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
color: var(--color-b);
background: linear-gradient(to right, var(--color-1), var(--color-2), var(--color-3));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: var(--header-f);
font-weight: bold;
filter: brightness(80%);
line-height: 1.6;
text-align: center;
padding: 0px;]COLOUR[/border][/border][comment]-- Less Tab --[/comment][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--colour-tab-l) + var(--colour-tab-w) + var(--less-tab-l));
box-sizing: border-box;
width: var(--less-tab-w);
height: var(--tabs-h);
padding: 0px;
background: var(--text-c);
color: var(--color-b);
font-family: var(--header-f);
font-weight: bold;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]LESS[/border][comment]

-- No Filter/Filter Tabs --[/comment][border=transparent;
margin: auto;
margin-bottom: var(--f-tabs-m);
width: var(--f-tabs-w);
height: var(--tabs-h);
padding: 0px;
overflow: hidden;][tabs]

[tab=000000].[/tab]

[tab=000][border=transparent;
position: absolute;
top: var(--tabs-h);
left: calc(0px - var(--stripes-d));
width: calc(100% + (var(--stripes-d) * 2));
height: calc(3 * var(--h));
-x-backdrop-filter: grayscale(98%);
-moz-backdrop-filter: grayscale(98%);
-o-backdrop-filter: grayscale(98%);
-webkit-backdrop-filter: grayscale(98%);
backdrop-filter: grayscale(98%);
pointer-events: none;
z-index: 1;].[/border][/tab]

[/tabs][/border][comment]

-- Main Container --[/comment][border=transparent;
position: relative;
margin: max(var(--content-con-b-w), var(--stripes-d)) 0px;
width: 100%;
min-height: var(--h);
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--con-gap);
z-index: 0;][comment]-- Fake Content Container --[/comment][border=transparent;
box-sizing: border-box;
flex: 5 1 var(--con-w);
min-width: var(--tabs-w);
height: var(--h);
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;][comment]

-- Tabs Container --[/comment][border=transparent;
margin-top: var(--d);
box-sizing: border-box;
width: var(--tabs-w);
padding: 0px;][tabs]

[tab=.][comment]-- Tab Body 1 --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
min-height: var(--h);
background: var(--color-b);
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--con-gap);
pointer-events: none;][comment]

-- Stripes Top --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--stripes-d));
left: calc(0px - var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-t-1);
padding: 0px;
z-index: 0;][/border][comment]

-- Stripes Bottom --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--stripes-h) + var(--stripes-d));
left: calc(100% - var(--stripes-w) + var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-b-1);
padding: 0px;
z-index: 0;][/border][comment]

-- Content Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 5 1 var(--con-w);
min-width: var(--tabs-w);
height: var(--h);
padding: calc(var(--con-p) * 2) var(--con-p) 0px var(--con-p);][comment]

-- Tab Covers --[/comment][comment]-- Tab Cover 1 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-1);
border-radius: 50%;
color: var(--color-1);
filter: grayscale(98%);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + var(--tab-d));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-2);
border-radius: 50%;
color: var(--color-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-history[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + (var(--tab-d) * 2));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-3);
border-radius: 50%;
color: var(--color-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-sliders-h[/fa][/border][comment]

-- Content Border --[/comment][border=transparent;
position: absolute;
top: calc((var(--con-p) * 2) - var(--content-con-b-w-s));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Hidden Scroll Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0px;
overflow: hidden;
z-index: 1;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + var(--con-p));
height: 100%;
padding: 0px var(--con-p) 0px 0px;
background: var(--text-con-bg);
overflow-y: auto;
overflow-x: hidden;
pointer-events: auto;][comment]

Copy-paste the two sections below for more headers + text ↴

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-1);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-1);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]BASIC INFORMATION[/border][/border][comment]
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);][b]NAME[/b] [comment]-- Triangle Icon, copy section to get more triangles -->[/comment][border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border][comment]-- Triangle Icon End --[/comment] S. P. Lu
[b]NICKNAME[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] Speculoos
[b]AGE[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] N/A
[b]GENDER[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] Female

[b]HEIGHT[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] N/A
[b]WEIGHT[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] N/A

[b]AFFILIATION[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] N/A[/border][comment]
-- Text End --[/comment][comment]

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-1);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-1);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]APPEARANCE[/border][/border][comment]
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.

Donec sapien nulla, dapibus quis risus eget, iaculis mollis est. Sed tincidunt convallis lobortis. Sed eget odio id nunc condimentum eleifend dignissim vitae tellus. Praesent non ligula elementum, posuere eros sit amet, ultrices nulla.[/border][comment]
-- Text End --[/comment][/border][comment]
-- Hidden Scroll End --[/comment][/border][comment]
-- Hidden Scroll Container End --[/comment][/border][comment]
-- Content Container End --[/comment][comment]

-- Image Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 3 1  var(--con-w);
height: var(--h);
padding: 0px var(--con-p) calc(var(--con-p) * 2) var(--con-p);][comment]

-- Image Credit --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--con-p) - 10px);
left: 8px;
box-sizing: border-box;
color: var(--text-c);
font-size: 0.9em;
font-family: var(--text-f);
padding: 0px;
opacity: 0.8;][b]Artist:[/b] Koyori n[/border][comment]

-- Image Border --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--content-con-b-w));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Image --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-1);
padding: 0px;
z-index: 1;][comment]-- Image Triangle --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-tri-bg-1);
padding: 0px;
pointer-events: auto;][comment]

-- Image Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--quote-p);
color: var(--text-c);
background: var(--quote-bg-1);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--quote-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);
text-align: right;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: flex-end;]Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
- UNKNOWN[/border][comment]
-- Image Text End --[/comment][/border][/border][comment]
-- Image End --[/comment][/border][comment]
-- Image Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 2 --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
min-height: var(--h);
background: var(--color-b);
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--con-gap);
pointer-events: none;][comment]

-- Stripes Top --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--stripes-d));
left: calc(0px - var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-t-2);
padding: 0px;
z-index: 0;][/border][comment]

-- Stripes Bottom --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--stripes-h) + var(--stripes-d));
left: calc(100% - var(--stripes-w) + var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-b-2);
padding: 0px;
z-index: 0;][/border][comment]

-- Content Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 5 1 var(--con-w);
min-width: var(--tabs-w);
height: var(--h);
padding: calc(var(--con-p) * 2) var(--con-p) 0px var(--con-p);][comment]

-- Tab Covers --[/comment][comment]-- Tab Cover 1 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-1);
border-radius: 50%;
color: var(--color-1);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + var(--tab-d));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-2);
border-radius: 50%;
color: var(--color-2);
filter: grayscale(98%);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-history[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + (var(--tab-d) * 2));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-3);
border-radius: 50%;
color: var(--color-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-sliders-h[/fa][/border][comment]

-- Content Border --[/comment][border=transparent;
position: absolute;
top: calc((var(--con-p) * 2) - var(--content-con-b-w-s));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Hidden Scroll Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0px;
overflow: hidden;
z-index: 1;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + var(--con-p));
height: 100%;
padding: 0px var(--con-p) 0px 0px;
background: var(--text-con-bg);
overflow-y: auto;
overflow-x: hidden;
pointer-events: auto;][comment]

Copy-paste the two sections below for more headers + text ↴

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-2);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-2);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]PERSONA[/border][/border][comment]
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.

[b]HOBBIES[/b] [comment]-- Triangle Icon, copy section to get more triangles -->[/comment][border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border][comment]-- Triangle Icon End --[/comment] Carrying noobs, beating up assholes
[b]LIKES[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border] N/A
[b]DISLIKES[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border] N/A[/border][comment]
-- Text End --[/comment][comment]

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-2);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-2);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]BIO[/border][/border][comment]
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.

Donec sapien nulla, dapibus quis risus eget, iaculis mollis est. Sed tincidunt convallis lobortis. Sed eget odio id nunc condimentum eleifend dignissim vitae tellus. Praesent non ligula elementum, posuere eros sit amet, ultrices nulla lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.

[b]ACQUAINTANCES[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border] N/A
[b]FRIENDS[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border] 10Green_Robo10, Pink.Sama
[b]FAMILY[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border] orangebro[/border][comment]
-- Text End --[/comment][/border][comment]
-- Hidden Scroll End --[/comment][/border][comment]
-- Hidden Scroll Container End --[/comment][/border][comment]
-- Content Container End --[/comment][comment]

-- Image Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 3 1  var(--con-w);
height: var(--h);
padding: 0px var(--con-p) calc(var(--con-p) * 2) var(--con-p);][comment]

-- Image Credit --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--con-p) - 10px);
left: 8px;
box-sizing: border-box;
color: var(--text-c);
font-size: 0.9em;
font-family: var(--text-f);
padding: 0px;
opacity: 0.8;][b]Artist:[/b] SeerLight[/border][comment]

-- Image Border --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--content-con-b-w));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Image --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-2);
padding: 0px;
z-index: 1;][comment]-- Image Triangle --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-tri-bg-2);
padding: 0px;
pointer-events: auto;][comment]

-- Image Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--quote-p);
color: var(--text-c);
background: var(--quote-bg-2);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--quote-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);
text-align: right;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: flex-end;]Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
- WHO KNOWS[/border][comment]
-- Image Text End --[/comment][/border][/border][comment]
-- Image End --[/comment][/border][comment]
-- Image Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 3 --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
min-height: var(--h);
background: var(--color-b);
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--con-gap);
pointer-events: none;][comment]

-- Stripes Top --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--stripes-d));
left: calc(0px - var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-t-3);
padding: 0px;
z-index: 0;][/border][comment]

-- Stripes Bottom --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--stripes-h) + var(--stripes-d));
left: calc(100% - var(--stripes-w) + var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-b-3);
padding: 0px;
z-index: 0;][/border][comment]

-- Content Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 5 1 var(--con-w);
min-width: var(--tabs-w);
height: var(--h);
padding: calc(var(--con-p) * 2) var(--con-p) 0px var(--con-p);][comment]

-- Tab Covers --[/comment][comment]-- Tab Cover 1 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-1);
border-radius: 50%;
color: var(--color-1);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + var(--tab-d));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-2);
border-radius: 50%;
color: var(--color-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-history[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + (var(--tab-d) * 2));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-3);
border-radius: 50%;
color: var(--color-3);
filter: grayscale(98%);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-sliders-h[/fa][/border][comment]

-- Content Border --[/comment][border=transparent;
position: absolute;
top: calc((var(--con-p) * 2) - var(--content-con-b-w-s));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Hidden Scroll Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0px;
overflow: hidden;
z-index: 1;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + var(--con-p));
height: 100%;
padding: 0px var(--con-p) 0px 0px;
background: var(--text-con-bg);
overflow-y: auto;
overflow-x: hidden;
pointer-events: auto;][comment]

Copy-paste the two sections below for more headers + text ↴

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-3);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-3);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]EXTRAS[/border][/border][comment]
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);][b]SOMETHING[/b] [comment]-- Triangle Icon, copy section to get more triangles -->[/comment][border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-3);
padding: 0px;][/border][comment]-- Triangle Icon End --[/comment] N/A
[b]SOMETHING ELSE[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-3);
padding: 0px;][/border] N/A
[b]SOMETHING NOT[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-3);
padding: 0px;][/border] N/A
[b]SOMETHING BEYOND[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-3);
padding: 0px;][/border] N/A
[b]SOMETHING[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-3);
padding: 0px;][/border] N/A[/border][comment]
-- Text End --[/comment][comment]

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-3);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-3);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]PLAYLIST[/border][/border][comment]
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);][comment]-- Input characters after = in youtube link -->[/comment][MEDIA=youtube]kzdJkT4kp-A[/MEDIA][/border][comment]
-- Text End --[/comment][/border][comment]
-- Hidden Scroll End --[/comment][/border][comment]
-- Hidden Scroll Container End --[/comment][/border][comment]
-- Content Container End --[/comment][comment]

-- Image Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 3 1  var(--con-w);
height: var(--h);
padding: 0px var(--con-p) calc(var(--con-p) * 2) var(--con-p);][comment]

-- Image Credit --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--con-p) - 10px);
left: 8px;
box-sizing: border-box;
color: var(--text-c);
font-size: 0.9em;
font-family: var(--text-f);
padding: 0px;
opacity: 0.8;][b]Artist:[/b] SeerLight[/border][comment]

-- Image Border --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--content-con-b-w));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Image --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-3);
padding: 0px;
z-index: 1;][comment]-- Image Triangle --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-tri-bg-3);
padding: 0px;
pointer-events: auto;][comment]

-- Image Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--quote-p);
background: var(--quote-bg-3);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--text-c);
font-size: var(--quote-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);
text-align: right;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: flex-end;]Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
- NOT ME[/border][comment]
-- Image Text End --[/comment][/border][/border][comment]
-- Image End --[/comment][/border][comment]
-- Image Container End --[/comment][/border][/tab]

[/tabs][/border][/border][comment]-- Fake Image Container --[/comment][border=transparent;
box-sizing: border-box;
flex: 3 1  var(--con-w);
height: var(--h);
padding: 0px;][/border][/border][/border]

AAAAAAAAAAAAAAAAHHHHHHHHHHHHH AMI THIS IS SO PRETTY, I LOVE IT SO MUCH!

Ahem. I am so very honored for this, I shall now address you as Ami-sama in terms of coding. :b7:
 
I’m glad you like it ‘cause halfway through I realized the colours hurt my eyes. 😂 Ilyu too. 😌

Sblkhhgk 😂 😂
 
Generic Employee ID™
An employee card-style accordion. Could probably be used as a mini CS, but be careful with how much information you put in — it doesn't scroll or anything.

Are you an Evil Corporation™ trying to peacefully exploit the unwashed masses? Do you have an issue with the fact that everyone and their grandma is rebelling against your oppressive control over household goods? Well, fear not! With Generic Employee ID™, you can be sure that none of your slaves unpaid interns will even think of looking the wrong way at your giant glowing billboard!*

*Extra fees, terms and conditions may apply. We cannot be held responsible if your employees rebel.

If you ever decide to go on some free graphics site and see this , you'll realize that I have indeed stolen heavily been inspired by the first card design I saw off the internet.

Accordion
No Scroll




Code:
[comment][font=Arimo][font=Libre Barcode 128]>:)[/font][/font][/comment][border=transparent;

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

margin: auto;
box-sizing: border-box;
max-width: calc(var(--w) + 14px);
padding: 0px;
visibility: hidden;

--w: 310px;
--h: 455px;

/* Accent Colours */
--c-1: #285975;
--c-2: #559DC9;
--c-3: #DB5C71;
--c-b: #E6E6E6; /* Base colour */

/* Image URL, 50% is x-axis value, 0% is y-axis value for image position, cover is image size (change to percentage if image is too small or big in frame) */
--img: url('http://www.buckinghamandcompany.com.au/wp-content/uploads/2016/03/profile-placeholder.png') 50% 0% / cover;

--img-t: 76px;
--img-s: 110px; /* Image icon size */
--img-b: 3px solid var(--c-b);

/* Logo URL */
--logo-img: url('https://cdn.onlinewebfonts.com/svg/img_505873.png') 50% 50% / contain;

--logo-front-t: calc(100% - var(--logo-s) + 12px);
--logo-front-l: calc(100% - var(--logo-s) + 12px);
--logo-back-t: -12px;
--logo-back-l: -12px;
--logo-s: 200px; /* Logo size */
--logo-o: 0.06; /* Logo opacity */

--b-r: 15px; /* Card border radius, increase for rounder corners, decrease for less */

--f: 'Arimo', sans-serif; /* Main font, change font tag above if you change this */

--note-f-s: 0.7em; /* Note font size */

--title-p: 25px 20px 2px 20px;
--title-f-s: 1em; /* Title font size */
--title-l-s: 2px; /* Title letter spacing */
--title-t-s: 1px var(--c-2);

--slogan-p: 0px 20px 16px 20px;
--slogan-f-s: 0.6em; /* Slogan font size */
--slogan-l-s: 2px; /* Slogan letter spacing */

--header-p: 18px 20px 0px 20px;
--header-l-s: 2px; /* Header letter spacing */

--position-p: 0px 20px 0px 20px;
--position-f-s: 0.74em; /* Employee position text font size */
--position-l-s: 1px;

--info-p: 12px min(35px, 13%) 0px min(35px, 13%);
--info-c: #333333; /* Main text colour */
--info-f-s: 0.8em; /* Main text font size */

--label-w: 50px; /* Label width, change this if you change font size and the label content overflows */
--field-w: 160px;

--barcode-p: 16px 20px 16px 20px;
--barcode-f: 'Libre Barcode 128', sans-serif; /* Barcode font, you probably shouldn't touch this unless you don't want the barcode */
--barcode-f-s: 2.8em;

--extra-p: 25px min(30px, 10%) 0px min(30px, 10%);

--bullet-w: 20px;
--bullet-t: 4px;
--bullet-f-s: 0.52em;
--bullet-field-w: 230px;

--date-p: 85px 20px 0px 20px;
--date-f-s: 0.85em; /* Date text font size */

--shadow: 6px 6px 12px rgba(0, 0, 0, 0.45); /* Card shadow */

--front-bg: linear-gradient(38deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.28) 58% 65%, rgba(255, 255, 255, 0) calc(65% + 1px)), radial-gradient(circle at 50% 2%, var(--c-1) 38%, transparent calc(38% + 1px)), radial-gradient(circle at 30% -4%, var(--c-2) 44%, transparent calc(44% + 1px)), radial-gradient(circle at 10% -38%, var(--c-3) 60%, transparent calc(60% + 1px)), linear-gradient(var(--c-b), var(--c-b));

--back-bg: linear-gradient(38deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.28) 58% 65%, rgba(255, 255, 255, 0) calc(65% + 1px)), radial-gradient(circle at 50% 98%, var(--c-1) 38%, transparent calc(38% + 1px)), radial-gradient(circle at 60% 104%, var(--c-2) 44%, transparent calc(44% + 1px)), radial-gradient(circle at 80% -28%, transparent 68%, var(--c-3) calc(68% + 1px)), linear-gradient(var(--c-b), var(--c-b));][comment]

-- Note --[/comment][border=transparent;
position: relative;
top: 18px;
visibility: visible;
box-sizing: border-box;
width: 100%;
padding: 0px;
font-family: var(--f);
font-size: var(--note-f-s);
letter-spacing: var(--position-l-s);
text-transform: uppercase;
line-height: 1.5;
text-align: center;
opacity: 0.8;]Click for more info[/border][comment]

-- Accordion --[/comment][accordion=100%]{slide=[comment]
-- Card Front --[/comment][border=transparent;
visibility: visible;
position: relative;
box-sizing: border-box;
max-width: var(--w);
min-height: var(--h);
background: var(--front-bg);
border-radius: var(--b-r);
padding: 0px;
font-size: 15px;
font-weight: normal;
font-variant: normal;
box-shadow: var(--shadow);
overflow: hidden;][comment]

-- Logo --[/comment][border=transparent;
position: absolute;
top: var(--logo-front-t);
left: var(--logo-front-l);
box-sizing: border-box;
width: var(--logo-s);
height: var(--logo-s);
background: var(--logo-img);
padding: 0px;
opacity: var(--logo-o);][/border][comment]

-- ID Picture --[/comment][border=transparent;
position: absolute;
top: var(--img-t);
left: calc(50% - (var(--img-s) / 2));
box-sizing: border-box;
width: var(--img-s);
height: var(--img-s);
border: var(--img-b);
border-radius: 50%;
background: var(--img);
padding: 0px;][/border][comment]

-- Top Half --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: calc(var(--h) / 2);
padding: 0px;][comment]

-- Company Title --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: var(--title-p);
color: var(--c-2);
font-family: var(--f);
font-size: var(--title-f-s);
font-weight: bold;
font-kerning: normal;
letter-spacing: var(--title-l-s);
text-transform: uppercase;
-webkit-text-stroke: var(--title-t-s);
text-stroke: var(--title-t-s);
line-height: 1.5;
text-align: center;]Evil Incorporated[/border][comment]

-- Slogan --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: var(--slogan-p);
color: var(--c-b);
font-family: var(--f);
font-size: var(--slogan-f-s);
font-weight: bold;
font-kerning: normal;
letter-spacing: var(--slogan-l-s);
text-transform: uppercase;
line-height: 1.5;
text-align: center;]When good isn't enough[/border][/border][comment]
-- Top Half End --[/comment][comment]

-- Bottom Half --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
min-height: calc(var(--h) / 2);
padding: 0px;][comment]

-- Employee Name --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--header-p);
color: var(--c-1);
font-family: var(--f);
font-size: var(--title-f-s);
font-weight: bold;
font-kerning: normal;
letter-spacing: var(--header-l-s);
text-transform: uppercase;
line-height: 1.5;
text-align: center;]Inna Tern[/border][comment]

-- Position --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: var(--position-p);
color: var(--info-c);
font-family: var(--f);
font-size: var(--position-f-s);
font-weight: bold;
font-kerning: normal;
letter-spacing: var(--position-l-s);
text-transform: uppercase;
line-height: 1.5;
text-align: center;]Intern[/border][comment]

-- Employee Info --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--info-p);
color: var(--info-c);
font-family: var(--f);
font-size: var(--info-f-s);
line-height: 1.5;
display: flex;
flex-flow: row wrap;][comment]-- Label --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1 var(--label-w);
padding: 0px;
font-weight: bold;]ID No[/border][comment]-- Field --[/comment][border=transparent;
box-sizing: border-box;
flex: 2 1 var(--field-w);
padding: 0px;]: 000 000 001[/border][comment]-- Label --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1 var(--label-w);
padding: 0px;
font-weight: bold;]Dept[/border][comment]-- Field --[/comment][border=transparent;
box-sizing: border-box;
flex: 2 1 var(--field-w);
padding: 0px;]: Paper Pushers[/border][comment]-- Label --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1 var(--label-w);
padding: 0px;
font-weight: bold;]D.O.B[/border][comment]-- Field --[/comment][border=transparent;
box-sizing: border-box;
flex: 2 1 var(--field-w);
padding: 0px;]: 01/01/2030[/border][comment]-- Label --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1 var(--label-w);
padding: 0px;
font-weight: bold;]Email[/border][comment]-- Field --[/comment][border=transparent;
box-sizing: border-box;
flex: 2 1 var(--field-w);
padding: 0px;]: [plain]inna.tern@evilcorporation.com[/plain][/border][comment]-- Label --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1 var(--label-w);
padding: 0px;
font-weight: bold;]Phone[/border][comment]-- Field --[/comment][border=transparent;
box-sizing: border-box;
flex: 2 1 var(--field-w);
padding: 0px;]: +1 000-000-0001[/border][comment]-- Labels + Fields End --[/comment][/border][comment]
-- Employee Info End --[/comment][comment]-- Barcode --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--barcode-p);
color: var(--info-c);
font-family: var(--barcode-f);
font-size: var(--barcode-f-s);
line-height: 1;
text-align: center;]Random text[/border][comment]
-- Barcode End --[/comment][/border][comment]
-- Bottom Half End --[/comment][/border]}[comment]

-- Card Back --[/comment][border=transparent;
visibility: visible;
position: relative;
top: 8px;
box-sizing: border-box;
max-width: var(--w);
min-height: var(--h);
background: var(--back-bg);
border-radius: var(--b-r);
padding: 0px;
font-size: 15px;
font-weight: normal;
font-variant: normal;
box-shadow: var(--shadow);
overflow: hidden;][comment]

-- Logo --[/comment][border=transparent;
position: absolute;
top: var(--logo-back-t);
left: var(--logo-back-l);
box-sizing: border-box;
width: var(--logo-s);
height: var(--logo-s);
background: var(--logo-img);
padding: 0px;
opacity: var(--logo-o);][/border][comment]

-- Top Half --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: calc(var(--h) / 2);
padding: 0px;][comment]

-- Extra Info --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--extra-p);
color: var(--info-c);
font-family: var(--f);
font-size: var(--info-f-s);
line-height: 1.5;
display: flex;
flex-flow: row wrap;][comment]-- Bullet --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1 var(--bullet-w);
padding: 0px;
color: var(--c-1);
font-size: var(--bullet-f-s);][border=transparent;
position: relative;
top: var(--bullet-t);
padding: 0px;][fa]fas fa-circle[/fa][/border][/border][comment]-- Bullet Field --[/comment][border=transparent;
box-sizing: border-box;
flex: 2 1 var(--bullet-field-w);
max-width: calc(100% - var(--bullet-w));
padding: 0px;]Lorem ipsum dolor sit amet, consect adipcing elit. Integer auctor lobortis purus et accum san. Proin ac tristique erat, eu volutpat dolor.[/border][comment]-- Bullet --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1 var(--bullet-w);
padding: 0px;
color: var(--c-1);
font-size: var(--bullet-f-s);][border=transparent;
position: relative;
top: var(--bullet-t);
padding: 0px;][fa]fas fa-circle[/fa][/border][/border][comment]-- Bullet Field --[/comment][border=transparent;
box-sizing: border-box;
flex: 2 1 var(--bullet-field-w);
max-width: calc(100% - var(--bullet-w));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auc tor lobortis purus et accumsan. Proin ac tristique erat, eu volutpat dolor.[/border][comment]-- Bullet --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1 var(--bullet-w);
padding: 0px;
color: var(--c-1);
font-size: var(--bullet-f-s);][border=transparent;
position: relative;
top: var(--bullet-t);
padding: 0px;][fa]fas fa-circle[/fa][/border][/border][comment]-- Bullet Field --[/comment][border=transparent;
box-sizing: border-box;
flex: 2 1 var(--bullet-field-w);
max-width: calc(100% - var(--bullet-w));
padding: 0px;]Lo rem ipsum dolor sit amet, consectetur adipi scing elit. Integer auctor lobortis purus et accumsan. Proin ac tristique erat, eu volutpat dolor.[/border][comment]-- Labels + Fields End --[/comment][/border][comment]
-- Extra Info End --[/comment][/border][comment]
-- Top Half End --[/comment][comment]

-- Bottom Half --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
min-height: calc(var(--h) / 2);
padding: 0px;][comment]

-- Dates --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--date-p);
color: var(--c-b);
font-family: var(--f);
font-size: var(--date-f-s);
line-height: 1.5;
text-align: center;][b]Join Date[/b] : 01/01/2050
[b]Expire Date[/b] : Indefinite[/border][comment]

-- Company Title --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: var(--title-p);
color: var(--c-2);
font-family: var(--f);
font-size: var(--title-f-s);
font-weight: bold;
font-kerning: normal;
letter-spacing: var(--title-l-s);
text-transform: uppercase;
-webkit-text-stroke: var(--title-t-s);
text-stroke: var(--title-t-s);
line-height: 1.5;
text-align: center;]Evil Incorporated[/border][comment]

-- Slogan --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: var(--slogan-p);
color: var(--c-b);
font-family: var(--f);
font-size: var(--slogan-f-s);
font-weight: bold;
font-kerning: normal;
letter-spacing: var(--slogan-l-s);
text-transform: uppercase;
line-height: 1.5;
text-align: center;]When good isn't enough[/border][comment]
-- Slogan End --[/comment][/border][comment]
-- Bottom Half End --[/comment][/border]{/slide}
[/accordion][/border]
 
Last edited:
Header Pack
A bunch of various header styles.

I got the idea for Double Diamond but didn't really want to create a whole code based off it, so I half-assed a bunch of possible headers and tossed them together to sell. Not gonna lie, most of my coding outside this thread is just a basic header + a nice body font. ... This should be useful to some people, right? The code is pretty simple, if that floats your boat.

You can probably center headers by wrapping the code in a [center] tag.

Also, you should check out the Strobe Lines variants in both modes. 👀

Header
No Scroll


Double Diamond


Code:
[comment]-- Font -->[/comment][font=Inter][border=transparent;

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

position: relative;
box-sizing: border-box;
max-width: 100%;
padding: 0px;

/* Accent Colours */
--c-1: #6C5BD9;
--c-2: #D9D5F2;
--c-3: rgba(80, 70, 190, 0.4);

--b: 2px solid var(--c-1); /* Border */
--r: rotate(45deg);

--dia-l: calc(20px - var(--dia-s));
--dia-m: 20px 0px 20px 20px; /* Diamond margins so they don't get cut off due to rotation, change if you change size */
--dia-s: 70px; /* Diamond size */

--f-s: 1.5em; /* Font size, increase or decrease by .1 increments */
--text-l: calc(45px - (var(--dia-s) * 2));
--text-p: 10px 20px 10px 20px; /* Text padding */

display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Diamond 1 --[/comment][border=transparent;
position: relative;
margin: var(--dia-m);
box-sizing: border-box;
flex: 0 0 var(--dia-s);
height: var(--dia-s);
border: var(--b);
background: linear-gradient(135deg, var(--c-3) 50%, var(--c-1) calc(50% + 1px));
padding: 0px;
transform: var(--r);][/border][comment]

-- Diamond 2 --[/comment][border=transparent;
position: relative;
left: var(--dia-l);
margin: var(--dia-m);
margin-left: 0px;
box-sizing: border-box;
flex: 0 0 var(--dia-s);
height: var(--dia-s);
background: var(--c-2);
padding: 0px;
transform: var(--r);][/border][comment]

-- Text --[/comment][border=transparent;
position: relative;
left: var(--text-l);
box-sizing: border-box;
padding: var(--text-p);
border: var(--b);
background: linear-gradient(-45deg, var(--c-3) 16px, var(--c-1) calc(16px + 1px));
color: var(--c-2);
font-size: var(--f-s);
font-kerning: normal;
line-height: 1;]Double Diamond[/border][/border][/font]

11
Double Diamond Digit


Code:
[comment]-- Font -->[/comment][font=Inter][border=transparent;

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

position: relative;
box-sizing: border-box;
max-width: 100%;
padding: 0px;

/* Accent Colours */
--c-1: #6C5BD9;
--c-2: #D9D5F2;
--c-3: rgba(80, 70, 190, 0.4);

--b: 2px solid var(--c-1); /* Border */
--r: rotate(45deg);
--r-r: rotate(-45deg);

--dia-l: calc(20px - var(--dia-s));
--dia-m: 20px 0px 20px 20px; /* Diamond margins so they don't get cut off due to rotation, change if you change size */
--dia-s: 70px; /* Diamond size */

--f-s: 1.5em; /* Font size, increase or decrease by .1 increments */
--text-l: calc(10px - var(--dia-s));
--text-p: 10px 20px 10px 20px; /* Text padding */

--num-f-s: 2em; /* Number font size, increase or decrease by .1 increments  */

display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Diamond 1 --[/comment][border=transparent;
position: relative;
margin: var(--dia-m);
box-sizing: border-box;
flex: 0 0 var(--dia-s);
height: var(--dia-s);
border: var(--b);
background: linear-gradient(135deg, var(--c-3) 50%, var(--c-1) calc(50% + 1px));
padding: 0px;
transform: var(--r);][/border][comment]

-- Diamond 2 --[/comment][border=transparent;
position: relative;
left: var(--dia-l);
margin: var(--dia-m);
margin-left: 0px;
box-sizing: border-box;
flex: 0 0 var(--dia-s);
height: var(--dia-s);
background: var(--c-2);
padding: 0px;
transform: var(--r);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Number --[/comment][border=transparent;
box-sizing: border-box;
padding: 0px;
color: var(--c-1);
font-size: var(--num-f-s);
font-weight: bold;
line-height: 1;
transform: var(--r-r);]11[/border][/border][comment]

-- Text --[/comment][border=transparent;
position: relative;
left: var(--text-l);
box-sizing: border-box;
padding: var(--text-p);
border: var(--b);
background: linear-gradient(-45deg, var(--c-3) 16px, var(--c-1) calc(16px + 1px));
color: var(--c-2);
font-size: var(--f-s);
font-kerning: normal;
line-height: 1;]Double Diamond Digit[/border][/border][/font]

Double Diamond Icon


Code:
[comment]-- Font -->[/comment][font=Inter][border=transparent;

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

position: relative;
box-sizing: border-box;
max-width: 100%;
padding: 0px;

/* Accent Colours */
--c-1: #6C5BD9;
--c-2: #D9D5F2;
--c-3: rgba(80, 70, 190, 0.4);

--b: 2px solid var(--c-1); /* Border */
--r: rotate(45deg);
--r-r: rotate(-45deg);

--dia-l: calc(20px - var(--dia-s));
--dia-m: 20px 0px 20px 20px; /* Diamond margins so they don't get cut off due to rotation, change if you change size */
--dia-s: 70px; /* Diamond size */

--f-s: 1.5em; /* Font size, increase or decrease by .1 increments */
--text-l: calc(10px - var(--dia-s));
--text-p: 10px 20px 10px 20px; /* Text padding */

--icon-f-s: 2em; /* Icon size, increase or decrease by .1 increments  */

display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Diamond 1 --[/comment][border=transparent;
position: relative;
margin: var(--dia-m);
box-sizing: border-box;
flex: 0 0 var(--dia-s);
height: var(--dia-s);
border: var(--b);
background: linear-gradient(135deg, var(--c-3) 50%, var(--c-1) calc(50% + 1px));
padding: 0px;
transform: var(--r);][/border][comment]

-- Diamond 2 --[/comment][border=transparent;
position: relative;
left: var(--dia-l);
margin: var(--dia-m);
margin-left: 0px;
box-sizing: border-box;
flex: 0 0 var(--dia-s);
height: var(--dia-s);
background: var(--c-2);
padding: 0px;
transform: var(--r);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Icon --[/comment][border=transparent;
box-sizing: border-box;
padding: 0px;
color: var(--c-1);
font-size: var(--icon-f-s);
font-weight: bold;
line-height: 1;
transform: var(--r-r);][fa]far fa-dice-d20[/fa][/border][/border][comment]

-- Text --[/comment][border=transparent;
position: relative;
left: var(--text-l);
box-sizing: border-box;
padding: var(--text-p);
border: var(--b);
background: linear-gradient(-45deg, var(--c-3) 16px, var(--c-1) calc(16px + 1px));
color: var(--c-2);
font-size: var(--f-s);
font-kerning: normal;
line-height: 1;]Double Diamond Icon[/border][/border][/font]

Speed Stripes


Code:
[comment]-- Font -->[/comment][font=Bebas Neue][border=transparent;

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

box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;

--tri-l: -15px; /* Spacing between triangle shapes */
--tri-w: 30px; /* Triangle shape width */
--tri-h: 50px; /* Triangle shape height */
--tri-bg: #FF665A; /* Triangle shape colour */
--tri-c-p: polygon(0 0, 100% 50%, 0 100%, 0 82%, 60% 50%, 0 18%);

--text-l: -10px; /* Spacing between text and triangle shapes */
--p: 5px 0px 0px 0px; /* Text padding to center text, change the 5px value only */
--c: #FF8C64; /* Text colour */
--f-s: 3em; /* Font size, increase or decrease by .1 increments */
--f-st: italic; /* Font style, change to normal if you don't want italics */][comment]

-- Triangle 1 --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 0 0 var(--tri-w);
height: var(--tri-h);
padding: 0px;
background: var(--tri-bg);
-webkit-clip-path: var(--tri-c-p);
clip-path: var(--tri-c-p);][/border][comment]

-- Triangle 2 --[/comment][border=transparent;
position: relative;
left: var(--tri-l);
box-sizing: border-box;
flex: 0 0 var(--tri-w);
height: var(--tri-h);
padding: 0px;
background: var(--tri-bg);
-webkit-clip-path: var(--tri-c-p);
clip-path: var(--tri-c-p);][/border][comment]

-- Text --[/comment][border=transparent;
position: relative;
left: var(--text-l);
box-sizing: border-box;
min-height: var(--tri-h);
padding: var(--p);
color: var(--c);
font-size: var(--f-s);
font-style: var(--f-st);
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Speed Stripes[/border][/border][/font]

6
Speed Stripes Num


Code:
[comment]-- Font -->[/comment][font=Bebas Neue][border=transparent;

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

box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;

--num-r: 15px; /* Spacing between number and triangle shapes */

--tri-l: -15px; /* Spacing between triangle shapes */
--tri-w: 30px; /* Triangle shape width */
--tri-h: 50px; /* Triangle shape height */
--tri-bg: #FF665A; /* Triangle shape colour */
--tri-c-p: polygon(0 0, 100% 50%, 0 100%, 0 82%, 60% 50%, 0 18%);

--text-l: -10px; /* Spacing between text and triangle shapes */
--p: 5px 0px 0px 0px; /* Text padding to center text, change the 5px value only */
--c: #FF8C64; /* Text colour */
--f-s: 3em; /* Font size, increase or decrease by .1 increments */
--f-st: italic; /* Font style, change to normal if you don't want italics */][comment]

-- Number --[/comment][border=transparent;
position: relative;
margin-right: var(--num-r);
box-sizing: border-box;
min-height: var(--tri-h);
padding: var(--p);
color: var(--c);
font-size: var(--f-s);
font-style: var(--f-st);
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]6[/border][comment]

-- Triangle 1 --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 0 0 var(--tri-w);
height: var(--tri-h);
padding: 0px;
background: var(--tri-bg);
-webkit-clip-path: var(--tri-c-p);
clip-path: var(--tri-c-p);][/border][comment]

-- Triangle 2 --[/comment][border=transparent;
position: relative;
left: var(--tri-l);
box-sizing: border-box;
flex: 0 0 var(--tri-w);
height: var(--tri-h);
padding: 0px;
background: var(--tri-bg);
-webkit-clip-path: var(--tri-c-p);
clip-path: var(--tri-c-p);][/border][comment]

-- Text --[/comment][border=transparent;
position: relative;
left: var(--text-l);
box-sizing: border-box;
min-height: var(--tri-h);
padding: var(--p);
color: var(--c);
font-size: var(--f-s);
font-style: var(--f-st);
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Speed Stripes Num[/border][/border][/font]

Speed Stripes Icon


Code:
[comment]-- Font -->[/comment][font=Bebas Neue][border=transparent;

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

box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;

--icon-r: 10px; /* Spacing between icon and triangle shapes */
--icon-f-s: 2.8em; /* Icon size, increase or decrease by .1 increments */

--tri-l: -15px; /* Spacing between triangle shapes */
--tri-w: 30px; /* Triangle shape width */
--tri-h: 50px; /* Triangle shape height */
--tri-bg: #FF665A; /* Triangle shape colour */
--tri-c-p: polygon(0 0, 100% 50%, 0 100%, 0 82%, 60% 50%, 0 18%);

--text-l: -10px; /* Spacing between text and triangle shapes */
--p: 5px 0px 0px 0px; /* Text padding to center text, change the 5px value only */
--c: #FF8C64; /* Text colour */
--f-s: 3em; /* Font size, increase or decrease by .1 increments */
--f-st: italic; /* Font style, change to normal if you don't want italics */][comment]

-- Icon --[/comment][border=transparent;
position: relative;
margin-right: var(--icon-r);
box-sizing: border-box;
min-height: var(--tri-h);
padding: 0px;
color: var(--c);
font-size: var(--icon-f-s);
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;][fa]far fa-pen[/fa][/border][comment]

-- Triangle 1 --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 0 0 var(--tri-w);
height: var(--tri-h);
padding: 0px;
background: var(--tri-bg);
-webkit-clip-path: var(--tri-c-p);
clip-path: var(--tri-c-p);][/border][comment]

-- Triangle 2 --[/comment][border=transparent;
position: relative;
left: var(--tri-l);
box-sizing: border-box;
flex: 0 0 var(--tri-w);
height: var(--tri-h);
padding: 0px;
background: var(--tri-bg);
-webkit-clip-path: var(--tri-c-p);
clip-path: var(--tri-c-p);][/border][comment]

-- Text --[/comment][border=transparent;
position: relative;
left: var(--text-l);
box-sizing: border-box;
min-height: var(--tri-h);
padding: var(--p);
color: var(--c);
font-size: var(--f-s);
font-style: var(--f-st);
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Speed Stripes Icon[/border][/border][/font]

Partial Border


Code:
[comment]-- Font -->[/comment][font=Zilla Slab][border=transparent;

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

box-sizing: border-box;
padding: 0px;

--c-t: #A6E38D; /* Text colour */
--c-b: #67B34B; /* Border colour */

--h: 60px; /* Container height */
--b: 3px solid var(--c-b); /* Border, change px to make border width wider or thinner */
--b-i: linear-gradient(var(--c-b) 18%, transparent calc(18% + 1px) 82%, var(--c-b) calc(82% + 1px)) 1% stretch;

--text-m: 10px;
--text-p: 10px 16px;
--f-s: 1.9em; /* Font size, increase or decrease by .1 increments */][comment]

-- Text Box --[/comment][border=transparent;
box-sizing: border-box;
width: -moz-fit-content;
width: fit-content;
min-height: var(--h);
border: var(--b);
border-image: var(--b-i);
padding: var(--text-p);
color: var(--c-t);
font-size: var(--f-s);
line-height: 1.2;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]Partial Border[/border][/border][/font]

74
Partial Border Figure


Code:
[comment]-- Font -->[/comment][font=Zilla Slab][border=transparent;

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

box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;

--c-t: #A6E38D; /* Text colour */
--c-b: #67B34B; /* Border colour */

--h: 60px; /* Container height */
--b: 3px solid var(--c-b); /* Border, change px to make border width wider or thinner */
--b-i: linear-gradient(var(--c-b) 18%, transparent calc(18% + 1px) 82%, var(--c-b) calc(82% + 1px)) 1% stretch;

--num-p: 0px 0px 7px 0px;
--num-s: 1.8em; /* Icon size, increase or decrease by .1 increments */

--text-m: 10px;
--text-p: 10px 16px;
--f-s: 1.9em; /* Font size, increase or decrease by .1 increments */][comment]

-- Number Box --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--h);
height: var(--h);
border: var(--b);
border-image: var(--b-i);
padding: var(--num-p);
color: var(--c-t);
font-size: var(--num-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]74[/border][comment]

-- Text Box --[/comment][border=transparent;
margin-left: var(--text-m);
box-sizing: border-box;
min-height: var(--h);
border: var(--b);
border-image: var(--b-i);
padding: var(--text-p);
color: var(--c-t);
font-size: var(--f-s);
line-height: 1.2;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]Partial Border Figure[/border][/border][/font]

Partial Border Icon


Code:
[comment]-- Font -->[/comment][font=Zilla Slab][border=transparent;

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

box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row nowrap;

--c-t: #A6E38D; /* Text colour */
--c-b: #67B34B; /* Border colour */

--h: 60px; /* Container height */
--b: 3px solid var(--c-b); /* Border, change px to make border width wider or thinner */
--b-i: linear-gradient(var(--c-b) 18%, transparent calc(18% + 1px) 82%, var(--c-b) calc(82% + 1px)) 1% stretch;

--icon-s: 1.6em; /* Icon size, increase or decrease by .1 increments */

--text-m: 10px;
--text-p: 10px 16px;
--f-s: 1.9em; /* Font size, increase or decrease by .1 increments */][comment]

-- Icon Box --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--h);
height: var(--h);
border: var(--b);
border-image: var(--b-i);
padding: 0px;
color: var(--c-t);
font-size: var(--icon-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-leaf[/fa][/border][comment]

-- Text Box --[/comment][border=transparent;
margin-left: var(--text-m);
box-sizing: border-box;
min-height: var(--h);
border: var(--b);
border-image: var(--b-i);
padding: var(--text-p);
color: var(--c-t);
font-size: var(--f-s);
line-height: 1.2;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]Partial Border Icon[/border][/border][/font]

Strobe Lines


Code:
[comment]-- Font -->[/comment][font=Mohave][border=transparent;

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

box-sizing: border-box;
padding: 0px;

--c-t: #F2E205; /* Text colour */
--c-l: #F2E205; /* Line colour */

--f-s: 2.7em; /* Font size, increase or decrease by .1 increments */

--block-m: 10px;
--block-w: 62px;
--block-h: 42px;][comment]

-- Text --[/comment][border=transparent;
display: inline;
box-sizing: border-box;
padding: 0px;
color: var(--c-t);
font-size: var(--f-s);
line-height: 1.1;]Strobe Lines[/border][comment]

-- Lines --[/comment][border=transparent;
display: inline-block;
margin-left: var(--block-m);
box-sizing: border-box;
width: var(--block-w);
height: var(--block-h);
background: linear-gradient(to right, var(--c-l) 5%, transparent 5% 15%, var(--c-l) 15% 30%, transparent 30% 40%, var(--c-l) 40%);
padding: 0px;][/border][/border][/font]

Strobe Lines Num
98


Code:
[comment]-- Font -->[/comment][font=Mohave][border=transparent;

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

box-sizing: border-box;
padding: 0px;

--c-t: #F2E205; /* Text colour */
--c-l: #F2E205; /* Line colour */

--f-s: 2.7em; /* Font size, increase or decrease by .1 increments */

--block-m: 10px;
--block-w: 62px;
--block-h: 42px;

--num-l: 3px;][comment]

-- Text --[/comment][border=transparent;
position: relative;
display: inline;
box-sizing: border-box;
padding: 0px;
color: var(--c-t);
font-size: var(--f-s);
line-height: 1.1;]Strobe Lines Num[/border][comment]

-- Lines --[/comment][border=transparent;
position: relative;
display: inline-block;
margin-left: var(--block-m);
box-sizing: border-box;
width: var(--block-w);
height: var(--block-h);
background: linear-gradient(to right, var(--c-l) 5%, transparent 5% 15%, var(--c-l) 15% 30%, transparent 30% 40%, var(--c-l) 40%);
padding: 0px;
font-size: var(--f-s);
line-height: 1.5;
text-align: right;][comment]

-- Number --[/comment][border=transparent;
position: relative;
left: var(--num-l);
box-sizing: border-box;
padding: 0px;
filter: invert(100%) brightness(120%);]98[/border][/border][/border][/font]

Strobe Lines Icon


Code:
[comment]-- Font -->[/comment][font=Mohave][border=transparent;

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

box-sizing: border-box;
padding: 0px;

--c-t: #F2E205; /* Text colour */
--c-l: #F2E205; /* Line colour */

--f-s: 2.7em; /* Font size, increase or decrease by .1 increments */

--block-m: 10px;
--block-w: 62px;
--block-h: 42px;

--icon-t: -5px;][comment]

-- Text --[/comment][border=transparent;
position: relative;
display: inline;
box-sizing: border-box;
padding: 0px;
color: var(--c-t);
font-size: var(--f-s);
line-height: 1.1;]Strobe Lines Icon[/border][comment]

-- Lines --[/comment][border=transparent;
position: relative;
display: inline-block;
margin-left: var(--block-m);
box-sizing: border-box;
width: var(--block-w);
height: var(--block-h);
background: linear-gradient(to right, var(--c-l) 5%, transparent 5% 15%, var(--c-l) 15% 30%, transparent 30% 40%, var(--c-l) 40%);
padding: 0px;
font-size: var(--f-s);
line-height: 1.5;
text-align: right;][comment]

-- Icon --[/comment][border=transparent;
position: relative;
top: var(--icon-t);
box-sizing: border-box;
padding: 0px;
filter: invert(100%) brightness(120%);][fa]far fa-telescope[/fa][/border][/border][/border][/font]

Strikethrough


Code:
[font=East Sea Dokdo][border=transparent;

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

position: relative;
box-sizing: border-box;
width: -moz-fit-content;
width: fit-content;
padding: 0px;

--c-s: #05ACFF; /* Strikethrough colour */
--c-t: #0461B3; /* Text colour */

--s-h: 6px; /* Strikethrough width */

--d: 2px;
--p: 0px 4px; /* Text padding */
--f-s: 4em; /* Font size, increase or decrease by .1 increments */
--sh: 2px 2px var(--c-s); /* Text shadow */][comment]

-- Strikethrough --[/comment][border=transparent;
position: absolute;
top: calc(50% - (var(--s-h) / 2) + var(--d));
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--s-h);
background: var(--c-s);
padding: 0px;][/border][comment]

-- Text --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: var(--p);
color: var(--c-t);
font-size: var(--f-s);
text-shadow: var(--sh);
line-height: 0.8;]Strikethrough[/border][/border][/font]

Strikethrough Icon


Code:
[font=East Sea Dokdo][border=transparent;

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

position: relative;
box-sizing: border-box;
width: -moz-fit-content;
width: fit-content;
padding: 0px;

--c-s: #05ACFF; /* Strikethrough colour */
--c-t: #0461B3; /* Text colour */

--s-h: 6px; /* Strikethrough width */

--d: 2px;
--p: 0px 4px; /* Text padding */
--f-s: 4em; /* Font size, increase or decrease by .1 increments */
--sh: 2px 2px var(--c-s); /* Text shadow */

--icon-s: 0.66em; /* Icon size, increase or decrease by .1 increments */][comment]

-- Strikethrough --[/comment][border=transparent;
position: absolute;
top: calc(50% - (var(--s-h) / 2) + var(--d));
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--s-h);
background: var(--c-s);
padding: 0px;][/border][comment]

-- Text --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: var(--p);
color: var(--c-t);
font-size: var(--f-s);
text-shadow: var(--sh);
line-height: 0.8;]Strikethrough Icon [comment]

-- Icon --[/comment][border=transparent;
position: relative;
top: calc(2 * var(--d));
display: inline;
padding: 0px;
font-size: var(--icon-s);][fa]far fa-fish[/fa][/border][/border][/border][/font]
 
Last edited:
I've been on this site since 2016 (Albeit on a different account), and godDAMN this is so impressive. I never saw this extensive use of bbcode before, and only now browsing through here do I see what it's capable of. I am speechless!
 
I've been on this site since 2016 (Albeit on a different account), and godDAMN this is so impressive. I never saw this extensive use of bbcode before, and only now browsing through here do I see what it's capable of. I am speechless!
Thank you sm! ♥️ Ngl, starting this thread helped me learn a lot of new features that I didn't even know existed. 😂 The true MVP is CSS documentation on the internet.
 
Nanobytes
The first code is an accordion-tab combination in the hacker/shell(?) aesthetic. Eye-killing colours, bad padding and all. You're welcome.
😌
The second came about because I realized I could make the bar above the accordion instead — it's also a lot simpler. The code for the first one is... really long. Like scroll for 20 seconds long. Now that I think about it, you could probably take the tabs out to use on its own — if that’s what you’re looking for, just pop me a note and I’ll add that version up.

It's best to keep the tab titles at 6 characters or less, and if you change one of them, remember to change all four versions of that single tab (use Ctrl+F).

If you think this reminds you of a username above this, you're probably right. @Nano

I was planning to make a code for every commenter bc I thought like, there would be maybe one comment. But no, y'all just had to comment more. Since I don't have the energy for that, I quit this self-assigned mission. To that one commenter, plz forgive me. Know that I love y’all anyway.


Click Fingerprint



  • Basic
    Bio
    People
    Extra
    Art \\ Eh Macmillan
    Alias \\ xViva
    Age \\ unknown
    Gender \\ unknown
    Motto \\ Vivat Libertas

    Exploits \\
    - Omni Corp Database Incident -
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

    - Ladonine Research Removal -
    Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor, sit amet lobortis est. Suspendisse consectetur lorem sit amet nisl hendrerit, sed fringilla quam commodo.




Code:
[font=Overpass Mono][border=transparent;
position: relative;
top: 5px;
margin: auto;
max-width: 900px;
padding: 0px;
text-align: center;]Click Fingerprint[/border][border=transparent;

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

visibility: hidden;
position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: flex-start;
margin: auto;
box-sizing: border-box;
max-width: 900px;
padding: 0px;

--c-a: #6bcfd4; /* Accent colour */
--c-b: black; /* Base colour */
--b-w: 1px; /* Border width */
--b: var(--b-w) solid var(--c-a);

--scan-w: 160px;
--scan-h: 180px;
--scan-bg: url('https://thumbs.gfycat.com/CooperativeIcyCats-size_restricted.gif') no-repeat 50% 55% / 140%, var(--c-b);  /* Fingerprint GIF URL , if you change the image and it's too big or small in window, change percentage after slash (or default to cover) */

--bar-h: 22px;
--bar-p: 3px;

--button-m: 2px;
--button-s: 18px;
--button-p: 2px 0px 0px 1px;
--min-s: 12px;
--max-s: 12px;

--tabs-l: -10px;

--tab-l: calc(0px - var(--tabs-l) + 5px);
--tab-w: 64px;
--tab-h: 26px;
--tab-p: 2px;
--tab-b: calc(2 * var(--b-w)) solid var(--c-b);

--win-t: var(--tab-h);
--win-l: calc(0px - var(--tabs-l));
--win-w: 100%;
--win-h: min(400px, 76vh); /* Main window height, change px number for a longer or shorter content window on desktop */

--img-m: 10px 10px var(--text-p) 10px;
--img-w: 220px;
--img-h: 300px;

/* Image URLs */
--img-1: url('https://64.media.tumblr.com/54b5e64e43cee9f92c47c02a2ac46d16/tumblr_no89ppCLcw1qgrqdko1_1280.png') 50% -10% / cover;
--img-2: url('https://cdna.artstation.com/p/assets/images/images/007/635/920/large/a-04.jpg?1507515544') 50% -10% / cover;
--img-3: url('https://i.pinimg.com/originals/57/41/0c/57410ce7bd93683d95e404af331aeee0.jpg') 50% -10% / cover;

--art-p: 5px;
--art-s: 0.9em; /* Art credit font size */
--art-c: rgba(0, 0, 0, 0.5); /* Art credit background colour */

--text-p: 10px; /* Text padding */
--text-c: #9fe0e3; /* Text colour */]

[comment]-- Accordion --[/comment]
[accordion=100%]
{slide=[comment]-- Fingerprint Window --[/comment][border=transparent;
visibility: visible;
margin: auto;
box-sizing: border-box;
max-width: var(--scan-w);
height: var(--scan-h);
padding: 0px;
border: var(--b);
background: var(--scan-bg);][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][/border]}[comment]-- Slide Body --[/comment][border=transparent;
visibility: visible;
position: relative;
left: var(--tabs-l);
margin: auto;
margin-bottom: calc(var(--win-h) - var(--tab-h));
box-sizing: border-box;
width: 100%;
padding: 0px;][comment]-- Actual Tabs --[/comment][tabs]

[comment]-- Tab 1 --[/comment]
[tab=.][comment]-- Tabs --[/comment][border=transparent;
position: absolute;
top: 0px;
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--text-c);
text-align: center;
background: var(--c-b);
pointer-events: none;]Basic[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + var(--tab-w));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Bio[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (2 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]People[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (3 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Extra[/border][comment]-- Tab Window --[/comment][border=transparent;
position: absolute;
top: var(--win-t);
left: var(--win-l);
box-sizing: border-box;
width: var(--win-w);
height: var(--win-h);
padding: 0px;
border: var(--b);
background: var(--c-b);][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
width: 100%;
height: calc(var(--win-h) - var(--bar-h) - (2 * var(--b-w)));
padding: var(--text-p);
color: var(--text-c);
line-height: 130%;
overflow: auto;][comment]-- Image Window --[/comment][border=transparent;
margin: var(--img-m);
box-sizing: border-box;
width: var(--img-w);
height: var(--img-h);
float: right;
padding: 0px;
border: var(--b);
background: var(--img-1);
display: flex;
flex-flow: row wrap;
justify-content: flex-end;][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Artist Credit --[/comment][border=transparent;
align-self: flex-end;
padding: var(--art-p);
font-size: var(--art-s);
background: var(--art-c);][b]Art \\[/b] Eh Macmillan[/border][/border][b]Alias \\[/b] xViva
[b]Age \\[/b] unknown
[b]Gender \\[/b] unknown
[b]Motto \\[/b] Vivat Libertas

[b]Exploits \\[/b]
- Omni Corp Database Incident -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

- Ladonine Research Removal -
Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor, sit amet lobortis est. Suspendisse consectetur lorem sit amet nisl hendrerit, sed fringilla quam commodo.[/border][/border][/tab]


[comment]-- Tab 2 --[/comment]
[tab=.][comment]-- Tabs --[/comment][border=transparent;
position: absolute;
top: 0px;
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Basic[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + var(--tab-w));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--text-c);
text-align: center;
background: var(--c-b);
pointer-events: none;]Bio[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (2 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]People[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (3 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Extra[/border][comment]-- Tab Window --[/comment][border=transparent;
position: absolute;
top: var(--win-t);
left: var(--win-l);
box-sizing: border-box;
width: var(--win-w);
height: var(--win-h);
padding: 0px;
border: var(--b);
background: var(--c-b);][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
width: 100%;
height: calc(var(--win-h) - var(--bar-h) - (2 * var(--b-w)));
padding: var(--text-p);
color: var(--text-c);
line-height: 130%;
overflow: auto;][comment]-- Image Window --[/comment][border=transparent;
margin: var(--img-m);
box-sizing: border-box;
width: var(--img-w);
height: var(--img-h);
float: left;
padding: 0px;
border: var(--b);
background: var(--img-2);
display: flex;
flex-flow: row wrap;
justify-content: flex-end;][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Artist Credit --[/comment][border=transparent;
align-self: flex-end;
padding: var(--art-p);
font-size: var(--art-s);
background: var(--art-c);][b]Art \\[/b] 手指断了 a[/border][/border][b]Persona \\[/b]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

[b]Bio \\[/b]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet. Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor, sit amet lobortis est. Suspendisse consectetur lorem sit amet nisl hendrerit, sed fringilla quam commodo.

 Maecenas vulputate mi id nisl suscipit imperdiet. Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor.[/border][/border][/tab]

[comment]-- Tab 3 --[/comment]
[tab=.][comment]-- Tabs --[/comment][border=transparent;
position: absolute;
top: 0px;
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Basic[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + var(--tab-w));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Bio[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (2 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--text-c);
text-align: center;
background: var(--c-b);
pointer-events: none;]People[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (3 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Extra[/border][comment]-- Tab Window --[/comment][border=transparent;
position: absolute;
top: var(--win-t);
left: var(--win-l);
box-sizing: border-box;
width: var(--win-w);
height: var(--win-h);
padding: 0px;
border: var(--b);
background: var(--c-b);][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
width: 100%;
height: calc(var(--win-h) - var(--bar-h) - (2 * var(--b-w)));
padding: var(--text-p);
color: var(--text-c);
line-height: 130%;
overflow: auto;][comment]-- Image Window --[/comment][border=transparent;
margin: var(--img-m);
box-sizing: border-box;
width: var(--img-w);
height: var(--img-h);
float: right;
padding: 0px;
border: var(--b);
background: var(--img-3);
display: flex;
flex-flow: row wrap;
justify-content: flex-end;][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Artist Credit --[/comment][border=transparent;
align-self: flex-end;
padding: var(--art-p);
font-size: var(--art-s);
background: var(--art-c);][b]Art \\[/b] Eh Macmillan[/border][/border][b]Acquaintances \\[/b] loADer, 396_, wen

[b]Family \\[/b] unknown[/border][/border][/tab]

[tab=.][comment]-- Tabs --[/comment][border=transparent;
position: absolute;
top: 0px;
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Basic[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + var(--tab-w));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Bio[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (2 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]People[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (3 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--text-c);
text-align: center;
background: var(--c-b);
pointer-events: none;]Extra[/border][comment]-- Tab Window --[/comment][border=transparent;
position: absolute;
top: var(--win-t);
left: var(--win-l);
box-sizing: border-box;
width: var(--win-w);
height: var(--win-h);
padding: 0px;
border: var(--b);
background: var(--c-b);][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
width: 100%;
height: calc(var(--win-h) - var(--bar-h) - (2 * var(--b-w)));
padding: var(--text-p);
color: var(--text-c);
line-height: 130%;
overflow: auto;][b]Music \\[/b]

[comment]-- Music Window --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
max-width: calc(2 * var(--img-w));
height: auto;
padding: 0px;
border: var(--b);
display: flex;
flex-flow: row wrap;
justify-content: flex-end;][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Youtube link characters after = sign -->[/comment][MEDIA=youtube]UnIhRpIT7nc[/MEDIA][comment]-- Artist Credit --[/comment][border=transparent;
align-self: flex-end;
padding: var(--art-p);
font-size: var(--art-s);
background: var(--art-c);][b]Music \\[/b] inabakumori[/border][/border][/border][/border][/tab]

[/tabs][/border]{/slide}
[/accordion]

[/border][/font]

Click Bar
Art \\ Eh Macmillan
Alias \\ xViva
Age \\ unknown
Gender \\ unknown
Motto \\ Vivat Libertas

---​

Persona \\
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

Exploits \\
- Omni Corp Database Incident -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

- Ladonine Research Removal -
Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor, sit amet lobortis est. Suspendisse consectetur lorem sit amet nisl hendrerit, sed fringilla quam commodo.


Code:
[font=Overpass Mono][border=transparent;
position: relative;
top: 10px;
margin: auto;
max-width: 900px;
padding: 0px;
text-align: center;]Click Bar[/border][border=transparent;

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

visibility: hidden;
position: relative;
margin: auto;
max-width: 900px; /* Max width */
padding: 0px;

--c-a: #6bcfd4; /* Accent colour */
--c-b: black; /* Base colour */
--b-w: 1px; /* Border width */
--b: var(--b-w) solid var(--c-a);

--bar-h: 22px;
--bar-p: 3px;

--button-m: 2px;
--button-s: 18px;
--button-p: 1px 0px 0px 1px;
--min-s: 12px;
--max-s: 12px;

--win-t: -13px;
--win-l: 0px;
--win-w: 100%;

--img-m: 10px 10px var(--text-p) 10px;
--img-w: 240px;
--img-h: 320px;
--img: url('https://64.media.tumblr.com/54b5e64e43cee9f92c47c02a2ac46d16/tumblr_no89ppCLcw1qgrqdko1_1280.png') 50% -10% / cover; /* Image URL */

--art-p: 5px;
--art-s: 0.9em; /* Art credit font size */
--art-c: rgba(0, 0, 0, 0.5); /* Art credit background colour */

--text-p: 10px; /* Text padding */
--text-c: #9fe0e3; /* Text colour */][accordion=100%]
{slide=[comment]-- Bar --[/comment][border=transparent;
visibility: visible;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border]}[comment]-- Slide Body --[/comment][comment]-- Tab Window --[/comment][border=transparent;
visibility: visible;
position: relative;
top: var(--win-t);
left: var(--win-l);
box-sizing: border-box;
width: var(--win-w);
padding: 0px;
border: var(--b);
background: var(--c-b);][comment]-- Text --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
width: 100%;
height: calc(var(--win-h) - var(--bar-h) - (2 * var(--b-w)));
padding: var(--text-p);
color: var(--text-c);
line-height: 130%;][comment]-- Image Window --[/comment][border=transparent;
margin: var(--img-m);
box-sizing: border-box;
width: var(--img-w);
height: var(--img-h);
float: right;
padding: 0px;
border: var(--b);
background: var(--img);
display: flex;
flex-flow: row wrap;
justify-content: flex-end;][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Artist Credit --[/comment][border=transparent;
align-self: flex-end;
padding: var(--art-p);
font-size: var(--art-s);
background: var(--art-c);][b]Art \\[/b] Eh Macmillan[/border][/border][comment]-- Text --[/comment][b]Alias \\[/b] xViva
[b]Age \\[/b] unknown
[b]Gender \\[/b] unknown
[b]Motto \\[/b] Vivat Libertas

[center]---[/center]

[b]Persona \\[/b]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

[b]Exploits \\[/b]
- Omni Corp Database Incident -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

- Ladonine Research Removal -
Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor, sit amet lobortis est. Suspendisse consectetur lorem sit amet nisl hendrerit, sed fringilla quam commodo.[/border][/border]{/slide}
[/accordion][/border][/font]

HOLY. THIS IS THE BEST THING IVE EVER SEEN.
 

Users who are viewing this thread

Back
Top