Resource Ami's Lab 2.0 | Mobile Friendly Freebies

[pepp]

I used one of

AIgorithm

A tabs code.

It's AI-gorithm with an I, get it? For the honourary commenter who I definitely didn't pay to advertise me. @AI10100

Something about this code looks really off to me, but heck if I'm going to change now. I do think it looks slightly better in dark mode though. Also, if you're wondering why the SoundCloud widget is naked, it's because I couldn't find the Nausicaä opening theme on Youtube and was too lazy to actually code it over it last minute.

Click Squares and Scroll

• .
• .
• .

• Initializing Basics...

  Model :: AI-10
  Serial Number :: 10100
  Manufacturer :: Cultists Co.
  Description :: Lab-built instead of mass manufactured, the AI-10 was made on a whim and only managed to be sold after copious reprogramming.
  Notable Features :: Humanized personality and general knowledge of biology
  
  Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.

  Rendering Appearance...

  Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.
  
  Mauris lacinia odio vitae leo hendrerit sodales. Fusce tristique placerat lorem ac volutpat. Vestibulum vitae felis fermentum mauris iaculis volutpat eget at tellus. Proin ullamcorper placerat purus eu varius. Pellentesque scelerisque turpis ac rutrum porta. Nullam bibendum felis non nunc congue, eu consectetur quam fringilla. Nullam porta mi ac rutrum vehicula. Morbi vestibulum, ligula quis hendrerit vehicula, neque quam consectetur quam, at ullamcorper justo ipsum eu ante.
• Parsing Personality...

  Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit. Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.
  
  Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.

  Assembling Biography...

  Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.
  
  Mauris lacinia odio vitae leo hendrerit sodales. Fusce tristique placerat lorem ac volutpat. Vestibulum vitae felis fermentum mauris iaculis volutpat eget at tellus. Proin ullamcorper placerat purus eu varius. Pellentesque scelerisque turpis ac rutrum porta. Nullam bibendum felis non nunc congue, eu consectetur quam fringilla. Nullam porta mi ac rutrum vehicula. Morbi vestibulum, ligula quis hendrerit vehicula, neque quam consectetur quam, at ullamcorper justo ipsum eu ante.

  Querying Relationships...

  Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.
  
  Mauris lacinia odio vitae leo hendrerit sodales. Fusce tristique placerat lorem ac volutpat. Vestibulum vitae felis fermentum mauris iaculis volutpat eget at tellus. Proin ullamcorper placerat purus eu varius. Pellentesque scelerisque turpis ac rutrum porta. Nullam bibendum felis non nunc congue, eu consectetur quam fringilla. Nullam porta mi ac rutrum vehicula. Morbi vestibulum, ligula quis hendrerit vehicula, neque quam consectetur quam, at ullamcorper justo ipsum eu ante.
• Consolidating Information...

  Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit. Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.
  
  Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.

  Browsing Music...

Art by 18bot

Spoiler: Code

[comment][font=Exo 2][font=Exo]:x[/font][/font][/comment][border=transparent;

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

position: relative;
margin: auto;
box-sizing: border-box;
max-width: 1000px;
min-height: var(--h);
padding: 0px;

/* Accent Colours */
--c-1: #6ef8cd;
--c-2: #36d6a4;
--c-3: #329282;
--c-t: #d4fdf0; /* Text colour */
--c-b: #225452; /* Base colour */

--h: clamp(380px, 640px, 90vh); /* Height, change the center value if you want to change the height on large screens */

--img-con-w: 280px;
--con-w: 340px;

--tabs-m: calc(34vh + 60px);

--tab-t: calc((var(--h) / 2) - 64px + (var(--tabs-m) / 2));
--tab-d: 30px;
--tab-l: 19px;
--tab-w: 27px;
--tab-f-s: 1.14em;

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

--b-d: 12px;
--b-w: 3px;
--b-m: 1.3;

--tab-b-t: calc(var(--tab-t) + (var(--tab-w) / 2));
--tab-b-l: calc(var(--tab-l) + (var(--tab-w) / 2));
--tab-b-w: calc(var(--tab-w) + var(--b-d));

--m-img-w: 224px;
--m-img-w: 224px;
--m-img: url('https://i.pinimg.com/564x/23/38/ed/2338ed13b8ae1bb371802c4759326f97.jpg') 50% 50% / 200%; /* Main image URL */

--con-p: 20px;

--line-h: 20px;
--connect-w: min(200px, 36%);

--icon-w: calc(var(--tab-w) + (var(--b-w) * 2));

/* If you change header icons, you may want to switch around padding variables and values to center it */
--icon-1-p: 1px 0px 0px 0px;
--icon-2-p: 1px 0px 0px 1px;
--icon-3-p: 2px 0px 0px 1px;

--header-p: 4px;
--header-f-s: 1.2em; /* Header font size, increase or decrease by increments of .1 */
--header-f: 'Exo 2', sans-serif; /* Header font, change font tag above if you change this */

--p: 10px;
--body-f-s: 0.98em; /* Body font size, increase or decrease by increments of .1 or .01 */
--body-f: 'Exo 2', sans-serif;  /* Body font, change font tag above if you change this */
--l-h: 1.55; /* Line height, increase or decrease by increments of .1 */][comment]-- Note --[/comment][border=transparent;
width: 100%;
padding: 0px;
color: var(--c-2);
font-size: 0.9em;
font-family: var(--body-f);
text-align: right;
opacity: 0.88;]Click Squares and Scroll[/border][comment]-- Main Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
min-height: var(--h);
padding: 0px;
display: flex;
flex-flow: row wrap;][comment]-- Image Container Placeholder --[/comment][border=transparent;
flex: 1 2 var(--img-con-w);
box-sizing: border-box;
height: var(--h);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;][comment]

-- Tab Covers --[/comment][comment]-- Tab Cover 1 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--c-1);
padding: var(--tab-1-p);
color: var(--c-b);
font-size: var(--tab-f-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
pointer-events: none;
z-index: 2;][fa]fas fa-power-off[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
position: absolute;
top: calc(var(--tab-t) + var(--tab-w) + var(--tab-d));
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--c-1);
padding: var(--tab-2-p);
color: var(--c-b);
font-size: var(--tab-f-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
pointer-events: none;
z-index: 2;][fa]fas fa-download[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
position: absolute;
top: calc(var(--tab-t) + (var(--tab-w) * 2) + (var(--tab-d) * 2));
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--c-1);
padding: var(--tab-1-p);
color: var(--c-b);
font-size: var(--tab-f-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
pointer-events: none;
z-index: 2;][fa]fas fa-archive[/fa][/border][comment]

