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

    Remember to credit artists when using work not your own.

Resource Ami's Lab 2.0 | Mobile Friendly Freebies

Cytus II
First is a character display based off of the character selection screen of Cytus II. Second is a D&D CS based off the interface after one chooses a character.


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

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

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

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

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


Image
Textbox
Hidden Scroll


Characters
Scroll


PAFF
Lv
7


NEKO
Lv
15


ROBO_Head
Lv
8


Ivy
Lv
13


Crystal PuNK
Lv
11


Bo Bo
Lv
14


Graff.J
Lv
69




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

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

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

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

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

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

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

--bar-h: 3px;

--lv-m: 2px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sleight of Hand
+0

Stealth
+0
INT
Arcana
+3

History
+0

Investigation
+3

Nature
+0

Religion
+0
WIS
Animal Handling
+0

Insight
+0

Medicine
+0

Perception
+0

Survival
+0
CHA
Deception
+3

Intimidation
+0

Performance
+3

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

WEAPONS
Weapon 1, Weapon 2

TOOLS
Tool 1, Tool 2

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

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

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



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

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

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

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

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

--basic-gap: 0 8px;

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

--f-s: 1em;

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

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

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

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

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

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

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

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

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

--pro-bon-s: 30px;

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

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

--skills-gap: 2px 20px;

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

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

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

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

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

--com-flex: 1 1 100px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-- Persona Container --[/comment][border=transparent;
flex: var(--com-atk-prof-flex);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--pers-gap);][comment]-- Personality Container --[/comment][border=transparent;
flex: 1 1;
width: 100%;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Personality Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Personality Traits[/border][comment]-- Personality Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--pers-field-l-h);]I like to read and memorize poetry. It keeps me calm and brings me fleeting moments of happiness.
I don’t talk about the thing that torments me. I’d rather not burden others with my curse.[/border][/border][comment]-- Ideals Container --[/comment][border=transparent;
flex: 1 1;
width: 100%;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Ideals Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Ideals[/border][comment]-- Ideals Field --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--pers-field-l-h);]I’ll stop the spirits that haunt me or die trying.[/border][/border][comment]-- Bonds Container --[/comment][border=transparent;
flex: 1 1;
width: 100%;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Bonds Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Bonds[/border][comment]-- Bonds Field --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--pers-field-l-h);]I keep my thoughts and discoveries in a journal. My journal is my legacy.[/border][/border][comment]-- Flaws Container --[/comment][border=transparent;
flex: 1 1;
width: 100%;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Flaws Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Flaws[/border][comment]-- Flaws Field --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--pers-field-l-h);]I have certain rituals that I must follow every day. I can never break them.[/border][/border][/border][comment]
-- Persona End --[/comment][/border][comment]
--Equip + Persona + Features Container End --[/comment][/border][comment]
--Equip + Persona + Features Page End --[/comment][/border][/border]
[/border][/border][/font]
 
Last edited:
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




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

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

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

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

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

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

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

--bar-h: 3px;

--lv-m: 2px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sleight of Hand
+0

Stealth
+0
INT
Arcana
+3

History
+0

Investigation
+3

Nature
+0

Religion
+0
WIS
Animal Handling
+0

Insight
+0

Medicine
+0

Perception
+0

Survival
+0
CHA
Deception
+3

Intimidation
+0

Performance
+3

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

WEAPONS
Weapon 1, Weapon 2

TOOLS
Tool 1, Tool 2

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

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

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



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

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

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

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

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

--basic-gap: 0 8px;

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

--f-s: 1em;

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

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

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

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

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

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

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

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

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

--pro-bon-s: 30px;

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

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

--skills-gap: 2px 20px;

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

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

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

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

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

--com-flex: 1 1 100px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-- Persona Container --[/comment][border=transparent;
flex: var(--com-atk-prof-flex);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--pers-gap);][comment]-- Personality Container --[/comment][border=transparent;
flex: 1 1;
width: 100%;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Personality Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Personality Traits[/border][comment]-- Personality Field --[/comment][border=transparent;
flex: 1 1;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--pers-field-l-h);]I like to read and memorize poetry. It keeps me calm and brings me fleeting moments of happiness.
I don’t talk about the thing that torments me. I’d rather not burden others with my curse.[/border][/border][comment]-- Ideals Container --[/comment][border=transparent;
flex: 1 1;
width: 100%;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Ideals Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Ideals[/border][comment]-- Ideals Field --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--pers-field-l-h);]I’ll stop the spirits that haunt me or die trying.[/border][/border][comment]-- Bonds Container --[/comment][border=transparent;
flex: 1 1;
width: 100%;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Bonds Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Bonds[/border][comment]-- Bonds Field --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--pers-field-l-h);]I keep my thoughts and discoveries in a journal. My journal is my legacy.[/border][/border][comment]-- Flaws Container --[/comment][border=transparent;
flex: 1 1;
width: 100%;
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--bar-gap);][comment]-- Flaws Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
color: rgb(var(--color-a));
font-size: var(--f-s);
line-height: 1;]Flaws[/border][comment]-- Flaws Field --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--field-p);
background: var(--field-bg);
color: var(--field-c);
font-size: var(--f-s);
line-height: var(--pers-field-l-h);]I have certain rituals that I must follow every day. I can never break them.[/border][/border][/border][comment]
-- Persona End --[/comment][/border][comment]
--Equip + Persona + Features Container End --[/comment][/border][comment]
--Equip + Persona + Features Page End --[/comment][/border][/border]
[/border][/border][/font]
This. Code. Is. So. COOL.
 
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).


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


Code:
[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
Background Artist: Tyler Edlin
Character Artist 1: Guweiz
Setting Artist 1: Diep Bui
Skills Source: Dungeon Defenders II
Setting Artist 2: Denis Istomin


Code:
[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]
 
Last edited:
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
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


Code:
[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
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


Code:
[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
 
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.
Click Front of White Keys & Scroll


Code:
[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.
Click Front of White Keys & Scroll


Code:
[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]
 
Last edited:
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




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]
 
Last edited:
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




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.
 
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
 
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.
 
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!
 
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?




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.
 
Last edited:
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.
Code:
[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]
 

Users who are viewing this thread

Back
Top