Resource Ami's Lab 2.0 | Mobile Friendly Freebies

[Ambiloquous]

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

(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. 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. )

 

[Kraftysloth]

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.
• Basic
  Bio
  People
  Extra
  Art \\ 手指断了 a

  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.
  
  Bio \\
  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.
• Basic
  Bio
  People
  Extra
  Art \\ Eh Macmillan

  Acquaintances \\ loADer, 396_, wen
  
  Family \\ unknown
• Basic
  Bio
  People
  Extra
  Music \\
  
  

  Music \\ inabakumori

Spoiler: Accordion + Tab 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.

Spoiler: Accordion 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!

 

[Ambiloquous]

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!

Thank you sm! I'm glad you found what you were looking for.

 

[lunarflowers]

Thank you so much for posting these amazing codes! They fit the Ghibli-esque theme of my roleplay perfectly.

 

[Ambiloquous]

Thank you so much for posting these amazing codes! They fit the Ghibli-esque theme of my roleplay perfectly.

You’re welcome! It’s nice to know that my codes have a theme.

 

[mediae]

This is fantasic! Absolutely amazing good queen!

 

[Ambiloquous]

This is fantasic! Absolutely amazing good queen!

Thank you!

 

[s e v e n]

a-accordions?? you truly live up to your profile picture my dear sir/madame because holy shit you're a goddamn magician

 

[FloofWhispers]

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

Spoiler: Character Display 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.

Spoiler: D&D Sheet 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)

 

[Ambiloquous]

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.

 

[Ambiloquous]

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.

 

[FloofWhispers]

NOT SOMEONE ACTUALLY USING THIS CODE DSLKFJDL. THANK YOU???

Yes, yes, I can, valued customer. It is kinda... lengthy and complicated, sorry about that.

Thanks, I'll PM you the info!​

 

[Ambiloquous]

Colour/Less

A tabs code for a certain Spec. 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.

Edit Edit: Quotes show up on Safari now. Yay.

Tabs

Hidden Scroll

COLOUR

LESS

• 000000
• 000

• .
• .

• .
• .
• .

• 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
• PERSONALITY

  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.
  
  HOBBIES

  Carrying noobs, beating up assholes
  LIKES

  N/A
  DISLIKES

  N/A

  BIOGRAPHY

  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.
  
  ACQUAINTANCES

  N/A
  FRIENDS

  10Green_Robo10, Pink.Sama
  FAMILY

  orangebro

  Artist: SeerLight

  Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
  - WHO KNOWS
• EXTRAS

  SOMETHING

  N/A
  SOMETHING ELSE

  N/A
  SOMETHING NOT

  N/A
  SOMETHING BEYOND

  N/A
  SOMETHING

  N/A

  PLAYLIST

  Artist: SeerLight

  Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
  - NOT ME

Spoiler: 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]

 

[Colorless Spectrum]

Colour/Less

A tabs code for a certain Spec. 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

• 000000
• 000

• .
• .

• .
• .
• .

• 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
• PERSONA

  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.
  
  HOBBIES

  Carrying noobs, beating up assholes
  LIKES

  N/A
  DISLIKES

  N/A

  BIO

  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.
  
  ACQUAINTANCES

  N/A
  FRIENDS

  10Green_Robo10, Pink.Sama
  FAMILY

  orangebro

  Artist: SeerLight

  Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
  - WHO KNOWS
• EXTRAS

  SOMETHING

  N/A
  SOMETHING ELSE

  N/A
  SOMETHING NOT

  N/A
  SOMETHING BEYOND

  N/A
  SOMETHING

  N/A

  PLAYLIST

  Artist: SeerLight

  Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
  - NOT ME

Spoiler: 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.

 

[Ambiloquous]

I’m glad you like it ‘cause halfway through I realized the colours hurt my eyes. Ilyu too.

Sblkhhgk

 

[Colorless Spectrum]

I’m glad you like it ‘cause halfway through I realized the colours hurt my eyes. Ilyu too.

Sblkhhgk

BSJDBSJSBSJS I JUST REALIZED YOU EVEN PUT YOASOBI IN THE PLAYLIST! I LOVE THEMKANSNSIDUSBSHSJDIE9SHSISNDIDDI

 

[Ambiloquous]

BSJDBSJSBSJS I JUST REALIZED YOU EVEN PUT YOASOBI IN THE PLAYLIST! I LOVE THEMKANSNSIDUSBSHSJDIE9SHSISNDIDDI

That's why I put them in -- and the colours magically happened to sort of match.

 

[Ambiloquous]

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

exact design on a template

, you'll realize that I have indeed stolen heavily been inspired by the first card design I saw off the internet.

Accordion

No Scroll

Click for more info

Evil Incorporated

When good isn't enough

Inna Tern

Intern

ID No

: 000 000 001

Dept

: Paper Pushers

D.O.B

: 01/01/2030

Email

: inna.tern@evilcorporation.com

Phone

: +1 000-000-0001

Random text

Lorem ipsum dolor sit amet, consect adipcing elit. Integer auctor lobortis purus et accum san. Proin ac tristique erat, eu volutpat dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auc tor lobortis purus et accumsan. Proin ac tristique erat, eu volutpat dolor.

Lo rem ipsum dolor sit amet, consectetur adipi scing elit. Integer auctor lobortis purus et accumsan. Proin ac tristique erat, eu volutpat dolor.

Join Date : 01/01/2050
Expire Date : Indefinite

Evil Incorporated

When good isn't enough

Spoiler: 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]

 

[mediae]

two codes in one day?? we are blessed!

 

[Ambiloquous]

two codes in one day?? we are blessed!

Power of stress wheeee

 

[Ambiloquous]

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

Spoiler: 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

Spoiler: 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

Spoiler: 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

Spoiler: 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

Spoiler: 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

Spoiler: 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

Spoiler: 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

Spoiler: 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

Spoiler: 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

Spoiler: 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

Spoiler: Strobe Lines Num 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

Spoiler: 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

Spoiler: 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

Spoiler: 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]

 

[The Blex]

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!

 

[Ambiloquous]

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.

 

[Clan Ize]

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.
• Basic
  Bio
  People
  Extra
  Art \\ 手指断了 a

  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.
  
  Bio \\
  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.
• Basic
  Bio
  People
  Extra
  Art \\ Eh Macmillan

  Acquaintances \\ loADer, 396_, wen
  
  Family \\ unknown
• Basic
  Bio
  People
  Extra
  Music \\
  
  

  Music \\ inabakumori

Spoiler: Accordion + Tab 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.

Spoiler: Accordion 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.

 

[Ambiloquous]

HOLY. THIS IS THE BEST THING IVE EVER SEEN.

Sdlfkjdsl thank you!