-- Tabs Container --[/comment][border=transparent;
margin-top: var(--tabs-m);
box-sizing: border-box;
width: 44px;
height: 151px;
padding: 0px;
line-height: 4;
overflow: hidden;][tabs]

[tab=.][comment]-- Tab Body 1 --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
min-height: var(--h);
padding: 0px;
display: flex;
flex-flow: row wrap;
pointer-events: none;][comment]-- Image Container --[/comment][border=transparent;
position: relative;
flex: 1 2 var(--img-con-w);
box-sizing: border-box;
height: var(--h);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Tab 1 Selected --[/comment][comment]-- Borders --[/comment][border=transparent;
position: absolute;
top: calc(var(--tab-b-t) - ((var(--tab-b-w) + (var(--b-d) * 2)) / 2));
left: calc(var(--tab-b-l) - ((var(--tab-b-w) + (var(--b-d) * 2)) / 2));
box-sizing: border-box;
width: calc(var(--tab-b-w) + (var(--b-d) * 2));
height: calc(var(--tab-b-w) + (var(--b-d) * 2));
border: var(--b-w) solid var(--c-b);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
z-index: 2;][border=transparent;
box-sizing: border-box;
width: calc(var(--tab-b-w) + var(--b-d));
height: calc(var(--tab-b-w) + var(--b-d));
border: var(--b-w) solid var(--c-3);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=transparent;
box-sizing: border-box;
width: var(--tab-b-w);
height: var(--tab-b-w);
border: var(--b-w) solid var(--c-2);
padding: 0px;][/border][/border][/border][comment]-- Line --[/comment][border=transparent;
position: absolute;
top: calc(var(--tab-b-t) - (var(--b-w) / 2));
left: calc(var(--tab-b-w) + (var(--b-d) * 2));
box-sizing: border-box;
width: calc(100% - (var(--tab-b-w) + (var(--b-d) * 2)));
height: var(--b-w);
background: var(--c-b);
padding: 0px;
z-index: 1;][/border][comment]

-- Main Image --[/comment][comment]-- Borders --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3));
height: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3));
border: var(--b-w) solid var(--c-2);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
z-index: 1;][border=transparent;
box-sizing: border-box;
width: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 2));
height: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 2));
border: var(--b-w) solid var(--c-3);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=transparent;
box-sizing: border-box;
width: calc(var(--m-img-w) + (var(--b-d) * var(--b-m)));
height: calc(var(--m-img-w) + (var(--b-d) * var(--b-m)));
border: var(--b-w) solid var(--c-b);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- Image --[/comment][border=transparent;
box-sizing: border-box;
width: var(--m-img-w);
height: var(--m-img-w);
background: var(--m-img);
padding: 0px;][/border][/border][/border][/border][comment]
-- Main Image End --[/comment][comment]

-- Lines --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: calc(100% - (var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3)));
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
z-index: 0;][comment]-- Left Line --[/comment][border=transparent;
position: absolute;
top: calc(0px - ((var(--b-d) * var(--b-m)) / 2));
left: calc(50% - var(--b-d) + (var(--b-w) / 2));
box-sizing: border-box;
width: var(--b-w);
height: calc(100% + ((var(--b-d) * var(--b-m)) / 2));
background: var(--c-3);
padding: 0px;][/border][comment]-- Right Line --[/comment][border=transparent;
position: absolute;
top: calc(0px - ((var(--b-d) * var(--b-m)) / 2));
left: calc(50% + var(--b-d) - (var(--b-w) * 1.5));
box-sizing: border-box;
width: var(--b-w);
height: calc(100% + ((var(--b-d) * var(--b-m)) / 2));
background: var(--c-3);
padding: 0px;][/border][comment]-- Center Line --[/comment][border=transparent;
position: absolute;
top: 0px;
left: calc(50% - (var(--b-w) / 2));
box-sizing: border-box;
width: var(--b-w);
height: 100%;
background: var(--c-2);
padding: 0px;][/border][/border][/border][comment]

-- Content Container --[/comment][border=transparent;
flex: 5 1 var(--con-w);
box-sizing: border-box;
height: var(--h);
background: var(--c-b);
padding: 0px;
pointer-events: auto;
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Content --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - 30px);
padding: 0px var(--con-p);
color: var(--c-t);
font-size: var(--body-f-s);
font-family: var(--body-f);
line-height: var(--l-h);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Line --[/comment][border=transparent;
width: var(--b-w);
height: var(--line-h);
background: var(--c-2);
padding: 0px;][/border][comment]

-- Text Box --[/comment][border=transparent;
box-sizing: border-box;
border: var(--b-w) solid var(--c-3);
padding: 0px;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
border-bottom: var(--b-w) solid var(--c-3);
padding: calc(var(--b-d) - (var(--b-w) * 2));
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: var(--header-p);
color: var(--c-1);
font-size: var(--header-f-s);
font-family: var(--header-f);
font-weight: bold;
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Initializing Basics...[/border][comment]-- Icon --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--icon-w);
height: var(--icon-w);
border: var(--b-w) solid var(--c-2);
color: var(--c-1);
padding: var(--icon-1-p);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-code[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--p);]Model :: AI-10
Serial Number :: 10100
Manufacturer :: Cultists Co.
Description :: Lab-built instead of mass manufactured, the AI-10 was made on a whim and only managed to be sold after copious reprogramming.
Notable Features :: Humanized personality and general knowledge of biology

Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.[/border][/border][comment]

