ManicMuse
I ax-o-lotl questions.
CHARACTER SHEETS
Character sheets will be able to be filled in throughout the RP as you remember and discover things. If you need any assistance with the coding, we are happy to help. Please send a message via OOC or DM to let us know.
PAFF
Scroll
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]
[/spoiler]
Shimata
Last edited:
