sunshineysoul
queen of bright-moon
here's the code for the cs !!
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-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://i.pinimg.com/originals/ec/34/67/ec3467fc6297343e455b9c6ce3f16070.jpg) 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 */
--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://media.istockphoto.com/vectors/default-profile-picture-avatar-photo-placeholder-vector-illustration-vector-id1214428300?k=20&m=1214428300&s=170667a&w=0&h=NPyJe8rXdOnLZDSSCdLvLWOtIeC9HjbWFIx8wg5nIks=) no-repeat 50% 0px / cover; /* Tab 1 Image URL */
--img-url-2: url(https://static1.cbrimages.com/wordpress/wp-content/uploads/2019/09/Republic-City-Facts-featured-image-e1608264611790.jpg) no-repeat 50% 0px / cover; /* Tab 2 Image URL */
--img-url-3-1: url(https://media.istockphoto.com/vectors/default-profile-picture-avatar-photo-placeholder-vector-illustration-vector-id1214428300?k=20&m=1214428300&s=170667a&w=0&h=NPyJe8rXdOnLZDSSCdLvLWOtIeC9HjbWFIx8wg5nIks=) no-repeat 50% -30px / cover; /* Tab 3 Image URL 1 */
--img-url-3-2: url(https://media.istockphoto.com/vectors/default-profile-picture-avatar-photo-placeholder-vector-illustration-vector-id1214428300?k=20&m=1214428300&s=170667a&w=0&h=NPyJe8rXdOnLZDSSCdLvLWOtIeC9HjbWFIx8wg5nIks=) no-repeat 62% 0px / 100%; /* Tab 3 Image URL 2 */
--img-url-3-3: url(https://media.istockphoto.com/vectors/default-profile-picture-avatar-photo-placeholder-vector-illustration-vector-id1214428300?k=20&m=1214428300&s=170667a&w=0&h=NPyJe8rXdOnLZDSSCdLvLWOtIeC9HjbWFIx8wg5nIks=) no-repeat 50% -15px / cover; /* Tab 3 Image URL 3 */
--img-url-3-4: url(https://media.istockphoto.com/vectors/default-profile-picture-avatar-photo-placeholder-vector-illustration-vector-id1214428300?k=20&m=1214428300&s=170667a&w=0&h=NPyJe8rXdOnLZDSSCdLvLWOtIeC9HjbWFIx8wg5nIks=) no-repeat 50% -35px / 100%; /* Tab 3 Image URL 4 */
--img-url-4: url(https://media.istockphoto.com/vectors/default-profile-picture-avatar-photo-placeholder-vector-illustration-vector-id1214428300?k=20&m=1214428300&s=170667a&w=0&h=NPyJe8rXdOnLZDSSCdLvLWOtIeC9HjbWFIx8wg5nIks=) 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: 135px; /* 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);
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;]Character Name[/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;]Character Title[/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;]NAME[/border][comment]-- Alias Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Answer[/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;]Answer[/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;]Answer[/border][comment]-- Race Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Sexuality[/border][comment]-- Race Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Answer[/border][comment]-- Height Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Nationality[/border][comment]-- Height Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Answer[/border][comment]-- Weight Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Hometown[/border][comment]-- Weight Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Answer[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Role[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Answer[/border][comment]-- Homeland Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Faceclaim[/border][comment]-- Homeland Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Answer[/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 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[/border][comment]-- Event 1 Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]talk about your character's family before they were born,, how them being born changed the family, and what it was like for your character growing up [/border][comment]
-- Event 2 Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Teenage Years[/border][comment]-- Event 2 Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]yea sure, still growing up, but now they're becoming teenagers, and convinced they know everything, right?[/border][comment]
-- Event 3 Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Currently[/border][comment]-- Event 3 Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]where are they right before the rp? before they answer the call to mentor the avatar?[/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;]Hometown[/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;]Relationship 1[/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;]Title[/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;]Age[/border][comment]-- Last Online Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Answer[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Relationship[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;](like is it good, bad, indifferent?)[/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;]SPILL THE TEA SIS[/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;]Relationship 2[/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;]Title[/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;]Age[/border][comment]-- Last Online Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Answer[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Relationship[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;](is it good, bad, indifferent?)[/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;]SPILL THE TEA SIS[/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;]Relationship 3[/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;]Title[/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;]Age[/border][comment]-- Last Online Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Answer[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Relationship[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;](is it good, bad, indifferent?)[/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;]SPILL THE TEA SIS[/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;]Relationship 4[/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;]Title[/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;]Age[/border][comment]-- Last Online Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]Answer[/border][comment]-- Affiliation Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Relationship[/border][comment]-- Affiliation Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;](is it good, bad, indifferent?)[/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;]SPILL THE TEA SIS[/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 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;]Personality[/border][comment]-- Display Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]give us an overview about your character! [/border][comment]
-- Controls Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Vices[/border][comment]-- Controls Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]what are some of the downsides to your character?[/border][comment]
-- Extras Label --[/comment][border=transparent;
flex: 0 0 var(--label-w);
padding: 0px;
font-weight: bold;
text-transform: uppercase;]Virtues[/border][comment]-- Extras Field --[/comment][border=transparent;
flex: 1 1 calc(100% - var(--label-w) - var(--text-gap));
padding: 0px;]what are some of the upsides to your character?[/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;]Character Name[/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);
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]