-- Connected Lines --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: calc(var(--line-h) * 2);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-end;][comment]-- Right Connector --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% - var(--connect-w) - (var(--b-w) / 2));
width: var(--connect-w);
height: var(--b-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Left Connector --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% + (var(--b-w) / 2));
width: var(--connect-w);
height: var(--b-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Right Line --[/comment][border=transparent;
margin-right: var(--connect-w);
width: var(--b-w);
height: 50%;
background: var(--c-2);
padding: 0px;][/border][comment]-- Center Line --[/comment][border=transparent;
width: var(--b-w);
height: 100%;
background: var(--c-2);
padding: 0px;][/border][comment]-- Left Line --[/comment][border=transparent;
margin-left: var(--connect-w);
width: var(--b-w);
height: 50%;
background: var(--c-2);
padding: 0px;][/border][/border][comment]

-- Text Box --[/comment][border=transparent;
box-sizing: border-box;
border: var(--b-w) solid var(--c-3);
padding: 0px;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
border-bottom: var(--b-w) solid var(--c-3);
padding: calc(var(--b-d) - (var(--b-w) * 2));
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: var(--header-p);
color: var(--c-1);
font-size: var(--header-f-s);
font-family: var(--header-f);
font-weight: bold;
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Rendering Appearance...[/border][comment]-- Icon --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--icon-w);
height: var(--icon-w);
border: var(--b-w) solid var(--c-2);
color: var(--c-1);
padding: var(--icon-1-p);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-fill-drip[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--p);]Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.

Mauris lacinia odio vitae leo hendrerit sodales. Fusce tristique placerat lorem ac volutpat. Vestibulum vitae felis fermentum mauris iaculis volutpat eget at tellus. Proin ullamcorper placerat purus eu varius. Pellentesque scelerisque turpis ac rutrum porta. Nullam bibendum felis non nunc congue, eu consectetur quam fringilla. Nullam porta mi ac rutrum vehicula. Morbi vestibulum, ligula quis hendrerit vehicula, neque quam consectetur quam, at ullamcorper justo ipsum eu ante.[/border][/border][comment]

-- Line --[/comment][border=transparent;
width: var(--b-w);
height: var(--line-h);
background: var(--c-2);
padding: 0px;][/border][/border][comment]-- Content End --[/comment][/border][comment]
-- Hidden Scroll End --[/comment][/border][/border][/tab]

[tab=.][comment]-- Tab Body 2 --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
min-height: var(--h);
padding: 0px;
display: flex;
flex-flow: row wrap;
pointer-events: none;][comment]-- Image Container --[/comment][border=transparent;
position: relative;
flex: 1 2 var(--img-con-w);
box-sizing: border-box;
height: var(--h);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Tab 2 Selected --[/comment][comment]-- Borders --[/comment][border=transparent;
position: absolute;
top: calc(var(--tab-b-t) + var(--tab-w) + var(--tab-d) - ((var(--tab-b-w) + (var(--b-d) * 2)) / 2));
left: calc(var(--tab-b-l) - ((var(--tab-b-w) + (var(--b-d) * 2)) / 2));
box-sizing: border-box;
width: calc(var(--tab-b-w) + (var(--b-d) * 2));
height: calc(var(--tab-b-w) + (var(--b-d) * 2));
border: var(--b-w) solid var(--c-b);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
z-index: 2;][border=transparent;
box-sizing: border-box;
width: calc(var(--tab-b-w) + var(--b-d));
height: calc(var(--tab-b-w) + var(--b-d));
border: var(--b-w) solid var(--c-3);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=transparent;
box-sizing: border-box;
width: var(--tab-b-w);
height: var(--tab-b-w);
border: var(--b-w) solid var(--c-2);
padding: 0px;][/border][/border][/border][comment]-- Line --[/comment][border=transparent;
position: absolute;
top: calc(var(--tab-b-t) + var(--tab-w) + var(--tab-d) - (var(--b-w) / 2));
left: calc(var(--tab-b-w) + (var(--b-d) * 2));
box-sizing: border-box;
width: calc(100% - (var(--tab-b-w) + (var(--b-d) * 2)));
height: var(--b-w);
background: var(--c-b);
padding: 0px;
z-index: 1;][/border][comment]

-- Main Image --[/comment][comment]-- Borders --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3));
height: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3));
border: var(--b-w) solid var(--c-2);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
z-index: 1;][border=transparent;
box-sizing: border-box;
width: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 2));
height: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 2));
border: var(--b-w) solid var(--c-3);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=transparent;
box-sizing: border-box;
width: calc(var(--m-img-w) + (var(--b-d) * var(--b-m)));
height: calc(var(--m-img-w) + (var(--b-d) * var(--b-m)));
border: var(--b-w) solid var(--c-b);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- Image --[/comment][border=transparent;
box-sizing: border-box;
width: var(--m-img-w);
height: var(--m-img-w);
background: var(--m-img);
padding: 0px;][/border][/border][/border][/border][comment]
-- Main Image End --[/comment][comment]

-- Lines --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: calc(100% - (var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3)));
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
z-index: 0;][comment]-- Left Line --[/comment][border=transparent;
position: absolute;
top: calc(0px - ((var(--b-d) * var(--b-m)) / 2));
left: calc(50% - var(--b-d) + (var(--b-w) / 2));
box-sizing: border-box;
width: var(--b-w);
height: calc(100% + ((var(--b-d) * var(--b-m)) / 2));
background: var(--c-3);
padding: 0px;][/border][comment]-- Right Line --[/comment][border=transparent;
position: absolute;
top: calc(0px - ((var(--b-d) * var(--b-m)) / 2));
left: calc(50% + var(--b-d) - (var(--b-w) * 1.5));
box-sizing: border-box;
width: var(--b-w);
height: calc(100% + ((var(--b-d) * var(--b-m)) / 2));
background: var(--c-3);
padding: 0px;][/border][comment]-- Center Line --[/comment][border=transparent;
position: absolute;
top: 0px;
left: calc(50% - (var(--b-w) / 2));
box-sizing: border-box;
width: var(--b-w);
height: 100%;
background: var(--c-2);
padding: 0px;][/border][/border][/border][comment]

-- Content Container --[/comment][border=transparent;
flex: 5 1 var(--con-w);
box-sizing: border-box;
height: var(--h);
background: var(--c-b);
padding: 0px;
pointer-events: auto;
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Content --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - 30px);
padding: 0px var(--con-p);
color: var(--c-t);
font-size: var(--body-f-s);
font-family: var(--body-f);
line-height: var(--l-h);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Line --[/comment][border=transparent;
width: var(--b-w);
height: var(--line-h);
background: var(--c-2);
padding: 0px;][/border][comment]

