Resource Ami's Lab 2.0 | Mobile Friendly Freebies

[Kwayzar]

Nostalgic to randomly find your code

 

[Ambiloquous]

Nostalgic to randomly find your code

Very.

 

[Ambiloquous]

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.

Spoiler: Long Rant

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

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

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

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

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

Image

Textbox

Hidden Scroll

Characters

Scroll

PAFF

Lv

7

NEKO

Lv

15

ROBO_Head

Lv

8

Ivy

Lv

13

Crystal PuNK

Lv

11

Bo Bo

Lv

14

Graff.J

Lv

69

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://vignette.wikia.nocookie.net/cytus/images/2/2e/BoBo.png/revision/latest?cb=20200819113732') no-repeat 5% 0px / 210%;

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

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

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

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

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

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

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

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

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

PAFF

Scroll

BARD

Lv

7

EXP

11 900/34 000

Race

HUMAN

Alignment

LAWFUL NEUTRAL

Background

ENTERTAINER

STR

+0

10

DEX

+0

10

CON

+0

10

INT

+0

10

WIS

+0

10

CHA

+0

10

Saving Throws

Proficiency Bonus

+3

Inspiration

0

STR

+0

DEX

+3

CON

+0

INT

+0

WIS

+0

CHA

+3

STR

Athletics

+0

DEX

Acrobatics

+0

Sleight of Hand

+0

Stealth

+0

INT

Arcana

+3

History

+0

Investigation

+3

Nature

+0

Religion

+0

WIS

Animal Handling

+0

Insight

+0

Medicine

+0

Perception

+0

Survival

+0

CHA

Deception

+3

Intimidation

+0

Performance

+3

Persuasion

+0

Passive Wisdom

(Perception)

10

Passive Intelligence

(Investigation)

13

Passive Wisdom

(Insight)

10

HP

26/38

Temp HP

0

SPD

30ft

INIT

0

Armour Class

10

Hit Dice

1D8

"A quote or something — whatever you want; this is here to fill space."

Attacks & Spells

ATTACK 1

ATK BONUS

DMG/TYPE

ATTACK 2

ATK BONUS

DMG/TYPE

ATTACK 3

ATK BONUS

DMG/TYPE

ATTACK 4

ATK BONUS

DMG/TYPE

Notes about attacks here
Another line

Proficiencies

ARMOUR

Armour 1

WEAPONS

Weapon 1, Weapon 2

TOOLS

Tool 1, Tool 2

LANGUAGES

Language 1, Language 2

Features & Traits

CLASS FEATURES

Feature 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feature 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feature 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

RACIAL TRAITS

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

FEATS

Feat 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feat 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CP

5

SP

0

EP

0

GP

20

PP

0

Equipment

ARMOUR

AC

Equipment 1
Equipment 2
Equipment 3
Equipment 4
Equipment 5
Equipment 6
Equipment 7
Equipment 8
Equipment 9
Equipment 10
Equipment 11
Equipment 12

Personality Traits

I like to read and memorize poetry. It keeps me calm and brings me fleeting moments of happiness.
I don’t talk about the thing that torments me. I’d rather not burden others with my curse.

Ideals

I’ll stop the spirits that haunt me or die trying.

Bonds

I keep my thoughts and discoveries in a journal. My journal is my legacy.

Flaws

I have certain rituals that I must follow every day. I can never break them.

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]

 

[Sushi_Saihara]

Your codes are so good omg --

 

[Ambiloquous]

Your codes are so good omg --

Thank you!

 

[ohdittoh]

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.

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]

This. Code. Is. So. COOL.

 

[Ambiloquous]

This. Code. Is. So. COOL.

No, you're cool. Get it right smh.

 

[Ambiloquous]

3D Interface

Tabs code testing 3D rotations.

You can copy paste the labels + fields to create more or delete the already existing. Character/skill sections can be copy pasted, but they have so many individual variables that you'd have to figure that out as well (or ask me).

Spoiler: Old Edits

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 — this also means that the tabs will not be in the place it looks like it is. Text may also be blurry due to transform.

Edit Again: Okay, so my browser updated and now the only browser I know of that it looks kind of right on is Safari. Oof. No longer does it have 3D elements — it's just squished and flat now. Then watch a week after I say this, Safari updates, and it becomes flat everywhere.

Edit Again Again: I sort of fixed it. The third version of the code is the sort-of-fixed code, where I finally got the transformation working the same as before, minus the third tab which is a little wack. I didn't bother adding the edits onto the skill section version because it's really just the same code with different colours and Font Awesome icons. Also fixed a bug that made the labels in second tab format a bit weird on Safari.

Edit Again Again Again: I fixed it for real for real this time. No more funky perspectives in the relationship section, and the code with the skills section has also been updated.

Edit Again 4: I forgot a

box-sizing: border-box

and a

padding: 0

property because I was still using border tags here, oops. Added them, so there's no horizontal scroll in the third tab.

Tabs

Hidden Scroll

Click Tabs on Left + Possible Scroll

• .
• .
• .
• .

• Varipa Da

  Healer of Hiraya

  Alias

  None

  Age

  52 years old

  Gender

  None

  Race

  Hirayan Ganiu

  Height

  158.2 cm

  Weight

  50.13 kg

  Affiliation

  Healer's Guild

  Homeland

  Hiraya
• Backstory

  Childhood Glory

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque.

  Healing Apprenticeship

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. Fusce quis porttitor metus. In eleifend aliquam justo quis convallis.

  Days Adventuring

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. Fusce quis porttitor metus. In eleifend aliquam justo quis convallis.

  Puriha Village
• Ergos Pallus

  Captain of the Red Eagles

  Last Online

  2 Hours Ago

  Affiliation

  Red Eagles

  Notes

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.

  Yve Krzovuh

  Deputy of Silver Verdancy

  Last Online

  3 Hours Ago

  Affiliation

  Silver Verdancy, Archer's Guild

  Notes

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.

  Lua L'Arey

  Mage of House Alouette

  Last Online

  3 Hours Ago

  Affiliation

  House Alouette, The Society of Magical Creatures, Mage's Guild

  Notes

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.

  Telvani

  Shield of Queen Belladon

  Last Online

  5 Hours Ago

  Affiliation

  Queen's Guards

  Notes

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.
• Miscellaneous

  Display

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod.

  Controls

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti.

  Extras

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit.

  Genaiva Township

Background Artist: Tyler Edlin

Character Artist 1: Guweiz

Setting Artist 1: Diep Bui

Character Artist 2: Qingbin Cao

Character Artist 3: Imeran

Character Artist 4: KORHIPER

Character Artist 5: Stéphane Robert

Setting Artist 2: Denis Istomin

Spoiler: Code with Relationship Section

[comment]-- Font -->[/comment][font=Chakra Petch][border=transparent;

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

--color-b: 8, 18, 28; /* Base screen colour, use rgb numbers */

--bar-p: 3px 10px 3px 10px;
--bar-f-s: 0.85em;
--bar-l-h: 1.5;
--bar-o: 0.4;

--tabs-w: 40px;
--tabs-h: 220px;
--tabs-l-h: 4;

--w: 900px;
--h: min(76vh, 440px);
--p-l-r: 0px;
--p-t-b: 10px;
--d: 10px;

/* Background Image URL */
--bg-img: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)), url('https://cdna.artstation.com/p/assets/images/images/010/601/496/large/tyler-edlin-fantasy-landscape1.jpg?1525276483') 50% 50% / cover;

--tab-cover-l: 0px;
--tab-cover-p-t: 3px;
--tab-cover-p-l: 15px;
--tab-cover-gap: 32px;

--tab-w: 25px;
--tab-o: 0.75;

--tab-p-2: 1px 0px 0px 0px;
--tab-p-3: 1px 0px 0px 0px;

--tab-f-s-1: 1em;
--tab-f-s-2: 0.95em;
--tab-f-s-3: 0.95em;
--tab-f-s-4: 1.1em;

/* Tab Font Awesome Icon Colours */
--tab-c-1: #FDEBB1; /* Tab 1 Font Awesome icon colour */
--tab-c-2: #CDAAFA; /* Tab 2 Font Awesome icon colour */
--tab-c-3: #BEF5AE; /* Tab 3 Font Awesome icon colour */
--tab-c-4: #9DD7FA; /* Tab 4 Font Awesome icon colour */

/* Header Font Awesome Icon Colours */
--header-c-1: #BEF5AE; /* Tab 1 header Font Awesome icon colour */
--header-c-2: #9DD7FA; /* Tab 2 header Font Awesome icon colour */
--header-c-3-1: #FAA69E; /* Tab 3 header 1 Font Awesome icon colour */
--header-c-3-2: #FDEBB1; /* Tab 3 header 2 Font Awesome icon colour */
--header-c-3-3: #9DD7FA; /* Tab 3 header 3 Font Awesome icon colour */
--header-c-3-4: #CDAAFA; /* Tab 3 header 4 Font Awesome icon colour */
--header-c-4: #CDAAFA; /* Tab 4 header Font Awesome icon colour */

/* Probably best if you don't mess with rotation */
/* Rotation */
--rotate-t: rotateY(20deg);
--rotate-l: rotateY(22deg);
--rotate-r: rotateY(-22deg);
/* Character Rotation */
--rotate-l-i: rotateY(10deg);
--rotate-r-d: rotateY(-10deg);

--container-gap: 8px;

--img-container-flex-1: 1 1 210px;
--img-container-p: 25px 0px;

--img-d: 20px;
--img-t: 0px;
--img-l-1: calc(0px - (100% - (2 * var(--img-d))));
--img-l-2: calc(0px - (100% - var(--img-d)));
--img-w: calc(100% - var(--img-d));
--img-h-1: 300px;
--img-h-2: min(calc(var(--h) - (2 * var(--p-t-b)) - var(--header-h-1) - var(--container-gap) - 25px), 330px);
--img-o: 1;

/* Tab Image URLs, change % (x-axis) and px (y-axis) before / to shift image position in icon, change % after / to change image size in icon (or default to cover) */
/* Tab 1 Image URL */
--img-url-1: url('https://www.worldanvil.com/uploads/images/1b39107b4a0ff70f814a780ddd42eed1.jpg') no-repeat 50% 0px / cover; 
/* Tab 2 Image URL */
--img-url-2: url('https://cdnb.artstation.com/p/assets/images/images/029/215/783/large/diep-bui-bg1-color.jpg?1596811368') no-repeat 50% 0px / cover; 
/* Tab 3 Image URL 1 */
--img-url-3-1: url('https://cdnb.artstation.com/p/assets/images/images/016/464/495/large/qingbin-cao-2019-03-11.jpg?1552280527') no-repeat 50% -30px / cover;
/* Tab 3 Image URL 2 */
--img-url-3-2: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/85efea81-8400-4f9c-8f32-a30e34d7e537/d9wavem-604a2b29-17c1-40d5-9be5-87fab49f0457.jpg/v1/fill/w_1024,h_1246,q_75,strp/archer_by_imeran_d9wavem-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTI0NiIsInBhdGgiOiJcL2ZcLzg1ZWZlYTgxLTg0MDAtNGY5Yy04ZjMyLWEzMGUzNGQ3ZTUzN1wvZDl3YXZlbS02MDRhMmIyOS0xN2MxLTQwZDUtOWJlNS04N2ZhYjQ5ZjA0NTcuanBnIiwid2lkdGgiOiI8PTEwMjQifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.zJP8d-2HH8mqZbygaNg7C2zJ6wy5dPUJh3qx46SinVk') no-repeat 62% 0px / 200%;
/* Tab 3 Image URL 3 */
--img-url-3-3: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/1f3c7f77-f51b-4fed-8d67-5563b61ea07d/d8sbffa-b718577b-28c7-4b96-8116-9c7c83c18bab.jpg/v1/fill/w_1024,h_1449,q_75,strp/blue_dragon_by_korhiper_d8sbffa-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTQ0OSIsInBhdGgiOiJcL2ZcLzFmM2M3Zjc3LWY1MWItNGZlZC04ZDY3LTU1NjNiNjFlYTA3ZFwvZDhzYmZmYS1iNzE4NTc3Yi0yOGM3LTRiOTYtODExNi05YzdjODNjMThiYWIuanBnIiwid2lkdGgiOiI8PTEwMjQifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.0WLU93EmF6Pk3WHxRucWysBu9wHC01pmh-iOIK5mWzs') no-repeat 50% -15px / cover;
/* Tab 3 Image URL 4 */
--img-url-3-4: url('https://cdna.artstation.com/p/assets/images/images/010/221/278/large/stephane-robert-syanna-echecs.jpg?1523261336') no-repeat 75% -35px / 185%;
/* Tab 4 Image URL */
--img-url-4: url('https://www.dreampirates.in/wallpaper/art/img/24-12-2019-9840-river-home-art.jpg') no-repeat 50% 0px / cover;

--img-rep-t: calc(0px - var(--img-t));
--img-rep-l: calc(100% - (100% - var(--img-d)));
--img-rep-o: 0.6;

--text-container-flex-1: 5 1 230px;
--text-container-flex-2: 10 1 600px;
--text-container-p: 25px 2px 25px 0px;

--header-h-1: 40px;
--header-h-2: 15px;
--header-p: 10px var(--text-p);
--header-bg: rgba(var(--color-b), 0.7);
--header-f-s-1: 1.4em;
--header-f-s-2: 1.2em;
--header-gap: 5px;

--text-h-1: 320px;
--text-h-2: 220px;
--text-p: 20px;
--text-bg: rgba(var(--color-b), 0.5);
--text-c: rgb(240, 240, 235); /* Text colour */
--text-f-s: 1em;
--text-l-h: 1.5;
--text-gap: 10px;

--label-w: 135px; /* Label width, change if a word is too long for the label */

--field-w: 180px;

--char-container-w: 100%;
--char-container-gap: 10px 8px;

--icon-container-flex: 1 1 220px;
--icon-container-p: 10px 0px;
--icon-h: 210px;

--detail-container-p: 10px 0px;][comment]

-- Top Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--bar-p);
font-size: var(--bar-f-s);
line-height: var(--bar-l-h);
text-align: center;
opacity: var(--bar-o);]Click Tabs on Left + Possible Scroll [fa]far fa-arrow-circle-down[/fa][/border][comment]

-- Overall Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--h);
padding: 0px;][comment]-- Tabs + Body Container --[/comment][border=transparent;
margin: auto;
max-width: calc(var(--w) + var(--tabs-w));
height: var(--h);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Tabs --[/comment][border=transparent;
padding: 0px;
background: red;
width: var(--tabs-w);
height: var(--tabs-h);
line-height: var(--tabs-l-h);
overflow: hidden;][tabs]

[tab=.][comment]-- Tab Body 1 --[/comment][comment]-- Background --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--h);
background: var(--bg-img);
padding: 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Tab Covers --[/comment][border=transparent;
position: relative;
left: var(--tab-cover-l);
box-sizing: border-box;
padding: var(--tab-cover-p-t) 0px 0px var(--tab-cover-p-l);
width: calc(var(--tab-w) + var(--tab-cover-p-l));
height: calc((4 * var(--tab-w)) + (3 * var(--tab-cover-gap)) + var(--tab-cover-p-t));
-webkit-transform: var(--rotate-t);
transform: var(--rotate-t);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--tab-cover-gap);
z-index: 1;][comment]-- Tab Cover 1 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
//background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-1);
font-size: var(--tab-f-s-1);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-2);
font-size: var(--tab-f-s-2);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-book-open[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-3);
font-size: var(--tab-f-s-3);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-users[/fa][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-4);
font-size: var(--tab-f-s-4);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-cog[/fa][/border][/border][comment]
-- Tab Covers End --[/comment][comment]

-- Body Container --[/comment][border=transparent;
position: relative;
margin-left: calc(var(--tabs-w) - var(--tab-w) - var(--tab-cover-p-l));
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px var(--p-l-r);
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--d)));
height: var(--h);
padding: var(--p-t-b) calc(2 * var(--d)) var(--p-t-b) 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
overflow-y: auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;][comment]

-- Image + Name Container --[/comment][border=transparent;
flex: var(--img-container-flex-1);
box-sizing: border-box;
padding: var(--img-container-p);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--img-h-1);
padding: 0px;
background: var(--img-url-1);
opacity: var(--img-rep-o);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--img-h-1) + var(--header-h-1));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--img-h-1) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-1);
opacity: var(--img-o);][/border][comment]-- Name Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Varipa Da[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Basics Container --[/comment][border=transparent;
flex: var(--text-container-flex-1);
box-sizing: border-box;
padding: var(--text-container-p);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Healer of Hiraya[/border][comment]-- Header Font Awesome Icon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-1);][fa]far fa-heartbeat[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-1);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Alias Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Alias[/border][comment]-- Alias Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]None[/border][comment]-- Age Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Age[/border][comment]-- Age Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]52 years old[/border][comment]-- Gender Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Gender[/border][comment]-- Gender Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]None[/border][comment]-- Race Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Race[/border][comment]-- Race Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Hirayan Ganiu[/border][comment]-- Height Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Height[/border][comment]-- Height Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]158.2 cm[/border][comment]-- Weight Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Weight[/border][comment]-- Weight Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]50.13 kg[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Affiliation[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Healer's Guild[/border][comment]-- Homeland Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Homeland[/border][comment]-- Homeland Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Hiraya[/border][/border][/border][comment]
-- Basics Container End --[/comment][/border][/border][comment]
-- Body Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 2 --[/comment][comment]-- Background --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--h);
background: var(--bg-img);
padding: 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Tab Covers --[/comment][border=transparent;
position: relative;
left: var(--tab-cover-l);
box-sizing: border-box;
padding: var(--tab-cover-p-t) 0px 0px var(--tab-cover-p-l);
width: calc(var(--tab-w) + var(--tab-cover-p-l));
height: calc((4 * var(--tab-w)) + (3 * var(--tab-cover-gap)) + var(--tab-cover-p-t));
-webkit-transform: var(--rotate-t);
transform: var(--rotate-t);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--tab-cover-gap);
z-index: 1;][comment]-- Tab Cover 1 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-1);
font-size: var(--tab-f-s-1);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
//background: var(--header-bg);
padding: var(--tab-p-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-2);
font-size: var(--tab-f-s-2);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-book-open[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-3);
font-size: var(--tab-f-s-3);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-users[/fa][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-4);
font-size: var(--tab-f-s-4);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-cog[/fa][/border][/border][comment]
-- Tab Covers End --[/comment][comment]

-- Body Container --[/comment][border=transparent;
position: relative;
margin-left: calc(var(--tabs-w) - var(--tab-w) - var(--tab-cover-p-l));
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px var(--p-l-r);
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--d)));
height: var(--h);
padding: var(--p-t-b) calc(2 * var(--d)) var(--p-t-b) 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
overflow-y: auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;][comment]

-- Backstory Container --[/comment][border=transparent;
flex: var(--text-container-flex-1);
box-sizing: border-box;
padding: var(--text-container-p);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Backstory[/border][comment]-- Header Font Awesome Icon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-2);][fa]far fa-books[/fa][/border][/border][comment]-- Backstory Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-1);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]
-- Event 1 Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Childhood Glory[/border][comment]-- Event 1 Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. [/border][comment]
-- Event 2 Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Healing Apprenticeship[/border][comment]-- Event 2 Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. Fusce quis porttitor metus. In eleifend aliquam justo quis convallis.[/border][comment]
-- Event 3 Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Days Adventuring[/border][comment]-- Event 3 Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. Fusce quis porttitor metus. In eleifend aliquam justo quis convallis.[/border][/border][/border][comment]
-- Backstory Container End --[/comment][comment]

-- Image + Header Container --[/comment][border=transparent;
position: -webkit-sticky;
position: sticky;
top: 0px;
box-sizing: border-box;
flex: var(--img-container-flex-1);
padding: var(--img-container-p);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: var(--img-rep-l);
box-sizing: border-box;
height: var(--img-h-2);
padding: 0px;
background: var(--img-url-2);
opacity: var(--img-rep-o);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-2);
box-sizing: border-box;
min-height: calc(var(--img-h-2) + var(--header-h-1));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--img-h-2) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-2);
opacity: var(--img-o);][/border][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Puriha Village[/border][/border][/border][comment]
-- Image + Header Container End --[/comment][/border][/border][comment]
-- Body Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 3 --[/comment][comment]-- Background --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--h);
background: var(--bg-img);
padding: 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Tab Covers --[/comment][border=transparent;
position: relative;
left: var(--tab-cover-l);
box-sizing: border-box;
padding: var(--tab-cover-p-t) 0px 0px var(--tab-cover-p-l);
width: calc(var(--tab-w) + var(--tab-cover-p-l));
height: calc((4 * var(--tab-w)) + (3 * var(--tab-cover-gap)) + var(--tab-cover-p-t));
-webkit-transform: var(--rotate-t);
transform: var(--rotate-t);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--tab-cover-gap);
z-index: 1;][comment]-- Tab Cover 1 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-1);
font-size: var(--tab-f-s-1);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-2);
font-size: var(--tab-f-s-2);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-book-open[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: var(--tab-p-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-3);
font-size: var(--tab-f-s-3);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-users[/fa][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-4);
font-size: var(--tab-f-s-4);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-cog[/fa][/border][/border][comment]
-- Tab Covers End --[/comment][comment]

-- Body Container --[/comment][border=transparent;
position: relative;
margin-left: calc(var(--tabs-w) - var(--tab-w) - var(--tab-cover-p-l));
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px var(--p-l-r);
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--d)));
height: var(--h);
padding: var(--p-t-b) calc(2 * var(--d)) var(--p-t-b)  0px;
perspective: 2000px;
perspective-origin: 50% 50%;
overflow-y: auto;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Characters Container --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0;
width: var(--char-container-w);
padding: 0;
perspective: 2000px;
perspective-origin: 50% 50%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--char-container-gap);][comment]

-- Image + Name Container --[/comment][border=transparent;
flex: var(--icon-container-flex);
box-sizing: border-box;
padding: var(--icon-container-p);
-webkit-transform: var(--rotate-l-i);
transform: var(--rotate-l-i);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--icon-h);
padding: 0px;
background: var(--img-url-3-1);
opacity: var(--img-rep-o);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--icon-h) + var(--header-h-2));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--icon-h) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-3-1);
opacity: var(--img-o);][/border][comment]-- Name Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Ergos Pallus[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Details Container --[/comment][border=transparent;
flex: var(--text-container-flex-2);
box-sizing: border-box;
padding: var(--detail-container-p);
-webkit-transform: var(--rotate-r-d);
transform: var(--rotate-r-d);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Captain of the Red Eagles[/border][comment]-- Header Font Awesome Icon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-3-1);][fa]far fa-sword[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-2);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Last Online Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Last Online[/border][comment]-- Last Online Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]2 Hours Ago[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Affiliation[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Red Eagles[/border][comment]-- Notes Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Notes[/border][comment]-- Notes Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.[/border][/border][/border][comment]
-- Details Container End --[/comment][comment]

-- Image + Name Container --[/comment][border=transparent;
flex: var(--icon-container-flex);
box-sizing: border-box;
padding: var(--icon-container-p);
-webkit-transform: var(--rotate-l-i);
transform: var(--rotate-l-i);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--icon-h);
padding: 0px;
background: var(--img-url-3-2);
opacity: var(--img-rep-o);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--icon-h) + var(--header-h-2));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--icon-h) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-3-2);
opacity: var(--img-o);][/border][comment]-- Name Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Yve Krzovuh[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Details Container --[/comment][border=transparent;
flex: var(--text-container-flex-2);
box-sizing: border-box;
padding: var(--detail-container-p);
-webkit-transform: var(--rotate-r-d);
transform: var(--rotate-r-d);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Deputy of Silver Verdancy[/border][comment]-- Header Font Awesome Icon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-3-2);][fa]far fa-bow-arrow[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-2);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Last Online Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Last Online[/border][comment]-- Last Online Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]3 Hours Ago[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Affiliation[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Silver Verdancy, Archer's Guild[/border][comment]-- Notes Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Notes[/border][comment]-- Notes Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.[/border][/border][/border][comment]
-- Details Container End --[/comment][comment]

-- Image + Name Container --[/comment][border=transparent;
flex: var(--icon-container-flex);
box-sizing: border-box;
padding: var(--icon-container-p);
-webkit-transform: var(--rotate-l-i);
transform: var(--rotate-l-i);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--icon-h);
padding: 0px;
background: var(--img-url-3-3);
opacity: var(--img-rep-o);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--icon-h) + var(--header-h-2));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--icon-h) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-3-3);
opacity: var(--img-o);][/border][comment]-- Name Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Lua L'Arey[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Details Container --[/comment][border=transparent;
flex: var(--text-container-flex-2);
box-sizing: border-box;
padding: var(--detail-container-p);
-webkit-transform: var(--rotate-r-d);
transform: var(--rotate-r-d);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Mage of House Alouette[/border][comment]-- Header Font Awesome Icon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-3-3);][fa]far fa-staff[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-2);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Last Online Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Last Online[/border][comment]-- Last Online Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]3 Hours Ago[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Affiliation[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]House Alouette, The Society of Magical Creatures, Mage's Guild[/border][comment]-- Notes Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Notes[/border][comment]-- Notes Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.[/border][/border][/border][comment]
-- Details Container End --[/comment][comment]

-- Image + Name Container --[/comment][border=transparent;
flex: var(--icon-container-flex);
box-sizing: border-box;
padding: var(--icon-container-p);
-webkit-transform: var(--rotate-l-i);
transform: var(--rotate-l-i);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--icon-h);
padding: 0px;
background: var(--img-url-3-4);
opacity: var(--img-rep-o);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--icon-h) + var(--header-h-2));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--icon-h) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-3-4);
opacity: var(--img-o);][/border][comment]-- Name Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Telvani[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Details Container --[/comment][border=transparent;
flex: var(--text-container-flex-2);
box-sizing: border-box;
padding: var(--detail-container-p);
-webkit-transform: var(--rotate-r-d);
transform: var(--rotate-r-d);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Shield of Queen Belladon[/border][comment]-- Header Font Awesome Icon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-3-4);][fa]far fa-shield-cross[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-2);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Last Online Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Last Online[/border][comment]-- Last Online Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]5 Hours Ago[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Affiliation[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Queen's Guards[/border][comment]-- Notes Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Notes[/border][comment]-- Notes Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.[/border][/border][/border][comment]
-- Details Container End --[/comment][/border][comment]
-- Characters Container End --[/comment][/border][/border][comment]
-- Body Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 4 --[/comment][comment]-- Background --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--h);
background: var(--bg-img);
padding: 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Tab Covers --[/comment][border=transparent;
position: relative;
left: var(--tab-cover-l);
box-sizing: border-box;
padding: var(--tab-cover-p-t) 0px 0px var(--tab-cover-p-l);
width: calc(var(--tab-w) + var(--tab-cover-p-l));
height: calc((4 * var(--tab-w)) + (3 * var(--tab-cover-gap)) + var(--tab-cover-p-t));
-webkit-transform: var(--rotate-t);
transform: var(--rotate-t);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--tab-cover-gap);
z-index: 1;][comment]-- Tab Cover 1 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-1);
font-size: var(--tab-f-s-1);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-2);
font-size: var(--tab-f-s-2);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-book-open[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-3);
font-size: var(--tab-f-s-3);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-users[/fa][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
//background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-4);
font-size: var(--tab-f-s-4);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-cog[/fa][/border][/border][comment]
-- Tab Covers End --[/comment][comment]

-- Body Container --[/comment][border=transparent;
position: relative;
margin-left: calc(var(--tabs-w) - var(--tab-w) - var(--tab-cover-p-l));
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px var(--p-l-r);
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--d)));
height: var(--h);
padding: var(--p-t-b) calc(2 * var(--d)) var(--p-t-b) 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
overflow-y: auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;][comment]

-- Miscellaneous Container --[/comment][border=transparent;
flex: var(--text-container-flex-1);
box-sizing: border-box;
padding: var(--text-container-p);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Miscellaneous[/border][comment]-- Header Font Awesome Icon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-4);][fa]far fa-tools[/fa][/border][/border][comment]-- Miscellaneous Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-1);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]
-- Display Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Display[/border][comment]-- Display Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod.[/border][comment]
-- Controls Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Controls[/border][comment]-- Controls Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti.[/border][comment]
-- Extras Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Extras[/border][comment]-- Extras Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit.[/border][/border][/border][comment]
-- Miscellaneous Container End --[/comment][comment]

-- Image + Header Container --[/comment][border=transparent;
position: -webkit-sticky;
position: sticky;
top: 0px;
box-sizing: border-box;
flex: var(--img-container-flex-1);
padding: var(--img-container-p);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: var(--img-rep-l);
box-sizing: border-box;
height: var(--img-h-2);
padding: 0px;
background: var(--img-url-4);
opacity: var(--img-rep-o);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-2);
box-sizing: border-box;
min-height: calc(var(--img-h-2) + var(--header-h-1));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--img-h-2) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-4);
opacity: var(--img-o);][/border][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Genaiva Township[/border][/border][/border][comment]
-- Image + Header Container End --[/comment][/border][/border][comment]
-- Body Container End --[/comment][/border][/tab]

[/tabs][/border][/border][/border][comment]-- Credits --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--bar-p);
font-size: var(--bar-f-s);
line-height: var(--bar-l-h);
text-align: left;
opacity: var(--bar-o);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
gap: 2px 12px;][border=transparent;
padding: 0px;][B]Background Artist:[/B] Tyler Edlin[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Character Artist 1:[/B] Guweiz[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Setting Artist 1:[/B] Diep Bui[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Character Artist 2:[/B] Qingbin Cao[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Character Artist 3:[/B] Imeran[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Character Artist 4:[/B] KORHIPER[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Character Artist 5:[/B] Stéphane Robert[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Setting Artist 2:[/B] Denis Istomin[/border][/border][/border][/font]

Click Tabs on Left + Possible Scroll

• .
• .
• .
• .

• Varipa Da

  Healer of Hiraya

  Alias

  None

  Age

  52 years old

  Gender

  None

  Race

  Hirayan Ganiu

  Height

  158.2 cm

  Weight

  50.13 kg

  Affiliation

  Healer's Guild

  Homeland

  Hiraya
• Backstory

  Childhood Glory

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque.

  Healing Apprenticeship

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. Fusce quis porttitor metus. In eleifend aliquam justo quis convallis.

  Days Adventuring

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. Fusce quis porttitor metus. In eleifend aliquam justo quis convallis.

  Puriha Village
• Sparkle Sparkle

  Healing Aura

  Description

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.

  Cost

  A Lot of Mana

  Duration

  4 Posts

  Bloop

  Barrier of Health

  Description

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.

  Cost

  Some Mana

  Duration

  2 Posts

  Bzzt Pew

  Blast of Agony

  Description

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.

  Cost

  A Lot of Mana

  Duration

  1 Post

  Plink Plonk

  Pebble Shot

  Description

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.

  Cost

  A Bit of Stamina

  Duration

  1 Post
• Miscellaneous

  Display

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod.

  Controls

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti.

  Extras

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit.

  Genaiva Township

Background Artist: Tyler Edlin

Character Artist 1: Guweiz

Setting Artist 1: Diep Bui

Skills Source: Dungeon Defenders II

Setting Artist 2: Denis Istomin

Spoiler: Code with Skill Section

[comment]-- Font -->[/comment][font=Chakra Petch][border=transparent;

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

--color-b: 8, 18, 28; /* Base screen colour, use rgb numbers */

--bar-p: 3px 10px 3px 10px;
--bar-f-s: 0.85em;
--bar-l-h: 1.5;
--bar-o: 0.4;

--tabs-w: 40px;
--tabs-h: 220px;
--tabs-l-h: 4;

--w: 900px;
--h: min(76vh, 440px);
--p-l-r: 0px;
--p-t-b: 10px;
--d: 10px;

/* Background Image URL */
--bg-img: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)), url('https://cdna.artstation.com/p/assets/images/images/010/601/496/large/tyler-edlin-fantasy-landscape1.jpg?1525276483') 50% 50% / cover;

--tab-cover-l: 0px;
--tab-cover-p-t: 3px;
--tab-cover-p-l: 15px;
--tab-cover-gap: 32px;

--tab-w: 25px;
--tab-o: 0.75;

--tab-p-2: 1px 0px 0px 0px;
--tab-p-3: 1px 0px 0px 0px;

--tab-f-s-1: 1em;
--tab-f-s-2: 0.95em;
--tab-f-s-3: 0.95em;
--tab-f-s-4: 1.1em;

/* Tab Font Awesome Icon Colours */
--tab-c-1: #FDEBB1; /* Tab 1 Font Awesome icon colour */
--tab-c-2: #CDAAFA; /* Tab 2 Font Awesome icon colour */
--tab-c-3: #FAA69E; /* Tab 3 Font Awesome icon colour */
--tab-c-4: #9DD7FA; /* Tab 4 Font Awesome icon colour */

/* Header Font Awesome Icon Colours */
--header-c-1: #BEF5AE; /* Tab 1 header Font Awesome icon colour */
--header-c-2: #9DD7FA; /* Tab 2 header Font Awesome icon colour */
--header-c-3-1: #BEF5AE; /* Tab 3 header 1 Font Awesome icon colour */
--header-c-3-2: #CDAAFA; /* Tab 3 header 2 Font Awesome icon colour */
--header-c-3-3: #9DD7FA; /* Tab 3 header 3 Font Awesome icon colour */
--header-c-3-4: #FDEBB1; /* Tab 3 header 4 Font Awesome icon colour */
--header-c-4: #CDAAFA; /* Tab 4 header Font Awesome icon colour */

/* Probably best if you don't mess with rotation */
/* Rotation */
--rotate-t: rotateY(20deg);
--rotate-l: rotateY(22deg);
--rotate-r: rotateY(-22deg);
/* Skills Rotation */
--rotate-l-i: rotateY(10deg);
--rotate-r-d: rotateY(-10deg);

--container-gap: 8px;

--img-container-flex-1: 1 1 210px;
--img-container-p: 25px 0px;

--img-d: 20px;
--img-t: 0px;
--img-l-1: calc(0px - (100% - (2 * var(--img-d))));
--img-l-2: calc(0px - (100% - var(--img-d)));
--img-w: calc(100% - var(--img-d));
--img-h-1: 300px;
--img-h-2: min(calc(var(--h) - (2 * var(--p-t-b)) - var(--header-h-1) - var(--container-gap) - 25px), 330px);
--img-o: 1;

/* Tab Image URLs, change % (x-axis) and px (y-axis) before / to shift image position in icon, change % after / to change image size in icon (or default to cover) */
/* Tab 1 Image URL */
--img-url-1: url('https://www.worldanvil.com/uploads/images/1b39107b4a0ff70f814a780ddd42eed1.jpg') no-repeat 50% 0px / cover;
/* Tab 2 Image URL */
--img-url-2: url('https://cdnb.artstation.com/p/assets/images/images/029/215/783/large/diep-bui-bg1-color.jpg?1596811368') no-repeat 50% 0px / cover; 
/* Tab 3 Image URL 1 */
--img-url-3-1: url('https://wiki.dungeondefenders2.com/images/6/6e/Heal.png') no-repeat 50% 0px / cover;
/* Tab 3 Image URL 2 */
--img-url-3-2: url('https://wiki.dungeondefenders2.com/images/d/de/Dryad_Blessing.png') no-repeat 50% 0px / cover;
/* Tab 3 Image URL 3 */
--img-url-3-3: url('https://wiki.dungeondefenders2.com/images/1/10/EV2_ProtonCharge.png') no-repeat 50% -15px / cover;
/* Tab 3 Image URL 4 */
--img-url-3-4: url('https://wiki.dungeondefenders2.com/images/2/28/Gunwitch_vroom_broom.png') no-repeat 50% 0px / cover;
/* Tab 4 Image URL */
--img-url-4: url('https://www.dreampirates.in/wallpaper/art/img/24-12-2019-9840-river-home-art.jpg') no-repeat 50% 0px / cover;

--img-rep-t: calc(0px - var(--img-t));
--img-rep-l: calc(100% - (100% - var(--img-d)));
--img-rep-o: 0.6;

--text-container-flex-1: 5 1 230px;
--text-container-flex-2: 10 1 600px;
--text-container-p: 25px 2px 25px 0px;

--header-h-1: 40px;
--header-h-2: 15px;
--header-p: 10px var(--text-p);
--header-bg: rgba(var(--color-b), 0.7);
--header-f-s-1: 1.4em;
--header-f-s-2: 1.2em;
--header-gap: 5px;

--text-h-1: 320px;
--text-h-2: 220px;
--text-p: 20px;
--text-bg: rgba(var(--color-b), 0.5);
--text-c: rgb(240, 240, 235); /* Text colour */
--text-f-s: 1em;
--text-l-h: 1.5;
--text-gap: 10px;

--label-w: 135px; /* Label width, change if a word is too long for the label */

--field-w: 180px;

--char-container-w: 100%;
--char-container-gap: 10px 8px;

--icon-container-flex: 1 1 220px;
--icon-container-p: 10px 0px;
--icon-h: 210px;

--detail-container-p: 10px 0px;][comment]

-- Top Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--bar-p);
font-size: var(--bar-f-s);
line-height: var(--bar-l-h);
text-align: center;
opacity: var(--bar-o);]Click Tabs on Left + Possible Scroll [fa]far fa-arrow-circle-down[/fa][/border][comment]

-- Overall Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--h);
padding: 0px;][comment]-- Tabs + Body Container --[/comment][border=transparent;
margin: auto;
max-width: calc(var(--w) + var(--tabs-w));
height: var(--h);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Tabs --[/comment][border=transparent;
padding: 0px;
background: red;
width: var(--tabs-w);
height: var(--tabs-h);
line-height: var(--tabs-l-h);
overflow: hidden;][tabs]

[tab=.][comment]-- Tab Body 1 --[/comment][comment]-- Background --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--h);
background: var(--bg-img);
padding: 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Tab Covers --[/comment][border=transparent;
position: relative;
left: var(--tab-cover-l);
box-sizing: border-box;
padding: var(--tab-cover-p-t) 0px 0px var(--tab-cover-p-l);
width: calc(var(--tab-w) + var(--tab-cover-p-l));
height: calc((4 * var(--tab-w)) + (3 * var(--tab-cover-gap)) + var(--tab-cover-p-t));
-webkit-transform: var(--rotate-t);
transform: var(--rotate-t);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--tab-cover-gap);
z-index: 1;][comment]-- Tab Cover 1 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
//background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-1);
font-size: var(--tab-f-s-1);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-2);
font-size: var(--tab-f-s-2);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-book-open[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-3);
font-size: var(--tab-f-s-3);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-fire[/fa][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-4);
font-size: var(--tab-f-s-4);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-cog[/fa][/border][/border][comment]
-- Tab Covers End --[/comment][comment]

-- Body Container --[/comment][border=transparent;
position: relative;
margin-left: calc(var(--tabs-w) - var(--tab-w) - var(--tab-cover-p-l));
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px var(--p-l-r);
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--d)));
height: var(--h);
padding: var(--p-t-b) calc(2 * var(--d)) var(--p-t-b) 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
overflow-y: auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;][comment]

-- Image + Name Container --[/comment][border=transparent;
flex: var(--img-container-flex-1);
box-sizing: border-box;
padding: var(--img-container-p);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--img-h-1);
padding: 0px;
background: var(--img-url-1);
opacity: var(--img-rep-o);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--img-h-1) + var(--header-h-1));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--img-h-1) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-1);
opacity: var(--img-o);][/border][comment]-- Name Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Varipa Da[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Basics Container --[/comment][border=transparent;
flex: var(--text-container-flex-1);
box-sizing: border-box;
padding: var(--text-container-p);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Healer of Hiraya[/border][comment]-- Header Font Awesome Icon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-1);][fa]far fa-heartbeat[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-1);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Alias Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Alias[/border][comment]-- Alias Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]None[/border][comment]-- Age Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Age[/border][comment]-- Age Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]52 years old[/border][comment]-- Gender Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Gender[/border][comment]-- Gender Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]None[/border][comment]-- Race Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Race[/border][comment]-- Race Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Hirayan Ganiu[/border][comment]-- Height Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Height[/border][comment]-- Height Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]158.2 cm[/border][comment]-- Weight Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Weight[/border][comment]-- Weight Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]50.13 kg[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Affiliation[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Healer's Guild[/border][comment]-- Homeland Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Homeland[/border][comment]-- Homeland Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Hiraya[/border][/border][/border][comment]
-- Basics Container End --[/comment][/border][/border][comment]
-- Body Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 2 --[/comment][comment]-- Background --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--h);
background: var(--bg-img);
padding: 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Tab Covers --[/comment][border=transparent;
position: relative;
left: var(--tab-cover-l);
box-sizing: border-box;
padding: var(--tab-cover-p-t) 0px 0px var(--tab-cover-p-l);
width: calc(var(--tab-w) + var(--tab-cover-p-l));
height: calc((4 * var(--tab-w)) + (3 * var(--tab-cover-gap)) + var(--tab-cover-p-t));
-webkit-transform: var(--rotate-t);
transform: var(--rotate-t);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--tab-cover-gap);
z-index: 1;][comment]-- Tab Cover 1 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-1);
font-size: var(--tab-f-s-1);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
//background: var(--header-bg);
padding: var(--tab-p-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-2);
font-size: var(--tab-f-s-2);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-book-open[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-3);
font-size: var(--tab-f-s-3);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-fire[/fa][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-4);
font-size: var(--tab-f-s-4);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-cog[/fa][/border][/border][comment]
-- Tab Covers End --[/comment][comment]

-- Body Container --[/comment][border=transparent;
position: relative;
margin-left: calc(var(--tabs-w) - var(--tab-w) - var(--tab-cover-p-l));
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px var(--p-l-r);
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--d)));
height: var(--h);
padding: var(--p-t-b) calc(2 * var(--d)) var(--p-t-b) 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
overflow-y: auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;][comment]

-- Backstory Container --[/comment][border=transparent;
flex: var(--text-container-flex-1);
box-sizing: border-box;
padding: var(--text-container-p);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Backstory[/border][comment]-- Header Font Awesome Icon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-2);][fa]far fa-books[/fa][/border][/border][comment]-- Backstory Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-1);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]
-- Event 1 Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Childhood Glory[/border][comment]-- Event 1 Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. [/border][comment]
-- Event 2 Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Healing Apprenticeship[/border][comment]-- Event 2 Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. Fusce quis porttitor metus. In eleifend aliquam justo quis convallis.[/border][comment]
-- Event 3 Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Days Adventuring[/border][comment]-- Event 3 Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. Fusce quis porttitor metus. In eleifend aliquam justo quis convallis.[/border][/border][/border][comment]
-- Backstory Container End --[/comment][comment]

-- Image + Header Container --[/comment][border=transparent;
position: -webkit-sticky;
position: sticky;
top: 0px;
box-sizing: border-box;
flex: var(--img-container-flex-1);
padding: var(--img-container-p);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: var(--img-rep-l);
box-sizing: border-box;
height: var(--img-h-2);
padding: 0px;
background: var(--img-url-2);
opacity: var(--img-rep-o);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-2);
box-sizing: border-box;
min-height: calc(var(--img-h-2) + var(--header-h-1));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--img-h-2) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-2);
opacity: var(--img-o);][/border][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Puriha Village[/border][/border][/border][comment]
-- Image + Header Container End --[/comment][/border][/border][comment]
-- Body Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 3 --[/comment][comment]-- Background --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--h);
background: var(--bg-img);
padding: 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Tab Covers --[/comment][border=transparent;
position: relative;
left: var(--tab-cover-l);
box-sizing: border-box;
padding: var(--tab-cover-p-t) 0px 0px var(--tab-cover-p-l);
width: calc(var(--tab-w) + var(--tab-cover-p-l));
height: calc((4 * var(--tab-w)) + (3 * var(--tab-cover-gap)) + var(--tab-cover-p-t));
-webkit-transform: var(--rotate-t);
transform: var(--rotate-t);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--tab-cover-gap);
z-index: 1;][comment]-- Tab Cover 1 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-1);
font-size: var(--tab-f-s-1);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-2);
font-size: var(--tab-f-s-2);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-book-open[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
//background: var(--header-bg);
padding: var(--tab-p-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-3);
font-size: var(--tab-f-s-3);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-fire[/fa][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-4);
font-size: var(--tab-f-s-4);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-cog[/fa][/border][/border][comment]
-- Tab Covers End --[/comment][comment]

-- Body Container --[/comment][border=transparent;
position: relative;
margin-left: calc(var(--tabs-w) - var(--tab-w) - var(--tab-cover-p-l));
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px var(--p-l-r);
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--d)));
height: var(--h);
padding: var(--p-t-b) calc(2 * var(--d)) var(--p-t-b)  0px;
perspective: 2000px;
perspective-origin: 50% 50%;
overflow-y: auto;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Skills Container --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0;
width: var(--char-container-w);
padding: 0;
perspective: 2000px;
perspective-origin: 50% 50%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--char-container-gap);][comment]

-- Image + Name Container --[/comment][border=transparent;
flex: var(--icon-container-flex);
box-sizing: border-box;
padding: var(--icon-container-p);
-webkit-transform: var(--rotate-l-i);
transform: var(--rotate-l-i);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--icon-h);
padding: 0px;
background: var(--img-url-3-1);
opacity: var(--img-rep-o);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--icon-h) + var(--header-h-2));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--icon-h) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-3-1);
opacity: var(--img-o);][/border][comment]-- Name Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Sparkle Sparkle[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Details Container --[/comment][border=transparent;
flex: var(--text-container-flex-2);
box-sizing: border-box;
padding: var(--detail-container-p);
-webkit-transform: var(--rotate-r-d);
transform: var(--rotate-r-d);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Healing Aura[/border][comment]-- Header Font Awesome Icon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-3-1);][fa]far fa-heartbeat[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-2);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Description Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Description[/border][comment]-- Description Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.[/border][comment]-- Cost Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Cost[/border][comment]-- Cost Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]A Lot of Mana[/border][comment]-- Duration Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Duration[/border][comment]-- Duration Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]4 Posts[/border][/border][/border][comment]
-- Details Container End --[/comment][comment]

-- Image + Name Container --[/comment][border=transparent;
flex: var(--icon-container-flex);
box-sizing: border-box;
padding: var(--icon-container-p);
-webkit-transform: var(--rotate-l-i);
transform: var(--rotate-l-i);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--icon-h);
padding: 0px;
background: var(--img-url-3-2);
opacity: var(--img-rep-o);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--icon-h) + var(--header-h-2));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--icon-h) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-3-2);
opacity: var(--img-o);][/border][comment]-- Name Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Bloop[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Details Container --[/comment][border=transparent;
flex: var(--text-container-flex-2);
box-sizing: border-box;
padding: var(--detail-container-p);
-webkit-transform: var(--rotate-r-d);
transform: var(--rotate-r-d);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Barrier of Health[/border][comment]-- Header Font Awesome Icon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-3-2);][fa]far fa-shield-cross[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-2);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Description Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Description[/border][comment]-- Description Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.[/border][comment]-- Cost Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Cost[/border][comment]-- Cost Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Some Mana[/border][comment]-- Duration Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Duration[/border][comment]-- Duration Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]2 Posts[/border][/border][/border][comment]
-- Details Container End --[/comment][comment]

-- Image + Name Container --[/comment][border=transparent;
flex: var(--icon-container-flex);
box-sizing: border-box;
padding: var(--icon-container-p);
-webkit-transform: var(--rotate-l-i);
transform: var(--rotate-l-i);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--icon-h);
padding: 0px;
background: var(--img-url-3-3);
opacity: var(--img-rep-o);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--icon-h) + var(--header-h-2));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--icon-h) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-3-3);
opacity: var(--img-o);][/border][comment]-- Name Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Bzzt Pew[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Details Container --[/comment][border=transparent;
flex: var(--text-container-flex-2);
box-sizing: border-box;
padding: var(--detail-container-p);
-webkit-transform: var(--rotate-r-d);
transform: var(--rotate-r-d);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Blast of Agony[/border][comment]-- Header Font Awesome Icon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-3-3);][fa]far fa-staff[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-2);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Description Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Description[/border][comment]-- Description Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.[/border][comment]-- Cost Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Cost[/border][comment]-- Cost Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]A Lot of Mana[/border][comment]-- Duration Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Duration[/border][comment]-- Duration Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]1 Post[/border][/border][/border][comment]
-- Details Container End --[/comment][comment]

-- Image + Name Container --[/comment][border=transparent;
flex: var(--icon-container-flex);
box-sizing: border-box;
padding: var(--icon-container-p);
-webkit-transform: var(--rotate-l-i);
transform: var(--rotate-l-i);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--icon-h);
padding: 0px;
background: var(--img-url-3-4);
opacity: var(--img-rep-o);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--icon-h) + var(--header-h-2));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--icon-h) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-3-4);
opacity: var(--img-o);][/border][comment]-- Name Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Plink Plonk[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Details Container --[/comment][border=transparent;
flex: var(--text-container-flex-2);
box-sizing: border-box;
padding: var(--detail-container-p);
-webkit-transform: var(--rotate-r-d);
transform: var(--rotate-r-d);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Pebble Shot[/border][comment]-- Header Font Awesome Icon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-3-4);][fa]far fa-bow-arrow[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-2);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Description Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Description[/border][comment]-- Description Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.[/border][comment]-- Cost Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Cost[/border][comment]-- Cost Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]A Bit of Stamina[/border][comment]-- Duration Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Duration[/border][comment]-- Duration Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]1 Post[/border][/border][/border][comment]
-- Details Container End --[/comment][/border][comment]
-- Skills Container End --[/comment][/border][/border][comment]
-- Body Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 4 --[/comment][comment]-- Background --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--h);
background: var(--bg-img);
padding: 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Tab Covers --[/comment][border=transparent;
position: relative;
left: var(--tab-cover-l);
box-sizing: border-box;
padding: var(--tab-cover-p-t) 0px 0px var(--tab-cover-p-l);
width: calc(var(--tab-w) + var(--tab-cover-p-l));
height: calc((4 * var(--tab-w)) + (3 * var(--tab-cover-gap)) + var(--tab-cover-p-t));
-webkit-transform: var(--rotate-t);
transform: var(--rotate-t);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--tab-cover-gap);
z-index: 1;][comment]-- Tab Cover 1 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-1);
font-size: var(--tab-f-s-1);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-2);
font-size: var(--tab-f-s-2);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-book-open[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-3);
font-size: var(--tab-f-s-3);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-fire[/fa][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-4);
font-size: var(--tab-f-s-4);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-cog[/fa][/border][/border][comment]
-- Tab Covers End --[/comment][comment]

-- Body Container --[/comment][border=transparent;
position: relative;
margin-left: calc(var(--tabs-w) - var(--tab-w) - var(--tab-cover-p-l));
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px var(--p-l-r);
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--d)));
height: var(--h);
padding: var(--p-t-b) calc(2 * var(--d)) var(--p-t-b) 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
overflow-y: auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;][comment]

-- Miscellaneous Container --[/comment][border=transparent;
flex: var(--text-container-flex-1);
box-sizing: border-box;
padding: var(--text-container-p);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Miscellaneous[/border][comment]-- Header Font Awesome Icon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-4);][fa]far fa-tools[/fa][/border][/border][comment]-- Miscellaneous Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-1);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]
-- Display Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Display[/border][comment]-- Display Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod.[/border][comment]
-- Controls Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Controls[/border][comment]-- Controls Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti.[/border][comment]
-- Extras Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Extras[/border][comment]-- Extras Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
min-width: var(--field-w);
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit.[/border][/border][/border][comment]
-- Miscellaneous Container End --[/comment][comment]

-- Image + Header Container --[/comment][border=transparent;
position: -webkit-sticky;
position: sticky;
top: 0px;
box-sizing: border-box;
flex: var(--img-container-flex-1);
padding: var(--img-container-p);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: var(--img-rep-l);
box-sizing: border-box;
height: var(--img-h-2);
padding: 0px;
background: var(--img-url-4);
opacity: var(--img-rep-o);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-2);
box-sizing: border-box;
min-height: calc(var(--img-h-2) + var(--header-h-1));
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--img-h-2) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-4);
opacity: var(--img-o);][/border][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Genaiva Township[/border][/border][/border][comment]
-- Image + Header Container End --[/comment][/border][/border][comment]
-- Body Container End --[/comment][/border][/tab]

[/tabs][/border][/border][/border][comment]-- Credits --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--bar-p);
font-size: var(--bar-f-s);
line-height: var(--bar-l-h);
text-align: left;
opacity: var(--bar-o);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
gap: 2px 12px;][border=transparent;
padding: 0px;][B]Background Artist:[/B] Tyler Edlin[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Character Artist 1:[/B] Guweiz[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Setting Artist 1:[/B] Diep Bui[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Skills Source:[/B] Dungeon Defenders II[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Setting Artist 2:[/B] Denis Istomin[/border][/border][/border][/font]

 

[miyabi]

3D Interface

Tabs code testing 3D rotations. Ignore the blurry skill icons; I couldn't find any that were particularly clear without a watermark.

You can copy paste the labels + fields to create more or delete the already existing. Character/skill sections can be copy pasted, but they have so many individual variables that you'd have to figure that out as well (or ask me, I exist).

If you're on Firefox, it'll probably look completely flat. You won't be missing out much, just a slight 3D effect to the text boxes and images.

Click Tabs on Left + Possible Scroll

• .
• .
• .
• .

• Varipa Da

  Healer of Hiraya

  Alias

  None

  Age

  52 years old

  Gender

  None

  Race

  Hirayan Ganiu

  Height

  158.2 cm

  Weight

  50.13 kg

  Affiliation

  Healer's Guild

  Homeland

  Hiraya
• Backstory

  Childhood Glory

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque.

  Healing Apprenticeship

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. Fusce quis porttitor metus. In eleifend aliquam justo quis convallis.

  Days Adventuring

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. Fusce quis porttitor metus. In eleifend aliquam justo quis convallis.

  Puriha Village
• Ergos Pallus

  Captain of the Red Eagles

  Last Online

  2 Hours Ago

  Affiliation

  Red Eagles

  Notes

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.

  Yve Krzovuh

  Deputy of Silver Verdancy

  Last Online

  3 Hours Ago

  Affiliation

  Silver Verdancy, Archer's Guild

  Notes

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.

  Lua L'Arey

  Mage of House Alouette

  Last Online

  3 Hours Ago

  Affiliation

  House Alouette, The Society of Magical Creatures, Mage's Guild

  Notes

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.

  Telvani

  Shield of Queen Belladon

  Last Online

  5 Hours Ago

  Affiliation

  Queen's Guards

  Notes

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.
• Miscellaneous

  Display

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod.

  Controls

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti.

  Extras

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit.

  Genaiva Township

Background Artist: Tyler Edlin

Character Artist 1: Guweiz

Setting Artist 1: Diep Bui

Character Artist 2: Qingbin Cao

Character Artist 3: Imeran

Character Artist 4: KORHIPER

Character Artist 5: Stéphane Robert

Setting Artist 2: Denis Istomin

Spoiler: Code with Relationship Section

[comment]-- Font -->[/comment][font=Chakra Petch][border=transparent;

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

--color-b: 8, 18, 28; /* Base colour, use rgb numbers */

--bar-p: 3px 10px 3px 10px;
--bar-bg: rgb(40, 50, 60, 0.8); /* Bar background colour */
--bar-c: rgba(240, 240, 235, 0.9); /* Bar text colour */
--bar-f-s: 0.85em;
--bar-l-h: 1.5;
--bar-o: 0.4;

--tabs-w: 40px;
--tabs-h: 220px;
--tabs-l-h: 4;

--w: 900px;
--h: min(76vh, 440px);
--p-l-r: 0px;
--p-t-b: 10px;
--d: 10px;

/* Background image URL */
--bg-img: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)), url('https://cdna.artstation.com/p/assets/images/images/010/601/496/large/tyler-edlin-fantasy-landscape1.jpg?1525276483') 50% 50% / cover;

--tab-cover-l: 0px;
--tab-cover-p-t: 3px;
--tab-cover-p-l: 15px;
--tab-cover-gap: 32px;

--tab-w: 25px;
--tab-o: 0.75;

--tab-p-2: 1px 0px 0px 0px;
--tab-p-3: 1px 0px 0px 0px;

--tab-f-s-1: 1em;
--tab-f-s-2: 0.95em;
--tab-f-s-3: 0.95em;
--tab-f-s-4: 1.1em;

/* Tab favicon colours */
--tab-c-1: #FDEBB1; /* Tab 1 favicon colour */
--tab-c-2: #CDAAFA; /* Tab 2 favicon colour */
--tab-c-3: #BEF5AE; /* Tab 3 favicon colour */
--tab-c-4: #9DD7FA; /* Tab 4 favicon colour */

/* Header favicon colours */
--header-c-1: #BEF5AE; /* Tab 1 header favicon colour */
--header-c-2: #9DD7FA; /* Tab 2 header favicon colour */
--header-c-3-1: #FAA69E; /* Tab 3 header 1 favicon colour */
--header-c-3-2: #FDEBB1; /* Tab 3 header 2 favicon colour */
--header-c-3-3: #9DD7FA; /* Tab 3 header 3 favicon colour */
--header-c-3-4: #CDAAFA; /* Tab 3 header 4 favicon colour */
--header-c-4: #CDAAFA; /* Tab 4 header favicon colour */

--content-container-gap: 0px;

--rotate-t: rotateY(20deg);
--rotate-l: rotateY(22deg);
--rotate-r: rotateY(-22deg);

--container-gap: 8px;

--img-container-flex-1: 1 1 210px;
--img-container-p: 25px 0px;

--img-d: 20px;
--img-t: 0px;
--img-l-1: calc(0px - (100% - (2 * var(--img-d))));
--img-l-2: calc(0px - (100% - var(--img-d)));
--img-w: calc(100% - var(--img-d));
--img-h-1: 300px;
--img-h-2: min(calc(var(--h) - (2 * var(--p-t-b)) - var(--header-h-1) - var(--container-gap) - 25px), 330px);
--img-o: 1;

/* Tab Image URLs, change % (x-axis) and px (y-axis) before / to shift image position in icon, change % after / to change image size in icon (or default to cover) */
--img-url-1: url('https://www.worldanvil.com/uploads/images/1b39107b4a0ff70f814a780ddd42eed1.jpg') no-repeat 50% 0px / cover; /* Tab 1 Image URL */
--img-url-2: url('https://cdnb.artstation.com/p/assets/images/images/029/215/783/large/diep-bui-bg1-color.jpg?1596811368') no-repeat 50% 0px / cover; /* Tab 2 Image URL */
--img-url-3-1: url('https://cdnb.artstation.com/p/assets/images/images/016/464/495/large/qingbin-cao-2019-03-11.jpg?1552280527') no-repeat 50% -30px / cover; /* Tab 3 Image URL 1 */
--img-url-3-2: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/85efea81-8400-4f9c-8f32-a30e34d7e537/d9wavem-604a2b29-17c1-40d5-9be5-87fab49f0457.jpg/v1/fill/w_1024,h_1246,q_75,strp/archer_by_imeran_d9wavem-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTI0NiIsInBhdGgiOiJcL2ZcLzg1ZWZlYTgxLTg0MDAtNGY5Yy04ZjMyLWEzMGUzNGQ3ZTUzN1wvZDl3YXZlbS02MDRhMmIyOS0xN2MxLTQwZDUtOWJlNS04N2ZhYjQ5ZjA0NTcuanBnIiwid2lkdGgiOiI8PTEwMjQifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.zJP8d-2HH8mqZbygaNg7C2zJ6wy5dPUJh3qx46SinVk') no-repeat 62% 0px / 200%; /* Tab 3 Image URL 2 */
--img-url-3-3: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/1f3c7f77-f51b-4fed-8d67-5563b61ea07d/d8sbffa-b718577b-28c7-4b96-8116-9c7c83c18bab.jpg/v1/fill/w_1024,h_1449,q_75,strp/blue_dragon_by_korhiper_d8sbffa-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTQ0OSIsInBhdGgiOiJcL2ZcLzFmM2M3Zjc3LWY1MWItNGZlZC04ZDY3LTU1NjNiNjFlYTA3ZFwvZDhzYmZmYS1iNzE4NTc3Yi0yOGM3LTRiOTYtODExNi05YzdjODNjMThiYWIuanBnIiwid2lkdGgiOiI8PTEwMjQifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.0WLU93EmF6Pk3WHxRucWysBu9wHC01pmh-iOIK5mWzs') no-repeat 50% -15px / cover; /* Tab 3 Image URL 3 */
--img-url-3-4: url('https://cdna.artstation.com/p/assets/images/images/010/221/278/large/stephane-robert-syanna-echecs.jpg?1523261336') no-repeat 75% -35px / 185%; /* Tab 3 Image URL 4 */
--img-url-4: url('https://www.dreampirates.in/wallpaper/art/img/24-12-2019-9840-river-home-art.jpg') no-repeat 50% 0px / cover; /* Tab 4 Image URL */

--img-rep-t: calc(0px - var(--img-t));
--img-rep-l: calc(100% - (100% - var(--img-d)));
--img-rep-o: 0.6;

--text-container-flex-1: 5 1 230px;
--text-container-flex-2: 10 1 230px;
--text-container-p: 25px 2px 25px 0px;

--header-h-1: 40px;
--header-h-2: 15px;
--header-p: 10px var(--text-p);
--header-bg: rgba(var(--color-b), 0.7);
--header-f-s-1: 1.4em;
--header-f-s-2: 1.2em;
--header-gap: 5px;

--text-h-1: 320px;
--text-h-2: 220px;
--text-p: 20px;
--text-bg: rgba(var(--color-b), 0.5);
--text-c: rgb(240, 240, 235); /* Text colour */
--text-f-s: 1em;
--text-l-h: 1.5;
--text-gap: 10px;

--label-w: 130px; /* Label width, change if a word is too long for the label */

--character-container-w: 100%;

--icon-container-flex: 1 1 180px;
--icon-container-p: 10px 0px;
--icon-h: 210px;

--detail-container-p: 10px 0px;][comment]

-- Top Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--bar-p);
background: var(--bar-bg);
color: var(--bar-c);
font-size: var(--bar-f-s);
line-height: var(--bar-l-h);
text-align: center;
opacity: var(--bar-o);]Click Tabs on Left + Possible Scroll [fa]far fa-arrow-circle-down[/fa][/border][comment]

-- Overall Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--h);
padding: 0px;][comment]-- Tabs + Body Container --[/comment][border=transparent;
margin: auto;
max-width: calc(var(--w) + var(--tabs-w));
height: var(--h);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Tabs --[/comment][border=transparent;
padding: 0px;
background: red;
width: var(--tabs-w);
height: var(--tabs-h);
line-height: var(--tabs-l-h);
overflow: hidden;][tabs]

[tab=.][comment]-- Tab Body 1 --[/comment][comment]-- Background --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--h);
background: var(--bg-img);
padding: 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Tab Covers --[/comment][border=transparent;
position: relative;
left: var(--tab-cover-l);
box-sizing: border-box;
padding: var(--tab-cover-p-t) 0px 0px var(--tab-cover-p-l);
width: calc(var(--tab-w) + var(--tab-cover-p-l));
height: calc((4 * var(--tab-w)) + (3 * var(--tab-cover-gap)) + var(--tab-cover-p-t));
-webkit-transform: var(--rotate-t);
transform: var(--rotate-t);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--tab-cover-gap);
z-index: 1;][comment]-- Tab Cover 1 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
//background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-1);
font-size: var(--tab-f-s-1);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-2);
font-size: var(--tab-f-s-2);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-book-open[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-3);
font-size: var(--tab-f-s-3);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-users[/fa][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-4);
font-size: var(--tab-f-s-4);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-cog[/fa][/border][/border][comment]
-- Tab Covers End --[/comment][comment]

-- Body Container --[/comment][border=transparent;
position: relative;
margin-left: calc(var(--tabs-w) - var(--tab-w) - var(--tab-cover-p-l));
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px var(--p-l-r);
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--d)));
height: var(--h);
padding: var(--p-t-b) 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
overflow-y: auto;][comment]-- Content Container --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - (2 * var(--d)));
height: auto;
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--content-container-gap);][comment]

-- Image + Name Container --[/comment][border=transparent;
flex: var(--img-container-flex-1);
box-sizing: border-box;
padding: var(--img-container-p);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--img-h-1);
padding: 0px;
background: var(--img-url-1);
opacity: var(--img-rep-o);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--img-h-1) + var(--header-h-1));
padding: 0px;
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--img-h-1) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-1);
opacity: var(--img-o);][/border][comment]-- Name Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Varipa Da[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Basics Container --[/comment][border=transparent;
flex: var(--text-container-flex-1);
box-sizing: border-box;
padding: var(--text-container-p);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Healer of Hiraya[/border][comment]-- Header Favicon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-1);][fa]far fa-heartbeat[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-1);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Alias Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Alias[/border][comment]-- Alias Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]None[/border][comment]-- Age Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Age[/border][comment]-- Age Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]52 years old[/border][comment]-- Gender Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Gender[/border][comment]-- Gender Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]None[/border][comment]-- Race Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Race[/border][comment]-- Race Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Hirayan Ganiu[/border][comment]-- Height Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Height[/border][comment]-- Height Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]158.2 cm[/border][comment]-- Weight Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Weight[/border][comment]-- Weight Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]50.13 kg[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Affiliation[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Healer's Guild[/border][comment]-- Homeland Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Homeland[/border][comment]-- Homeland Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Hiraya[/border][/border][/border][comment]
-- Basics Container End --[/comment][/border][/border][/border][comment]
-- Body Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 2 --[/comment][comment]-- Background --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--h);
background: var(--bg-img);
padding: 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Tab Covers --[/comment][border=transparent;
position: relative;
left: var(--tab-cover-l);
box-sizing: border-box;
padding: var(--tab-cover-p-t) 0px 0px var(--tab-cover-p-l);
width: calc(var(--tab-w) + var(--tab-cover-p-l));
height: calc((4 * var(--tab-w)) + (3 * var(--tab-cover-gap)) + var(--tab-cover-p-t));
-webkit-transform: var(--rotate-t);
transform: var(--rotate-t);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--tab-cover-gap);
z-index: 1;][comment]-- Tab Cover 1 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-1);
font-size: var(--tab-f-s-1);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
//background: var(--header-bg);
padding: var(--tab-p-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-2);
font-size: var(--tab-f-s-2);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-book-open[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-3);
font-size: var(--tab-f-s-3);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-users[/fa][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-4);
font-size: var(--tab-f-s-4);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-cog[/fa][/border][/border][comment]
-- Tab Covers End --[/comment][comment]

-- Body Container --[/comment][border=transparent;
position: relative;
margin-left: calc(var(--tabs-w) - var(--tab-w) - var(--tab-cover-p-l));
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px var(--p-l-r);
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--d)));
height: var(--h);
padding: var(--p-t-b) 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
overflow-y: auto;][comment]-- Content Container --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - (2 * var(--d)));
height: auto;
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
gap: var(--content-container-gap);][comment]

-- Backstory Container --[/comment][border=transparent;
flex: var(--text-container-flex-1);
box-sizing: border-box;
padding: var(--text-container-p);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Backstory[/border][comment]-- Header Favicon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-2);][fa]far fa-books[/fa][/border][/border][comment]-- Backstory Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-1);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]
-- Event 1 Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Childhood Glory[/border][comment]-- Event 1 Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. [/border][comment]
-- Event 2 Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Healing Apprenticeship[/border][comment]-- Event 2 Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. Fusce quis porttitor metus. In eleifend aliquam justo quis convallis.[/border][comment]
-- Event 3 Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Days Adventuring[/border][comment]-- Event 3 Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. Fusce quis porttitor metus. In eleifend aliquam justo quis convallis.[/border][/border][/border][comment]
-- Backstory Container End --[/comment][comment]

-- Image + Header Container --[/comment][border=transparent;
position: -webkit-sticky;
position: sticky;
top: 0px;
flex: var(--img-container-flex-1);
box-sizing: border-box;
padding: var(--img-container-p);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: var(--img-rep-l);
box-sizing: border-box;
height: var(--img-h-2);
padding: 0px;
background: var(--img-url-2);
opacity: var(--img-rep-o);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-2);
box-sizing: border-box;
min-height: calc(var(--img-h-2) + var(--header-h-1));
padding: 0px;
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--img-h-2) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-2);
opacity: var(--img-o);][/border][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Puriha Village[/border][/border][/border][comment]
-- Image + Header Container End --[/comment][/border][/border][/border][comment]
-- Body Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 3 --[/comment][comment]-- Background --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--h);
background: var(--bg-img);
padding: 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Tab Covers --[/comment][border=transparent;
position: relative;
left: var(--tab-cover-l);
box-sizing: border-box;
padding: var(--tab-cover-p-t) 0px 0px var(--tab-cover-p-l);
width: calc(var(--tab-w) + var(--tab-cover-p-l));
height: calc((4 * var(--tab-w)) + (3 * var(--tab-cover-gap)) + var(--tab-cover-p-t));
-webkit-transform: var(--rotate-t);
transform: var(--rotate-t);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--tab-cover-gap);
z-index: 1;][comment]-- Tab Cover 1 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-1);
font-size: var(--tab-f-s-1);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-2);
font-size: var(--tab-f-s-2);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-book-open[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
//background: var(--header-bg);
padding: var(--tab-p-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-3);
font-size: var(--tab-f-s-3);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-users[/fa][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-4);
font-size: var(--tab-f-s-4);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-cog[/fa][/border][/border][comment]
-- Tab Covers End --[/comment][comment]

-- Body Container --[/comment][border=transparent;
position: relative;
margin-left: calc(var(--tabs-w) - var(--tab-w) - var(--tab-cover-p-l));
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px var(--p-l-r);
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--d)));
height: var(--h);
padding: var(--p-t-b) 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
overflow-y: auto;][comment]-- Content Container --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - (2 * var(--d)));
height: auto;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]
-- Character 1 Container --[/comment][border=transparent;
flex: 0 0;
width: var(--character-container-w);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--content-container-gap);][comment]

-- Image + Name Container --[/comment][border=transparent;
flex: var(--icon-container-flex);
box-sizing: border-box;
padding: var(--icon-container-p);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--icon-h);
padding: 0px;
background: var(--img-url-3-1);
opacity: var(--img-rep-o);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--icon-h) + var(--header-h-2));
padding: 0px;
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--icon-h) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-3-1);
opacity: var(--img-o);][/border][comment]-- Name Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Ergos Pallus[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Details Container --[/comment][border=transparent;
flex: var(--text-container-flex-2);
box-sizing: border-box;
padding: var(--detail-container-p);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Captain of the Red Eagles[/border][comment]-- Header Favicon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-3-1);][fa]far fa-sword[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-2);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Last Online Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Last Online[/border][comment]-- Last Online Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]2 Hours Ago[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Affiliation[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Red Eagles[/border][comment]-- Notes Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Notes[/border][comment]-- Notes Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.[/border][/border][/border][comment]
-- Details Container End --[/comment][/border][comment]
-- Character 1 Container End --[/comment][comment]
-- Character 2 Container --[/comment][border=transparent;
flex: 0 0;
width: var(--character-container-w);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--content-container-gap);][comment]

-- Image + Name Container --[/comment][border=transparent;
flex: var(--icon-container-flex);
box-sizing: border-box;
padding: var(--icon-container-p);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--icon-h);
padding: 0px;
background: var(--img-url-3-2);
opacity: var(--img-rep-o);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--icon-h) + var(--header-h-2));
padding: 0px;
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--icon-h) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-3-2);
opacity: var(--img-o);][/border][comment]-- Name Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Yve Krzovuh[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Details Container --[/comment][border=transparent;
flex: var(--text-container-flex-2);
box-sizing: border-box;
padding: var(--detail-container-p);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Deputy of Silver Verdancy[/border][comment]-- Header Favicon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-3-2);][fa]far fa-bow-arrow[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-2);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Last Online Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Last Online[/border][comment]-- Last Online Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]3 Hours Ago[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Affiliation[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Silver Verdancy, Archer's Guild[/border][comment]-- Notes Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Notes[/border][comment]-- Notes Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.[/border][/border][/border][comment]
-- Details Container End --[/comment][/border][comment]
-- Character 2 Container End --[/comment][comment]
-- Character 3 Container --[/comment][border=transparent;
flex: 0 0;
width: var(--character-container-w);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--content-container-gap);][comment]

-- Image + Name Container --[/comment][border=transparent;
flex: var(--icon-container-flex);
box-sizing: border-box;
padding: var(--icon-container-p);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--icon-h);
padding: 0px;
background: var(--img-url-3-3);
opacity: var(--img-rep-o);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--icon-h) + var(--header-h-2));
padding: 0px;
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--icon-h) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-3-3);
opacity: var(--img-o);][/border][comment]-- Name Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Lua L'Arey[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Details Container --[/comment][border=transparent;
flex: var(--text-container-flex-2);
box-sizing: border-box;
padding: var(--detail-container-p);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Mage of House Alouette[/border][comment]-- Header Favicon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-3-3);][fa]far fa-staff[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-2);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Last Online Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Last Online[/border][comment]-- Last Online Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]3 Hours Ago[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Affiliation[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]House Alouette, The Society of Magical Creatures, Mage's Guild[/border][comment]-- Notes Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Notes[/border][comment]-- Notes Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.[/border][/border][/border][comment]
-- Details Container End --[/comment][/border][comment]
-- Character 3 Container End --[/comment][comment]
-- Character 4 Container --[/comment][border=transparent;
flex: 0 0;
width: var(--character-container-w);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--content-container-gap);][comment]

-- Image + Name Container --[/comment][border=transparent;
flex: var(--icon-container-flex);
box-sizing: border-box;
padding: var(--icon-container-p);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--icon-h);
padding: 0px;
background: var(--img-url-3-4);
opacity: var(--img-rep-o);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--icon-h) + var(--header-h-2));
padding: 0px;
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--icon-h) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-3-4);
opacity: var(--img-o);][/border][comment]-- Name Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Telvani[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Details Container --[/comment][border=transparent;
flex: var(--text-container-flex-2);
box-sizing: border-box;
padding: var(--detail-container-p);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Shield of Queen Belladon[/border][comment]-- Header Favicon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-3-4);][fa]far fa-shield-cross[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-2);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Last Online Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Last Online[/border][comment]-- Last Online Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]5 Hours Ago[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Affiliation[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Queen's Guards[/border][comment]-- Notes Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Notes[/border][comment]-- Notes Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.[/border][/border][/border][comment]
-- Details Container End --[/comment][/border][comment]
-- Character 4 Container End --[/comment][/border][/border][/border][comment]
-- Body Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 4 --[/comment][comment]-- Background --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--h);
background: var(--bg-img);
padding: 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Tab Covers --[/comment][border=transparent;
position: relative;
left: var(--tab-cover-l);
box-sizing: border-box;
padding: var(--tab-cover-p-t) 0px 0px var(--tab-cover-p-l);
width: calc(var(--tab-w) + var(--tab-cover-p-l));
height: calc((4 * var(--tab-w)) + (3 * var(--tab-cover-gap)) + var(--tab-cover-p-t));
-webkit-transform: var(--rotate-t);
transform: var(--rotate-t);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--tab-cover-gap);
z-index: 1;][comment]-- Tab Cover 1 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-1);
font-size: var(--tab-f-s-1);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-2);
font-size: var(--tab-f-s-2);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-book-open[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-3);
font-size: var(--tab-f-s-3);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-users[/fa][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
//background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-4);
font-size: var(--tab-f-s-4);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-cog[/fa][/border][/border][comment]
-- Tab Covers End --[/comment][comment]

-- Body Container --[/comment][border=transparent;
position: relative;
margin-left: calc(var(--tabs-w) - var(--tab-w) - var(--tab-cover-p-l));
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px var(--p-l-r);
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--d)));
height: var(--h);
padding: var(--p-t-b) 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
overflow-y: auto;][comment]-- Content Container --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - (2 * var(--d)));
height: auto;
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
gap: var(--content-container-gap);][comment]

-- Miscellaneous Container --[/comment][border=transparent;
flex: var(--text-container-flex-1);
box-sizing: border-box;
padding: var(--text-container-p);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Miscellaneous[/border][comment]-- Header Favicon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-4);][fa]far fa-tools[/fa][/border][/border][comment]-- Miscellaneous Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-1);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]
-- Display Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Display[/border][comment]-- Display Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod.[/border][comment]
-- Controls Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Controls[/border][comment]-- Controls Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti.[/border][comment]
-- Extras Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Extras[/border][comment]-- Extras Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit.[/border][/border][/border][comment]
-- Miscellaneous Container End --[/comment][comment]

-- Image + Header Container --[/comment][border=transparent;
position: -webkit-sticky;
position: sticky;
top: 0px;
flex: var(--img-container-flex-1);
box-sizing: border-box;
padding: var(--img-container-p);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: var(--img-rep-l);
box-sizing: border-box;
height: var(--img-h-2);
padding: 0px;
background: var(--img-url-4);
opacity: var(--img-rep-o);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-2);
box-sizing: border-box;
min-height: calc(var(--img-h-2) + var(--header-h-1));
padding: 0px;
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--img-h-2) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-4);
opacity: var(--img-o);][/border][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Genaiva Township[/border][/border][/border][comment]
-- Image + Header Container End --[/comment][/border][/border][/border][comment]
-- Body Container End --[/comment][/border][/tab]

[/tabs][/border][/border][/border][comment]-- Credits --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--bar-p);
background: var(--bar-bg);
color: var(--bar-c);
font-size: var(--bar-f-s);
line-height: var(--bar-l-h);
text-align: left;
opacity: var(--bar-o);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
gap: 2px 12px;][border=transparent;
padding: 0px;][B]Background Artist:[/B] Tyler Edlin[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Character Artist 1:[/B] Guweiz[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Setting Artist 1:[/B] Diep Bui[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Character Artist 2:[/B] Qingbin Cao[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Character Artist 3:[/B] Imeran[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Character Artist 4:[/B] KORHIPER[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Character Artist 5:[/B] Stéphane Robert[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Setting Artist 2:[/B] Denis Istomin[/border][/border][/border][/font]

Click Tabs on Left + Possible Scroll

• .
• .
• .
• .

• Varipa Da

  Healer of Hiraya

  Alias

  None

  Age

  52 years old

  Gender

  None

  Race

  Hirayan Ganiu

  Height

  158.2 cm

  Weight

  50.13 kg

  Affiliation

  Healer's Guild

  Homeland

  Hiraya
• Backstory

  Childhood Glory

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque.

  Healing Apprenticeship

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. Fusce quis porttitor metus. In eleifend aliquam justo quis convallis.

  Days Adventuring

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. Fusce quis porttitor metus. In eleifend aliquam justo quis convallis.

  Puriha Village
• Bling bling

  Healing Aura

  Description

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.

  Cost

  A Lot of Mana

  Duration

  4 Posts

  Shwoop

  Barrier of Health

  Description

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.

  Cost

  Some Mana

  Duration

  2 Posts

  Pew pew

  Blast of Agony

  Description

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.

  Cost

  A Bit of Mana

  Duration

  1 Post

  Plink plunk

  Pebble Slingshot

  Description

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel. You see no cannon ball here.

  Cost

  A Bit of Stamina

  Duration

  1 Post
• Miscellaneous

  Display

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod.

  Controls

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti.

  Extras

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit.

  Genaiva Township

Background Artist: Tyler Edlin

Character Artist 1: Guweiz

Setting Artist 1: Diep Bui

Skill Source 1: Dungeon Defenders II

Skill Source 2 - 4: Tree of Saviour

Setting Artist 2: Denis Istomin

Spoiler: Code with Skill Section

[comment]-- Font -->[/comment][font=Chakra Petch][border=transparent;

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

--color-b: 8, 18, 28; /* Base colour, use rgb numbers */

--bar-p: 3px 10px 3px 10px;
--bar-bg: rgb(40, 50, 60, 0.8); /* Bar background colour */
--bar-c: rgba(240, 240, 235, 0.9); /* Bar text colour */
--bar-f-s: 0.85em;
--bar-l-h: 1.5;
--bar-o: 0.4;

--tabs-w: 40px;
--tabs-h: 220px;
--tabs-l-h: 4;

--w: 900px;
--h: min(76vh, 440px);
--p-l-r: 0px;
--p-t-b: 10px;
--d: 10px;

/* Background image URL */
--bg-img: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)), url('https://cdna.artstation.com/p/assets/images/images/010/601/496/large/tyler-edlin-fantasy-landscape1.jpg?1525276483') 50% 50% / cover;

--tab-cover-l: 0px;
--tab-cover-p-t: 3px;
--tab-cover-p-l: 15px;
--tab-cover-gap: 32px;

--tab-w: 25px;
--tab-o: 0.75;

--tab-p-2: 1px 0px 0px 0px;
--tab-p-3: 0px 0px 0px 0px;

--tab-f-s-1: 1em;
--tab-f-s-2: 0.95em;
--tab-f-s-3: 1.1em;
--tab-f-s-4: 1.1em;

/* Tab favicon colours */
--tab-c-1: #FDEBB1; /* Tab 1 favicon colour */
--tab-c-2: #CDAAFA; /* Tab 2 favicon colour */
--tab-c-3: #FAA69E; /* Tab 3 favicon colour */
--tab-c-4: #9DD7FA; /* Tab 4 favicon colour */

/* Header favicon colours */
--header-c-1: #BEF5AE; /* Tab 1 header favicon colour */
--header-c-2: #9DD7FA; /* Tab 2 header favicon colour */
--header-c-3-1: #BEF5AE; /* Tab 3 header 1 favicon colour */
--header-c-3-2: #CDAAFA; /* Tab 3 header 2 favicon colour */
--header-c-3-3: #9DD7FA; /* Tab 3 header 3 favicon colour */
--header-c-3-4: #FDEBB1; /* Tab 3 header 4 favicon colour */
--header-c-4: #CDAAFA; /* Tab 4 header favicon colour */

--content-container-gap: 0px;

--rotate-t: rotateY(20deg);
--rotate-l: rotateY(22deg);
--rotate-r: rotateY(-22deg);

--container-gap: 8px;

--img-container-flex-1: 1 1 210px;
--img-container-p: 25px 0px;

--img-d: 20px;
--img-t: 0px;
--img-l-1: calc(0px - (100% - (2 * var(--img-d))));
--img-l-2: calc(0px - (100% - var(--img-d)));
--img-w: calc(100% - var(--img-d));
--img-h-1: 300px;
--img-h-2: min(calc(var(--h) - (2 * var(--p-t-b)) - var(--header-h-1) - var(--container-gap) - 25px), 330px);
--img-o: 1;

/* Image URLs, change % (x-axis) and px (y-axis) before / to shift image position in icon, change % after / to change image size in icon (or default to cover) */
--img-url-1: url('https://www.worldanvil.com/uploads/images/1b39107b4a0ff70f814a780ddd42eed1.jpg') no-repeat 50% 0px / cover; /* Tab 1 Image URL */
--img-url-2: url('https://cdnb.artstation.com/p/assets/images/images/029/215/783/large/diep-bui-bg1-color.jpg?1596811368') no-repeat 50% 0px / cover; /* Tab 2 Image URL */
--img-url-3-1: url('https://i.pinimg.com/originals/ed/2f/9b/ed2f9b6e66b9efefa84d1ee423c718f0.png') no-repeat 50% 0px / cover; /* Tab 3 Image URL 1 */
--img-url-3-2: url('https://www.tosbase.com/content/img/icons/skills/icon_cler_healingfactor.png') no-repeat 50% 0px / cover; /* Tab 3 Image URL 2 */
--img-url-3-3: url('https://www.tosbase.com/content/img/icons/skills/icon_warri_zwerchhau.png') no-repeat 50% -15px / cover; /* Tab 3 Image URL 3 */
--img-url-3-4: url('https://www.tosbase.com/content/img/icons/skills/icon_arch_cannonblast.png') no-repeat 50% 0px / cover; /* Tab 3 Image URL 4 */
--img-url-4: url('https://www.dreampirates.in/wallpaper/art/img/24-12-2019-9840-river-home-art.jpg') no-repeat 50% 0px / cover; /* Tab 4 Image URL */

--img-rep-t: calc(0px - var(--img-t));
--img-rep-l: calc(100% - (100% - var(--img-d)));
--img-rep-o: 0.6;

--text-container-flex-1: 5 1 230px;
--text-container-flex-2: 10 1 230px;
--text-container-p: 25px 2px 25px 0px;

--header-h-1: 40px;
--header-h-2: 15px;
--header-p: 10px var(--text-p);
--header-bg: rgba(var(--color-b), 0.7);
--header-f-s-1: 1.4em;
--header-f-s-2: 1.2em;
--header-gap: 5px;

--text-h-1: 320px;
--text-h-2: 220px;
--text-p: 20px;
--text-bg: rgba(var(--color-b), 0.5);
--text-c: rgb(240, 240, 235); /* Text colour */
--text-f-s: 1em;
--text-l-h: 1.5;
--text-gap: 10px;

--label-w: 130px; /* Label width, change if a word is too long for the label */

--skill-container-w: 100%;

--icon-container-flex: 1 1 180px;
--icon-container-p: 10px 0px;
--icon-h: 210px;

--detail-container-p: 10px 0px;][comment]

-- Top Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--bar-p);
background: var(--bar-bg);
color: var(--bar-c);
font-size: var(--bar-f-s);
line-height: var(--bar-l-h);
text-align: center;
opacity: var(--bar-o);]Click Tabs on Left + Possible Scroll [fa]far fa-arrow-circle-down[/fa][/border][comment]

-- Overall Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--h);
padding: 0px;][comment]-- Tabs + Body Container --[/comment][border=transparent;
margin: auto;
max-width: calc(var(--w) + var(--tabs-w));
height: var(--h);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Tabs --[/comment][border=transparent;
padding: 0px;
background: red;
width: var(--tabs-w);
height: var(--tabs-h);
line-height: var(--tabs-l-h);
overflow: hidden;][tabs]

[tab=.][comment]-- Tab Body 1 --[/comment][comment]-- Background --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--h);
background: var(--bg-img);
padding: 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Tab Covers --[/comment][border=transparent;
position: relative;
left: var(--tab-cover-l);
box-sizing: border-box;
padding: var(--tab-cover-p-t) 0px 0px var(--tab-cover-p-l);
width: calc(var(--tab-w) + var(--tab-cover-p-l));
height: calc((4 * var(--tab-w)) + (3 * var(--tab-cover-gap)) + var(--tab-cover-p-t));
-webkit-transform: var(--rotate-t);
transform: var(--rotate-t);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--tab-cover-gap);
z-index: 1;][comment]-- Tab Cover 1 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
//background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-1);
font-size: var(--tab-f-s-1);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-2);
font-size: var(--tab-f-s-2);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-book-open[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-3);
font-size: var(--tab-f-s-3);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-fire[/fa][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-4);
font-size: var(--tab-f-s-4);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-cog[/fa][/border][/border][comment]
-- Tab Covers End --[/comment][comment]