-- Text Box --[/comment][border=transparent;
box-sizing: border-box;
border: var(--b-w) solid var(--c-3);
padding: 0px;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
border-bottom: var(--b-w) solid var(--c-3);
padding: calc(var(--b-d) - (var(--b-w) * 2));
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: var(--header-p);
color: var(--c-1);
font-size: var(--header-f-s);
font-family: var(--header-f);
font-weight: bold;
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Parsing Personality...[/border][comment]-- Icon --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--icon-w);
height: var(--icon-w);
border: var(--b-w) solid var(--c-2);
color: var(--c-1);
padding: var(--icon-1-p);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-chart-network[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--p);]Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit. Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.

Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.[/border][/border][comment]

-- Connected Lines --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: calc(var(--line-h) * 2);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-end;][comment]-- Right Connector --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% - var(--connect-w) - (var(--b-w) / 2));
width: var(--connect-w);
height: var(--b-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Left Connector --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% + (var(--b-w) / 2));
width: var(--connect-w);
height: var(--b-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Right Line --[/comment][border=transparent;
margin-right: var(--connect-w);
width: var(--b-w);
height: 50%;
background: var(--c-2);
padding: 0px;][/border][comment]-- Center Line --[/comment][border=transparent;
width: var(--b-w);
height: 100%;
background: var(--c-2);
padding: 0px;][/border][comment]-- Left Line --[/comment][border=transparent;
margin-left: var(--connect-w);
width: var(--b-w);
height: 50%;
background: var(--c-2);
padding: 0px;][/border][/border][comment]

-- Text Box --[/comment][border=transparent;
box-sizing: border-box;
border: var(--b-w) solid var(--c-3);
padding: 0px;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
border-bottom: var(--b-w) solid var(--c-3);
padding: calc(var(--b-d) - (var(--b-w) * 2));
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: var(--header-p);
color: var(--c-1);
font-size: var(--header-f-s);
font-family: var(--header-f);
font-weight: bold;
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Assembling Biography...[/border][comment]-- Icon --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--icon-w);
height: var(--icon-w);
border: var(--b-w) solid var(--c-2);
color: var(--c-1);
padding: var(--icon-2-p);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-user-clock[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--p);]Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.

Mauris lacinia odio vitae leo hendrerit sodales. Fusce tristique placerat lorem ac volutpat. Vestibulum vitae felis fermentum mauris iaculis volutpat eget at tellus. Proin ullamcorper placerat purus eu varius. Pellentesque scelerisque turpis ac rutrum porta. Nullam bibendum felis non nunc congue, eu consectetur quam fringilla. Nullam porta mi ac rutrum vehicula. Morbi vestibulum, ligula quis hendrerit vehicula, neque quam consectetur quam, at ullamcorper justo ipsum eu ante.[/border][/border][comment]

-- Connected Lines --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: calc(var(--line-h) * 2);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-end;][comment]-- Right Connector --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% - var(--connect-w) - (var(--b-w) / 2));
width: var(--connect-w);
height: var(--b-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Left Connector --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% + (var(--b-w) / 2));
width: var(--connect-w);
height: var(--b-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Right Line --[/comment][border=transparent;
margin-right: var(--connect-w);
width: var(--b-w);
height: 50%;
background: var(--c-2);
padding: 0px;][/border][comment]-- Center Line --[/comment][border=transparent;
width: var(--b-w);
height: 100%;
background: var(--c-2);
padding: 0px;][/border][comment]-- Left Line --[/comment][border=transparent;
margin-left: var(--connect-w);
width: var(--b-w);
height: 50%;
background: var(--c-2);
padding: 0px;][/border][/border][comment]

-- Text Box --[/comment][border=transparent;
box-sizing: border-box;
border: var(--b-w) solid var(--c-3);
padding: 0px;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
border-bottom: var(--b-w) solid var(--c-3);
padding: calc(var(--b-d) - (var(--b-w) * 2));
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: var(--header-p);
color: var(--c-1);
font-size: var(--header-f-s);
font-family: var(--header-f);
font-weight: bold;
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Querying Relationships...[/border][comment]-- Icon --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--icon-w);
height: var(--icon-w);
border: var(--b-w) solid var(--c-2);
color: var(--c-1);
padding: var(--icon-1-p);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-user-friends[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--p);]Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.

Mauris lacinia odio vitae leo hendrerit sodales. Fusce tristique placerat lorem ac volutpat. Vestibulum vitae felis fermentum mauris iaculis volutpat eget at tellus. Proin ullamcorper placerat purus eu varius. Pellentesque scelerisque turpis ac rutrum porta. Nullam bibendum felis non nunc congue, eu consectetur quam fringilla. Nullam porta mi ac rutrum vehicula. Morbi vestibulum, ligula quis hendrerit vehicula, neque quam consectetur quam, at ullamcorper justo ipsum eu ante.[/border][/border][comment]

-- Line --[/comment][border=transparent;
width: var(--b-w);
height: var(--line-h);
background: var(--c-2);
padding: 0px;][/border][/border][comment]-- Content End --[/comment][/border][comment]
-- Hidden Scroll End --[/comment][/border][/border][/tab]

[tab=.][comment]-- Tab Body 3 --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
min-height: var(--h);
padding: 0px;
display: flex;
flex-flow: row wrap;
pointer-events: none;][comment]-- Image Container --[/comment][border=transparent;
position: relative;
flex: 1 2 var(--img-con-w);
box-sizing: border-box;
height: var(--h);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Tab 3 Selected --[/comment][comment]-- Borders --[/comment][border=transparent;
position: absolute;
top: calc(var(--tab-b-t) + ((var(--tab-w) + var(--tab-d)) * 2) - ((var(--tab-b-w) + (var(--b-d) * 2)) / 2));
left: calc(var(--tab-b-l) - ((var(--tab-b-w) + (var(--b-d) * 2)) / 2));
box-sizing: border-box;
width: calc(var(--tab-b-w) + (var(--b-d) * 2));
height: calc(var(--tab-b-w) + (var(--b-d) * 2));
border: var(--b-w) solid var(--c-b);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
z-index: 2;][border=transparent;
box-sizing: border-box;
width: calc(var(--tab-b-w) + var(--b-d));
height: calc(var(--tab-b-w) + var(--b-d));
border: var(--b-w) solid var(--c-3);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=transparent;
box-sizing: border-box;
width: var(--tab-b-w);
height: var(--tab-b-w);
border: var(--b-w) solid var(--c-2);
padding: 0px;][/border][/border][/border][comment]-- Line --[/comment][border=transparent;
position: absolute;
top: calc(var(--tab-b-t) + ((var(--tab-w) + var(--tab-d)) * 2) - (var(--b-w) / 2));
left: calc(var(--tab-b-w) + (var(--b-d) * 2));
box-sizing: border-box;
width: calc(100% - (var(--tab-b-w) + (var(--b-d) * 2)));
height: var(--b-w);
background: var(--c-b);
padding: 0px;
z-index: 1;][/border][comment]

-- Main Image --[/comment][comment]-- Borders --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3));
height: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3));
border: var(--b-w) solid var(--c-2);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
z-index: 1;][border=transparent;
box-sizing: border-box;
width: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 2));
height: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 2));
border: var(--b-w) solid var(--c-3);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=transparent;
box-sizing: border-box;
width: calc(var(--m-img-w) + (var(--b-d) * var(--b-m)));
height: calc(var(--m-img-w) + (var(--b-d) * var(--b-m)));
border: var(--b-w) solid var(--c-b);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- Image --[/comment][border=transparent;
box-sizing: border-box;
width: var(--m-img-w);
height: var(--m-img-w);
background: var(--m-img);
padding: 0px;][/border][/border][/border][/border][comment]
-- Main Image End --[/comment][comment]

-- Lines --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: calc(100% - (var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3)));
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
z-index: 0;][comment]-- Left Line --[/comment][border=transparent;
position: absolute;
top: calc(0px - ((var(--b-d) * var(--b-m)) / 2));
left: calc(50% - var(--b-d) + (var(--b-w) / 2));
box-sizing: border-box;
width: var(--b-w);
height: calc(100% + ((var(--b-d) * var(--b-m)) / 2));
background: var(--c-3);
padding: 0px;][/border][comment]-- Right Line --[/comment][border=transparent;
position: absolute;
top: calc(0px - ((var(--b-d) * var(--b-m)) / 2));
left: calc(50% + var(--b-d) - (var(--b-w) * 1.5));
box-sizing: border-box;
width: var(--b-w);
height: calc(100% + ((var(--b-d) * var(--b-m)) / 2));
background: var(--c-3);
padding: 0px;][/border][comment]-- Center Line --[/comment][border=transparent;
position: absolute;
top: 0px;
left: calc(50% - (var(--b-w) / 2));
box-sizing: border-box;
width: var(--b-w);
height: 100%;
background: var(--c-2);
padding: 0px;][/border][/border][/border][comment]

-- Content Container --[/comment][border=transparent;
flex: 5 1 var(--con-w);
box-sizing: border-box;
height: var(--h);
background: var(--c-b);
padding: 0px;
pointer-events: auto;
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Content --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - 30px);
padding: 0px var(--con-p);
color: var(--c-t);
font-size: var(--body-f-s);
font-family: var(--body-f);
line-height: var(--l-h);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Line --[/comment][border=transparent;
width: var(--b-w);
height: var(--line-h);
background: var(--c-2);
padding: 0px;][/border][comment]

-- Text Box --[/comment][border=transparent;
box-sizing: border-box;
border: var(--b-w) solid var(--c-3);
padding: 0px;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
border-bottom: var(--b-w) solid var(--c-3);
padding: calc(var(--b-d) - (var(--b-w) * 2));
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: var(--header-p);
color: var(--c-1);
font-size: var(--header-f-s);
font-family: var(--header-f);
font-weight: bold;
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Consolidating Information...[/border][comment]-- Icon --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--icon-w);
height: var(--icon-w);
border: var(--b-w) solid var(--c-2);
color: var(--c-1);
padding: var(--icon-1-p);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-alien-monster[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--p);]Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit. Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.

Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.[/border][/border][comment]

-- Connected Lines --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: calc(var(--line-h) * 2);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-end;][comment]-- Right Connector --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% - var(--connect-w) - (var(--b-w) / 2));
width: var(--connect-w);
height: var(--b-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Left Connector --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% + (var(--b-w) / 2));
width: var(--connect-w);
height: var(--b-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Right Line --[/comment][border=transparent;
margin-right: var(--connect-w);
width: var(--b-w);
height: 50%;
background: var(--c-2);
padding: 0px;][/border][comment]-- Center Line --[/comment][border=transparent;
width: var(--b-w);
height: 100%;
background: var(--c-2);
padding: 0px;][/border][comment]-- Left Line --[/comment][border=transparent;
margin-left: var(--connect-w);
width: var(--b-w);
height: 50%;
background: var(--c-2);
padding: 0px;][/border][/border][comment]

-- Text Box --[/comment][border=transparent;
box-sizing: border-box;
border: var(--b-w) solid var(--c-3);
padding: 0px;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
border-bottom: var(--b-w) solid var(--c-3);
padding: calc(var(--b-d) - (var(--b-w) * 2));
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: var(--header-p);
color: var(--c-1);
font-size: var(--header-f-s);
font-family: var(--header-f);
font-weight: bold;
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Browsing Music...[/border][comment]-- Icon --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--icon-w);
height: var(--icon-w);
border: var(--b-w) solid var(--c-2);
color: var(--c-1);
padding: var(--icon-3-p);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-headphones[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--p);][MEDIA=soundcloud]gaggag/opening-theme-from-nausicaa-of-the-valley-of-the-wind-studiohq#track_id=321273303[/MEDIA][/border][/border][comment]

-- Line --[/comment][border=transparent;
width: var(--b-w);
height: var(--line-h);
background: var(--c-2);
padding: 0px;][/border][/border][comment]-- Content End --[/comment][/border][comment]
-- Hidden Scroll End --[/comment][/border][/border][/tab]