-- Body Container --[/comment][border=transparent;
position: relative;
margin-left: calc(var(--tabs-w) - var(--tab-w) - var(--tab-cover-p-l));
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px var(--p-l-r);
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--d)));
height: var(--h);
padding: var(--p-t-b) 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
overflow-y: auto;][comment]-- Content Container --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - (2 * var(--d)));
height: auto;
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--content-container-gap);][comment]

-- Image + Name Container --[/comment][border=transparent;
flex: var(--img-container-flex-1);
box-sizing: border-box;
padding: var(--img-container-p);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--img-h-1);
padding: 0px;
background: var(--img-url-1);
opacity: var(--img-rep-o);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--img-h-1) + var(--header-h-1));
padding: 0px;
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--img-h-1) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-1);
opacity: var(--img-o);][/border][comment]-- Name Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Varipa Da[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Basics Container --[/comment][border=transparent;
flex: var(--text-container-flex-1);
box-sizing: border-box;
padding: var(--text-container-p);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Healer of Hiraya[/border][comment]-- Header Favicon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-1);][fa]far fa-heartbeat[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-1);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Alias Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Alias[/border][comment]-- Alias Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]None[/border][comment]-- Age Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Age[/border][comment]-- Age Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]52 years old[/border][comment]-- Gender Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Gender[/border][comment]-- Gender Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]None[/border][comment]-- Race Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Race[/border][comment]-- Race Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Hirayan Ganiu[/border][comment]-- Height Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Height[/border][comment]-- Height Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]158.2 cm[/border][comment]-- Weight Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Weight[/border][comment]-- Weight Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]50.13 kg[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Affiliation[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Healer's Guild[/border][comment]-- Homeland Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Homeland[/border][comment]-- Homeland Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Hiraya[/border][/border][/border][comment]
-- Basics Container End --[/comment][/border][/border][/border][comment]
-- Body Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 2 --[/comment][comment]-- Background --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--h);
background: var(--bg-img);
padding: 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Tab Covers --[/comment][border=transparent;
position: relative;
left: var(--tab-cover-l);
box-sizing: border-box;
padding: var(--tab-cover-p-t) 0px 0px var(--tab-cover-p-l);
width: calc(var(--tab-w) + var(--tab-cover-p-l));
height: calc((4 * var(--tab-w)) + (3 * var(--tab-cover-gap)) + var(--tab-cover-p-t));
-webkit-transform: var(--rotate-t);
transform: var(--rotate-t);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--tab-cover-gap);
z-index: 1;][comment]-- Tab Cover 1 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-1);
font-size: var(--tab-f-s-1);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
//background: var(--header-bg);
padding: var(--tab-p-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-2);
font-size: var(--tab-f-s-2);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-book-open[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-3);
font-size: var(--tab-f-s-3);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-fire[/fa][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-4);
font-size: var(--tab-f-s-4);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-cog[/fa][/border][/border][comment]
-- Tab Covers End --[/comment][comment]

-- Body Container --[/comment][border=transparent;
position: relative;
margin-left: calc(var(--tabs-w) - var(--tab-w) - var(--tab-cover-p-l));
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px var(--p-l-r);
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--d)));
height: var(--h);
padding: var(--p-t-b) 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
overflow-y: auto;][comment]-- Content Container --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - (2 * var(--d)));
height: auto;
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
gap: var(--content-container-gap);][comment]

-- Backstory Container --[/comment][border=transparent;
flex: var(--text-container-flex-1);
box-sizing: border-box;
padding: var(--text-container-p);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Backstory[/border][comment]-- Header Favicon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-2);][fa]far fa-books[/fa][/border][/border][comment]-- Backstory Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-1);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]
-- Event 1 Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Childhood Glory[/border][comment]-- Event 1 Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. [/border][comment]
-- Event 2 Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Healing Apprenticeship[/border][comment]-- Event 2 Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. Fusce quis porttitor metus. In eleifend aliquam justo quis convallis.[/border][comment]
-- Event 3 Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Days Adventuring[/border][comment]-- Event 3 Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit, vitae suscipit nunc congue pellentesque. Fusce quis porttitor metus. In eleifend aliquam justo quis convallis.[/border][/border][/border][comment]
-- Backstory Container End --[/comment][comment]

-- Image + Header Container --[/comment][border=transparent;
position: -webkit-sticky;
position: sticky;
top: 0px;
flex: var(--img-container-flex-1);
box-sizing: border-box;
padding: var(--img-container-p);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: var(--img-rep-l);
box-sizing: border-box;
height: var(--img-h-2);
padding: 0px;
background: var(--img-url-2);
opacity: var(--img-rep-o);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-2);
box-sizing: border-box;
min-height: calc(var(--img-h-2) + var(--header-h-1));
padding: 0px;
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--img-h-2) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-2);
opacity: var(--img-o);][/border][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Puriha Village[/border][/border][/border][comment]
-- Image + Header Container End --[/comment][/border][/border][/border][comment]
-- Body Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 3 --[/comment][comment]-- Background --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--h);
background: var(--bg-img);
padding: 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Tab Covers --[/comment][border=transparent;
position: relative;
left: var(--tab-cover-l);
box-sizing: border-box;
padding: var(--tab-cover-p-t) 0px 0px var(--tab-cover-p-l);
width: calc(var(--tab-w) + var(--tab-cover-p-l));
height: calc((4 * var(--tab-w)) + (3 * var(--tab-cover-gap)) + var(--tab-cover-p-t));
-webkit-transform: var(--rotate-t);
transform: var(--rotate-t);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--tab-cover-gap);
z-index: 1;][comment]-- Tab Cover 1 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-1);
font-size: var(--tab-f-s-1);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-2);
font-size: var(--tab-f-s-2);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-book-open[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
//background: var(--header-bg);
padding: var(--tab-p-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-3);
font-size: var(--tab-f-s-3);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-fire[/fa][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-4);
font-size: var(--tab-f-s-4);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-cog[/fa][/border][/border][comment]
-- Tab Covers End --[/comment][comment]

-- Body Container --[/comment][border=transparent;
position: relative;
margin-left: calc(var(--tabs-w) - var(--tab-w) - var(--tab-cover-p-l));
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px var(--p-l-r);
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--d)));
height: var(--h);
padding: var(--p-t-b) 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
overflow-y: auto;][comment]-- Content Container --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - (2 * var(--d)));
height: auto;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Skill 1 Container --[/comment][border=transparent;
flex: 0 0;
width: var(--skill-container-w);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--content-container-gap);][comment]

-- Image + Header Container --[/comment][border=transparent;
flex: var(--icon-container-flex);
box-sizing: border-box;
padding: var(--icon-container-p);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--icon-h);
padding: 0px;
background: var(--img-url-3-1);
opacity: var(--img-rep-o);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--icon-h) + var(--header-h-2));
padding: 0px;
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--icon-h) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-3-1);
opacity: var(--img-o);][/border][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Bling bling[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Details Container --[/comment][border=transparent;
flex: var(--text-container-flex-2);
box-sizing: border-box;
padding: var(--detail-container-p);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Healing Aura[/border][comment]-- Header Favicon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-3-1);][fa]far fa-heartbeat[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-2);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Description Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Description[/border][comment]-- Description Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.[/border][comment]-- Cost Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Cost[/border][comment]-- Cost Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]A Lot of Mana[/border][comment]-- Duration Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Duration[/border][comment]-- Duration Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]4 Posts[/border][/border][/border][comment]
-- Details Container End --[/comment][/border][comment]
-- Skill 1 Container End --[/comment][comment]

-- Skill 2 Container --[/comment][border=transparent;
flex: 0 0;
width: var(--skill-container-w);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--content-container-gap);][comment]

-- Image + Header Container --[/comment][border=transparent;
flex: var(--icon-container-flex);
box-sizing: border-box;
padding: var(--icon-container-p);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--icon-h);
padding: 0px;
background: var(--img-url-3-2);
opacity: var(--img-rep-o);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--icon-h) + var(--header-h-2));
padding: 0px;
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--icon-h) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-3-2);
opacity: var(--img-o);][/border][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Shwoop[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Details Container --[/comment][border=transparent;
flex: var(--text-container-flex-2);
box-sizing: border-box;
padding: var(--detail-container-p);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Barrier of Health[/border][comment]-- Header Favicon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-3-2);][fa]far fa-shield-cross[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-2);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Description Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Description[/border][comment]-- Description Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.[/border][comment]-- Cost Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Cost[/border][comment]-- Cost Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Some Mana[/border][comment]-- Duration Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Duration[/border][comment]-- Duration Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]2 Posts[/border][/border][/border][comment]
-- Details Container End --[/comment][/border][comment]
-- Skill 2 Container End --[/comment][comment]

-- Skill 3 Container --[/comment][border=transparent;
flex: 0 0;
width: var(--skill-container-w);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--content-container-gap);][comment]

-- Image + Header Container --[/comment][border=transparent;
flex: var(--icon-container-flex);
box-sizing: border-box;
padding: var(--icon-container-p);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--icon-h);
padding: 0px;
background: var(--img-url-3-3);
opacity: var(--img-rep-o);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--icon-h) + var(--header-h-2));
padding: 0px;
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--icon-h) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-3-3);
opacity: var(--img-o);][/border][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Pew pew[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Details Container --[/comment][border=transparent;
flex: var(--text-container-flex-2);
box-sizing: border-box;
padding: var(--detail-container-p);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Blast of Agony[/border][comment]-- Header Favicon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-3-3);][fa]far fa-staff[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-2);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Description Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Description[/border][comment]-- Description Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel nisi elementum scelerisque.[/border][comment]-- Cost Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Cost[/border][comment]-- Cost Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]A Bit of Mana[/border][comment]-- Duration Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Duration[/border][comment]-- Duration Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]1 Post[/border][/border][/border][comment]
-- Details Container End --[/comment][/border][comment]
-- Skill 3 Container End --[/comment][comment]

-- Skill 4 Container --[/comment][border=transparent;
flex: 0 0;
width: var(--skill-container-w);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--content-container-gap);][comment]

-- Image + Header Container --[/comment][border=transparent;
flex: var(--icon-container-flex);
box-sizing: border-box;
padding: var(--icon-container-p);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: 0px;
box-sizing: border-box;
height: var(--icon-h);
padding: 0px;
background: var(--img-url-3-4);
opacity: var(--img-rep-o);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-1);
box-sizing: border-box;
min-height: calc(var(--icon-h) + var(--header-h-2));
padding: 0px;
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--icon-h) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-3-4);
opacity: var(--img-o);][/border][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Plink plunk[/border][/border][/border][comment]
-- Image + Name Container End --[/comment][comment]

-- Details Container --[/comment][border=transparent;
flex: var(--text-container-flex-2);
box-sizing: border-box;
padding: var(--detail-container-p);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-2);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-2);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Pebble Slingshot[/border][comment]-- Header Favicon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-3-4);][fa]far fa-bow-arrow[/fa][/border][/border][comment]-- Basics Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-2);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]-- Description Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Description[/border][comment]-- Description Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu convallis nisi, sit amet semper orci. Duis elementum maximus lorem. Integer sodales maximus lacus, sed consequat felis consequat et. Vivamus ac gravida purus, in aliquet leo. Mauris viverra quam vel. You see no cannon ball here.[/border][comment]-- Cost Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Cost[/border][comment]-- Cost Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]A Bit of Stamina[/border][comment]-- Duration Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Duration[/border][comment]-- Duration Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]1 Post[/border][/border][/border][comment]
-- Details Container End --[/comment][/border][comment]
-- Skill 4 Container End --[/comment][/border][/border][/border][comment]
-- Body Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 4 --[/comment][comment]-- Background --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: var(--h);
background: var(--bg-img);
padding: 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Tab Covers --[/comment][border=transparent;
position: relative;
left: var(--tab-cover-l);
box-sizing: border-box;
padding: var(--tab-cover-p-t) 0px 0px var(--tab-cover-p-l);
width: calc(var(--tab-w) + var(--tab-cover-p-l));
height: calc((4 * var(--tab-w)) + (3 * var(--tab-cover-gap)) + var(--tab-cover-p-t));
-webkit-transform: var(--rotate-t);
transform: var(--rotate-t);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--tab-cover-gap);
z-index: 1;][comment]-- Tab Cover 1 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-1);
font-size: var(--tab-f-s-1);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-2);
font-size: var(--tab-f-s-2);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-book-open[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--header-bg);
padding: var(--tab-p-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-3);
font-size: var(--tab-f-s-3);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-fire[/fa][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
//background: var(--header-bg);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
color: var(--tab-c-4);
font-size: var(--tab-f-s-4);
line-height: 1;
opacity: var(--tab-o);][fa]far fa-cog[/fa][/border][/border][comment]
-- Tab Covers End --[/comment][comment]

-- Body Container --[/comment][border=transparent;
position: relative;
margin-left: calc(var(--tabs-w) - var(--tab-w) - var(--tab-cover-p-l));
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px var(--p-l-r);
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--d)));
height: var(--h);
padding: var(--p-t-b) 0px;
perspective: 2000px;
perspective-origin: 50% 50%;
overflow-y: auto;][comment]-- Content Container --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - (2 * var(--d)));
height: auto;
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
gap: var(--content-container-gap);][comment]

-- Miscellaneous Container --[/comment][border=transparent;
flex: var(--text-container-flex-1);
box-sizing: border-box;
padding: var(--text-container-p);
-webkit-transform: var(--rotate-l);
transform: var(--rotate-l);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--container-gap);][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: var(--header-gap);][comment]-- Header Text --[/comment][border=transparent;
flex: 1 1;
padding: 0px;]Miscellaneous[/border][comment]-- Header Favicon --[/comment][border=transparent;
flex: 0 0;
padding: 0px;
color: var(--header-c-4);][fa]far fa-tools[/fa][/border][/border][comment]-- Miscellaneous Text Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--text-h-1);
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
line-height: var(--text-l-h);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--text-gap);][comment]
-- Display Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Display[/border][comment]-- Display Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod.[/border][comment]
-- Controls Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Controls[/border][comment]-- Controls Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti.[/border][comment]
-- Extras Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Extras[/border][comment]-- Extras Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque scelerisque vulputate. Suspendisse potenti. Aenean et sapien eget tortor porttitor euismod. Donec aliquet consectetur elit.[/border][/border][/border][comment]
-- Miscellaneous Container End --[/comment][comment]

-- Image + Header Container --[/comment][border=transparent;
position: -webkit-sticky;
position: sticky;
top: 0px;
flex: var(--img-container-flex-1);
box-sizing: border-box;
padding: var(--img-container-p);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Image Repeat --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-rep-t);
left: var(--img-rep-l);
box-sizing: border-box;
height: var(--img-h-2);
padding: 0px;
background: var(--img-url-4);
opacity: var(--img-rep-o);
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);][/border][comment]-- Image Container --[/comment][border=transparent;
flex: 0 0 var(--img-w);
position: relative;
top: var(--img-t);
left: var(--img-l-2);
box-sizing: border-box;
min-height: calc(var(--img-h-2) + var(--header-h-1));
padding: 0px;
-webkit-transform: var(--rotate-r);
transform: var(--rotate-r);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--container-gap);][comment]-- Image --[/comment][border=transparent;
flex: 0 0 calc(var(--img-h-2) - var(--container-gap));
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
background: var(--img-url-4);
opacity: var(--img-o);][/border][comment]-- Header Box --[/comment][border=transparent;
flex: 0 0;
box-sizing: border-box;
width: 100%;
min-height: var(--header-h-1);
background: var(--header-bg);
padding: var(--header-p);
color: var(--text-c);
font-size: var(--header-f-s-1);
font-weight: bold;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;]Genaiva Township[/border][/border][/border][comment]
-- Image + Header Container End --[/comment][/border][/border][/border][comment]
-- Body Container End --[/comment][/border][/tab]

[/tabs][/border][/border][/border][comment]-- Credits --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--bar-p);
background: var(--bar-bg);
color: var(--bar-c);
font-size: var(--bar-f-s);
line-height: var(--bar-l-h);
text-align: left;
opacity: var(--bar-o);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
gap: 2px 12px;][border=transparent;
padding: 0px;][B]Background Artist:[/B] Tyler Edlin[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Character Artist 1:[/B] Guweiz[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Setting Artist 1:[/B] Diep Bui[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Skill Source 1:[/B] Dungeon Defenders II[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Skill Source 2 - 4:[/B] Tree of Saviour[/border][border=transparent;
padding: 0px;][fa]far fa-arrow-circle-right[/fa][/border][border=transparent;
padding: 0px;][B]Setting Artist 2:[/B] Denis Istomin[/border][/border][/border][/font]

THIS IS SO COOL I'M OBSESSED

 

[Ambiloquous]

THIS IS SO COOL I'M OBSESSED

Thank you

 

[Caffeine_Obsessed]

Woah! your codes are so cool! I love how they look and how interactive they are! I really can't see one that doesn't look amazing!

 

[Ambiloquous]

Woah! your codes are so cool! I love how they look and how interactive they are! I really can't see one that doesn't look amazing!

Thank you sm! I was afraid that they were a little gimmicky, but I'm glad you like the interactive-ness.

 

[Ambiloquous]

Piano Keys

Tabs code made with pure CSS piano keys. They were kind of a pain, but definitely not as much as that D&D sheet or as I expected.

Thanks to Uxie for trying to help when the keys went wack on mobile, but it turned out that it was just browser incompatibility issues. 🖐 I should probably update my system.

I lost most of my willingness to make the code nicer after coding the keys, so the tab bodies are a little basic. Y'all can go to town with it. The tab titles are a little weird — for the left-to-right one, you have to omit the first letter, and for the top-to-bottom one, you double newline if there's a space between words.

This time, 3D transform works on Firefox. There are two versions below; one of them will look like complete garbage, and one of them, less so. Choose whichever one your browser renders better and ignore the other one. (Or, y'know, don't use these at all.) The tabs will still work even if it looks like trash, but it'll be awkward trying to click the right area. If none of them look right to you, tell me, and I'll try to figure something out.

Semi-Broken

Tabs

Hidden Scroll

• .
• .
• .
• .

• IANO KEYS

  PIANO
  
  KEYS

  There's 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet a velit a tincidunt. Nullam felis dolor, fringilla non vulputate sed, suscipit non lacus. Morbi fermentum urna vitae aliquet rhoncus. Sed et hendrerit augue. Donec orci purus, faucibus at ex sit amet, volutpat lacinia diam. Donec ut semper lacus. Mauris sem felis, feugiat a massa ut, porttitor tempus felis. Morbi nisi lorem, efficitur eu mollis at, finibus a velit. Vivamus porta lorem vel tempor eleifend. Sed vehicula, mauris in dapibus maximus, sapien ipsum semper quam, eu sodales ipsum risus vel dui.
  
  Nullam condimentum, tellus a aliquet dictum, nunc odio pulvinar orci, in pharetra nisl orci a lacus. Donec eu varius nisi. Suspendisse egestas nunc ac sem luctus fermentum. Donec risus orci, pellentesque vel lorem vel, consequat pellentesque nisi. Cras finibus, tellus sit amet tincidunt accumsan, elit nibh faucibus arcu, vulputate elementum nulla nulla in tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris luctus sem laoreet, dignissim lectus eget, fermentum urna. Donec id purus vel tellus bibendum dapibus id elementum lorem. Vivamus quam arcu, rutrum eget erat at, egestas pretium nulla. Sed lacus nunc, euismod vitae fringilla vitae, luctus eget diam. Cras aliquam libero eu hendrerit vehicula. Sed in magna lectus. Cras laoreet, eros at vehicula faucibus, elit justo tristique elit, id euismod leo justo sed velit. Ut fermentum tortor et dignissim mattis. Mauris ut laoreet leo. Curabitur faucibus eleifend neque, eu pulvinar magna.
  
  Duis tristique justo ut odio tincidunt faucibus. Proin vel nunc finibus justo vulputate bibendum in porta neque. Suspendisse vulputate nunc ut blandit cursus. Ut massa velit, sollicitudin id aliquam ultrices, consequat a turpis. Donec ipsum ipsum, interdum eget mauris eget, rhoncus fringilla nunc. Ut vehicula egestas nibh, vitae dapibus leo tincidunt vitae. Suspendisse eleifend ligula libero, eu maximus mauris semper non.
  
  Morbi egestas quam sed sem tincidunt, in dictum velit vestibulum. Praesent massa neque, consequat vel hendrerit quis, venenatis vitae sapien. Etiam facilisis tortor et posuere consequat. Cras ornare libero augue, vitae mattis ex volutpat eget. Duis ut augue vitae enim tempor hendrerit ut eget nunc. Integer porttitor vestibulum nunc nec auctor. Duis nulla ligula, gravida vitae ipsum sed, dictum dignissim velit.
• CORES

  SCORES

  There's 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet a velit a tincidunt. Nullam felis dolor, fringilla non vulputate sed, suscipit non lacus. Morbi fermentum urna vitae aliquet rhoncus. Sed et hendrerit augue. Donec orci purus, faucibus at ex sit amet, volutpat lacinia diam. Donec ut semper lacus. Mauris sem felis, feugiat a massa ut, porttitor tempus felis. Morbi nisi lorem, efficitur eu mollis at, finibus a velit. Vivamus porta lorem vel tempor eleifend. Sed vehicula, mauris in dapibus maximus, sapien ipsum semper quam, eu sodales ipsum risus vel dui.
  
  Nullam condimentum, tellus a aliquet dictum, nunc odio pulvinar orci, in pharetra nisl orci a lacus. Donec eu varius nisi. Suspendisse egestas nunc ac sem luctus fermentum. Donec risus orci, pellentesque vel lorem vel, consequat pellentesque nisi. Cras finibus, tellus sit amet tincidunt accumsan, elit nibh faucibus arcu, vulputate elementum nulla nulla in tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris luctus sem laoreet, dignissim lectus eget, fermentum urna. Donec id purus vel tellus bibendum dapibus id elementum lorem. Vivamus quam arcu, rutrum eget erat at, egestas pretium nulla. Sed lacus nunc, euismod vitae fringilla vitae, luctus eget diam. Cras aliquam libero eu hendrerit vehicula. Sed in magna lectus. Cras laoreet, eros at vehicula faucibus, elit justo tristique elit, id euismod leo justo sed velit. Ut fermentum tortor et dignissim mattis. Mauris ut laoreet leo. Curabitur faucibus eleifend neque, eu pulvinar magna.
  
  Duis tristique justo ut odio tincidunt faucibus. Proin vel nunc finibus justo vulputate bibendum in porta neque. Suspendisse vulputate nunc ut blandit cursus. Ut massa velit, sollicitudin id aliquam ultrices, consequat a turpis. Donec ipsum ipsum, interdum eget mauris eget, rhoncus fringilla nunc. Ut vehicula egestas nibh, vitae dapibus leo tincidunt vitae. Suspendisse eleifend ligula libero, eu maximus mauris semper non.
  
  Morbi egestas quam sed sem tincidunt, in dictum velit vestibulum. Praesent massa neque, consequat vel hendrerit quis, venenatis vitae sapien. Etiam facilisis tortor et posuere consequat. Cras ornare libero augue, vitae mattis ex volutpat eget. Duis ut augue vitae enim tempor hendrerit ut eget nunc. Integer porttitor vestibulum nunc nec auctor. Duis nulla ligula, gravida vitae ipsum sed, dictum dignissim velit.
• IANISTS

  PIANISTS

  There's 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet a velit a tincidunt. Nullam felis dolor, fringilla non vulputate sed, suscipit non lacus. Morbi fermentum urna vitae aliquet rhoncus. Sed et hendrerit augue. Donec orci purus, faucibus at ex sit amet, volutpat lacinia diam. Donec ut semper lacus. Mauris sem felis, feugiat a massa ut, porttitor tempus felis. Morbi nisi lorem, efficitur eu mollis at, finibus a velit. Vivamus porta lorem vel tempor eleifend. Sed vehicula, mauris in dapibus maximus, sapien ipsum semper quam, eu sodales ipsum risus vel dui.
  
  Nullam condimentum, tellus a aliquet dictum, nunc odio pulvinar orci, in pharetra nisl orci a lacus. Donec eu varius nisi. Suspendisse egestas nunc ac sem luctus fermentum. Donec risus orci, pellentesque vel lorem vel, consequat pellentesque nisi. Cras finibus, tellus sit amet tincidunt accumsan, elit nibh faucibus arcu, vulputate elementum nulla nulla in tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris luctus sem laoreet, dignissim lectus eget, fermentum urna. Donec id purus vel tellus bibendum dapibus id elementum lorem. Vivamus quam arcu, rutrum eget erat at, egestas pretium nulla. Sed lacus nunc, euismod vitae fringilla vitae, luctus eget diam. Cras aliquam libero eu hendrerit vehicula. Sed in magna lectus. Cras laoreet, eros at vehicula faucibus, elit justo tristique elit, id euismod leo justo sed velit. Ut fermentum tortor et dignissim mattis. Mauris ut laoreet leo. Curabitur faucibus eleifend neque, eu pulvinar magna.
  
  Duis tristique justo ut odio tincidunt faucibus. Proin vel nunc finibus justo vulputate bibendum in porta neque. Suspendisse vulputate nunc ut blandit cursus. Ut massa velit, sollicitudin id aliquam ultrices, consequat a turpis. Donec ipsum ipsum, interdum eget mauris eget, rhoncus fringilla nunc. Ut vehicula egestas nibh, vitae dapibus leo tincidunt vitae. Suspendisse eleifend ligula libero, eu maximus mauris semper non.
  
  Morbi egestas quam sed sem tincidunt, in dictum velit vestibulum. Praesent massa neque, consequat vel hendrerit quis, venenatis vitae sapien. Etiam facilisis tortor et posuere consequat. Cras ornare libero augue, vitae mattis ex volutpat eget. Duis ut augue vitae enim tempor hendrerit ut eget nunc. Integer porttitor vestibulum nunc nec auctor. Duis nulla ligula, gravida vitae ipsum sed, dictum dignissim velit.
• ULES

  RULES

  There's 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet a velit a tincidunt. Nullam felis dolor, fringilla non vulputate sed, suscipit non lacus. Morbi fermentum urna vitae aliquet rhoncus. Sed et hendrerit augue. Donec orci purus, faucibus at ex sit amet, volutpat lacinia diam. Donec ut semper lacus. Mauris sem felis, feugiat a massa ut, porttitor tempus felis. Morbi nisi lorem, efficitur eu mollis at, finibus a velit. Vivamus porta lorem vel tempor eleifend. Sed vehicula, mauris in dapibus maximus, sapien ipsum semper quam, eu sodales ipsum risus vel dui.
  
  Nullam condimentum, tellus a aliquet dictum, nunc odio pulvinar orci, in pharetra nisl orci a lacus. Donec eu varius nisi. Suspendisse egestas nunc ac sem luctus fermentum. Donec risus orci, pellentesque vel lorem vel, consequat pellentesque nisi. Cras finibus, tellus sit amet tincidunt accumsan, elit nibh faucibus arcu, vulputate elementum nulla nulla in tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris luctus sem laoreet, dignissim lectus eget, fermentum urna. Donec id purus vel tellus bibendum dapibus id elementum lorem. Vivamus quam arcu, rutrum eget erat at, egestas pretium nulla. Sed lacus nunc, euismod vitae fringilla vitae, luctus eget diam. Cras aliquam libero eu hendrerit vehicula. Sed in magna lectus. Cras laoreet, eros at vehicula faucibus, elit justo tristique elit, id euismod leo justo sed velit. Ut fermentum tortor et dignissim mattis. Mauris ut laoreet leo. Curabitur faucibus eleifend neque, eu pulvinar magna.
  
  Duis tristique justo ut odio tincidunt faucibus. Proin vel nunc finibus justo vulputate bibendum in porta neque. Suspendisse vulputate nunc ut blandit cursus. Ut massa velit, sollicitudin id aliquam ultrices, consequat a turpis. Donec ipsum ipsum, interdum eget mauris eget, rhoncus fringilla nunc. Ut vehicula egestas nibh, vitae dapibus leo tincidunt vitae. Suspendisse eleifend ligula libero, eu maximus mauris semper non.
  
  Morbi egestas quam sed sem tincidunt, in dictum velit vestibulum. Praesent massa neque, consequat vel hendrerit quis, venenatis vitae sapien. Etiam facilisis tortor et posuere consequat. Cras ornare libero augue, vitae mattis ex volutpat eget. Duis ut augue vitae enim tempor hendrerit ut eget nunc. Integer porttitor vestibulum nunc nec auctor. Duis nulla ligula, gravida vitae ipsum sed, dictum dignissim velit.

Click Front of White Keys & Scroll

Spoiler: Version 1

[font=Playfair Display][border=transparent;
padding: 0px;

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

/* Use RGB numbers only */
--b-key-c: 0, 0, 0; /* Black key colour */
--w-key-c: 255, 255, 255; /* White key colour */

--d: 20px;
--w: 600px;
--h: min(80vh, 550px);
--p-t: max(3.2vh, 20px);
--p-l-r: max(3.2vh, 20px);

/* Background, gradient and image URL combined */
--bg: linear-gradient(rgba(var(--w-key-c), 0.65) -10px, rgba(var(--b-key-c), 0.65), rgba(var(--b-key-c), 0.65)), url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F1.bp.blogspot.com%2F-2v8jl8oyRo8%2FU0mj0NcoU7I%2FAAAAAAAATiM%2FzyMCo5ncf78%2Fs1600%2Fcs_music_sheet_1919_dspng.png&f=1&nofb=1') repeat 50% 30px / 400px, linear-gradient(rgb(var(--w-key-c)), rgb(var(--b-key-c)), rgb(var(--b-key-c)));

--tabs-w: 268px;
--tabs-h: 30px;

--title-t: calc(0px - 34px);
--title-l: -2px;
--title-l-r: calc(30px + var(--title-l));
--title-w: 30px;
--title-f-s: 2.4em;
--title-l-s: 4px;
--title-s-c: rgba(220, 220, 220, 0.8);

--key-b-r: 3px;
--key-b: 1px solid rgba(var(--shadow-c), 0.8);
--key-rotate: rotateX(90deg);

--b-key-container-t: calc(100% - var(--w-key-h) + 10px);
--b-key-container-l: calc(50% - (var(--b-key-container-w) / 2));
--b-key-container-w: calc(var(--tabs-w) - 70px - 80px);
--b-key-gap: 20px;
--b-key-h: 100px;

--b-bases-t: calc(var(--b-key-container-t) + var(--b-base-h) + 42px);
--b-bases-l: calc(50% - (var(--b-bases-w) / 2));
--b-bases-w: calc(var(--b-key-container-w) + 16px);
--b-bases-gap: 24px;
--b-base-h: 26px;
--b-base-g: linear-gradient(rgb(var(--shadow-inner-c)), rgb(var(--b-key-c)), rgb(var(--b-key-c)));

--b-side-container-t: calc(var(--b-bases-t) - 18px);
--b-side-container-l: calc(50% - (var(--b-side-container-w) / 2));
--b-side-container-w: calc(var(--tabs-w) - 50px);
--b-side-gap: 0px;
--b-side-l: 21px;
--b-side-h: var(--b-base-h);

--w-key-container-t: calc(100% - var(--w-key-h));
--w-key-container-l: calc(50% - (var(--w-key-container-w) / 2));
--w-key-container-w: calc(var(--tabs-w) - 70px);
--w-key-layer-t: 8px;
--w-key-per: -90px; 
--w-key-d: var(--tab-d);
--w-key-h: 160px;

--tab-covers-t: calc(100% - var(--tab-h));
--tab-covers-l: calc(50% - (var(--tab-covers-w) / 2));
--tab-covers-w: calc(var(--w-key-container-w) + 38px);
--tab-d: 14px;
--tab-h: 32px;
--tab-g: linear-gradient(rgb(var(--shadow-c)), rgb(var(--w-key-c)) 80%);

--shadow-c: 120, 120, 120; /* Colour of shadow border of all keys, use RGB numbers */
--shadow-t: 2px;
--shadow-l: 26px;
--shadow-d: 10px;
--shadow-h: var(--tab-h);
--shadow-inner-c: 110, 110, 110; /* Colour of shadow side of white key, use RGB numbers */
--shadow-g: linear-gradient(to right, rgb(var(--shadow-inner-c)) 75%, rgba(0, 0, 0, 0));
--shadow-rotate: rotate3d(-0.01, 1, 0, 90deg);

--text-bg: linear-gradient(rgba(230, 230, 230, 0.95), rgba(220, 220, 220, 0.95)); /* Text box gradient */
--text-c: black; /* Text colour */][comment]

-- Overall --[/comment][border=transparent;
position: relative;
margin: auto;
margin-top: calc(0px - var(--title-t));
margin-bottom: var(--tab-d);
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-end;][comment]

-- Actual Tabs Container --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tabs-w);
height: var(--tabs-h);
padding: 0px;
background: red;
overflow: hidden;][tabs]

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

-- Title Left-to-Right --[/comment][border=transparent;
position: absolute;
top: var(--title-t);
left: var(--title-l-r);
margin: auto;
width: 100%;
padding: 0px;
color: rgb(var(--b-key-c));
font-size: var(--title-f-s);
font-weight: bold;
letter-spacing: var(--title-l-s);
line-height: 1;
-webkit-text-stroke: 1px var(--title-s-c);
z-index: 1;]IANO KEYS[/border][comment]

-- Title Top-to-Bottom --[/comment][border=transparent;
width: var(--title-w);
position: absolute;
top: var(--title-t);
left: var(--title-l);
margin: auto;
max-width: calc(var(--w) - 0px);
padding: 0px;
color: rgb(var(--b-key-c));
font-size: var(--title-f-s);
font-weight: bold;
line-height: 1;
text-align: center;
-webkit-text-stroke: 1px var(--title-s-c);
z-index: 1;]PIANO

KEYS[/border][comment]

-- Black Keys Top Container --[/comment][border=transparent;
position: absolute;
top: var(--b-key-container-t);
left: var(--b-key-container-l);
box-sizing: border-box;
width: var(--b-key-container-w);
padding: 0px;
z-index: 6;][comment]

-- Top Layer --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--b-key-gap);][comment]-- Black Key 1 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- Black Key 2 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- Black Key 3 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][/border][comment]
-- Top Layer End --[/comment][/border][comment]
-- Black Keys Top Container End --[/comment][comment]

-- Black Keys Base Container --[/comment][border=transparent;
position: absolute;
top: var(--b-bases-t);
left: var(--b-bases-l);
box-sizing: border-box;
width: var(--b-bases-w);
padding: 0px;
z-index: 5;][comment]

-- Base Layer --[/comment][border=transparent;
position: relative;
top: 0px;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--b-bases-gap);][comment]--Black Key 1 Base --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][comment]-- Black Key 2 Base --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][comment]-- Black Key 3 Base --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][/border][comment]
-- Base Layer End --[/comment][/border][comment]
-- Black Keys Base Container End --[/comment][comment]

-- Black Keys Side Container --[/comment][border=transparent;
position: absolute;
top: var(--b-side-container-t);
left: var(--b-side-container-l);
box-sizing: border-box;
width: var(--b-side-container-w);
padding: 0px;
z-index: 4;][comment]

-- Layer --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--b-side-gap);][comment]-- Black Key 1 Side --[/comment][border=transparent;
position: relative;
left: var(--b-side-l);
flex: 1 0;
box-sizing: border-box;
height: var(--b-side-h);
padding: 0px;
border-radius: calc(var(--key-b-r) + 5px);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(to left, transparent 10%, black 80%);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][comment]-- Black Key 2 Side --[/comment][border=transparent;
position: relative;
left: calc(0px - var(--b-side-l));
flex: 1 0;
box-sizing: border-box;
height: var(--b-side-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(to left, transparent 10%, black 80%);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][/border][comment]
-- Layer End --[/comment][/border][comment]
-- Black Keys Side Container End --[/comment][comment]

-- White Keys Container --[/comment][border=transparent;
position: absolute;
top: var(--w-key-container-t);
left: var(--w-key-container-l);
box-sizing: border-box;
width: var(--w-key-container-w);
padding: 0px;
z-index: 3;][comment]

-- Top Layer --[/comment][border=transparent;
position: relative;
top: var(--w-key-layer-t);
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- White Key 1 Top --[/comment][border=transparent;
position: relative;
top: var(--w-key-d);
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 2 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 3 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 4 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][/border][comment]
-- Top Layer End --[/comment][/border][comment]
-- White Keys Container End --[/comment][comment]

-- Tab Covers Container --[/comment][border=transparent;
position: absolute;
top: var(--tab-covers-t);
left: var(--tab-covers-l);
box-sizing: border-box;
width: var(--tab-covers-w);
padding: 0px;
z-index: 2;][comment]

-- Tab Covers Layer --[/comment][border=transparent;
position: relative;
top: 0px;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- Tab Cover 1 --[/comment][border=transparent;
position: relative;
top: var(--tab-d);
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][/border][comment]
-- Tab Covers Layer End --[/comment][/border][comment]
-- Tab Covers Container End --[/comment][comment]

-- Inner Shadow --[/comment][border=transparent;
position: absolute;
top: var(--tab-covers-t);
left: calc(var(--tab-covers-l) + var(--shadow-d));
box-sizing: border-box;
width: calc(var(--tab-covers-w) - (2 * var(--shadow-d)));
height: var(--tab-h);
padding: 0px;
background: rgb(var(--shadow-inner-c));
perspective: 400px;
perspective-origin: 50% calc(0px - (var(--h) / 2) + var(--w-key-h));
z-index: 1;][comment]-- White Key 1 Shadow --[/comment][border=transparent;
position: relative;
top: var(--shadow-t);
left: var(--shadow-l);
box-sizing: border-box;
width: 25%;
height: var(--shadow-h);
padding: 0px;
border-radius: var(--w-key-b-r);
border: var(--w-key-b);
background: rgb(var(--shadow-inner-c));
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][/border][comment]

-- Background --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--h);
padding: var(--p-t) 0px var(--tabs-h) 0px;
background: var(--bg);
overflow: hidden;
z-index: 0;][comment]-- Hidden Scroll --[/comment][border=transparent;
position: relative;
top: 0px;
left: 0px;
box-sizing: border-box;
width: calc(100% + var(--d));
height: 100%;
padding: 0px;
-webkit-mask-image: linear-gradient(black 70%, transparent 98%);
overflow-y: auto;
pointer-events: auto;][comment]-- Content Container --[/comment][border=transparent;
position: relative;
top: 0px;
left: 0px;
box-sizing: border-box;
width: calc(100% - var(--d));
padding: 0px var(--p-l-r);][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: calc(var(--p-t) * 0.75);
background: var(--text-bg);
color: var(--text-c);
line-height: 1.5;]There's 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet a velit a tincidunt. Nullam felis dolor, fringilla non vulputate sed, suscipit non lacus. Morbi fermentum urna vitae aliquet rhoncus. Sed et hendrerit augue. Donec orci purus, faucibus at ex sit amet, volutpat lacinia diam. Donec ut semper lacus. Mauris sem felis, feugiat a massa ut, porttitor tempus felis. Morbi nisi lorem, efficitur eu mollis at, finibus a velit. Vivamus porta lorem vel tempor eleifend. Sed vehicula, mauris in dapibus maximus, sapien ipsum semper quam, eu sodales ipsum risus vel dui.

Nullam condimentum, tellus a aliquet dictum, nunc odio pulvinar orci, in pharetra nisl orci a lacus. Donec eu varius nisi. Suspendisse egestas nunc ac sem luctus fermentum. Donec risus orci, pellentesque vel lorem vel, consequat pellentesque nisi. Cras finibus, tellus sit amet tincidunt accumsan, elit nibh faucibus arcu, vulputate elementum nulla nulla in tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris luctus sem laoreet, dignissim lectus eget, fermentum urna. Donec id purus vel tellus bibendum dapibus id elementum lorem. Vivamus quam arcu, rutrum eget erat at, egestas pretium nulla. Sed lacus nunc, euismod vitae fringilla vitae, luctus eget diam. Cras aliquam libero eu hendrerit vehicula. Sed in magna lectus. Cras laoreet, eros at vehicula faucibus, elit justo tristique elit, id euismod leo justo sed velit. Ut fermentum tortor et dignissim mattis. Mauris ut laoreet leo. Curabitur faucibus eleifend neque, eu pulvinar magna.

Duis tristique justo ut odio tincidunt faucibus. Proin vel nunc finibus justo vulputate bibendum in porta neque. Suspendisse vulputate nunc ut blandit cursus. Ut massa velit, sollicitudin id aliquam ultrices, consequat a turpis. Donec ipsum ipsum, interdum eget mauris eget, rhoncus fringilla nunc. Ut vehicula egestas nibh, vitae dapibus leo tincidunt vitae. Suspendisse eleifend ligula libero, eu maximus mauris semper non.

Morbi egestas quam sed sem tincidunt, in dictum velit vestibulum. Praesent massa neque, consequat vel hendrerit quis, venenatis vitae sapien. Etiam facilisis tortor et posuere consequat. Cras ornare libero augue, vitae mattis ex volutpat eget. Duis ut augue vitae enim tempor hendrerit ut eget nunc. Integer porttitor vestibulum nunc nec auctor. Duis nulla ligula, gravida vitae ipsum sed, dictum dignissim velit.[/border][/border][/border][/border][/border][/tab]

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

-- Title Left-to-Right --[/comment][border=transparent;
position: absolute;
top: var(--title-t);
left: var(--title-l-r);
margin: auto;
width: 100%;
padding: 0px;
color: rgb(var(--b-key-c));
font-size: var(--title-f-s);
font-weight: bold;
letter-spacing: var(--title-l-s);
line-height: 1;
-webkit-text-stroke: 1px var(--title-s-c);
z-index: 1;]CORES[/border][comment]

-- Title Top-to-Bottom --[/comment][border=transparent;
width: var(--title-w);
position: absolute;
top: var(--title-t);
left: var(--title-l);
margin: auto;
max-width: calc(var(--w) - 0px);
padding: 0px;
color: rgb(var(--b-key-c));
font-size: var(--title-f-s);
font-weight: bold;
line-height: 1;
text-align: center;
-webkit-text-stroke: 1px var(--title-s-c);
z-index: 1;]SCORES[/border][comment]

-- Black Keys Top Container --[/comment][border=transparent;
position: absolute;
top: var(--b-key-container-t);
left: var(--b-key-container-l);
box-sizing: border-box;
width: var(--b-key-container-w);
padding: 0px;
z-index: 6;][comment]

-- Top Layer --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--b-key-gap);][comment]-- Black Key 1 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- Black Key 2 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- Black Key 3 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][/border][comment]
-- Top Layer End --[/comment][/border][comment]
-- Black Keys Top Container End --[/comment][comment]

-- Black Keys Base Container --[/comment][border=transparent;
position: absolute;
top: var(--b-bases-t);
left: var(--b-bases-l);
box-sizing: border-box;
width: var(--b-bases-w);
padding: 0px;
z-index: 5;][comment]

-- Base Layer --[/comment][border=transparent;
position: relative;
top: 0px;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--b-bases-gap);][comment]--Black Key 1 Base --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][comment]-- Black Key 2 Base --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][comment]-- Black Key 3 Base --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][/border][comment]
-- Base Layer End --[/comment][/border][comment]
-- Black Keys Base Container End --[/comment][comment]

-- Black Keys Side Container --[/comment][border=transparent;
position: absolute;
top: var(--b-side-container-t);
left: var(--b-side-container-l);
box-sizing: border-box;
width: var(--b-side-container-w);
padding: 0px;
z-index: 4;][comment]

-- Layer --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--b-side-gap);][comment]-- Black Key 1 Side --[/comment][border=transparent;
position: relative;
left: var(--b-side-l);
flex: 1 0;
box-sizing: border-box;
height: var(--b-side-h);
padding: 0px;
border-radius: calc(var(--key-b-r) + 5px);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(to left, transparent 10%, black 80%);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][comment]-- Black Key 2 Side --[/comment][border=transparent;
position: relative;
left: calc(0px - var(--b-side-l));
flex: 1 0;
box-sizing: border-box;
height: var(--b-side-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(to left, transparent 10%, black 80%);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][/border][comment]
-- Layer End --[/comment][/border][comment]
-- Black Keys Side Container End --[/comment][comment]

-- White Keys Container --[/comment][border=transparent;
position: absolute;
top: var(--w-key-container-t);
left: var(--w-key-container-l);
box-sizing: border-box;
width: var(--w-key-container-w);
padding: 0px;
z-index: 3;][comment]

-- Top Layer --[/comment][border=transparent;
position: relative;
top: var(--w-key-layer-t);
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- White Key 1 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 2 Top --[/comment][border=transparent;
position: relative;
top: var(--w-key-d);
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 3 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 4 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][/border][comment]
-- Top Layer End --[/comment][/border][comment]
-- White Keys Container End --[/comment][comment]

-- Tab Covers Container --[/comment][border=transparent;
position: absolute;
top: var(--tab-covers-t);
left: var(--tab-covers-l);
box-sizing: border-box;
width: var(--tab-covers-w);
padding: 0px;
z-index: 2;][comment]

-- Tab Covers Layer --[/comment][border=transparent;
position: relative;
top: 0px;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- Tab Cover 1 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
position: relative;
top: var(--tab-d);
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][/border][comment]
-- Tab Covers Layer End --[/comment][/border][comment]
-- Tab Covers Container End --[/comment][comment]

-- Inner Shadow --[/comment][border=transparent;
position: absolute;
top: var(--tab-covers-t);
left: calc(var(--tab-covers-l) + var(--shadow-d));
box-sizing: border-box;
width: calc(var(--tab-covers-w) - (2 * var(--shadow-d)));
height: var(--tab-h);
padding: 0px;
background: rgb(var(--shadow-inner-c));
perspective: 400px;
perspective-origin: 50% calc(0px - (var(--h) / 2) + var(--w-key-h));
z-index: 1;][comment]-- White Key 1 Shadow --[/comment][border=transparent;
position: relative;
top: calc(var(--shadow-t) - 28px);
left: calc(var(--shadow-l) - 20px);
box-sizing: border-box;
width: 45%;
height: var(--shadow-h);
padding: 0px;
border-radius: var(--w-key-b-r);
border: var(--w-key-b);
background: var(--shadow-g);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][/border][comment]

-- Background --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--h);
padding: var(--p-t) 0px var(--tabs-h) 0px;
background: var(--bg);
overflow: hidden;
z-index: 0;][comment]-- Hidden Scroll --[/comment][border=transparent;
position: relative;
top: 0px;
left: 0px;
box-sizing: border-box;
width: calc(100% + var(--d));
height: 100%;
padding: 0px;
-webkit-mask-image: linear-gradient(black 70%, transparent 98%);
overflow-y: auto;
pointer-events: auto;][comment]-- Content Container --[/comment][border=transparent;
position: relative;
top: 0px;
left: 0px;
box-sizing: border-box;
width: calc(100% - var(--d));
padding: 0px var(--p-l-r);][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: calc(var(--p-t) * 0.75);
background: var(--text-bg);
color: var(--text-c);
line-height: 1.5;]There's 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet a velit a tincidunt. Nullam felis dolor, fringilla non vulputate sed, suscipit non lacus. Morbi fermentum urna vitae aliquet rhoncus. Sed et hendrerit augue. Donec orci purus, faucibus at ex sit amet, volutpat lacinia diam. Donec ut semper lacus. Mauris sem felis, feugiat a massa ut, porttitor tempus felis. Morbi nisi lorem, efficitur eu mollis at, finibus a velit. Vivamus porta lorem vel tempor eleifend. Sed vehicula, mauris in dapibus maximus, sapien ipsum semper quam, eu sodales ipsum risus vel dui.

Nullam condimentum, tellus a aliquet dictum, nunc odio pulvinar orci, in pharetra nisl orci a lacus. Donec eu varius nisi. Suspendisse egestas nunc ac sem luctus fermentum. Donec risus orci, pellentesque vel lorem vel, consequat pellentesque nisi. Cras finibus, tellus sit amet tincidunt accumsan, elit nibh faucibus arcu, vulputate elementum nulla nulla in tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris luctus sem laoreet, dignissim lectus eget, fermentum urna. Donec id purus vel tellus bibendum dapibus id elementum lorem. Vivamus quam arcu, rutrum eget erat at, egestas pretium nulla. Sed lacus nunc, euismod vitae fringilla vitae, luctus eget diam. Cras aliquam libero eu hendrerit vehicula. Sed in magna lectus. Cras laoreet, eros at vehicula faucibus, elit justo tristique elit, id euismod leo justo sed velit. Ut fermentum tortor et dignissim mattis. Mauris ut laoreet leo. Curabitur faucibus eleifend neque, eu pulvinar magna.

Duis tristique justo ut odio tincidunt faucibus. Proin vel nunc finibus justo vulputate bibendum in porta neque. Suspendisse vulputate nunc ut blandit cursus. Ut massa velit, sollicitudin id aliquam ultrices, consequat a turpis. Donec ipsum ipsum, interdum eget mauris eget, rhoncus fringilla nunc. Ut vehicula egestas nibh, vitae dapibus leo tincidunt vitae. Suspendisse eleifend ligula libero, eu maximus mauris semper non.

Morbi egestas quam sed sem tincidunt, in dictum velit vestibulum. Praesent massa neque, consequat vel hendrerit quis, venenatis vitae sapien. Etiam facilisis tortor et posuere consequat. Cras ornare libero augue, vitae mattis ex volutpat eget. Duis ut augue vitae enim tempor hendrerit ut eget nunc. Integer porttitor vestibulum nunc nec auctor. Duis nulla ligula, gravida vitae ipsum sed, dictum dignissim velit.[/border][/border][/border][/border][/border][/tab]

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

-- Title Left-to-Right --[/comment][border=transparent;
position: absolute;
top: var(--title-t);
left: var(--title-l-r);
margin: auto;
width: 100%;
padding: 0px;
color: rgb(var(--b-key-c));
font-size: var(--title-f-s);
font-weight: bold;
letter-spacing: var(--title-l-s);
line-height: 1;
-webkit-text-stroke: 1px var(--title-s-c);
z-index: 1;]IANISTS[/border][comment]

-- Title Top-to-Bottom --[/comment][border=transparent;
width: var(--title-w);
position: absolute;
top: var(--title-t);
left: var(--title-l);
margin: auto;
max-width: calc(var(--w) - 0px);
padding: 0px;
color: rgb(var(--b-key-c));
font-size: var(--title-f-s);
font-weight: bold;
line-height: 1;
text-align: center;
-webkit-text-stroke: 1px var(--title-s-c);
z-index: 1;]PIANISTS[/border][comment]

-- Black Keys Top Container --[/comment][border=transparent;
position: absolute;
top: var(--b-key-container-t);
left: var(--b-key-container-l);
box-sizing: border-box;
width: var(--b-key-container-w);
padding: 0px;
z-index: 6;][comment]

-- Top Layer --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--b-key-gap);][comment]-- Black Key 1 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- Black Key 2 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- Black Key 3 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][/border][comment]
-- Top Layer End --[/comment][/border][comment]
-- Black Keys Top Container End --[/comment][comment]

-- Black Keys Base Container --[/comment][border=transparent;
position: absolute;
top: var(--b-bases-t);
left: var(--b-bases-l);
box-sizing: border-box;
width: var(--b-bases-w);
padding: 0px;
z-index: 5;][comment]

-- Base Layer --[/comment][border=transparent;
position: relative;
top: 0px;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--b-bases-gap);][comment]--Black Key 1 Base --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][comment]-- Black Key 2 Base --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][comment]-- Black Key 3 Base --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][/border][comment]
-- Base Layer End --[/comment][/border][comment]
-- Black Keys Base Container End --[/comment][comment]

-- Black Keys Side Container --[/comment][border=transparent;
position: absolute;
top: var(--b-side-container-t);
left: var(--b-side-container-l);
box-sizing: border-box;
width: var(--b-side-container-w);
padding: 0px;
z-index: 4;][comment]

-- Layer --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--b-side-gap);][comment]-- Black Key 1 Side --[/comment][border=transparent;
position: relative;
left: var(--b-side-l);
flex: 1 0;
box-sizing: border-box;
height: var(--b-side-h);
padding: 0px;
border-radius: calc(var(--key-b-r) + 5px);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(to left, transparent 10%, black 80%);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][comment]-- Black Key 2 Side --[/comment][border=transparent;
position: relative;
left: calc(0px - var(--b-side-l));
flex: 1 0;
box-sizing: border-box;
height: var(--b-side-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(to left, transparent 10%, black 80%);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][/border][comment]
-- Layer End --[/comment][/border][comment]
-- Black Keys Side Container End --[/comment][comment]

-- White Keys Container --[/comment][border=transparent;
position: absolute;
top: var(--w-key-container-t);
left: var(--w-key-container-l);
box-sizing: border-box;
width: var(--w-key-container-w);
padding: 0px;
z-index: 3;][comment]

-- Top Layer --[/comment][border=transparent;
position: relative;
top: var(--w-key-layer-t);
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- White Key 1 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 2 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 3 Top --[/comment][border=transparent;
position: relative;
top: var(--w-key-d);
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 4 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][/border][comment]
-- Top Layer End --[/comment][/border][comment]
-- White Keys Container End --[/comment][comment]

-- Tab Covers Container --[/comment][border=transparent;
position: absolute;
top: var(--tab-covers-t);
left: var(--tab-covers-l);
box-sizing: border-box;
width: var(--tab-covers-w);
padding: 0px;
z-index: 2;][comment]

-- Tab Covers Layer --[/comment][border=transparent;
position: relative;
top: 0px;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- Tab Cover 1 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
position: relative;
top: var(--tab-d);
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][/border][comment]
-- Tab Covers Layer End --[/comment][/border][comment]
-- Tab Covers Container End --[/comment][comment]

-- Inner Shadow --[/comment][border=transparent;
position: absolute;
top: var(--tab-covers-t);
left: calc(var(--tab-covers-l) + var(--shadow-d));
box-sizing: border-box;
width: calc(var(--tab-covers-w) - (2 * var(--shadow-d)));
height: var(--tab-h);
padding: 0px;
background: rgb(var(--shadow-inner-c));
perspective: 400px;
perspective-origin: 50% calc(0px - (var(--h) / 2) + var(--w-key-h));
z-index: 1;][comment]-- White Key 4 Shadow --[/comment][border=transparent;
position: relative;
top: calc(var(--shadow-t) - 28px);
left: calc(var(--shadow-l) + 88px);
box-sizing: border-box;
width: 45%;
height: var(--shadow-h);
padding: 0px;
border-radius: var(--w-key-b-r);
border: var(--w-key-b);
background: var(--shadow-g);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][/border][comment]

-- Background --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--h);
padding: var(--p-t) 0px var(--tabs-h) 0px;
background: var(--bg);
overflow: hidden;
z-index: 0;][comment]-- Hidden Scroll --[/comment][border=transparent;
position: relative;
top: 0px;
left: 0px;
box-sizing: border-box;
width: calc(100% + var(--d));
height: 100%;
padding: 0px;
-webkit-mask-image: linear-gradient(black 70%, transparent 98%);
overflow-y: auto;
pointer-events: auto;][comment]-- Content Container --[/comment][border=transparent;
position: relative;
top: 0px;
left: 0px;
box-sizing: border-box;
width: calc(100% - var(--d));
padding: 0px var(--p-l-r);][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: calc(var(--p-t) * 0.75);
background: var(--text-bg);
color: var(--text-c);
line-height: 1.5;]There's 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet a velit a tincidunt. Nullam felis dolor, fringilla non vulputate sed, suscipit non lacus. Morbi fermentum urna vitae aliquet rhoncus. Sed et hendrerit augue. Donec orci purus, faucibus at ex sit amet, volutpat lacinia diam. Donec ut semper lacus. Mauris sem felis, feugiat a massa ut, porttitor tempus felis. Morbi nisi lorem, efficitur eu mollis at, finibus a velit. Vivamus porta lorem vel tempor eleifend. Sed vehicula, mauris in dapibus maximus, sapien ipsum semper quam, eu sodales ipsum risus vel dui.