[/tabs][/border][comment]
-- Tabs Container End --[/comment][/border][comment]
-- Content Container Placeholder --[/comment][border=transparent;
flex: 5 1 var(--con-w);
box-sizing: border-box;
height: var(--h);
padding: 0px;][/border][/border][comment]
-- Main Container End --[/comment][comment]-- Note --[/comment][border=transparent;
width: 100%;
padding: 0px;
color: var(--c-2);
font-size: 0.9em;
font-family: var(--body-f);
text-align: left;
opacity: 0.88;]Art by 18bot[/border][/border]

I took your code, altered the colours and used it here - Futuristic - 𝐞𝐥𝐲𝐬𝐢𝐮𝐦 - cs You're awesome, thank you so much for this! Otherwise I'd have no idea how to make beautiful posts like everyone else.. hehe

 

[Ambiloquous]

I used one of

I took your code, altered the colours and used it here - Futuristic - 𝐞𝐥𝐲𝐬𝐢𝐮𝐦 - cs You're awesome, thank you so much for this! Otherwise I'd have no idea how to make beautiful posts like everyone else.. hehe

No, you're awesome! I'm glad you think my templates are good enough to show off hrjfjsk (I'm digging the blue. )

 

[606]

Okay i just gotta say, i love your codes. Sometimes I just look at this thread just to look at your codes cause they are soooo good

 

[Ambiloquous]

Okay i just gotta say, i love your codes. Sometimes I just look at this thread just to look at your codes cause they are soooo good

Thank you sm! I’m glad they stand up to a second glance.

 

[The Dark Wizard]

You are so talented omg.

 

[Ambiloquous]

You are so talented omg.

Thank you hrghjgf!

 

[Shut-In-Fae]

Normally I would just lurk around and look at this thread a gazillion times because all your codes are so beautiful, but I just had to say something! Everything you make is so pretty like jbdsjbfsa you're so talented! Thank you for making so many beginner-friendly ones so us, less talented folk, can have pretty posts too

 

[Irakma]

I did coding!!!!! I feel accomplished!!!! I linkie here, I'm really proud!! (okay, it was a tutorial on Youtube, but I'm learning!)

 

[Ambiloquous]

Normally I would just lurk around and look at this thread a gazillion times because all your codes are so beautiful, but I just had to say something! Everything you make is so pretty like jbdsjbfsa you're so talented! Thank you for making so many beginner-friendly ones so us, less talented folk, can have pretty posts too

Thank you! I thought I was known for unintelligible code and too many variables, but I'm glad there's some beginner friendly code in there too lkjslfkjsd.

 

[Ambiloquous]

I did coding!!!!! I feel accomplished!!!! I linkie here, I'm really proud!! (okay, it was a tutorial on Youtube, but I'm learning!)

o7 I'm proud of you too! It looks super clean, and I'm sure you'll get to the point where you can mess around with code on your own soon.

 

[Saturn_moon]

Toggle Tabs

Non-toggling tabs code. Ignore the name.

I have arisen from the BBCode grave. I'm not entirely satisfied with this inconsistent looking layout, but I finished it, so I thought I'd put it out anyway. In the process, I have reminded myself again how difficult it is to put in understandable comments. (Not that my comments are understandable. :v)

Click Tabs

• Tab
• Tab
• Tab
• Tab

• LOREM IPSUM

  ALIAS

  Blue Moon
  

  ROLE

  Point
  

  TIER

  II–III
  

  
  

  GROUP

  Amores III
  

  BRANCH

  Little Latonia
  

  BATCH

  Noche
  

  MENTOR

  Daybreak
  

  
  

  NOTABLE SKILLS

  Aqua Scrying, Birdspeak
  

  NOTES

  Check Report on Operation Rose Train for details on patterns and expertise
  

  ARTIST

  PicardLouis

  DESCRIPTION

  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc.
  
  

  EXPANDED

  
  Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.
  
  Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.
• IPSUM LOREM

  HISTORY

  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc.
  
  Nullam non nisi est sit amet. Massa eget egestas purus viverra accumsan. Neque viverra justo nec ultrices dui. Tellus mauris a diam maecenas sed enim ut. Sed adipiscing diam donec adipiscing. Adipiscing tristique risus nec feugiat in fermentum. Lectus nulla at volutpat diam ut venenatis tellus in. Consequat mauris nunc congue nisi vitae. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Enim ut sem viverra aliquet eget sit amet tellus.
  
  

  EXPANDED

  
  Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.
  
  Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.
• DOLOR SIT

  ONE WHO GUARDS THE NIGHT

  ALIAS

  Nightingale
  

  ROLE

  Shield
  

  RELATIONSHIP

  
  Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
  

  ARTIST

  Eliot Baum

  ONE WHO PONDERS THE DUSK

  ALIAS

  Sundown
  

  ROLE

  Core
  

  RELATIONSHIP

  
  Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
  

  ARTIST

  Eliot Baum

  ONE WHO WALKS AMONG CLOUDS

  ALIAS

  Nimbus
  

  ROLE

  Step
  

  RELATIONSHIP

  
  Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
  

  ARTIST

  Eliot Baum
• SIT DOLOR

  QUOTES

  
  "There is a moon sole in the blue night."
  "Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac."
  "In tellus integer feugiat scelerisque varius morbi enim nunc faucibus."
  

  
  

  MUSIC

  
  

  
  

  MISC

  Lorem ipsum dolor sit amet elit, sed do eiusmod aliqua.

Scroll

Spoiler: Code