Nullam condimentum, tellus a aliquet dictum, nunc odio pulvinar orci, in pharetra nisl orci a lacus. Donec eu varius nisi. Suspendisse egestas nunc ac sem luctus fermentum. Donec risus orci, pellentesque vel lorem vel, consequat pellentesque nisi. Cras finibus, tellus sit amet tincidunt accumsan, elit nibh faucibus arcu, vulputate elementum nulla nulla in tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris luctus sem laoreet, dignissim lectus eget, fermentum urna. Donec id purus vel tellus bibendum dapibus id elementum lorem. Vivamus quam arcu, rutrum eget erat at, egestas pretium nulla. Sed lacus nunc, euismod vitae fringilla vitae, luctus eget diam. Cras aliquam libero eu hendrerit vehicula. Sed in magna lectus. Cras laoreet, eros at vehicula faucibus, elit justo tristique elit, id euismod leo justo sed velit. Ut fermentum tortor et dignissim mattis. Mauris ut laoreet leo. Curabitur faucibus eleifend neque, eu pulvinar magna.

Duis tristique justo ut odio tincidunt faucibus. Proin vel nunc finibus justo vulputate bibendum in porta neque. Suspendisse vulputate nunc ut blandit cursus. Ut massa velit, sollicitudin id aliquam ultrices, consequat a turpis. Donec ipsum ipsum, interdum eget mauris eget, rhoncus fringilla nunc. Ut vehicula egestas nibh, vitae dapibus leo tincidunt vitae. Suspendisse eleifend ligula libero, eu maximus mauris semper non.

Morbi egestas quam sed sem tincidunt, in dictum velit vestibulum. Praesent massa neque, consequat vel hendrerit quis, venenatis vitae sapien. Etiam facilisis tortor et posuere consequat. Cras ornare libero augue, vitae mattis ex volutpat eget. Duis ut augue vitae enim tempor hendrerit ut eget nunc. Integer porttitor vestibulum nunc nec auctor. Duis nulla ligula, gravida vitae ipsum sed, dictum dignissim velit.[/border][/border][/border][/border][/border][/tab]

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

-- Title Left-to-Right --[/comment][border=transparent;
position: absolute;
top: var(--title-t);
left: var(--title-l-r);
margin: auto;
width: 100%;
padding: 0px;
color: rgb(var(--b-key-c));
font-size: var(--title-f-s);
font-weight: bold;
letter-spacing: var(--title-l-s);
line-height: 1;
-webkit-text-stroke: 1px var(--title-s-c);
z-index: 1;]ULES[/border][comment]

-- Title Top-to-Bottom --[/comment][border=transparent;
width: var(--title-w);
position: absolute;
top: var(--title-t);
left: var(--title-l);
margin: auto;
max-width: calc(var(--w) - 0px);
padding: 0px;
color: rgb(var(--b-key-c));
font-size: var(--title-f-s);
font-weight: bold;
line-height: 1;
text-align: center;
-webkit-text-stroke: 1px var(--title-s-c);
z-index: 1;]RULES[/border][comment]

-- Black Keys Top Container --[/comment][border=transparent;
position: absolute;
top: var(--b-key-container-t);
left: var(--b-key-container-l);
box-sizing: border-box;
width: var(--b-key-container-w);
padding: 0px;
z-index: 6;][comment]

-- Top Layer --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--b-key-gap);][comment]-- Black Key 1 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- Black Key 2 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- Black Key 3 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][/border][comment]
-- Top Layer End --[/comment][/border][comment]
-- Black Keys Top Container End --[/comment][comment]

-- Black Keys Base Container --[/comment][border=transparent;
position: absolute;
top: var(--b-bases-t);
left: var(--b-bases-l);
box-sizing: border-box;
width: var(--b-bases-w);
padding: 0px;
z-index: 5;][comment]

-- Base Layer --[/comment][border=transparent;
position: relative;
top: 0px;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--b-bases-gap);][comment]--Black Key 1 Base --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][comment]-- Black Key 2 Base --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][comment]-- Black Key 3 Base --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][/border][comment]
-- Base Layer End --[/comment][/border][comment]
-- Black Keys Base Container End --[/comment][comment]

-- Black Keys Side Container --[/comment][border=transparent;
position: absolute;
top: var(--b-side-container-t);
left: var(--b-side-container-l);
box-sizing: border-box;
width: var(--b-side-container-w);
padding: 0px;
z-index: 4;][comment]

-- Layer --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--b-side-gap);][comment]-- Black Key 1 Side --[/comment][border=transparent;
position: relative;
left: var(--b-side-l);
flex: 1 0;
box-sizing: border-box;
height: var(--b-side-h);
padding: 0px;
border-radius: calc(var(--key-b-r) + 5px);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(to left, transparent 10%, black 80%);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][comment]-- Black Key 2 Side --[/comment][border=transparent;
position: relative;
left: calc(0px - var(--b-side-l));
flex: 1 0;
box-sizing: border-box;
height: var(--b-side-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(to left, transparent 10%, black 80%);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][/border][comment]
-- Layer End --[/comment][/border][comment]
-- Black Keys Side Container End --[/comment][comment]

-- White Keys Container --[/comment][border=transparent;
position: absolute;
top: var(--w-key-container-t);
left: var(--w-key-container-l);
box-sizing: border-box;
width: var(--w-key-container-w);
padding: 0px;
z-index: 3;][comment]

-- Top Layer --[/comment][border=transparent;
position: relative;
top: var(--w-key-layer-t);
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- White Key 1 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 2 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 3 Top --[/comment][border=transparent;
position: relative;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);
z-index: 1;][/border][comment]-- White Key 4 Top --[/comment][border=transparent;
position: relative;
top: var(--w-key-d);
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][/border][comment]
-- Top Layer End --[/comment][/border][comment]
-- White Keys Container End --[/comment][comment]

-- Tab Covers Container --[/comment][border=transparent;
position: absolute;
top: var(--tab-covers-t);
left: var(--tab-covers-l);
box-sizing: border-box;
width: var(--tab-covers-w);
padding: 0px;
z-index: 2;][comment]

-- Tab Covers Layer --[/comment][border=transparent;
position: relative;
top: 0px;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- Tab Cover 1 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
position: relative;
top: var(--tab-d);
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][/border][comment]
-- Tab Covers Layer End --[/comment][/border][comment]
-- Tab Covers Container End --[/comment][comment]

-- Inner Shadow --[/comment][border=transparent;
position: absolute;
top: var(--tab-covers-t);
left: calc(var(--tab-covers-l) + var(--shadow-d));
box-sizing: border-box;
width: calc(var(--tab-covers-w) - (2 * var(--shadow-d)));
height: var(--tab-h);
padding: 0px;
background: rgb(var(--shadow-inner-c));
perspective: 400px;
perspective-origin: 50% calc(0px - (var(--h) / 2) + var(--w-key-h));
z-index: 1;][comment]-- White Key 1 Shadow --[/comment][border=transparent;
position: relative;
top: var(--shadow-t);
left: calc(var(--shadow-l) + 110px);
box-sizing: border-box;
width: 25%;
height: var(--shadow-h);
padding: 0px;
border-radius: var(--w-key-b-r);
border: var(--w-key-b);
background: rgb(var(--shadow-inner-c));
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][/border][comment]

-- Background --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--h);
padding: var(--p-t) 0px var(--tabs-h) 0px;
background: var(--bg);
overflow: hidden;
z-index: 0;][comment]-- Hidden Scroll --[/comment][border=transparent;
position: relative;
top: 0px;
left: 0px;
box-sizing: border-box;
width: calc(100% + var(--d));
height: 100%;
padding: 0px;
-webkit-mask-image: linear-gradient(black 70%, transparent 98%);
overflow-y: auto;
pointer-events: auto;][comment]-- Content Container --[/comment][border=transparent;
position: relative;
top: 0px;
left: 0px;
box-sizing: border-box;
width: calc(100% - var(--d));
padding: 0px var(--p-l-r);][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: calc(var(--p-t) * 0.75);
background: var(--text-bg);
color: var(--text-c);
line-height: 1.5;]There's 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet a velit a tincidunt. Nullam felis dolor, fringilla non vulputate sed, suscipit non lacus. Morbi fermentum urna vitae aliquet rhoncus. Sed et hendrerit augue. Donec orci purus, faucibus at ex sit amet, volutpat lacinia diam. Donec ut semper lacus. Mauris sem felis, feugiat a massa ut, porttitor tempus felis. Morbi nisi lorem, efficitur eu mollis at, finibus a velit. Vivamus porta lorem vel tempor eleifend. Sed vehicula, mauris in dapibus maximus, sapien ipsum semper quam, eu sodales ipsum risus vel dui.

Nullam condimentum, tellus a aliquet dictum, nunc odio pulvinar orci, in pharetra nisl orci a lacus. Donec eu varius nisi. Suspendisse egestas nunc ac sem luctus fermentum. Donec risus orci, pellentesque vel lorem vel, consequat pellentesque nisi. Cras finibus, tellus sit amet tincidunt accumsan, elit nibh faucibus arcu, vulputate elementum nulla nulla in tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris luctus sem laoreet, dignissim lectus eget, fermentum urna. Donec id purus vel tellus bibendum dapibus id elementum lorem. Vivamus quam arcu, rutrum eget erat at, egestas pretium nulla. Sed lacus nunc, euismod vitae fringilla vitae, luctus eget diam. Cras aliquam libero eu hendrerit vehicula. Sed in magna lectus. Cras laoreet, eros at vehicula faucibus, elit justo tristique elit, id euismod leo justo sed velit. Ut fermentum tortor et dignissim mattis. Mauris ut laoreet leo. Curabitur faucibus eleifend neque, eu pulvinar magna.

Duis tristique justo ut odio tincidunt faucibus. Proin vel nunc finibus justo vulputate bibendum in porta neque. Suspendisse vulputate nunc ut blandit cursus. Ut massa velit, sollicitudin id aliquam ultrices, consequat a turpis. Donec ipsum ipsum, interdum eget mauris eget, rhoncus fringilla nunc. Ut vehicula egestas nibh, vitae dapibus leo tincidunt vitae. Suspendisse eleifend ligula libero, eu maximus mauris semper non.

Morbi egestas quam sed sem tincidunt, in dictum velit vestibulum. Praesent massa neque, consequat vel hendrerit quis, venenatis vitae sapien. Etiam facilisis tortor et posuere consequat. Cras ornare libero augue, vitae mattis ex volutpat eget. Duis ut augue vitae enim tempor hendrerit ut eget nunc. Integer porttitor vestibulum nunc nec auctor. Duis nulla ligula, gravida vitae ipsum sed, dictum dignissim velit.[/border][/border][/border][/border][/border][/tab]

[/tabs][/border][/border][comment]

-- Note --[/comment][border=transparent;
margin: auto;
margin-top: -5px;
max-width: var(--w);
padding: 0px;
font-size: 0.8em;
opacity: 0.75;
line-height: 1.3;
text-align: right;]Click Front of White Keys & Scroll[/border][/border][/font]

• .
• .
• .
• .

• IANO KEYS

  PIANO
  
  KEYS

  There's 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet a velit a tincidunt. Nullam felis dolor, fringilla non vulputate sed, suscipit non lacus. Morbi fermentum urna vitae aliquet rhoncus. Sed et hendrerit augue. Donec orci purus, faucibus at ex sit amet, volutpat lacinia diam. Donec ut semper lacus. Mauris sem felis, feugiat a massa ut, porttitor tempus felis. Morbi nisi lorem, efficitur eu mollis at, finibus a velit. Vivamus porta lorem vel tempor eleifend. Sed vehicula, mauris in dapibus maximus, sapien ipsum semper quam, eu sodales ipsum risus vel dui.
  
  Nullam condimentum, tellus a aliquet dictum, nunc odio pulvinar orci, in pharetra nisl orci a lacus. Donec eu varius nisi. Suspendisse egestas nunc ac sem luctus fermentum. Donec risus orci, pellentesque vel lorem vel, consequat pellentesque nisi. Cras finibus, tellus sit amet tincidunt accumsan, elit nibh faucibus arcu, vulputate elementum nulla nulla in tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris luctus sem laoreet, dignissim lectus eget, fermentum urna. Donec id purus vel tellus bibendum dapibus id elementum lorem. Vivamus quam arcu, rutrum eget erat at, egestas pretium nulla. Sed lacus nunc, euismod vitae fringilla vitae, luctus eget diam. Cras aliquam libero eu hendrerit vehicula. Sed in magna lectus. Cras laoreet, eros at vehicula faucibus, elit justo tristique elit, id euismod leo justo sed velit. Ut fermentum tortor et dignissim mattis. Mauris ut laoreet leo. Curabitur faucibus eleifend neque, eu pulvinar magna.
  
  Duis tristique justo ut odio tincidunt faucibus. Proin vel nunc finibus justo vulputate bibendum in porta neque. Suspendisse vulputate nunc ut blandit cursus. Ut massa velit, sollicitudin id aliquam ultrices, consequat a turpis. Donec ipsum ipsum, interdum eget mauris eget, rhoncus fringilla nunc. Ut vehicula egestas nibh, vitae dapibus leo tincidunt vitae. Suspendisse eleifend ligula libero, eu maximus mauris semper non.
  
  Morbi egestas quam sed sem tincidunt, in dictum velit vestibulum. Praesent massa neque, consequat vel hendrerit quis, venenatis vitae sapien. Etiam facilisis tortor et posuere consequat. Cras ornare libero augue, vitae mattis ex volutpat eget. Duis ut augue vitae enim tempor hendrerit ut eget nunc. Integer porttitor vestibulum nunc nec auctor. Duis nulla ligula, gravida vitae ipsum sed, dictum dignissim velit.
• CORES

  SCORES

  There's 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet a velit a tincidunt. Nullam felis dolor, fringilla non vulputate sed, suscipit non lacus. Morbi fermentum urna vitae aliquet rhoncus. Sed et hendrerit augue. Donec orci purus, faucibus at ex sit amet, volutpat lacinia diam. Donec ut semper lacus. Mauris sem felis, feugiat a massa ut, porttitor tempus felis. Morbi nisi lorem, efficitur eu mollis at, finibus a velit. Vivamus porta lorem vel tempor eleifend. Sed vehicula, mauris in dapibus maximus, sapien ipsum semper quam, eu sodales ipsum risus vel dui.
  
  Nullam condimentum, tellus a aliquet dictum, nunc odio pulvinar orci, in pharetra nisl orci a lacus. Donec eu varius nisi. Suspendisse egestas nunc ac sem luctus fermentum. Donec risus orci, pellentesque vel lorem vel, consequat pellentesque nisi. Cras finibus, tellus sit amet tincidunt accumsan, elit nibh faucibus arcu, vulputate elementum nulla nulla in tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris luctus sem laoreet, dignissim lectus eget, fermentum urna. Donec id purus vel tellus bibendum dapibus id elementum lorem. Vivamus quam arcu, rutrum eget erat at, egestas pretium nulla. Sed lacus nunc, euismod vitae fringilla vitae, luctus eget diam. Cras aliquam libero eu hendrerit vehicula. Sed in magna lectus. Cras laoreet, eros at vehicula faucibus, elit justo tristique elit, id euismod leo justo sed velit. Ut fermentum tortor et dignissim mattis. Mauris ut laoreet leo. Curabitur faucibus eleifend neque, eu pulvinar magna.
  
  Duis tristique justo ut odio tincidunt faucibus. Proin vel nunc finibus justo vulputate bibendum in porta neque. Suspendisse vulputate nunc ut blandit cursus. Ut massa velit, sollicitudin id aliquam ultrices, consequat a turpis. Donec ipsum ipsum, interdum eget mauris eget, rhoncus fringilla nunc. Ut vehicula egestas nibh, vitae dapibus leo tincidunt vitae. Suspendisse eleifend ligula libero, eu maximus mauris semper non.
  
  Morbi egestas quam sed sem tincidunt, in dictum velit vestibulum. Praesent massa neque, consequat vel hendrerit quis, venenatis vitae sapien. Etiam facilisis tortor et posuere consequat. Cras ornare libero augue, vitae mattis ex volutpat eget. Duis ut augue vitae enim tempor hendrerit ut eget nunc. Integer porttitor vestibulum nunc nec auctor. Duis nulla ligula, gravida vitae ipsum sed, dictum dignissim velit.
• IANISTS

  PIANISTS

  There's 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet a velit a tincidunt. Nullam felis dolor, fringilla non vulputate sed, suscipit non lacus. Morbi fermentum urna vitae aliquet rhoncus. Sed et hendrerit augue. Donec orci purus, faucibus at ex sit amet, volutpat lacinia diam. Donec ut semper lacus. Mauris sem felis, feugiat a massa ut, porttitor tempus felis. Morbi nisi lorem, efficitur eu mollis at, finibus a velit. Vivamus porta lorem vel tempor eleifend. Sed vehicula, mauris in dapibus maximus, sapien ipsum semper quam, eu sodales ipsum risus vel dui.
  
  Nullam condimentum, tellus a aliquet dictum, nunc odio pulvinar orci, in pharetra nisl orci a lacus. Donec eu varius nisi. Suspendisse egestas nunc ac sem luctus fermentum. Donec risus orci, pellentesque vel lorem vel, consequat pellentesque nisi. Cras finibus, tellus sit amet tincidunt accumsan, elit nibh faucibus arcu, vulputate elementum nulla nulla in tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris luctus sem laoreet, dignissim lectus eget, fermentum urna. Donec id purus vel tellus bibendum dapibus id elementum lorem. Vivamus quam arcu, rutrum eget erat at, egestas pretium nulla. Sed lacus nunc, euismod vitae fringilla vitae, luctus eget diam. Cras aliquam libero eu hendrerit vehicula. Sed in magna lectus. Cras laoreet, eros at vehicula faucibus, elit justo tristique elit, id euismod leo justo sed velit. Ut fermentum tortor et dignissim mattis. Mauris ut laoreet leo. Curabitur faucibus eleifend neque, eu pulvinar magna.
  
  Duis tristique justo ut odio tincidunt faucibus. Proin vel nunc finibus justo vulputate bibendum in porta neque. Suspendisse vulputate nunc ut blandit cursus. Ut massa velit, sollicitudin id aliquam ultrices, consequat a turpis. Donec ipsum ipsum, interdum eget mauris eget, rhoncus fringilla nunc. Ut vehicula egestas nibh, vitae dapibus leo tincidunt vitae. Suspendisse eleifend ligula libero, eu maximus mauris semper non.
  
  Morbi egestas quam sed sem tincidunt, in dictum velit vestibulum. Praesent massa neque, consequat vel hendrerit quis, venenatis vitae sapien. Etiam facilisis tortor et posuere consequat. Cras ornare libero augue, vitae mattis ex volutpat eget. Duis ut augue vitae enim tempor hendrerit ut eget nunc. Integer porttitor vestibulum nunc nec auctor. Duis nulla ligula, gravida vitae ipsum sed, dictum dignissim velit.
• ULES

  RULES

  There's 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet a velit a tincidunt. Nullam felis dolor, fringilla non vulputate sed, suscipit non lacus. Morbi fermentum urna vitae aliquet rhoncus. Sed et hendrerit augue. Donec orci purus, faucibus at ex sit amet, volutpat lacinia diam. Donec ut semper lacus. Mauris sem felis, feugiat a massa ut, porttitor tempus felis. Morbi nisi lorem, efficitur eu mollis at, finibus a velit. Vivamus porta lorem vel tempor eleifend. Sed vehicula, mauris in dapibus maximus, sapien ipsum semper quam, eu sodales ipsum risus vel dui.
  
  Nullam condimentum, tellus a aliquet dictum, nunc odio pulvinar orci, in pharetra nisl orci a lacus. Donec eu varius nisi. Suspendisse egestas nunc ac sem luctus fermentum. Donec risus orci, pellentesque vel lorem vel, consequat pellentesque nisi. Cras finibus, tellus sit amet tincidunt accumsan, elit nibh faucibus arcu, vulputate elementum nulla nulla in tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris luctus sem laoreet, dignissim lectus eget, fermentum urna. Donec id purus vel tellus bibendum dapibus id elementum lorem. Vivamus quam arcu, rutrum eget erat at, egestas pretium nulla. Sed lacus nunc, euismod vitae fringilla vitae, luctus eget diam. Cras aliquam libero eu hendrerit vehicula. Sed in magna lectus. Cras laoreet, eros at vehicula faucibus, elit justo tristique elit, id euismod leo justo sed velit. Ut fermentum tortor et dignissim mattis. Mauris ut laoreet leo. Curabitur faucibus eleifend neque, eu pulvinar magna.
  
  Duis tristique justo ut odio tincidunt faucibus. Proin vel nunc finibus justo vulputate bibendum in porta neque. Suspendisse vulputate nunc ut blandit cursus. Ut massa velit, sollicitudin id aliquam ultrices, consequat a turpis. Donec ipsum ipsum, interdum eget mauris eget, rhoncus fringilla nunc. Ut vehicula egestas nibh, vitae dapibus leo tincidunt vitae. Suspendisse eleifend ligula libero, eu maximus mauris semper non.
  
  Morbi egestas quam sed sem tincidunt, in dictum velit vestibulum. Praesent massa neque, consequat vel hendrerit quis, venenatis vitae sapien. Etiam facilisis tortor et posuere consequat. Cras ornare libero augue, vitae mattis ex volutpat eget. Duis ut augue vitae enim tempor hendrerit ut eget nunc. Integer porttitor vestibulum nunc nec auctor. Duis nulla ligula, gravida vitae ipsum sed, dictum dignissim velit.

Click Front of White Keys & Scroll

Spoiler: Version 2

[font=Playfair Display][border=transparent;
padding: 0px;

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

/* Use RGB numbers only */
--b-key-c: 0, 0, 0; /* Black key colour */
--w-key-c: 255, 255, 255; /* White key colour */

--d: 20px;
--w: 600px;
--h: min(80vh, 550px);
--p-t: max(3.2vh, 20px);
--p-l-r: max(3.2vh, 20px);

/* Background, gradient and image URL combined */
--bg: linear-gradient(rgba(var(--w-key-c), 0.65) -10px, rgba(var(--b-key-c), 0.65), rgba(var(--b-key-c), 0.65)), url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F1.bp.blogspot.com%2F-2v8jl8oyRo8%2FU0mj0NcoU7I%2FAAAAAAAATiM%2FzyMCo5ncf78%2Fs1600%2Fcs_music_sheet_1919_dspng.png&f=1&nofb=1') repeat 50% 30px / 400px, linear-gradient(rgb(var(--w-key-c)), rgb(var(--b-key-c)), rgb(var(--b-key-c)));

--tabs-w: 268px;
--tabs-h: 30px;

--title-t: calc(0px - 34px);
--title-l: -2px;
--title-l-r: calc(30px + var(--title-l));
--title-w: 30px;
--title-f-s: 2.4em;
--title-l-s: 4px;
--title-s-c: rgba(220, 220, 220, 0.8);

--key-b-r: 3px;
--key-b: 1px solid rgba(var(--shadow-c), 0.8);
--key-rotate: rotateX(65deg);

--b-key-container-t: calc(100% - var(--w-key-h) + 6px);
--b-key-container-l: calc(50% - (var(--b-key-container-w) / 2));
--b-key-container-w: calc(var(--tabs-w) - 70px - 80px);
--b-key-gap: 20px;
--b-key-h: 100px;

--b-bases-t: calc(var(--b-key-container-t) + var(--b-base-h) + 46px);
--b-bases-l: calc(50% - (var(--b-bases-w) / 2));
--b-bases-w: calc(var(--b-key-container-w) + 16px);
--b-bases-gap: 24px;
--b-base-h: 26px;
--b-base-g: linear-gradient(rgb(var(--shadow-inner-c)), rgb(var(--b-key-c)), rgb(var(--b-key-c)));

--b-side-container-t: calc(var(--b-bases-t) - 18px);
--b-side-container-l: calc(50% - (var(--b-side-container-w) / 2));
--b-side-container-w: calc(var(--tabs-w) - 50px);
--b-side-gap: 0px;
--b-side-l: 20px;
--b-side-h: var(--b-base-h);

--w-key-container-t: calc(100% - var(--w-key-h));
--w-key-container-l: calc(50% - (var(--w-key-container-w) / 2));
--w-key-container-w: calc(var(--tabs-w) - 70px);
--w-key-layer-t: 8px;
--w-key-per: -90px; /* calc(0px - (var(--h) / 2) + var(--w-key-h)) */
--w-key-d: var(--tab-d);
--w-key-h: 160px;

--tab-covers-t: calc(100% - var(--tab-h));
--tab-covers-l: calc(50% - (var(--tab-covers-w) / 2));
--tab-covers-w: calc(var(--w-key-container-w) + 38px);
--tab-d: 14px;
--tab-h: 32px;
--tab-g: linear-gradient(rgb(var(--shadow-c)), rgb(var(--w-key-c)) 80%);

--shadow-c: 120, 120, 120;  /* Colour of shadow border of all keys, use RGB numbers */
--shadow-t: -5px;
--shadow-l: 26px;
--shadow-d: 8px;
--shadow-w: 25%;
--shadow-h: calc(var(--tab-h) + 10px);
--shadow-inner-c: 110, 110, 110;  /* Colour of shadow side of white keys, use RGB numbers */
--shadow-g: linear-gradient(to right, rgb(var(--shadow-inner-c)) 75%, rgba(0, 0, 0, 0));
--shadow-rotate: rotate3d(-0.12, 1, -0.15, 90deg);

--text-bg: linear-gradient(rgba(230, 230, 230, 0.95), rgba(220, 220, 220, 0.95)); /* Text box gradient */
--text-c: black; /* Text colour */][comment]

-- Overall --[/comment][border=transparent;
position: relative;
margin: auto;
margin-top: calc(0px - var(--title-t));
margin-bottom: var(--tab-d);
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-end;][comment]

-- Actual Tabs Container --[/comment][border=transparent;
box-sizing: border-box;
width: var(--tabs-w);
height: var(--tabs-h);
padding: 0px;
background: red;
overflow: hidden;][tabs]

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

-- Title Left-to-Right --[/comment][border=transparent;
position: absolute;
top: var(--title-t);
left: var(--title-l-r);
margin: auto;
width: 100%;
padding: 0px;
color: rgb(var(--b-key-c));
font-size: var(--title-f-s);
font-weight: bold;
letter-spacing: var(--title-l-s);
line-height: 1;
-webkit-text-stroke: 1px var(--title-s-c);
z-index: 1;]IANO KEYS[/border][comment]

-- Title Top-to-Bottom --[/comment][border=transparent;
width: var(--title-w);
position: absolute;
top: var(--title-t);
left: var(--title-l);
margin: auto;
max-width: calc(var(--w) - 0px);
padding: 0px;
color: rgb(var(--b-key-c));
font-size: var(--title-f-s);
font-weight: bold;
line-height: 1;
text-align: center;
-webkit-text-stroke: 1px var(--title-s-c);
z-index: 1;]PIANO

KEYS[/border][comment]

-- Black Keys Top Container --[/comment][border=transparent;
position: absolute;
top: var(--b-key-container-t);
left: var(--b-key-container-l);
box-sizing: border-box;
width: var(--b-key-container-w);
padding: 0px;
z-index: 6;][comment]

-- Top Layer --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- Black Key 1 Top --[/comment][border=transparent;
flex: 1 0;
margin: 0px var(--b-key-gap) 0px 0px;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- Black Key 2 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- Black Key 3 Top --[/comment][border=transparent;
flex: 1 0;
margin: 0px 0px 0px var(--b-key-gap);
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][/border][comment]
-- Top Layer End --[/comment][/border][comment]
-- Black Keys Top Container End --[/comment][comment]

-- Black Keys Base Container --[/comment][border=transparent;
position: absolute;
top: var(--b-bases-t);
left: var(--b-bases-l);
box-sizing: border-box;
width: var(--b-bases-w);
padding: 0px;
z-index: 5;][comment]

-- Base Layer --[/comment][border=transparent;
position: relative;
top: 0px;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]--Black Key 1 Base --[/comment][border=transparent;
flex: 1 0;
margin: 0px var(--b-bases-gap) 0px 0px;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][comment]-- Black Key 2 Base --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][comment]-- Black Key 3 Base --[/comment][border=transparent;
flex: 1 0;
margin: 0px 0px 0px var(--b-bases-gap);
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][/border][comment]
-- Base Layer End --[/comment][/border][comment]
-- Black Keys Base Container End --[/comment][comment]

-- Black Keys Side Container --[/comment][border=transparent;
position: absolute;
top: var(--b-side-container-t);
left: var(--b-side-container-l);
box-sizing: border-box;
width: var(--b-side-container-w);
padding: 0px;
z-index: 4;][comment]