[comment]-- Fonts --> [font=Macondo][font=Heebo]:>[/font][/font][/comment][border=0;

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

margin: auto;
max-width: 950px;
padding: 0;

--h: clamp(380px, 90vh, 900px);

/* Colours */
--base: #4A6491; /* #3f98c9 */
--outline: #D0E4F2;
--accent: #30395C; /* #12619D */
--accent-2: #85A5CC; /* #89C2E1 */

/* Images -- image URL in url(''), percentages are x-value y-value image positioning */
/* Tab 1 Image */
--img-1: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c9aa5b64-52aa-4d3f-85c2-366bd57804bc/ddatbzg-bb7eb3a5-ff48-4edf-bbd8-6860c9df322b.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2M5YWE1YjY0LTUyYWEtNGQzZi04NWMyLTM2NmJkNTc4MDRiY1wvZGRhdGJ6Zy1iYjdlYjNhNS1mZjQ4LTRlZGYtYmJkOC02ODYwYzlkZjMyMmIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bWn_j0HI_JgX_II9d0OUx9pGYF8QDP6yVPesmNSsyjk') 50% 100% / cover;
/* Tab 3 Images */
--img-2: url('https://pbs.twimg.com/media/ErkL6MHW8AIheQn?format=jpg&name=large') 50% 25% / cover;
--img-3: url('https://pbs.twimg.com/media/ErkL6NNXAAExA29?format=jpg&name=large') 50% 70% / cover;
--img-4: url('https://images.squarespace-cdn.com/content/v1/5f15cec690ad1413ae255f7e/1601332574045-P8HM3NEM3W08PP9TTG5A/image-asset.png?format=1500w') 50% 30% / cover;

/* Border Properties */
--b-r: 8px; /* Border radius -- a greater number makes it rounder and vice versa */
--b-w: 8px; /* Border width */
--bg-w: (var(--icon-s) + (2 * var(--b-w)));

--tabs-h: 250px;
--tab-f-s: 25px;

/* Icon Properties */
--icon-s: 90px; /* Background box size -- changing it might mess up code */
--icon-f-s: 55px; /* Icon size */

--bar-w: 72px;

/* Title Properties */
--title-f-s: 2em; /* Font size -- change by .1 increments, increasing size might mess it up on smaller screens */
--title-f: 'Macondo', sans-serif; /* Font family -- change font tag above if you change this */
--title-p: max(10px, 5%);

/* Gradient Opacity */
--grad-o: 50%;

/* Content Properties */
--con-p: clamp(10px, 2%, 20px); /* Padding */
--con-c: azure; /* Text colour */
--con-f-s: 1.05em; /* Font size -- change by .1 increments */
--con-f: 'Heebo', sans-serif; /* Font family -- change font tag above if you change this */

/* Divider Height */
--div-h: 2px;

/* Header Properties */
--head-f-s: 1.3em; /* Font size -- change by .1 increments */
--head-p: 6px;
][comment]-- Tab Note --[/comment][border=0;
padding: 0;
color: var(--outline);
font-family: var(--con-f);
line-height: 1.8;]Click Tabs [fa]fa-solid fa-arrow-down[/fa][/border][comment]-- Main --[/comment][border=0;
position: relative;
display: flex;
flex-flow: row nowrap;
align-items: center;
box-sizing: border-box;
width: 100%;
height: var(--h);
padding: calc(var(--bg-w)) 0 0 0;][comment]-- Icon Border --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][comment]
-- Icon Box --[/comment][border=0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: var(--icon-s);
height: var(--icon-s);
border-radius: var(--b-r);
background: var(--base);
padding: 0;][/border][comment]
-- Icon Box End --[/comment][/border][comment]
-- Icon Border End --[/comment][comment]

-- Title Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0;
overflow: hidden;][comment]-- Title Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent) -80%, rgba(0, 0, 0, 0), var(--accent));
padding: 0;][/border][/border][comment]
-- Header Box End --[/comment][comment]

-- Tab Bar Background --[/comment][border=0;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: var(--accent-2);
pointer-events: none;][/border][comment]
-- Tab Bar Background End --[/comment][comment]

-- Actual Tabs --[/comment][border=0;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
margin-left: 20px;
box-sizing: border-box;
width: 66px;
height: var(--tabs-h);
padding: 0;
line-height: 60px;
overflow: hidden;][tabs]

[tab=0][comment]

------------ Tab 1 Body ------------

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

-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]

-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]LOREM IPSUM[/border][comment]
-- Title End --[/comment][comment]

-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent) -20%, rgba(0, 0, 0, 0) 40%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]

-- Tab Border --[/comment][border=0;
position: absolute;
top: calc(0px - 14px);
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]

-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-user fa-fade[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]

-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]-- Image + Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: stretch;
padding: calc(var(--con-p) / 2);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
margin: calc(var(--con-p) / 2);
flex: 1 1 200px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
min-height: 280px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-1);
padding: 0;][/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: calc(var(--con-p) / 1.75);
flex: 2 1 300px;
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Blue Moon [fa]fa-solid fa-moon[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Point
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]TIER[/border] II–III
[comment]-- Divider --[/comment][border=0; padding: 0;
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]GROUP[/border] Amores III
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]BRANCH[/border] Little Latonia
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]BATCH[/border] Noche
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]MENTOR[/border] Daybreak
[comment]-- Divider --[/comment][border=0; padding: 0;
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]NOTABLE SKILLS[/border] Aqua Scrying, Birdspeak
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]NOTES[/border] Check [i]Report on Operation Rose Train[/i] for details on patterns and expertise
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] PicardLouis[/border][/border][comment]
-- Image + Text End --[/comment][comment]
-- More Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--con-p);][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]DESCRIPTION[/border]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc.

[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]EXPANDED[/border]
Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.

Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.[/border][comment]-- More Text End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]

[tab=0][comment]

------------ Tab 2 Body ------------

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

-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]

-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]IPSUM LOREM[/border][comment]
-- Title End --[/comment][comment]

-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent) -10%, rgba(0, 0, 0, 0) 50%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]

-- Tab Border --[/comment][border=0;
position: absolute;
top: 50px;
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]

-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-clock fa-fade[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]

-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--con-p);][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]HISTORY[/border]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc.

Nullam non nisi est sit amet. Massa eget egestas purus viverra accumsan. Neque viverra justo nec ultrices dui. Tellus mauris a diam maecenas sed enim ut. Sed adipiscing diam donec adipiscing. Adipiscing tristique risus nec feugiat in fermentum. Lectus nulla at volutpat diam ut venenatis tellus in. Consequat mauris nunc congue nisi vitae. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Enim ut sem viverra aliquet eget sit amet tellus.

[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]EXPANDED[/border]
Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.

Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.[/border][comment]-- Text End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]

[tab=0][comment]

------------ Tab 3 Body ------------

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

-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]

-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]DOLOR SIT[/border][comment]
-- Title End --[/comment][comment]

-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent), rgba(0, 0, 0, 0) 60%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]

-- Tab Border --[/comment][border=0;
position: absolute;
top: 115px;
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]