-- Layer --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--b-side-gap);][comment]-- Black Key 1 Side --[/comment][border=transparent;
position: relative;
left: var(--b-side-l);
flex: 1 0;
box-sizing: border-box;
height: var(--b-side-h);
padding: 0px;
border-radius: calc(var(--key-b-r) + 5px);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(to left, transparent 10%, black 80%);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][comment]-- Black Key 2 Side --[/comment][border=transparent;
position: relative;
left: calc(0px - var(--b-side-l));
flex: 1 0;
box-sizing: border-box;
height: var(--b-side-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(to left, transparent 10%, black 80%);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][/border][comment]
-- Layer End --[/comment][/border][comment]
-- Black Keys Side Container End --[/comment][comment]

-- White Keys Container --[/comment][border=transparent;
position: absolute;
top: var(--w-key-container-t);
left: var(--w-key-container-l);
box-sizing: border-box;
width: var(--w-key-container-w);
padding: 0px;
z-index: 3;][comment]

-- Top Layer --[/comment][border=transparent;
position: relative;
top: var(--w-key-layer-t);
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- White Key 1 Top --[/comment][border=transparent;
position: relative;
top: var(--w-key-d);
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 2 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 3 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 4 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][/border][comment]
-- Top Layer End --[/comment][/border][comment]
-- White Keys Container End --[/comment][comment]

-- Tab Covers Container --[/comment][border=transparent;
position: absolute;
top: var(--tab-covers-t);
left: var(--tab-covers-l);
box-sizing: border-box;
width: var(--tab-covers-w);
padding: 0px;
z-index: 2;][comment]

-- Tab Covers Layer --[/comment][border=transparent;
position: relative;
top: 0px;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- Tab Cover 1 --[/comment][border=transparent;
position: relative;
top: var(--tab-d);
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][/border][comment]
-- Tab Covers Layer End --[/comment][/border][comment]
-- Tab Covers Container End --[/comment][comment]

-- Inner Shadow --[/comment][border=transparent;
position: absolute;
top: var(--tab-covers-t);
left: calc(var(--tab-covers-l) + var(--shadow-d));
box-sizing: border-box;
width: calc(var(--tab-covers-w) - (2 * var(--shadow-d)));
height: var(--tab-h);
padding: 0px;
background: rgb(var(--shadow-inner-c));
perspective: 400px;
perspective-origin: 50% calc(0px - (var(--h) / 2) + var(--w-key-h));
z-index: 1;][comment]-- White Key 1 Shadow --[/comment][border=transparent;
position: relative;
top: var(--shadow-t);
left: var(--shadow-l);
box-sizing: border-box;
width: var(--shadow-w);
height: var(--shadow-h);
padding: 0px;
border-radius: var(--w-key-b-r);
border: var(--w-key-b);
background: rgb(var(--shadow-inner-c));
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][/border][comment]

-- Background --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--h);
padding: var(--p-t) 0px var(--tabs-h) 0px;
background: var(--bg);
overflow: hidden;
z-index: 0;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + var(--d));
height: 100%;
padding: 0px;
-webkit-mask-image: linear-gradient(black 70%, transparent 98%);
overflow-y: auto;
pointer-events: auto;][comment]-- Content Container --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - var(--d));
padding: 0px var(--p-l-r);][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: calc(var(--p-t) * 0.75);
background: var(--text-bg);
color: var(--text-c);
line-height: 1.5;]There's 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet a velit a tincidunt. Nullam felis dolor, fringilla non vulputate sed, suscipit non lacus. Morbi fermentum urna vitae aliquet rhoncus. Sed et hendrerit augue. Donec orci purus, faucibus at ex sit amet, volutpat lacinia diam. Donec ut semper lacus. Mauris sem felis, feugiat a massa ut, porttitor tempus felis. Morbi nisi lorem, efficitur eu mollis at, finibus a velit. Vivamus porta lorem vel tempor eleifend. Sed vehicula, mauris in dapibus maximus, sapien ipsum semper quam, eu sodales ipsum risus vel dui.

Nullam condimentum, tellus a aliquet dictum, nunc odio pulvinar orci, in pharetra nisl orci a lacus. Donec eu varius nisi. Suspendisse egestas nunc ac sem luctus fermentum. Donec risus orci, pellentesque vel lorem vel, consequat pellentesque nisi. Cras finibus, tellus sit amet tincidunt accumsan, elit nibh faucibus arcu, vulputate elementum nulla nulla in tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris luctus sem laoreet, dignissim lectus eget, fermentum urna. Donec id purus vel tellus bibendum dapibus id elementum lorem. Vivamus quam arcu, rutrum eget erat at, egestas pretium nulla. Sed lacus nunc, euismod vitae fringilla vitae, luctus eget diam. Cras aliquam libero eu hendrerit vehicula. Sed in magna lectus. Cras laoreet, eros at vehicula faucibus, elit justo tristique elit, id euismod leo justo sed velit. Ut fermentum tortor et dignissim mattis. Mauris ut laoreet leo. Curabitur faucibus eleifend neque, eu pulvinar magna.

Duis tristique justo ut odio tincidunt faucibus. Proin vel nunc finibus justo vulputate bibendum in porta neque. Suspendisse vulputate nunc ut blandit cursus. Ut massa velit, sollicitudin id aliquam ultrices, consequat a turpis. Donec ipsum ipsum, interdum eget mauris eget, rhoncus fringilla nunc. Ut vehicula egestas nibh, vitae dapibus leo tincidunt vitae. Suspendisse eleifend ligula libero, eu maximus mauris semper non.

Morbi egestas quam sed sem tincidunt, in dictum velit vestibulum. Praesent massa neque, consequat vel hendrerit quis, venenatis vitae sapien. Etiam facilisis tortor et posuere consequat. Cras ornare libero augue, vitae mattis ex volutpat eget. Duis ut augue vitae enim tempor hendrerit ut eget nunc. Integer porttitor vestibulum nunc nec auctor. Duis nulla ligula, gravida vitae ipsum sed, dictum dignissim velit.[/border][/border][/border][/border][/border][/tab]

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

-- Title Left-to-Right --[/comment][border=transparent;
position: absolute;
top: var(--title-t);
left: var(--title-l-r);
margin: auto;
width: 100%;
padding: 0px;
color: rgb(var(--b-key-c));
font-size: var(--title-f-s);
font-weight: bold;
letter-spacing: var(--title-l-s);
line-height: 1;
-webkit-text-stroke: 1px var(--title-s-c);
z-index: 1;]CORES[/border][comment]

-- Title Top-to-Bottom --[/comment][border=transparent;
width: var(--title-w);
position: absolute;
top: var(--title-t);
left: var(--title-l);
margin: auto;
max-width: calc(var(--w) - 0px);
padding: 0px;
color: rgb(var(--b-key-c));
font-size: var(--title-f-s);
font-weight: bold;
line-height: 1;
text-align: center;
-webkit-text-stroke: 1px var(--title-s-c);
z-index: 1;]SCORES[/border][comment]

-- Black Keys Top Container --[/comment][border=transparent;
position: absolute;
top: var(--b-key-container-t);
left: var(--b-key-container-l);
box-sizing: border-box;
width: var(--b-key-container-w);
padding: 0px;
z-index: 6;][comment]

-- Top Layer --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- Black Key 1 Top --[/comment][border=transparent;
flex: 1 0;
margin: 0px var(--b-key-gap) 0px 0px;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- Black Key 2 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- Black Key 3 Top --[/comment][border=transparent;
flex: 1 0;
margin: 0px 0px 0px var(--b-key-gap);
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][/border][comment]
-- Top Layer End --[/comment][/border][comment]
-- Black Keys Top Container End --[/comment][comment]

-- Black Keys Base Container --[/comment][border=transparent;
position: absolute;
top: var(--b-bases-t);
left: var(--b-bases-l);
box-sizing: border-box;
width: var(--b-bases-w);
padding: 0px;
z-index: 5;][comment]

-- Base Layer --[/comment][border=transparent;
position: relative;
top: 0px;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]--Black Key 1 Base --[/comment][border=transparent;
flex: 1 0;
margin: 0px var(--b-bases-gap) 0px 0px;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][comment]-- Black Key 2 Base --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][comment]-- Black Key 3 Base --[/comment][border=transparent;
flex: 1 0;
margin: 0px 0px 0px var(--b-bases-gap);
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][/border][comment]
-- Base Layer End --[/comment][/border][comment]
-- Black Keys Base Container End --[/comment][comment]

-- Black Keys Side Container --[/comment][border=transparent;
position: absolute;
top: var(--b-side-container-t);
left: var(--b-side-container-l);
box-sizing: border-box;
width: var(--b-side-container-w);
padding: 0px;
z-index: 4;][comment]

-- Layer --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- Black Key 1 Side --[/comment][border=transparent;
position: relative;
left: var(--b-side-l);
flex: 1 0;
box-sizing: border-box;
height: var(--b-side-h);
padding: 0px;
border-radius: calc(var(--key-b-r) + 5px);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(to left, transparent 10%, black 80%);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][comment]-- Black Key 2 Side --[/comment][border=transparent;
position: relative;
left: calc(0px - var(--b-side-l));
flex: 1 0;
box-sizing: border-box;
height: var(--b-side-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(to left, transparent 10%, black 80%);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][/border][comment]
-- Layer End --[/comment][/border][comment]
-- Black Keys Side Container End --[/comment][comment]

-- White Keys Container --[/comment][border=transparent;
position: absolute;
top: var(--w-key-container-t);
left: var(--w-key-container-l);
box-sizing: border-box;
width: var(--w-key-container-w);
padding: 0px;
z-index: 3;][comment]

-- Top Layer --[/comment][border=transparent;
position: relative;
top: var(--w-key-layer-t);
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- White Key 1 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 2 Top --[/comment][border=transparent;
position: relative;
top: var(--w-key-d);
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 3 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 4 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][/border][comment]
-- Top Layer End --[/comment][/border][comment]
-- White Keys Container End --[/comment][comment]

-- Tab Covers Container --[/comment][border=transparent;
position: absolute;
top: var(--tab-covers-t);
left: var(--tab-covers-l);
box-sizing: border-box;
width: var(--tab-covers-w);
padding: 0px;
z-index: 2;][comment]

-- Tab Covers Layer --[/comment][border=transparent;
position: relative;
top: 0px;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- Tab Cover 1 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
position: relative;
top: var(--tab-d);
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][/border][comment]
-- Tab Covers Layer End --[/comment][/border][comment]
-- Tab Covers Container End --[/comment][comment]

-- Inner Shadow --[/comment][border=transparent;
position: absolute;
top: var(--tab-covers-t);
left: calc(var(--tab-covers-l) + var(--shadow-d));
box-sizing: border-box;
width: calc(var(--tab-covers-w) - (2 * var(--shadow-d)));
height: var(--tab-h);
padding: 0px;
background: rgb(var(--shadow-inner-c));
perspective: 400px;
perspective-origin: 50% calc(0px - (var(--h) / 2) + var(--w-key-h));
z-index: 1;][comment]-- White Key 1 Shadow --[/comment][border=transparent;
position: relative;
top: calc(var(--shadow-t) - 28px);
left: calc(var(--shadow-l) - 20px);
box-sizing: border-box;
width: 45%;
height: var(--shadow-h);
padding: 0px;
border-radius: var(--w-key-b-r);
border: var(--w-key-b);
background: var(--shadow-g);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][/border][comment]

-- Background --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--h);
padding: var(--p-t) 0px var(--tabs-h) 0px;
background: var(--bg);
overflow: hidden;
z-index: 0;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + var(--d));
height: 100%;
padding: 0px;
-webkit-mask-image: linear-gradient(black 70%, transparent 98%);
overflow-y: auto;
pointer-events: auto;][comment]-- Content Container --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - var(--d));
padding: 0px var(--p-l-r);][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: calc(var(--p-t) * 0.75);
background: var(--text-bg);
color: var(--text-c);
line-height: 1.5;]There's 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet a velit a tincidunt. Nullam felis dolor, fringilla non vulputate sed, suscipit non lacus. Morbi fermentum urna vitae aliquet rhoncus. Sed et hendrerit augue. Donec orci purus, faucibus at ex sit amet, volutpat lacinia diam. Donec ut semper lacus. Mauris sem felis, feugiat a massa ut, porttitor tempus felis. Morbi nisi lorem, efficitur eu mollis at, finibus a velit. Vivamus porta lorem vel tempor eleifend. Sed vehicula, mauris in dapibus maximus, sapien ipsum semper quam, eu sodales ipsum risus vel dui.

Nullam condimentum, tellus a aliquet dictum, nunc odio pulvinar orci, in pharetra nisl orci a lacus. Donec eu varius nisi. Suspendisse egestas nunc ac sem luctus fermentum. Donec risus orci, pellentesque vel lorem vel, consequat pellentesque nisi. Cras finibus, tellus sit amet tincidunt accumsan, elit nibh faucibus arcu, vulputate elementum nulla nulla in tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris luctus sem laoreet, dignissim lectus eget, fermentum urna. Donec id purus vel tellus bibendum dapibus id elementum lorem. Vivamus quam arcu, rutrum eget erat at, egestas pretium nulla. Sed lacus nunc, euismod vitae fringilla vitae, luctus eget diam. Cras aliquam libero eu hendrerit vehicula. Sed in magna lectus. Cras laoreet, eros at vehicula faucibus, elit justo tristique elit, id euismod leo justo sed velit. Ut fermentum tortor et dignissim mattis. Mauris ut laoreet leo. Curabitur faucibus eleifend neque, eu pulvinar magna.

Duis tristique justo ut odio tincidunt faucibus. Proin vel nunc finibus justo vulputate bibendum in porta neque. Suspendisse vulputate nunc ut blandit cursus. Ut massa velit, sollicitudin id aliquam ultrices, consequat a turpis. Donec ipsum ipsum, interdum eget mauris eget, rhoncus fringilla nunc. Ut vehicula egestas nibh, vitae dapibus leo tincidunt vitae. Suspendisse eleifend ligula libero, eu maximus mauris semper non.

Morbi egestas quam sed sem tincidunt, in dictum velit vestibulum. Praesent massa neque, consequat vel hendrerit quis, venenatis vitae sapien. Etiam facilisis tortor et posuere consequat. Cras ornare libero augue, vitae mattis ex volutpat eget. Duis ut augue vitae enim tempor hendrerit ut eget nunc. Integer porttitor vestibulum nunc nec auctor. Duis nulla ligula, gravida vitae ipsum sed, dictum dignissim velit.[/border][/border][/border][/border][/border][/tab]

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

-- Title Left-to-Right --[/comment][border=transparent;
position: absolute;
top: var(--title-t);
left: var(--title-l-r);
margin: auto;
width: 100%;
padding: 0px;
color: rgb(var(--b-key-c));
font-size: var(--title-f-s);
font-weight: bold;
letter-spacing: var(--title-l-s);
line-height: 1;
-webkit-text-stroke: 1px var(--title-s-c);
z-index: 1;]IANISTS[/border][comment]

-- Title Top-to-Bottom --[/comment][border=transparent;
width: var(--title-w);
position: absolute;
top: var(--title-t);
left: var(--title-l);
margin: auto;
max-width: calc(var(--w) - 0px);
padding: 0px;
color: rgb(var(--b-key-c));
font-size: var(--title-f-s);
font-weight: bold;
line-height: 1;
text-align: center;
-webkit-text-stroke: 1px var(--title-s-c);
z-index: 1;]PIANISTS[/border][comment]

-- Black Keys Top Container --[/comment][border=transparent;
position: absolute;
top: var(--b-key-container-t);
left: var(--b-key-container-l);
box-sizing: border-box;
width: var(--b-key-container-w);
padding: 0px;
z-index: 6;][comment]

-- Top Layer --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- Black Key 1 Top --[/comment][border=transparent;
flex: 1 0;
margin: 0px var(--b-key-gap) 0px 0px;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- Black Key 2 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- Black Key 3 Top --[/comment][border=transparent;
flex: 1 0;
margin: 0px 0px 0px var(--b-key-gap);
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][/border][comment]
-- Top Layer End --[/comment][/border][comment]
-- Black Keys Top Container End --[/comment][comment]

-- Black Keys Base Container --[/comment][border=transparent;
position: absolute;
top: var(--b-bases-t);
left: var(--b-bases-l);
box-sizing: border-box;
width: var(--b-bases-w);
padding: 0px;
z-index: 5;][comment]

-- Base Layer --[/comment][border=transparent;
position: relative;
top: 0px;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]--Black Key 1 Base --[/comment][border=transparent;
flex: 1 0;
margin: 0px var(--b-bases-gap) 0px 0px;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][comment]-- Black Key 2 Base --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][comment]-- Black Key 3 Base --[/comment][border=transparent;
flex: 1 0;
margin: 0px 0px 0px var(--b-bases-gap);
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][/border][comment]
-- Base Layer End --[/comment][/border][comment]
-- Black Keys Base Container End --[/comment][comment]

-- Black Keys Side Container --[/comment][border=transparent;
position: absolute;
top: var(--b-side-container-t);
left: var(--b-side-container-l);
box-sizing: border-box;
width: var(--b-side-container-w);
padding: 0px;
z-index: 4;][comment]

-- Layer --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- Black Key 1 Side --[/comment][border=transparent;
position: relative;
left: var(--b-side-l);
flex: 1 0;
box-sizing: border-box;
height: var(--b-side-h);
padding: 0px;
border-radius: calc(var(--key-b-r) + 5px);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(to left, transparent 10%, black 80%);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][comment]-- Black Key 2 Side --[/comment][border=transparent;
position: relative;
left: calc(0px - var(--b-side-l));
flex: 1 0;
box-sizing: border-box;
height: var(--b-side-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(to left, transparent 10%, black 80%);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][/border][comment]
-- Layer End --[/comment][/border][comment]
-- Black Keys Side Container End --[/comment][comment]

-- White Keys Container --[/comment][border=transparent;
position: absolute;
top: var(--w-key-container-t);
left: var(--w-key-container-l);
box-sizing: border-box;
width: var(--w-key-container-w);
padding: 0px;
z-index: 3;][comment]

-- Top Layer --[/comment][border=transparent;
position: relative;
top: var(--w-key-layer-t);
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- White Key 1 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 2 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 3 Top --[/comment][border=transparent;
position: relative;
top: var(--w-key-d);
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 4 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][/border][comment]
-- Top Layer End --[/comment][/border][comment]
-- White Keys Container End --[/comment][comment]

-- Tab Covers Container --[/comment][border=transparent;
position: absolute;
top: var(--tab-covers-t);
left: var(--tab-covers-l);
box-sizing: border-box;
width: var(--tab-covers-w);
padding: 0px;
z-index: 2;][comment]

-- Tab Covers Layer --[/comment][border=transparent;
position: relative;
top: 0px;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- Tab Cover 1 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
position: relative;
top: var(--tab-d);
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][/border][comment]
-- Tab Covers Layer End --[/comment][/border][comment]
-- Tab Covers Container End --[/comment][comment]

-- Inner Shadow --[/comment][border=transparent;
position: absolute;
top: var(--tab-covers-t);
left: calc(var(--tab-covers-l) + var(--shadow-d));
box-sizing: border-box;
width: calc(var(--tab-covers-w) - (2 * var(--shadow-d)));
height: var(--tab-h);
padding: 0px;
background: rgb(var(--shadow-inner-c));
perspective: 400px;
perspective-origin: 50% calc(0px - (var(--h) / 2) + var(--w-key-h));
z-index: 1;][comment]-- White Key 4 Shadow --[/comment][border=transparent;
position: relative;
top: calc(var(--shadow-t) - 28px);
left: calc(var(--shadow-l) + 88px);
box-sizing: border-box;
width: 45%;
height: var(--shadow-h);
padding: 0px;
border-radius: var(--w-key-b-r);
border: var(--w-key-b);
background: var(--shadow-g);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][/border][comment]

-- Background --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--h);
padding: var(--p-t) 0px var(--tabs-h) 0px;
background: var(--bg);
overflow: hidden;
z-index: 0;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + var(--d));
height: 100%;
padding: 0px;
-webkit-mask-image: linear-gradient(black 70%, transparent 98%);
overflow-y: auto;
pointer-events: auto;][comment]-- Content Container --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - var(--d));
padding: 0px var(--p-l-r);][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: calc(var(--p-t) * 0.75);
background: var(--text-bg);
color: var(--text-c);
line-height: 1.5;]There's 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet a velit a tincidunt. Nullam felis dolor, fringilla non vulputate sed, suscipit non lacus. Morbi fermentum urna vitae aliquet rhoncus. Sed et hendrerit augue. Donec orci purus, faucibus at ex sit amet, volutpat lacinia diam. Donec ut semper lacus. Mauris sem felis, feugiat a massa ut, porttitor tempus felis. Morbi nisi lorem, efficitur eu mollis at, finibus a velit. Vivamus porta lorem vel tempor eleifend. Sed vehicula, mauris in dapibus maximus, sapien ipsum semper quam, eu sodales ipsum risus vel dui.

Nullam condimentum, tellus a aliquet dictum, nunc odio pulvinar orci, in pharetra nisl orci a lacus. Donec eu varius nisi. Suspendisse egestas nunc ac sem luctus fermentum. Donec risus orci, pellentesque vel lorem vel, consequat pellentesque nisi. Cras finibus, tellus sit amet tincidunt accumsan, elit nibh faucibus arcu, vulputate elementum nulla nulla in tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris luctus sem laoreet, dignissim lectus eget, fermentum urna. Donec id purus vel tellus bibendum dapibus id elementum lorem. Vivamus quam arcu, rutrum eget erat at, egestas pretium nulla. Sed lacus nunc, euismod vitae fringilla vitae, luctus eget diam. Cras aliquam libero eu hendrerit vehicula. Sed in magna lectus. Cras laoreet, eros at vehicula faucibus, elit justo tristique elit, id euismod leo justo sed velit. Ut fermentum tortor et dignissim mattis. Mauris ut laoreet leo. Curabitur faucibus eleifend neque, eu pulvinar magna.

Duis tristique justo ut odio tincidunt faucibus. Proin vel nunc finibus justo vulputate bibendum in porta neque. Suspendisse vulputate nunc ut blandit cursus. Ut massa velit, sollicitudin id aliquam ultrices, consequat a turpis. Donec ipsum ipsum, interdum eget mauris eget, rhoncus fringilla nunc. Ut vehicula egestas nibh, vitae dapibus leo tincidunt vitae. Suspendisse eleifend ligula libero, eu maximus mauris semper non.

Morbi egestas quam sed sem tincidunt, in dictum velit vestibulum. Praesent massa neque, consequat vel hendrerit quis, venenatis vitae sapien. Etiam facilisis tortor et posuere consequat. Cras ornare libero augue, vitae mattis ex volutpat eget. Duis ut augue vitae enim tempor hendrerit ut eget nunc. Integer porttitor vestibulum nunc nec auctor. Duis nulla ligula, gravida vitae ipsum sed, dictum dignissim velit.[/border][/border][/border][/border][/border][/tab]

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

-- Title Left-to-Right --[/comment][border=transparent;
position: absolute;
top: var(--title-t);
left: var(--title-l-r);
margin: auto;
width: 100%;
padding: 0px;
color: rgb(var(--b-key-c));
font-size: var(--title-f-s);
font-weight: bold;
letter-spacing: var(--title-l-s);
line-height: 1;
-webkit-text-stroke: 1px var(--title-s-c);
z-index: 1;]ULES[/border][comment]

-- Title Top-to-Bottom --[/comment][border=transparent;
width: var(--title-w);
position: absolute;
top: var(--title-t);
left: var(--title-l);
margin: auto;
max-width: calc(var(--w) - 0px);
padding: 0px;
color: rgb(var(--b-key-c));
font-size: var(--title-f-s);
font-weight: bold;
line-height: 1;
text-align: center;
-webkit-text-stroke: 1px var(--title-s-c);
z-index: 1;]RULES[/border][comment]

-- Black Keys Top Container --[/comment][border=transparent;
position: absolute;
top: var(--b-key-container-t);
left: var(--b-key-container-l);
box-sizing: border-box;
width: var(--b-key-container-w);
padding: 0px;
z-index: 6;][comment]

-- Top Layer --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- Black Key 1 Top --[/comment][border=transparent;
flex: 1 0;
margin: 0px var(--b-key-gap) 0px 0px;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- Black Key 2 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- Black Key 3 Top --[/comment][border=transparent;
flex: 1 0;
margin: 0px 0px 0px var(--b-key-gap);
box-sizing: border-box;
height: var(--b-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][/border][comment]
-- Top Layer End --[/comment][/border][comment]
-- Black Keys Top Container End --[/comment][comment]

-- Black Keys Base Container --[/comment][border=transparent;
position: absolute;
top: var(--b-bases-t);
left: var(--b-bases-l);
box-sizing: border-box;
width: var(--b-bases-w);
padding: 0px;
z-index: 5;][comment]

-- Base Layer --[/comment][border=transparent;
position: relative;
top: 0px;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]--Black Key 1 Base --[/comment][border=transparent;
flex: 1 0;
margin: 0px var(--b-bases-gap) 0px 0px;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][comment]-- Black Key 2 Base --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][comment]-- Black Key 3 Base --[/comment][border=transparent;
flex: 1 0;
margin: 0px 0px 0px var(--b-bases-gap);
box-sizing: border-box;
height: var(--b-base-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--b-base-g);][/border][/border][comment]
-- Base Layer End --[/comment][/border][comment]
-- Black Keys Base Container End --[/comment][comment]

-- Black Keys Side Container --[/comment][border=transparent;
position: absolute;
top: var(--b-side-container-t);
left: var(--b-side-container-l);
box-sizing: border-box;
width: var(--b-side-container-w);
padding: 0px;
z-index: 4;][comment]

-- Layer --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- Black Key 1 Side --[/comment][border=transparent;
position: relative;
left: var(--b-side-l);
flex: 1 0;
box-sizing: border-box;
height: var(--b-side-h);
padding: 0px;
border-radius: calc(var(--key-b-r) + 5px);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(to left, transparent 10%, black 80%);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][comment]-- Black Key 2 Side --[/comment][border=transparent;
position: relative;
left: calc(0px - var(--b-side-l));
flex: 1 0;
box-sizing: border-box;
height: var(--b-side-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--b-key-c));
-webkit-mask-image: linear-gradient(to left, transparent 10%, black 80%);
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][/border][comment]
-- Layer End --[/comment][/border][comment]
-- Black Keys Side Container End --[/comment][comment]

-- White Keys Container --[/comment][border=transparent;
position: absolute;
top: var(--w-key-container-t);
left: var(--w-key-container-l);
box-sizing: border-box;
width: var(--w-key-container-w);
padding: 0px;
z-index: 3;][comment]

-- Top Layer --[/comment][border=transparent;
position: relative;
top: var(--w-key-layer-t);
box-sizing: border-box;
width: 100%;
padding: 0px;
perspective: 400px;
perspective-origin: 50% var(--w-key-per);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- White Key 1 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 2 Top --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][comment]-- White Key 3 Top --[/comment][border=transparent;
position: relative;
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);
z-index: 1;][/border][comment]-- White Key 4 Top --[/comment][border=transparent;
position: relative;
top: var(--w-key-d);
flex: 1 0;
box-sizing: border-box;
height: var(--w-key-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: rgb(var(--w-key-c));
-webkit-mask-image: linear-gradient(transparent 25%, black 75%);
-webkit-transform: var(--key-rotate);
-moz-transform: var(--key-rotate);
-ms-transform: var(--key-rotate);
-o-transform: var(--key-rotate);
transform: var(--key-rotate);][/border][/border][comment]
-- Top Layer End --[/comment][/border][comment]
-- White Keys Container End --[/comment][comment]

-- Tab Covers Container --[/comment][border=transparent;
position: absolute;
top: var(--tab-covers-t);
left: var(--tab-covers-l);
box-sizing: border-box;
width: var(--tab-covers-w);
padding: 0px;
z-index: 2;][comment]

-- Tab Covers Layer --[/comment][border=transparent;
position: relative;
top: 0px;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]-- Tab Cover 1 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][comment]-- Tab Cover 4 --[/comment][border=transparent;
position: relative;
top: var(--tab-d);
flex: 1 0;
box-sizing: border-box;
height: var(--tab-h);
padding: 0px;
border-radius: var(--key-b-r);
border: var(--key-b);
background: var(--tab-g);][/border][/border][comment]
-- Tab Covers Layer End --[/comment][/border][comment]
-- Tab Covers Container End --[/comment][comment]