-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-users fa-fade[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]

-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]

-- Image + Header + Text 1 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-2);
padding: 0;][/border][/border][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent), rgba(0, 0, 0, 0), var(--accent) 180%);
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO GUARDS THE NIGHT[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) 0 0 var(--con-p);
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Nightingale [fa]fa-solid fa-crow[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Shield
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border]
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][/border][comment]
-- Image + Header + Text 1 End --[/comment][comment]

-- Header + Text + Image 2 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap-reverse;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-left-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent) -80%, rgba(0, 0, 0, 0), var(--accent));
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO PONDERS THE DUSK[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) var(--con-p) 0 0;
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Sundown [fa]fa-solid fa-sun-haze[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Core
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border]
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][comment]-- Header + Text End --[/comment][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-3);
padding: 0;][/border][/border][/border][comment]
-- Header + Text + Image 2 End --[/comment][comment]

-- Image + Header + Text 3 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-4);
padding: 0;][/border][/border][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent), rgba(0, 0, 0, 0), var(--accent) 180%);
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO WALKS AMONG CLOUDS[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) 0 0 var(--con-p);
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Nimbus [fa]fa-solid fa-cloud[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Step
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border]
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][/border][comment]
-- Image + Header + Text 3 End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]

[tab=0][comment]

------------ Tab 4 Body ------------

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

-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]

-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]SIT DOLOR[/border][comment]
-- Title End --[/comment][comment]

-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent) 10%, rgba(0, 0, 0, 0) 70%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]

-- Tab Border --[/comment][border=0;
position: absolute;
top: 180px;
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]

-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-list fa-fade[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]

-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--con-p);][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]QUOTES[/border]
"There is a moon sole in the blue night."
"Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac."
"In tellus integer feugiat scelerisque varius morbi enim nunc faucibus."
[comment]-- Divider --[/comment][border=0; padding: 0;
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]MUSIC[/border] [MEDIA=youtube]4kVO6PQyVhY[/MEDIA]
[comment]-- Divider --[/comment][border=0; padding: 0;
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]MISC[/border] Lorem ipsum dolor sit amet elit, sed do eiusmod aliqua.[/border][comment]-- Text End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]

[/tabs][/border][comment]
-- Actual Tabs End --[/comment][/border][comment]
-- Main End --[/comment][comment]-- Scroll Note --[/comment][border=0;
padding: 0;
color: var(--base);
font-family: var(--con-f);
text-align: right;
line-height: 1.8;]Scroll [fa]fa-solid fa-arrow-down[/fa][/border][/border]

Perfection as always.

 

[Ayama]

Perfection as always.

Indeed you are ;P

 

[Ambiloquous]

Perfection as always.

No u

 

[Saturn_moon]

Indeed you are ;P

Ayamaaaaa

 

[Ayama]

Ayamaaaaa

 

[STEELHEART]

Your codes are a literal work of art my jaw is on the floor and so is the rest of me I'm flabbergasted.

 

[Ambiloquous]

Your codes are a literal work of art my jaw is on the floor and so is the rest of me I'm flabbergasted.

Your jaw is a work of art hrlskjslkf thank you!

 

[Elowyn]

Dang, your codes are too amaziiing! Where did u learn how to code like that? I mess with bbcode a bit but code keeps breaking ^^"

 

[Ambiloquous]

Dang, your codes are too amaziiing! Where did u learn how to code like that? I mess with bbcode a bit but code keeps breaking ^^"

Thank youuu! Mainly just messing with and breaking code as you said, as well as reading CSS documentation. I'm going to quote a slightly older post from this thread because some of the stuff I said before still applies, though you might've seen it before. We no longer need to inject CSS into [border] or [bg] tags as we used to do, since RPN revived the [div], but sometimes you still might want to style a tag with an existing function like [accordion]. Also, if your code frequently breaks, you might want to check if you've toggled the [ ] button on the bar at the top of your text editor so all other buttons are greyed out. With rich text editor on (i.e., with the buttons un-greyed out and clickable), the tag autocomplete function can ruin your code if you accidentally forget one by trying to overcompensate.

When I first started here, I looked over the Tutorial - RpNation - BBcode Guide thread first — though I'm sure you've seen it, being that it's pinned to this center. There used to be a BBCode+ intro thread or something like that, but then that died, so we all started using CSS injections in background and border tags. Here's a slightly older thread that I think still is pretty relevant: Tutorial - BBCode CSS Injection. If you've used HTML before, you probably know a bit of CSS, so it shouldn't be too unfamiliar (but if it is, MDN and the general internet has a lot of CSS documentation). I believe some other BBCoders have tutorials that you can filter out in the BBCode Center as well? Also, I think the thing that helped me the most was looking at other people's code and breaking down the components, so feel free to take apart, break, wreck, sift through any of my codes if you feel like that's your jam.

 

[thecrownchaos]

Dude I know you’ve heard it before but this is some of the coolest shit I’ve ever seen I can’t even begin to understand how you make these things so dynamic props to you.

(None of these fit what I’m looking for rn but this thread is DEFINITELY going in my bookmarks)

 

[Ambiloquous]

Dude I know you’ve heard it before but this is some of the coolest shit I’ve ever seen I can’t even begin to understand how you make these things so dynamic props to you.

(None of these fit what I’m looking for rn but this thread is DEFINITELY going in my bookmarks)

Hjsfjdjsd thank you sm! It's just experience from a lot of trial and error ngl

()

 

[Ambiloquous]

Update

No new code here, folks. Just bug fixes.

I FINALLY FIXED THE WONKY PERSPECTIVE IN THE RELATIONSHIP/SKILL SECTION IN THE

3D INTERFACE

CODE. (This is totally not because someone reminded me through showing me their code, no.) I usually don't make posts about fixes (or without code in general), but this mf has been bothering me since 2021 and I know people use that code a lot more than some others.

Also there are tags in the description now, though I don't know if they're actually useful. But I spent more than three hours changing it all so I can't not mention it.

 

[Bambiholic]

Your codes are so so unique! They're my favourite

 

[Ambiloquous]

Your codes are so so unique! They're my favourite

Aw, thank you sm!

 

[Wrennard]

I just wanted to say your codes are absolutely gorgeous