-- Inner Shadow --[/comment][border=transparent;
position: absolute;
top: var(--tab-covers-t);
left: calc(var(--tab-covers-l) + var(--shadow-d));
box-sizing: border-box;
width: calc(var(--tab-covers-w) - (2 * var(--shadow-d)));
height: var(--tab-h);
padding: 0px;
background: rgb(var(--shadow-inner-c));
perspective: 400px;
perspective-origin: 50% calc(0px - (var(--h) / 2) + var(--w-key-h));
z-index: 1;][comment]-- White Key 1 Shadow --[/comment][border=transparent;
position: relative;
top: var(--shadow-t);
left: calc(var(--shadow-l) + 113px);
box-sizing: border-box;
width: 25%;
height: var(--shadow-h);
padding: 0px;
border-radius: var(--w-key-b-r);
border: var(--w-key-b);
background: rgb(var(--shadow-inner-c));
-webkit-transform: var(--shadow-rotate);
-moz-transform: var(--shadow-rotate);
-ms-transform: var(--shadow-rotate);
-o-transform: var(--shadow-rotate);
transform: var(--shadow-rotate);][/border][/border][comment]

-- Background --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--h);
padding: var(--p-t) 0px var(--tabs-h) 0px;
background: var(--bg);
overflow: hidden;
z-index: 0;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + var(--d));
height: 100%;
padding: 0px;
-webkit-mask-image: linear-gradient(black 70%, transparent 98%);
overflow-y: auto;
pointer-events: auto;][comment]-- Content Container --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - var(--d));
padding: 0px var(--p-l-r);][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: calc(var(--p-t) * 0.75);
background: var(--text-bg);
color: var(--text-c);
line-height: 1.5;]There's 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet a velit a tincidunt. Nullam felis dolor, fringilla non vulputate sed, suscipit non lacus. Morbi fermentum urna vitae aliquet rhoncus. Sed et hendrerit augue. Donec orci purus, faucibus at ex sit amet, volutpat lacinia diam. Donec ut semper lacus. Mauris sem felis, feugiat a massa ut, porttitor tempus felis. Morbi nisi lorem, efficitur eu mollis at, finibus a velit. Vivamus porta lorem vel tempor eleifend. Sed vehicula, mauris in dapibus maximus, sapien ipsum semper quam, eu sodales ipsum risus vel dui.

Nullam condimentum, tellus a aliquet dictum, nunc odio pulvinar orci, in pharetra nisl orci a lacus. Donec eu varius nisi. Suspendisse egestas nunc ac sem luctus fermentum. Donec risus orci, pellentesque vel lorem vel, consequat pellentesque nisi. Cras finibus, tellus sit amet tincidunt accumsan, elit nibh faucibus arcu, vulputate elementum nulla nulla in tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris luctus sem laoreet, dignissim lectus eget, fermentum urna. Donec id purus vel tellus bibendum dapibus id elementum lorem. Vivamus quam arcu, rutrum eget erat at, egestas pretium nulla. Sed lacus nunc, euismod vitae fringilla vitae, luctus eget diam. Cras aliquam libero eu hendrerit vehicula. Sed in magna lectus. Cras laoreet, eros at vehicula faucibus, elit justo tristique elit, id euismod leo justo sed velit. Ut fermentum tortor et dignissim mattis. Mauris ut laoreet leo. Curabitur faucibus eleifend neque, eu pulvinar magna.

Duis tristique justo ut odio tincidunt faucibus. Proin vel nunc finibus justo vulputate bibendum in porta neque. Suspendisse vulputate nunc ut blandit cursus. Ut massa velit, sollicitudin id aliquam ultrices, consequat a turpis. Donec ipsum ipsum, interdum eget mauris eget, rhoncus fringilla nunc. Ut vehicula egestas nibh, vitae dapibus leo tincidunt vitae. Suspendisse eleifend ligula libero, eu maximus mauris semper non.

Morbi egestas quam sed sem tincidunt, in dictum velit vestibulum. Praesent massa neque, consequat vel hendrerit quis, venenatis vitae sapien. Etiam facilisis tortor et posuere consequat. Cras ornare libero augue, vitae mattis ex volutpat eget. Duis ut augue vitae enim tempor hendrerit ut eget nunc. Integer porttitor vestibulum nunc nec auctor. Duis nulla ligula, gravida vitae ipsum sed, dictum dignissim velit.[/border][/border][/border][/border][/border][/tab]

[/tabs][/border][/border][comment]

-- Note --[/comment][border=transparent;
margin: auto;
margin-top: -5px;
max-width: var(--w);
padding: 0px;
font-size: 0.8em;
opacity: 0.75;
line-height: 1.3;
text-align: right;]Click Front of White Keys & Scroll[/border][/border][/font]

 

[iambloom404]

OMYGOD YOUR CODES ARE PERFECTION!!
how are you so creative

 

[Ambiloquous]

OMYGOD YOUR CODES ARE PERFECTION!!
how are you so creative

Thank you! Sdfkjv magic of brain empty on everything else.

 

[Ambiloquous]

Install . D O V E

A Dove™ accordion. Very simple. Very eye-searing. Pink hurts.

Okay, I lied, maybe I do want to make a code for every commenter. Maybe. @. D O V E

Accordion

No Scroll

Install . D O V E

It's . D O V E-sama, peasant!

>>>

install
Installing . D O V E...
Install Complete.

>>>

run
Running . D O V E...

Spoiler: Code

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

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

--top: 160px;

/* Colours */
--dove-c: rgb(250, 80, 160); /* Dove body colour (and everything else that has that same colour) */
--accent-c: rgb(255, 160, 190); /* Accent colour */
--text-c: rgb(255, 240, 245); /* Body text colour (and everything else with that same colour) */

--head-w: 70px;
--beak-w: 30px;
--beak-l: 20px;
--beak-cp: polygon(100% 0, 0 50%, 100% 100%);
--eye-w: 4px;
--body-h: 108px;
--accent-w-1: 5px;
--accent-w-2: 10px;
--accent-w-3: 3px;
--shadow-d: 5px;

--accordion-w: 400px;
--button-w: 240px;
--button-h: 50px;
--screw-t: 3px;
--screw-l: 5px;
--screw-w: 8px;
--o-eye-w: 10px;

padding: 0px;][comment]-- Dove --[/comment][border=transparent;
position: relative;
margin: auto;
width: 240px;
padding: var(--top) 0px 0px var(--beak-l);][comment]-- Screw --[/comment][border=transparent;
position: absolute;
top: calc(var(--top) + (var(--head-w) / 2) + var(--screw-t));
left: calc((var(--beak-w) / 2) + 0px);
width: calc(var(--screw-w) * 0.7);
height: calc(var(--screw-w) * 0.7);
border-radius: 50%;
background: var(--accent-c);
padding: 0px;
z-index: 3;][/border][comment]

-- Head --[/comment][border=transparent;
position: relative;
top: 3px;
box-sizing: border-box;
width: var(--head-w);
height: var(--head-w);
padding: 0px;
border-radius: 50%;
background: var(--dove-c);
box-shadow: var(--shadow-d) var(--shadow-d) var(--accent-c);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Beak --[/comment][border=transparent;
flex: 0 0 var(--beak-w);
position: relative;
top: 6px;
left: calc(0px - var(--beak-l));
height: 28px;
padding: 0px;
background: var(--dove-c);
-webkit-clip-path: var(--beak-cp);
clip-path: var(--beak-cp);][/border][comment]-- Closed Eye --[/comment][border=transparent;
position: relative;
left: -8px;
width: 24px;
box-sizing: border-box;
height: 13px;
padding: 0px;
border-radius: 0px 0px 13px 13px;
border: var(--eye-w) solid var(--accent-c);
border-top: 0px;
padding: 0px;][/border][/border][comment]
-- Head End --[/comment][comment]

-- Body --[/comment][border=transparent;
position: relative;
margin: auto;
box-sizing: border-box;
width: 200px;
height: var(--body-h);
padding: 0px;
border-radius: 0px 0px 120px 120px;
background: var(--dove-c);
box-shadow: var(--shadow-d) var(--shadow-d) var(--accent-c);
z-index: 2;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-end;][comment]-- Feathers --[/comment][border=transparent;
flex: 0 0 var(--accent-w-2);
margin-top: 20px;
margin-bottom: 6px;
width: 45%;
padding: 0px;
background: var(--accent-c);][/border][border=transparent;
flex: 0 0 var(--accent-w-3);
margin-bottom: 12px;
width: 45%;
padding: 0px;
background: var(--accent-c);][/border][border=transparent;
flex: 0 0 var(--accent-w-1);
margin-bottom: 8px;
width: 45%;
padding: 0px;
background: var(--accent-c);][/border][/border][comment]
-- Body End --[/comment][/border][comment]
-- Dove End --[/comment][comment]

-- Accordion --[/comment][border=transparent;
visibility: hidden;
margin: auto;
box-sizing: border-box;
max-width: var(--accordion-w);
padding: 0px;][accordion=100%]
{slide=[comment]

-- Button --[/comment][border=transparent;
visibility: visible;
position: relative;
margin: auto;
box-sizing: border-box;
max-width: var(--button-w);
min-height: var(--button-h);
padding: 10px;
box-shadow: var(--shadow-d) var(--shadow-d) var(--accent-c);
background: var(--text-c);
color: var(--dove-c);
font-size: 1.6em;
font-weight: bold;
font-variant: normal;
text-align: center;][comment]

-- Screws --[/comment][comment]-- Screw 1 --[/comment][border=transparent;
position: absolute;
top: var(--screw-t);
left: var(--screw-l);
width: var(--screw-w);
height: var(--screw-w);
border-radius: 50%;
background: var(--accent-c);
padding: 0px;][/border][comment]-- Screw 2 --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--screw-t) - var(--screw-w));
left: var(--screw-l);
width: var(--screw-w);
height: var(--screw-w);
border-radius: 50%;
background: var(--accent-c);
padding: 0px;][/border][comment]-- Screw 3 --[/comment][border=transparent;
position: absolute;
top: var(--screw-t);
left: calc(100% - var(--screw-l) - var(--screw-w));
width: var(--screw-w);
height: var(--screw-w);
border-radius: 50%;
background: var(--accent-c);
padding: 0px;][/border][comment]-- Screw 4 --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--screw-t) - var(--screw-w));
left: calc(100% - var(--screw-l) - var(--screw-w));
width: var(--screw-w);
height: var(--screw-w);
border-radius: 50%;
background: var(--accent-c);
padding: 0px;][/border][comment]

-- Button Text --[/comment]Install . D O V E[/border]}[comment]

-- Speech Bubble --[/comment][border=transparent;
visibility: visible;
position: absolute;
top: -420px;
left: calc(50% - 100px);
box-sizing: border-box;
width: 200px;
height: 159px;
padding: 10px 30px;
background: var(--text-c);
-webkit-mask: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcliparts.co%2Fcliparts%2Frij%2Fry4%2Frijry4M7T.png&f=1&nofb=1) no-repeat 50% 50% / contain;
mask: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcliparts.co%2Fcliparts%2Frij%2Fry4%2Frijry4M7T.png&f=1&nofb=1) no-repeat 50% 50% / contain;
color: var(--dove-c);
z-index: 2;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;][border=transparent;
position: relative;
top: -16px;
padding: 0px;]It's . D O V E-[i]sama,[/i] peasant![/border][/border][comment]

-- Speech Bubble Shadow --[/comment][border=transparent;
visibility: visible;
position: absolute;
top: -417px;
left: calc(50% - 100px + 3px);
box-sizing: border-box;
width: 200px;
height: 159px;
padding: 10px 30px;
background: var(--accent-c);
-webkit-mask: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcliparts.co%2Fcliparts%2Frij%2Fry4%2Frijry4M7T.png&f=1&nofb=1) no-repeat 50% 50% / contain;
mask: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcliparts.co%2Fcliparts%2Frij%2Fry4%2Frijry4M7T.png&f=1&nofb=1) no-repeat 50% 50% / contain;
color: var(--dove-c);
z-index: 1;][/border][comment]

-- Open Eye --[/comment][border=transparent;
visibility: visible;
position: absolute;
top: calc(0px - var(--button-h) - var(--head-w) - var(--body-h) - 2px);
left: calc(50% - 77px - (var(--screw-w) / 2));
box-sizing: border-box;
width: var(--o-eye-w);
height: var(--o-eye-w);
border-radius: 50%;
border: 2px solid var(--accent-c);
background: var(--text-c);
padding: 0px;
z-index: 2;][/border][comment]

-- Accordion Body --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]

-- Text --[/comment][border=transparent;
visibility: visible;
box-sizing: border-box;
min-width: var(--button-w);
padding: 10px;
background: var(--accent-c);
box-shadow: var(--shadow-d) var(--shadow-d) var(--dove-c);][border=transparent;
display: inline;
color: var(--dove-c);
padding: 0px;]>>>[/border] [border=transparent;
display: inline;
color: var(--text-c);
padding: 0px;]install
Installing . D O V E...
Install Complete.[/border]
[border=transparent;
display: inline;
color: var(--dove-c);
padding: 0px;]>>>[/border] [border=transparent;
display: inline;
color: var(--text-c);
padding: 0px;]run
Running . D O V E...[/border][/border][/border]{/slide}
[/accordion][/border][/border][/font]

 

[weldherwings]

L

Install . D O V E

A Dove™ accordion. Very simple. Very eye-searing. Pink hurts.

Okay, I lied, maybe I do want to make a code for every commenter. Maybe. @. D O V E

Install . D O V E

It's . D O V E-sama, peasant!

>>>

install
Installing . D O V E...
Install Complete.

>>>

run
Running . D O V E...

Spoiler: Code

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

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

--top: 160px;

/* Colours */
--dove-c: rgb(250, 80, 160); /* Dove body colour (and everything else that has that same colour) */
--accent-c: rgb(255, 160, 190); /* Accent colour */
--text-c: rgb(255, 240, 245); /* Body text colour (and everything else with that same colour) */

--head-w: 70px;
--beak-w: 30px;
--beak-l: 20px;
--beak-cp: polygon(100% 0, 0 50%, 100% 100%);
--eye-w: 4px;
--body-h: 108px;
--accent-w-1: 5px;
--accent-w-2: 10px;
--accent-w-3: 3px;
--shadow-d: 5px;

--accordion-w: 400px;
--button-w: 240px;
--button-h: 50px;
--screw-t: 5px;
--screw-l: 5px;
--screw-w: 8px;
--o-eye-w: 10px;

padding: 0px;][comment]-- Dove --[/comment][border=transparent;
position: relative;
margin: auto;
width: 240px;
padding: var(--top) 0px 0px var(--beak-l);][comment]-- Screw --[/comment][border=transparent;
position: absolute;
top: calc(var(--top) + (var(--head-w) / 2) + var(--screw-t));
left: calc((var(--beak-w) / 2) + 4px);
width: calc(var(--screw-w) * 0.7);
height: calc(var(--screw-w) * 0.7);
border-radius: 50%;
background: var(--accent-c);
padding: 0px;
z-index: 3;][/border][comment]

-- Head --[/comment][border=transparent;
position: relative;
top: 3px;
box-sizing: border-box;
width: var(--head-w);
height: var(--head-w);
padding: 0px;
border-radius: 50%;
background: var(--dove-c);
box-shadow: var(--shadow-d) var(--shadow-d) var(--accent-c);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Beak --[/comment][border=transparent;
flex: 0 0 var(--beak-w);
position: relative;
top: 6px;
left: calc(0px - var(--beak-l));
height: 28px;
padding: 0px;
background: var(--dove-c);
-webkit-clip-path: var(--beak-cp);
clip-path: var(--beak-cp);][/border][comment]-- Closed Eye --[/comment][border=transparent;
position: relative;
left: -8px;
width: 24px;
box-sizing: border-box;
height: 13px;
padding: 0px;
border-radius: 0px 0px 13px 13px;
border: var(--eye-w) solid var(--accent-c);
border-top: 0px;
padding: 0px;][/border][/border][comment]
-- Head End --[/comment][comment]

-- Body --[/comment][border=transparent;
position: relative;
margin: auto;
box-sizing: border-box;
width: 200px;
height: var(--body-h);
padding: 0px;
border-radius: 0px 0px 120px 120px;
background: var(--dove-c);
box-shadow: var(--shadow-d) var(--shadow-d) var(--accent-c);
z-index: 2;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-end;][comment]-- Feathers --[/comment][border=transparent;
flex: 0 0 var(--accent-w-2);
margin-top: 20px;
margin-bottom: 6px;
width: 45%;
padding: 0px;
background: var(--accent-c);][/border][border=transparent;
flex: 0 0 var(--accent-w-3);
margin-bottom: 12px;
width: 45%;
padding: 0px;
background: var(--accent-c);][/border][border=transparent;
flex: 0 0 var(--accent-w-1);
margin-bottom: 8px;
width: 45%;
padding: 0px;
background: var(--accent-c);][/border][/border][comment]
-- Body End --[/comment][/border][comment]
-- Dove End --[/comment][comment]

-- Accordion --[/comment][border=transparent;
visibility: hidden;
margin: auto;
box-sizing: border-box;
max-width: var(--accordion-w);
padding: 0px;][accordion=100%]
{slide=[comment]

-- Button --[/comment][border=transparent;
visibility: visible;
position: relative;
margin: auto;
box-sizing: border-box;
max-width: var(--button-w);
min-height: var(--button-h);
padding: 10px;
box-shadow: var(--shadow-d) var(--shadow-d) var(--accent-c);
background: var(--text-c);
color: var(--dove-c);
font-size: 1.6em;
font-weight: bold;
font-variant: normal;
text-align: center;][comment]

-- Screws --[/comment][comment]-- Screw 1 --[/comment][border=transparent;
position: absolute;
top: var(--screw-t);
left: var(--screw-l);
width: var(--screw-w);
height: var(--screw-w);
border-radius: 50%;
background: var(--accent-c);
padding: 0px;][/border][comment]-- Screw 2 --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--screw-t) - var(--screw-w));
left: var(--screw-l);
width: var(--screw-w);
height: var(--screw-w);
border-radius: 50%;
background: var(--accent-c);
padding: 0px;][/border][comment]-- Screw 3 --[/comment][border=transparent;
position: absolute;
top: var(--screw-t);
left: calc(100% - var(--screw-l) - var(--screw-w));
width: var(--screw-w);
height: var(--screw-w);
border-radius: 50%;
background: var(--accent-c);
padding: 0px;][/border][comment]-- Screw 4 --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--screw-t) - var(--screw-w));
left: calc(100% - var(--screw-l) - var(--screw-w));
width: var(--screw-w);
height: var(--screw-w);
border-radius: 50%;
background: var(--accent-c);
padding: 0px;][/border][comment]

-- Button Text --[/comment]Install . D O V E[/border]}[comment]

-- Speech Bubble --[/comment][border=transparent;
visibility: visible;
position: absolute;
top: -420px;
left: calc(50% - 100px);
box-sizing: border-box;
width: 200px;
height: 159px;
padding: 10px 30px;
background: var(--text-c);
-webkit-mask: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcliparts.co%2Fcliparts%2Frij%2Fry4%2Frijry4M7T.png&f=1&nofb=1) no-repeat 50% 50% / contain;
mask: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcliparts.co%2Fcliparts%2Frij%2Fry4%2Frijry4M7T.png&f=1&nofb=1) no-repeat 50% 50% / contain;
color: var(--dove-c);
z-index: 2;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;][border=transparent;
position: relative;
top: -16px;
padding: 0px;]It's . D O V E-[i]sama,[/i] peasant![/border][/border][comment]

-- Speech Bubble Shadow --[/comment][border=transparent;
visibility: visible;
position: absolute;
top: -417px;
left: calc(50% - 100px + 3px);
box-sizing: border-box;
width: 200px;
height: 159px;
padding: 10px 30px;
background: var(--accent-c);
-webkit-mask: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcliparts.co%2Fcliparts%2Frij%2Fry4%2Frijry4M7T.png&f=1&nofb=1) no-repeat 50% 50% / contain;
mask: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcliparts.co%2Fcliparts%2Frij%2Fry4%2Frijry4M7T.png&f=1&nofb=1) no-repeat 50% 50% / contain;
color: var(--dove-c);
z-index: 1;][/border][comment]

-- Open Eye --[/comment][border=transparent;
visibility: visible;
position: absolute;
top: calc(0px - var(--button-h) - var(--head-w) - var(--body-h) - 5px);
left: calc(50% - 77px - (var(--screw-w) / 2));
box-sizing: border-box;
width: var(--o-eye-w);
height: var(--o-eye-w);
border-radius: 50%;
border: 2px solid var(--accent-c);
background: var(--text-c);
padding: 0px;
z-index: 2;][/border][comment]

-- Accordion Body --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]

-- Text --[/comment][border=transparent;
visibility: visible;
box-sizing: border-box;
min-width: var(--button-w);
padding: 10px;
background: var(--accent-c);
box-shadow: var(--shadow-d) var(--shadow-d) var(--dove-c);][border=transparent;
display: inline;
color: var(--dove-c);
padding: 0px;]>>>[/border] [border=transparent;
display: inline;
color: var(--text-c);
padding: 0px;]install
Installing . D O V E...
Install Complete.[/border]
[border=transparent;
display: inline;
color: var(--dove-c);
padding: 0px;]>>>[/border] [border=transparent;
display: inline;
color: var(--text-c);
padding: 0px;]run
Running . D O V E...[/border][/border][/border]{/slide}
[/accordion][/border][/border][/font]

GET THE FRICK FRACK OUTTA HERE OMG UR BRAIN.

 

[Ambiloquous]

GET THE FRICK FRACK OUTTA HERE OMG UR BRAIN.

YOU GET THE FRICK FRACK OUT OF HERE, SMH THIS IS MY RENTED LAND. p.s. no, ur brain big, have u seen ur codes.

 

[weldherwings]

YOU GET THE FRICK FRACK OUT OF HERE, SMH THIS IS MY RENTED LAND. p.s. no, ur brain big, have u seen ur codes.

ive seen my codes but holy hecc my brain does not like to mess with accordions so ur some sort of wizard to nail them wtf. Pls send me ur magic to make something magical like this wtffff

 

[Ambiloquous]

ive seen my codes but holy hecc my brain does not like to mess with accordions so ur some sort of wizard to nail them wtf. Pls send me ur magic to make something magical like this wtffff

I would if I have any to giveeeeeee. u know what. u give me ur brain, and I'll trade u mine. done deal, sold and sealed.

 

[.silver.]

Played around with your circle code! I’m planning on using that quote space for any text. Is there a way to make the quotes appear at the top of text instead of the bottom when there are multiple paragraphs? Or even one at the top left and one at the bottom right. I’ll tag you where I’ve used it!

 

[Ambiloquous]

Played around with your circle code! I’m planning on using that quote space for any text. Is there a way to make the quotes appear at the top of text instead of the bottom when there are multiple paragraphs? Or even one at the top left and one at the bottom right. I’ll tag you where I’ve used it!

Sorry, took me a sec to look back at my old (bad) code to figure out what I did.

Did you mean something like this for the quotes at the top of the text?

Spoiler: Your Code

Pluto

“

Character: Pluto

Human appearance: He looks like that photo, basically. He’s relatively tall—almost 6 feet. Painted black nails. Looks like he belongs in Hot Topic. Chronic Resting Bitch Face. Prefers to appear wearing black combat boots, ripped (yet comfortable) skinny jeans, and a black t-shirt with gray and white scribbled nonsense on the front. His demeanor gives off a very unfriendly vibe.

Animal appearance: Big scary black wolfdog with large, frightening white teeth. He is a bit bigger than the average wolfdog.

Personality: He doesn’t like you, just tolerates you. He’s really just a big grump and prefers to be on his own. Out of all the dwarf planets, he’s irritated that he was chosen to help with this human project. However, over time he has become a bit invested in it and does care about the trajectory of humanity, even though he rarely shows it. He works well in a team when required but is quick to snap at excessive nonsense. He will not help unless asked to and definitely has a lone wolf mentality, but enough poking and prodding will break him down over time. He has a soft spot for puppies of “dangerous” dog and dog-like breeds.

Abilities: Fire/lava. He can create his own flame, control existing fire or lava, and crumble small objects to ash. He cannot put out any heats source other than his own.

”

To do the top-left, bottom-right quote thing, off the top of my head I can only think of wrapping a flex container around the image (assuming you mean top-left as in above the image) and changing the image flex properties, copy-pasting the OG text container into that new flex container holding the image, and messing with some aligning properties to get the look you want. It's probably not something you'd want to try on your own, but if you wait a few hours until I'm free, I can try to do something.

 

[.silver.]

Yes, that’s perfect! What did you change to do that?

 

[Ambiloquous]

Yes, that’s perfect! What did you change to do that?

I messed with some flex properties and took out a lot of uh, unnecessary code. Code that I added when I didn't really know what I was doing with flexbox.

Here, I'll just yeet the code at you. It'd take too long and probs wouldn't be all that enlightening if I listed everything I changed.

[comment][font=timesnewroman].[/font][/comment][comment]-- Main font -->[/comment][font=Lato][border="transparent;

display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
margin: auto;
max-width: 750px;

--color-1: 153, 0, 0;
--color-2: 18, 5, 5;

--base-color: rgba(var(--color-1), 0.35);
--border-radius: 50%;
--border: 3px solid rgba(var(--color-2), 0.8);

--i-size: 200px;
--url: url('https://66.media.tumblr.com/d9dec64a93fbe3e0214d03a2823d7081/tumblr_p4h754s0H91r6drupo1_400.jpg');
--filter: grayscale(100%);

--displace-1: 15px;
--displace-2: 8px;

--margin: 25px;
--quote: 'timesnewroman', sans-serif;
--q-width: 60px;
--q-size: 60px;"]

[comment]-- Image --[/comment]
[border=transparent;
position: relative;
top: var(--displace-1);
height: calc(var(--i-size) + var(--displace-1) +  var(--displace-2) + 25px);
padding: 0px;][border=transparent;
position: relative;
width: var(--i-size);
height: var(--i-size);
border-radius: var(--border-radius);
padding: 0px;
background-image: var(--url);
background-size: cover;
background-position: top center;
filter: var(--filter);][/border][border=transparent;
position: absolute;
top: calc(0px - var(--displace-1));
left: -10px;
width: var(--i-size);
height: var(--i-size);
border-radius: var(--border-radius);
padding: 0px;
background-color: var(--base-color);][/border]
[border=transparent;
position: absolute;
top: var(--displace-2);
left: 8px;
width: var(--i-size);
height: var(--i-size);
border-radius: var(--border-radius);
padding: 0px;
border: var(--border);][/border][border=transparent;
padding: 0px;
font-size: 0.8em;
text-align: center;][B][FONT=times new roman][SIZE=5][COLOR=rgb(0, 0, 0)]Pluto[/COLOR][/SIZE][/FONT][/B][/border]
[/border]

[comment]-- Text --[/comment]
[border=transparent;
position: relative;
flex: 2 1 520px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: stretch;
margin-top: var(--margin);
margin-bottom: var(--margin);
margin-left: 30px;
height: auto;
padding: 0px;][border=transparent;
flex: 0 0 var(--q-width);
padding: 0px;
color: rgba(var(--color-1), 0.7);
font-family: var(--quote);
font-size: var(--q-size);
line-height: 100%;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;]“[/border][border=transparent;
display: inline-block;
flex: 1 1 calc(100% - (var(--q-width) * 2));
padding: 0px;][SIZE=3][B]Character:[/B] Pluto

[B]Human appearance:[/B] He looks like that photo, basically. He’s relatively tall—almost 6 feet. Painted black nails. Looks like he belongs in Hot Topic. Chronic Resting Bitch Face. Prefers to appear wearing black combat boots, ripped (yet comfortable) skinny jeans, and a black t-shirt with gray and white scribbled nonsense on the front. His demeanor gives off a very unfriendly vibe.

[B]Animal appearance: [/B]Big scary black wolfdog with large, frightening white teeth. He is a bit bigger than the average wolfdog.

[B]Personality: [/B]He doesn’t like you, just tolerates you. He’s really just a big grump and prefers to be on his own. Out of all the dwarf planets, he’s irritated that he was chosen to help with this human project. However, over time he has become a bit invested in it and does care about the trajectory of humanity, even though he rarely shows it. He works well in a team when required but is quick to snap at excessive nonsense. He will not help unless asked to and definitely has a lone wolf mentality, but enough poking and prodding will break him down over time. He has a soft spot for puppies of “dangerous” dog and dog-like breeds.

[B]Abilities:[/B] Fire/lava. He can create his own flame, control existing fire or lava, and crumble small objects to ash. He cannot put out any heats source other than his own.[/SIZE][/border][border=transparent;
flex: 0 0 var(--q-width);
padding: 0px;
color: rgba(var(--color-2), 0.7);
font-family: var(--quote);
font-size: var(--q-size);
line-height: 100%;
text-align: right;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;]”[/border][/border]
[/border][/font]

 

[.silver.]

Thanks so much, I really appreciate it!!