Resource Ami's Lab 2.0 | Mobile Friendly Freebies

[Ambiloquous]

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.

Tabs

Hidden Scroll

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]

 

[AI10100]

It was definitely not paid, no sir. It's free marketing.

Beautiful code as always man LMAO

 

[Ambiloquous]

It was definitely not paid, no sir. It's free marketing.

Beautiful code as always man LMAO

Of course not. Do I run such an unscrupulous business here?

Thank u thank u Halfway through I realized the math could be a lot easier than I made it, but perks of sleep deprivation, am I rite?

 

[AI10100]

Of course not. Do I run such an unscrupulous business here?

Thank u thank u Halfway through I realized the math could be a lot easier than I made it, but perks of sleep deprivation, am I rite?

Math is, by nature, always harder. Don't let it fool you

 

[Colorless Spectrum]

Ayooooo this is so good for a sci-fi roleplay

 

[Colorless Spectrum]

Or like a techy rp in general

 

[Anaxileah]

Colour/Less

A tabs code for a certain Spec. Colorless Spectrum

Another day, another browser incompatibility. I swear this is my trademark now, just not being able to see the full code in any browser but Chrome (and its variants) at the exact date it was posted. Today's course includes invisible quotes on Safari and no grayscale backdrop-filter showing for Firefox. Yay.

I forgot to add "Click Tabs", but it should be obvious where they are, right? Right?

COLOUR

LESS

• 000000
• 000

• .
• .

• .
• .
• .

• BASIC INFORMATION

  NAME

  S. P. Lu
  NICKNAME

  Speculoos
  AGE

  N/A
  GENDER

  Female
  
  HEIGHT

  N/A
  WEIGHT

  N/A
  
  AFFILIATION

  N/A

  APPEARANCE

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.
  
  Donec sapien nulla, dapibus quis risus eget, iaculis mollis est. Sed tincidunt convallis lobortis. Sed eget odio id nunc condimentum eleifend dignissim vitae tellus. Praesent non ligula elementum, posuere eros sit amet, ultrices nulla.

  Artist: Koyori n

  Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
  - UNKNOWN
• PERSONALITY

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.
  
  HOBBIES

  Carrying noobs, beating up assholes
  LIKES

  N/A
  DISLIKES

  N/A

  BIOGRAPHY

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.
  
  Donec sapien nulla, dapibus quis risus eget, iaculis mollis est. Sed tincidunt convallis lobortis. Sed eget odio id nunc condimentum eleifend dignissim vitae tellus. Praesent non ligula elementum, posuere eros sit amet, ultrices nulla lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.
  
  ACQUAINTANCES

  N/A
  FRIENDS

  10Green_Robo10, Pink.Sama
  FAMILY

  orangebro

  Artist: SeerLight

  Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
  - WHO KNOWS
• EXTRAS

  SOMETHING

  N/A
  SOMETHING ELSE

  N/A
  SOMETHING NOT

  N/A
  SOMETHING BEYOND

  N/A
  SOMETHING

  N/A

  PLAYLIST

  Artist: SeerLight

  Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
  - NOT ME

Spoiler: Code

[comment][font=Rubik][font=Mulish]:^[/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: var(--w);
padding: 0px;

/* Accent Colours */
--color-1: #68b3f0;
--color-2: #76deec;
--color-3: #fe89cd;
--color-b: #2D2E33; /* Base colour */

--w: 1000px;
--h: min(86vh, 600px);

--f-tabs-d: 10px;
--f-tabs-m: calc(max(var(--content-con-b-w), var(--stripes-d)) + var(--f-tabs-d));
--f-tabs-w: 210px;

--colour-tab-l: calc(50% - (var(--f-tabs-w) / 2) + 20px);
--colour-tab-w: 91px;

--less-tab-l: 9px;
--less-tab-w: 70px;

--tabs-h: 24px;
--tabs-w: 210px;

--d: 10px;

--stripes-d: 16px;
--stripes-w: 250px;
--stripes-h: 200px;

--stripes-bg-t-1: linear-gradient(150deg, var(--color-1) 10%, transparent calc(10% + 1px) 15%, var(--color-2) calc(15% + 1px) 25%, transparent calc(25% + 1px) 30%, var(--color-3) calc(30%  + 1px) 40%, transparent calc(40%  + 1px));
--stripes-bg-b-1: linear-gradient(-30deg, var(--color-1) 10%, transparent calc(10% + 1px) 15%, var(--color-2) calc(15% + 1px) 25%, transparent calc(25% + 1px) 30%, var(--color-3) calc(30% + 1px) 40%, transparent calc(40% + 1px));

--stripes-bg-t-2: linear-gradient(150deg, var(--color-2) 10%, transparent calc(10% + 1px) 15%, var(--color-3) calc(15% + 1px) 25%, transparent calc(25% + 1px) 30%, var(--color-1) calc(30% + 1px) 40%, transparent calc(40% + 1px));
--stripes-bg-b-2: linear-gradient(-30deg, var(--color-2) 10%, transparent calc(10% + 1px) 15%, var(--color-3)  calc(15% + 1px) 25%, transparent calc(25% + 1px) 30%, var(--color-1) calc(30% + 1px) 40%, transparent calc(40% + 1px));

--stripes-bg-t-3: linear-gradient(150deg, var(--color-3) 10%, transparent calc(10% + 1px) 15%, var(--color-1) calc(15% + 1px) 25%, transparent calc(25% + 1px) 30%, var(--color-2) calc(30% + 1px) 40%, transparent calc(40% + 1px));
--stripes-bg-b-3: linear-gradient(-30deg, var(--color-3) 10%, transparent calc(10% + 1px) 15%, var(--color-1) calc(15% + 1px) 25%, transparent calc(25% + 1px) 30%, var(--color-2) calc(30% + 1px) 40%, transparent calc(40% + 1px));

--tab-t: 8px;
--tab-l: calc(50% - 73px);
--tab-d: 60px;
--tab-w: 26px;

/* Tab Cover Borders, number before px is width */
--tab-b-1: 2px solid var(--color-1);
--tab-b-2: 2px solid var(--color-2);
--tab-b-3: 2px solid var(--color-3);

--con-w: 270px;
--con-p: 25px;
--con-gap: calc((var(--content-con-b-w) * 2) + 10px) 0px;

--content-con-b-w: 26px;
--content-con-b-w-s: 7px;
--content-con-b-bg: rgb(200, 200, 205); /* Content frame colour */

--text-con-bg: var(--color-b);

--header-m: 8px;
--header-h: 60px;
--header-p: 10px 16px;
--header-f-s: 1.8em; /* Header font size */
--header-f: 'Rubik', sans-serif; /* Header font, change font tag above if you change this */
--header-l-h: 1.5;

--header-bg-1: linear-gradient(173.3deg, var(--color-1) 49%, var(--color-b) calc(49% + 1px));
--header-t-bg-1: linear-gradient(173.3deg, var(--color-b) 49%, var(--color-1) calc(49% + 1px));

--header-bg-2: linear-gradient(173.3deg, var(--color-2) 49%, var(--color-b) calc(49% + 1px));
--header-t-bg-2: linear-gradient(173.3deg, var(--color-b) 49%, var(--color-2) calc(49% + 1px));

--header-bg-3: linear-gradient(173.3deg, var(--color-3) 49%, var(--color-b) calc(49% + 1px));
--header-t-bg-3: linear-gradient(173.3deg, var(--color-b) 49%, var(--color-3) calc(49% + 1px));

--triangle-s: 10px;

--triangle-bg-1: linear-gradient(135deg, var(--color-b) 50%, var(--color-2) calc(50% + 1px));
--triangle-bg-2: linear-gradient(135deg, var(--color-b) 50%, var(--color-3) calc(50% + 1px));
--triangle-bg-3: linear-gradient(135deg, var(--color-b) 50%, var(--color-1) calc(50% + 1px));

--text-p: 4px 20px;
--text-c: rgb(220, 220, 225); /* Text colour */
--text-f: 'Mulish', sans-serif; /* Text and image credit font, change font tag above if you change this */

--quote-p: 10px 8px 8px 10%;
--quote-f-s: 0.9em; /* Quote font size, increase or decrease by increments of .1 */

/* Image Variables
url('-- url here --') is the image URL
50% is the x-value, 0px is the y-value for image position
cover is image size, best to default to this */

--img-1: url('https://cdnb.artstation.com/p/assets/images/images/036/034/791/large/koyori-n-emily-billboard.jpg?1616558512') 50% 0px / cover; /* Image 1 */
--img-tri-bg-1: linear-gradient(160deg, transparent 85%, var(--color-2) calc(85% + 1px));
--quote-bg-1: linear-gradient(160deg, var(--color-2) 85%, var(--color-b) calc(85% + 1px));

--img-2: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4d94eabf-4257-437f-a08d-5ee63b69705f/dcaop0b-745a0982-7537-4969-ae93-0b92c2eca5c2.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRkOTRlYWJmLTQyNTctNDM3Zi1hMDhkLTVlZTYzYjY5NzA1ZlwvZGNhb3AwYi03NDVhMDk4Mi03NTM3LTQ5NjktYWU5My0wYjkyYzJlY2E1YzIuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.QusIRhdCrX6TdYrPAQOFRHc6xmUMvqAS6XyzZA9t798') 50% 0px / cover; /* Image 2 */
--img-tri-bg-2: linear-gradient(160deg, transparent 85%, var(--color-3) calc(85% + 1px));
--quote-bg-2: linear-gradient(160deg, var(--color-3) 85%, var(--color-b) calc(85% + 1px));

--img-3: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4d94eabf-4257-437f-a08d-5ee63b69705f/dd9aao3-5fded779-470b-4329-b2e8-7863f1b29606.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRkOTRlYWJmLTQyNTctNDM3Zi1hMDhkLTVlZTYzYjY5NzA1ZlwvZGQ5YWFvMy01ZmRlZDc3OS00NzBiLTQzMjktYjJlOC03ODYzZjFiMjk2MDYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.DyZa8PwHe1Sg9IYutcvv0cl_kHlHk1w5nX5Eh2GD5k0') 50% 0px / cover; /* Image 3 */
--img-tri-bg-3: linear-gradient(160deg, transparent 85%, var(--color-1) calc(85% + 1px));
--quote-bg-3: linear-gradient(160deg, var(--color-1) 85%, var(--color-b) calc(85% + 1px));][comment]

-- Filter Tab Covers --[/comment][comment]-- Colour Tab --[/comment][border=transparent;
position: absolute;
top: 0px;
left: var(--colour-tab-l);
box-sizing: border-box;
width: var(--colour-tab-w);
height: var(--tabs-h);
padding: 0px;
background: var(--text-c);
pointer-events: none;][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
color: var(--color-b);
background: linear-gradient(to right, var(--color-1), var(--color-2), var(--color-3));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: var(--header-f);
font-weight: bold;
filter: brightness(80%);
line-height: 1.6;
text-align: center;
padding: 0px;]COLOUR[/border][/border][comment]-- Less Tab --[/comment][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--colour-tab-l) + var(--colour-tab-w) + var(--less-tab-l));
box-sizing: border-box;
width: var(--less-tab-w);
height: var(--tabs-h);
padding: 0px;
background: var(--text-c);
color: var(--color-b);
font-family: var(--header-f);
font-weight: bold;
pointer-events: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]LESS[/border][comment]

-- No Filter/Filter Tabs --[/comment][border=transparent;
margin: auto;
margin-bottom: var(--f-tabs-m);
width: var(--f-tabs-w);
height: var(--tabs-h);
padding: 0px;
overflow: hidden;][tabs]

[tab=000000].[/tab]

[tab=000][border=transparent;
position: absolute;
top: calc(var(--tabs-h) + var(--f-tabs-d));
left: calc(0px - var(--stripes-d));
width: calc(100% + (var(--stripes-d) * 2));
min-height: calc(var(--h) + (2 * max(var(--content-con-b-w), var(--stripes-d))));
padding: 0px;
-x-backdrop-filter: grayscale(98%);
-moz-backdrop-filter: grayscale(98%);
-o-backdrop-filter: grayscale(98%);
-webkit-backdrop-filter: grayscale(98%);
backdrop-filter: grayscale(98%);
pointer-events: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--con-gap);
z-index: 1;][comment]-- Fake Content Container --[/comment][border=transparent;
box-sizing: border-box;
flex: 5 1 var(--con-w);
min-width: var(--tabs-w);
height: calc(var(--h) + (2 * max(var(--content-con-b-w), var(--stripes-d))));
padding: 0px;][border=transparent;
padding: 0px;
opacity: 0;].[/border][/border][comment]-- Fake Image Container --[/comment][border=transparent;
box-sizing: border-box;
flex: 3 1  var(--con-w);
height: calc(var(--h) + (2 * max(var(--content-con-b-w), var(--stripes-d))));
padding: 0px;][/border][/border][/tab]

[/tabs][/border][comment]

-- Main Container --[/comment][border=transparent;
position: relative;
margin: max(var(--content-con-b-w), var(--stripes-d)) 0px;
width: 100%;
min-height: var(--h);
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--con-gap);
z-index: 0;][comment]-- Fake Content Container --[/comment][border=transparent;
box-sizing: border-box;
flex: 5 1 var(--con-w);
min-width: var(--tabs-w);
height: var(--h);
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;][comment]

-- Tabs Container --[/comment][border=transparent;
margin-top: var(--d);
box-sizing: border-box;
width: var(--tabs-w);
padding: 0px;][tabs]

[tab=.][comment]-- Tab Body 1 --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
min-height: var(--h);
background: var(--color-b);
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--con-gap);
pointer-events: none;][comment]

-- Stripes Top --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--stripes-d));
left: calc(0px - var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-t-1);
padding: 0px;
z-index: 0;][/border][comment]

-- Stripes Bottom --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--stripes-h) + var(--stripes-d));
left: calc(100% - var(--stripes-w) + var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-b-1);
padding: 0px;
z-index: 0;][/border][comment]

-- Content Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 5 1 var(--con-w);
min-width: var(--tabs-w);
height: var(--h);
padding: calc(var(--con-p) * 2) var(--con-p) 0px var(--con-p);][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);
padding: 0px;
border: var(--tab-b-1);
border-radius: 50%;
background: var(--color-b);
color: var(--color-1);
filter: grayscale(98%);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + var(--tab-d));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-2);
border-radius: 50%;
background: var(--color-b);
color: var(--color-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-history[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + (var(--tab-d) * 2));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-3);
border-radius: 50%;
background: var(--color-b);
color: var(--color-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-sliders-h[/fa][/border][comment]

-- Content Border --[/comment][border=transparent;
position: absolute;
top: calc((var(--con-p) * 2) - var(--content-con-b-w-s));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Hidden Scroll Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0px;
overflow: hidden;
z-index: 1;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + var(--con-p));
height: 100%;
padding: 0px var(--con-p) 0px 0px;
background: var(--text-con-bg);
overflow-y: auto;
overflow-x: hidden;
pointer-events: auto;][comment]

Copy-paste the two sections below for more headers + text ↴

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-1);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-1);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]BASIC INFORMATION[/border][/border][comment]
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);][b]NAME[/b] [comment]-- Triangle Icon, copy section to get more triangles -->[/comment][border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border][comment]-- Triangle Icon End --[/comment] S. P. Lu
[b]NICKNAME[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] Speculoos
[b]AGE[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] N/A
[b]GENDER[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] Female

[b]HEIGHT[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] N/A
[b]WEIGHT[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] N/A

[b]AFFILIATION[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-1);
padding: 0px;][/border] N/A[/border][comment]
-- Text End --[/comment][comment]

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-1);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-1);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]APPEARANCE[/border][/border][comment]
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.

Donec sapien nulla, dapibus quis risus eget, iaculis mollis est. Sed tincidunt convallis lobortis. Sed eget odio id nunc condimentum eleifend dignissim vitae tellus. Praesent non ligula elementum, posuere eros sit amet, ultrices nulla.[/border][comment]
-- Text End --[/comment][/border][comment]
-- Hidden Scroll End --[/comment][/border][comment]
-- Hidden Scroll Container End --[/comment][/border][comment]
-- Content Container End --[/comment][comment]

-- Image Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 3 1  var(--con-w);
height: var(--h);
padding: 0px var(--con-p) calc(var(--con-p) * 2) var(--con-p);][comment]

-- Image Credit --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--con-p) - 10px);
left: 8px;
box-sizing: border-box;
color: var(--text-c);
font-size: 0.9em;
font-family: var(--text-f);
padding: 0px;
opacity: 0.8;][b]Artist:[/b] Koyori n[/border][comment]

-- Image Border --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--content-con-b-w));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Image --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-1);
padding: 0px;
z-index: 1;][comment]-- Image Triangle --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-tri-bg-1);
padding: 0px;
pointer-events: auto;][comment]

-- Image Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--quote-p);
color: var(--text-c);
background: var(--quote-bg-1);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--quote-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);
text-align: right;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: flex-end;]Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
- UNKNOWN[/border][comment]
-- Image Text End --[/comment][/border][/border][comment]
-- Image End --[/comment][/border][comment]
-- Image Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 2 --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
min-height: var(--h);
background: var(--color-b);
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--con-gap);
pointer-events: none;][comment]

-- Stripes Top --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--stripes-d));
left: calc(0px - var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-t-2);
padding: 0px;
z-index: 0;][/border][comment]

-- Stripes Bottom --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--stripes-h) + var(--stripes-d));
left: calc(100% - var(--stripes-w) + var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-b-2);
padding: 0px;
z-index: 0;][/border][comment]

-- Content Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 5 1 var(--con-w);
min-width: var(--tabs-w);
height: var(--h);
padding: calc(var(--con-p) * 2) var(--con-p) 0px var(--con-p);][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);
padding: 0px;
border: var(--tab-b-1);
border-radius: 50%;
background: var(--color-b);
color: var(--color-1);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + var(--tab-d));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-2);
border-radius: 50%;
background: var(--color-b);
color: var(--color-2);
filter: grayscale(98%);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-history[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + (var(--tab-d) * 2));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-3);
border-radius: 50%;
background: var(--color-b);
color: var(--color-3);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-sliders-h[/fa][/border][comment]

-- Content Border --[/comment][border=transparent;
position: absolute;
top: calc((var(--con-p) * 2) - var(--content-con-b-w-s));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Hidden Scroll Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0px;
overflow: hidden;
z-index: 1;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + var(--con-p));
height: 100%;
padding: 0px var(--con-p) 0px 0px;
background: var(--text-con-bg);
overflow-y: auto;
overflow-x: hidden;
pointer-events: auto;][comment]

Copy-paste the two sections below for more headers + text ↴

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-2);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-2);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]PERSONALITY[/border][/border][comment]
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.

[b]HOBBIES[/b] [comment]-- Triangle Icon, copy section to get more triangles -->[/comment][border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border][comment]-- Triangle Icon End --[/comment] Carrying noobs, beating up assholes
[b]LIKES[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border] N/A
[b]DISLIKES[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border] N/A[/border][comment]
-- Text End --[/comment][comment]

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-2);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-2);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]BIOGRAPHY[/border][/border][comment]
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.

Donec sapien nulla, dapibus quis risus eget, iaculis mollis est. Sed tincidunt convallis lobortis. Sed eget odio id nunc condimentum eleifend dignissim vitae tellus. Praesent non ligula elementum, posuere eros sit amet, ultrices nulla lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere vehicula ipsum, nec posuere dolor pellentesque vitae. Curabitur nulla justo, dictum in dapibus ut, consequat eu ipsum. Nulla et augue lectus. Donec erat lacus, feugiat at tellus eget, consectetur posuere dolor. Ut nec ipsum ac turpis rhoncus scelerisque. Nam congue finibus nibh, et eleifend mauris tincidunt non. Etiam interdum massa vel nibh scelerisque aliquet.

[b]ACQUAINTANCES[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border] N/A
[b]FRIENDS[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border] 10Green_Robo10, Pink.Sama
[b]FAMILY[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-2);
padding: 0px;][/border] orangebro[/border][comment]
-- Text End --[/comment][/border][comment]
-- Hidden Scroll End --[/comment][/border][comment]
-- Hidden Scroll Container End --[/comment][/border][comment]
-- Content Container End --[/comment][comment]

-- Image Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 3 1  var(--con-w);
height: var(--h);
padding: 0px var(--con-p) calc(var(--con-p) * 2) var(--con-p);][comment]

-- Image Credit --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--con-p) - 10px);
left: 8px;
box-sizing: border-box;
color: var(--text-c);
font-size: 0.9em;
font-family: var(--text-f);
padding: 0px;
opacity: 0.8;][b]Artist:[/b] SeerLight[/border][comment]

-- Image Border --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--content-con-b-w));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Image --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-2);
padding: 0px;
z-index: 1;][comment]-- Image Triangle --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-tri-bg-2);
padding: 0px;
pointer-events: auto;][comment]

-- Image Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--quote-p);
color: var(--text-c);
background: var(--quote-bg-2);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--quote-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);
text-align: right;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: flex-end;]Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
- WHO KNOWS[/border][comment]
-- Image Text End --[/comment][/border][/border][comment]
-- Image End --[/comment][/border][comment]
-- Image Container End --[/comment][/border][/tab]

[tab=.][comment]-- Tab Body 3 --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
min-height: var(--h);
background: var(--color-b);
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--con-gap);
pointer-events: none;][comment]

-- Stripes Top --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--stripes-d));
left: calc(0px - var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-t-3);
padding: 0px;
z-index: 0;][/border][comment]

-- Stripes Bottom --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--stripes-h) + var(--stripes-d));
left: calc(100% - var(--stripes-w) + var(--stripes-d));
width: var(--stripes-w);
height: var(--stripes-h);
background: var(--stripes-bg-b-3);
padding: 0px;
z-index: 0;][/border][comment]

-- Content Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 5 1 var(--con-w);
min-width: var(--tabs-w);
height: var(--h);
padding: calc(var(--con-p) * 2) var(--con-p) 0px var(--con-p);][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);
padding: 0px;
border: var(--tab-b-1);
border-radius: 50%;
background: var(--color-b);
color: var(--color-1);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-user[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + var(--tab-d));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-2);
border-radius: 50%;
background: var(--color-b);
color: var(--color-2);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-history[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-l) + (var(--tab-d) * 2));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
padding: 0px;
border: var(--tab-b-3);
border-radius: 50%;
background: var(--color-b);
color: var(--color-3);
filter: grayscale(98%);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-sliders-h[/fa][/border][comment]

-- Content Border --[/comment][border=transparent;
position: absolute;
top: calc((var(--con-p) * 2) - var(--content-con-b-w-s));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Hidden Scroll Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0px;
overflow: hidden;
z-index: 1;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + var(--con-p));
height: 100%;
padding: 0px var(--con-p) 0px 0px;
background: var(--text-con-bg);
overflow-y: auto;
overflow-x: hidden;
pointer-events: auto;][comment]

Copy-paste the two sections below for more headers + text ↴

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-3);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-3);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]EXTRAS[/border][/border][comment]
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);][b]SOMETHING[/b] [comment]-- Triangle Icon, copy section to get more triangles -->[/comment][border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-3);
padding: 0px;][/border][comment]-- Triangle Icon End --[/comment] N/A
[b]SOMETHING ELSE[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-3);
padding: 0px;][/border] N/A
[b]SOMETHING NOT[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-3);
padding: 0px;][/border] N/A
[b]SOMETHING BEYOND[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-3);
padding: 0px;][/border] N/A
[b]SOMETHING[/b] [border=transparent;
display: inline-block;
box-sizing: border-box;
width: var(--triangle-s);
height: var(--triangle-s);
background: var(--triangle-bg-3);
padding: 0px;][/border] N/A[/border][comment]
-- Text End --[/comment][comment]

-- Header --[/comment][border=transparent;
margin-bottom: var(--header-m);
box-sizing: border-box;
width: 100%;
min-height: var(--header-h);
padding: 0px;
background: var(--header-bg-3);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--header-p);
color: var(--text-c);
background: var(--header-t-bg-3);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);]PLAYLIST[/border][/border][comment]
-- Header End --[/comment][comment]

-- Text --[/comment][border=transparent;
margin-bottom: var(--con-p);
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--text-c);
font-family: var(--text-f);][comment]-- Input characters after = in youtube link -->[/comment][MEDIA=youtube]kzdJkT4kp-A[/MEDIA][/border][comment]
-- Text End --[/comment][/border][comment]
-- Hidden Scroll End --[/comment][/border][comment]
-- Hidden Scroll Container End --[/comment][/border][comment]
-- Content Container End --[/comment][comment]

-- Image Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 3 1  var(--con-w);
height: var(--h);
padding: 0px var(--con-p) calc(var(--con-p) * 2) var(--con-p);][comment]

-- Image Credit --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--con-p) - 10px);
left: 8px;
box-sizing: border-box;
color: var(--text-c);
font-size: 0.9em;
font-family: var(--text-f);
padding: 0px;
opacity: 0.8;][b]Artist:[/b] SeerLight[/border][comment]

-- Image Border --[/comment][border=transparent;
position: absolute;
top: calc(0px - var(--content-con-b-w));
left: calc(var(--con-p) - var(--content-con-b-w-s));
width: calc(100% - ((var(--con-p) - var(--content-con-b-w-s)) * 2));
height: calc(100% - calc(var(--con-p) * 2) + var(--content-con-b-w) + var(--content-con-b-w-s));
background: var(--content-con-b-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Image --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-3);
padding: 0px;
z-index: 1;][comment]-- Image Triangle --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--img-tri-bg-3);
padding: 0px;
pointer-events: auto;][comment]

-- Image Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--quote-p);
background: var(--quote-bg-3);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--text-c);
font-size: var(--quote-f-s);
font-family: var(--header-f);
line-height: var(--header-l-h);
text-align: right;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: flex-end;]Aenean posuere vehicula, nec posuere vitae. Curabitur justo, dictum in dapibus ut, consequat eu ipsum.
- NOT ME[/border][comment]
-- Image Text End --[/comment][/border][/border][comment]
-- Image End --[/comment][/border][comment]
-- Image Container End --[/comment][/border][/tab]

[/tabs][/border][/border][comment]-- Fake Image Container --[/comment][border=transparent;
box-sizing: border-box;
flex: 3 1  var(--con-w);
height: var(--h);
padding: 0px;][/border][/border][/border]

And here I am just wanting to know how to make centered, appealing tabs lmao

I wish I had your level of coding talent

 

[Ambiloquous]

And here I am just wanting to know how to make centered, appealing tabs lmao

I wish I had your level of coding talent

Omgerd trying to move tabs anywhere but left-aligned is such a painnn. Good luck! If you need any help, I can defo try my hand at teaching again.

no u I've seen ur codes, wdym

 

[Anaxileah]

Omgerd trying to move tabs anywhere but left-aligned is such a painnn. Good luck! If you need any help, I can defo try my hand at teaching again.

no u I've seen ur codes, wdym

I actually figured it out with the last hour and a half of fighting the BBCode but ty

excuse u, the time an effort u put into this shit is way better than any I do lmaooo

 

[Ambiloquous]

I actually figured it out with the last hour and a half of fighting the BBCode but ty

excuse u, the time an effort u put into this shit is way better than any I do lmaooo

Whoo, you go, Anaxileah! Wish I learned that fast the first time around.

sjflkds the only thing I'm good for is putting time and effort into creating codes I won't even use

 

[Anaxileah]

Whoo, you go, Anaxileah! Wish I learned that fast the first time around.

sjflkds the only thing I'm good for is putting time and effort into creating codes I won't even use

Ana works fine uwu and I tend to not let things go until I've figured them out both a blessing and a curse

oml ma dude that's a fuckin mood

 

[Ambiloquous]

Ana works fine uwu and I tend to not let things go until I've figured them out both a blessing and a curse

oml ma dude that's a fuckin mood

Whew, gimme some of that motivation. Half and half, what do you say? I'm the opposite, I just give up and tell myself I'll figure it out one day.

fr fr

 

[Anaxileah]

Whew, gimme some of that motivation. Half and half, what do you say? I'm the opposite, I just give up and tell myself I'll figure it out one day.

fr fr

dude I would if I could, it gets so exhausting

 

[TheTinyAsian]

These are actually insane and I'm 99.9% sure you're actually a wizard.
Also, I'm very impressed with your ability to stay motivated enough to make such nice, intricate things! More than once!
An inspiration tbh

 

[Ambiloquous]

These are actually insane and I'm 99.9% sure you're actually a wizard.
Also, I'm very impressed with your ability to stay motivated enough to make such nice, intricate things! More than once!
An inspiration tbh

Gasp! You've figured me out! Yes, it is I, Wizard Ambiloquous, here to terrorize the code-seekers of RPNation!
Aww, thank you! Not gonna lie, after the first page it was tough to keep churning out codes, but I think I'm pretty proud for sticking with this thread for uhhhh five months now? I can't math.
LKJdfksjf thank youuuu.

 

[Ambiloquous]

Universe UI

Finally a post code. Or an anything code, really.

For the first time in forever, I'm not using accordions or tabs. The only reason I'm using scroll is because shape-outside pushes text outside the box, and I'm too lazy to mess around with it more than I have already. The line accents on the top and bottom were quite annoying to figure out — don't squint too hard at them plz. This code was particularly troublesome to colour, and I don't really like the result. I was planning to make a second version of this with the angles flipped, but now I just want to put this out and forget this ever happened.

Be careful with the header text, it can go a little wonk if they're too long on mobile.

Textbox

Hidden Scroll

IN THE UNIVERSE

Artist: Amir Zand

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

"Leo consectetur, vulputate sem quis, laoreet lorem. Sed in eros quis odio convallis tempor. Etiam lectus felis, sollicitudin at auctor a, elementum non erat."

Nullam et odio a ante pellentesque pretium. Integer venenatis ex non ipsum malesuada euismod sit amet ut ante. Duis posuere diam sit amet orci viverra condimentum. Nulla non lobortis orci. Vestibulum erat ante, aliquam eget arcu id, iaculis convallis lorem. Pellentesque rutrum dolor ut sapien tincidunt iaculis. Suspendisse a leo consectetur, vulputate sem quis, laoreet lorem. Sed in eros quis odio convallis tempor. Etiam lectus felis, sollicitudin at auctor a, elementum non erat.

Convallis hendrerit semper. Suspendisse a leo consectetur, vulputate sem quis, laoreet lorem. Sed in eros quis odio convallis tempor. Etiam lectus felis, sollicitudin at auctor a, elementum non erat. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur.

LONG LONG AGO

Spoiler: Code

[comment][font=Barlow][font=Gugi]:][/font][/font][/comment][border=transparent;

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

margin: auto;
box-sizing: border-box;
max-width: 780px; /* Max width */
padding: 0px var(--circle-d-1) 0px var(--circle-d-2);

--h: min(390px, 90vh);

/* Accent colours */
--c-1: #d1483a; /* Header text colour */
--c-2: #4da39f; /* Line colour */
--c-3: rgba(170, 212, 205, 0.9); /* Body background colour */

--line-w: 3px;
--line-m-l: 10px;
--line-m-t: 12px;
--line-c-p: polygon(0 calc(var(--line-w) + 1px), 0 0, 100% 100%, calc(100% - var(--line-w) - 1px) 100%);

--circle-d-1: 1px;
--circle-d-2: 3px;
--circle-w: 12px;

--header-d: 6px;
--header-h: 50px;
--header-f-s: 1.6em;
--header-f: 'Gugi', sans-serif; /* Header font, change font tag above if you change this -- changing the header font may cause the line shift */

--p: 20px;
--d: max(5vw, 40px);
--c-p: polygon(0 0, calc(100% - var(--d)) 0%, 100% var(--d), 100% 100%, var(--d) 100%, 0% calc(100% - var(--d)));

--text-w: 200px;
--text-f-s: 1.05em; /* Text font size, increase or decrease by increments of .1 or .01 */
--text-f: 'Barlow', sans-serif; /* Body text font, change font tag above if you change this */
--text-c: #2b3d47; /* Text colour */
--dialogue-c: #d1483a; /* Dialogue colour */

--img-w: 60px;
--img-h: 200px;
--img: url('https://i.imgur.com/uUCCrwG.jpeg') 50% 0% / cover; /* Image URL, first % is x-value position, second % is y-value position, after / is image size */][comment]-- Top Header --[/comment][border=transparent;
position: relative;
top: calc(var(--d) - var(--line-m-t) - var(--header-d));
box-sizing: border-box;
min-height: calc(var(--d) + var(--line-m-t));
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;][comment]-- Circle --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--circle-w) - var(--header-d) - var(--circle-d-1));
left: calc(100% - var(--circle-w) + var(--circle-d-1));
width: var(--circle-w);
height: var(--circle-w);
border-radius: 50%;
background: var(--c-2);
padding: 0px;
z-index: 2;][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
max-width: -moz-fit-content;
max-width: fit-content;
padding: 0px;
color: var(--c-1);
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: 1.2;]IN THE UNIVERSE[/border][comment]-- Line --[/comment][border=transparent;
margin-top: var(--line-m-t);
margin-left: var(--line-m-l);
box-sizing: border-box;
flex: 1 1;
height: var(--line-w);
background: var(--c-2);
padding: 0px;][/border][border=transparent;
margin-top: var(--line-m-t);
box-sizing: border-box;
flex: 0 0 calc(var(--d) - 9px);
height: calc(var(--d) - 9px);
background: var(--c-2);
padding: 0px;
-webkit-clip-path: var(--line-c-p);
clip-path: var(--line-c-p);][/border][/border][comment]

-- Content --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--h);
padding: 0px;
background: var(--c-3);
-webkit-clip-path: var(--c-p);
clip-path: var(--c-p);
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: stretch;][comment]

-- Text Container --[/comment][border=transparent;
box-sizing: border-box;
flex: 2 1 var(--text-w);
height: var(--h);
padding: 0px;
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--p) var(--p) var(--d) var(--p);
color: var(--text-c);
font-size: var(--text-f-s);
font-family: var(--text-f);
font-kerning: normal;
line-height: 1.6;][b]Artist:[/b] Amir Zand

Lorem ipsum dolor sit amet, consectetur adipiscing elit. [comment]-- Dialogue, copy code from [border=transparent; to [/border] tag for more --[/border][/comment][border=transparent;
display: inline;
padding: 0px;
color: var(--dialogue-c);]"Leo consectetur, vulputate sem quis, laoreet lorem. Sed in eros quis odio convallis tempor. Etiam lectus felis, sollicitudin at auctor a, elementum non erat."[/border] Nullam et odio a ante pellentesque pretium. Integer venenatis ex non ipsum malesuada euismod sit amet ut ante. Duis posuere diam sit amet orci viverra condimentum. Nulla non lobortis orci. Vestibulum erat ante, aliquam eget arcu id, iaculis convallis lorem. Pellentesque rutrum dolor ut sapien tincidunt iaculis. Suspendisse a leo consectetur, vulputate sem quis, laoreet lorem. Sed in eros quis odio convallis tempor. Etiam lectus felis, sollicitudin at auctor a, elementum non erat.

Convallis hendrerit semper. Suspendisse a leo consectetur, vulputate sem quis, laoreet lorem. Sed in eros quis odio convallis tempor. Etiam lectus felis, sollicitudin at auctor a, elementum non erat. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur.[/border][/border][/border][comment]

-- Image --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 2 var(--img-w);
min-width: var(--d);
min-height: var(--img-h);
padding: 0px;
background: var(--img);][/border][/border][comment]-- Top Header --[/comment][border=transparent;
position: relative;
top: calc(0px - var(--d) + var(--line-m-t) + var(--header-d) + 1px);
box-sizing: border-box;
min-height: calc(var(--d) + var(--line-m-t));
padding: 0px;
display: flex;
flex-flow: row-reverse nowrap;
justify-content: flex-start;
align-items: flex-end;][comment]-- Circle --[/comment][border=transparent;
position: absolute;
top: calc(0px + var(--circle-d-2));
left: calc(0px - var(--circle-d-2));
width: var(--circle-w);
height: var(--circle-w);
border-radius: 50%;
background: var(--c-2);
padding: 0px;
z-index: 2;][/border][comment]-- Text --[/comment][border=transparent;
position: relative;
top: 1px;
box-sizing: border-box;
max-width: -moz-fit-content;
max-width: fit-content;
padding: 0px;
color: var(--c-1);
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: 1.2;]LONG LONG AGO[/border][comment]-- Line --[/comment][border=transparent;
margin-bottom: var(--line-m-t);
margin-right: var(--line-m-l);
box-sizing: border-box;
flex: 1 1;
height: var(--line-w);
background: var(--c-2);
padding: 0px;][/border][border=transparent;
margin-bottom: calc(var(--line-m-t) - 1px);
box-sizing: border-box;
flex: 0 0 calc(var(--d) - 9px);
height: calc(var(--d) - 9px);
background: var(--c-2);
padding: 0px;
transform: scaleX(-1) rotate(90deg);
-webkit-clip-path: var(--line-c-p);
clip-path: var(--line-c-p);][/border][/border][/border]

 

[Kaya]

Damn it, Ambi, you truly are a Wizard, hands down

 

[Ambiloquous]

Damn it, Ambi, you truly are a Wizard, hands down

Y'all are making my ego inflate to disproportionate levels lskjdfl.

 

[mediae]

this is stunning!!

 

[Gezellige]

these are literally SO cute what in the world
amazing work! < 3

 

[Ambiloquous]

these are literally SO cute what in the world
amazing work! < 3

KLsdfj no u.
Thank you!

 

[. D O V E]

AMI YOU ARE SO TALENTED

-XO, number 1 fan

 

[Ambiloquous]

AMI YOU ARE SO TALENTED

-XO, number 1 fan

You accidentally put "Ami" instead of "Dove" smh.

 

[Ambiloquous]

Login Error

FEEL MY PAIN >:V

P.S. Click login.
P.P.S. This probably has bugs like my computer.

Textbox

Tabs

No Scroll

• .
• 000

• .
• Error

  Domain Error: 0
  F*ck you, your wifi sucks, please contact your local administrator.

User Accounts

Username:

cloud.peach

Password:

••••••••••

LOGIN

Spoiler: Code

[comment][font=VT323]>:v[/font][/comment][border=transparent;

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

box-sizing: border-box;
padding: 0px;

/* Colours */
--c-base: rgb(250, 246, 245); /* Base colour */
--c-bar: rgb(242, 191, 182); /* Bar colour */
--c-line: rgb(242, 129, 122); /* Border (or line) colour */

--d: 80px;
--w: 400px;
--h: 400px;

--b-r: 10px;
--b: 2px solid var(--c-line); /* Border, change number before px to change border width */
--f-s: 1.38em;
--f: 'VT323', sans-serif;

--bar-p: 3px 10px;
--bar-b-r: 5px;

--box-w: 22px;

--icon-m: 45px 0px 25px 0px;
--icon-s: 6.5em;

--con-m: 10px;
--con-p: 0px 15px;

--text-p: 15px;

--label-p: 0px 5px 0px 2px;
--field-p: 2px 8px;

--login-m: 30px;
--login-w: 80px;
--login-p: 5px 10px;][border=transparent;
position: relative;
margin: auto;
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: center;
overflow-x: auto;][comment]-- Tabs --[/comment][border=transparent;
box-sizing: border-box;
width: 108px;
height: 115px;
padding: 0px;
overflow: hidden;][tabs]

[tab=.].[/tab]

[tab=000][comment]-- Error Window --[/comment][border=transparent;
position: absolute;
top: calc(50% - ((var(--h) - (var(--d) * 3)) / 2));
left: 0px;
box-sizing: border-box;
width: 100%;
height: calc(var(--h) - (var(--d) * 3));
padding: 0px;
border-radius: var(--b-r);
border: var(--b);
background: var(--c-base);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
overflow: hidden;
pointer-events: none;
z-index: 2;][comment]

-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--bar-p);
border-bottom: var(--b);
background: var(--c-bar);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Title --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: 0px;
color: var(--c-base);
font-size: var(--f-s);
font-family: var(--f);
line-height: 1;]Error[/border][comment]-- ! --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--box-w);
height: var(--box-w);
padding: 2px 0px 0px 0px;
border-radius: var(--bar-b-r);
border: var(--b);
background: var(--c-base);
color: var(--c-line);
font-size: 0.9em;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-exclamation[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--text-p);
color: var(--c-line);
font-size: var(--f-s);
font-family: var(--f);
line-height: 1;]Domain Error: 0 
F*ck you, your wifi sucks, please contact your local administrator.[/border][/border][/tab]

[/tabs][/border][comment]-- Login Window --[/comment][border=transparent;
position: absolute;
top: 0px;
left: calc(50% - (min(100%, (var(--w) - var(--d))) / 2));
box-sizing: border-box;
width: calc(var(--w) - var(--d));
max-width: 100%;
height: var(--h);
padding: 0px;
border-radius: var(--b-r);
border: var(--b);
background: var(--c-base);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
overflow: hidden;
pointer-events: none;][comment]

-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--bar-p);
border-bottom: var(--b);
background: var(--c-bar);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Title --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: 0px;
color: var(--c-base);
font-size: var(--f-s);
font-family: var(--f);
line-height: 1;]User Accounts[/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--box-w);
height: var(--box-w);
padding: 0px;
border-radius: var(--bar-b-r);
border: var(--b);
background: var(--c-base);
color: var(--c-line);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]

-- Icon --[/comment][border=transparent;
margin: var(--icon-m);
box-sizing: border-box;
padding: 0px;
color: var(--c-bar);
font-size: var(--icon-s);
line-height: 1;][fa]fas fa-cloud[/fa][/border][comment]

-- Username --[/comment][border=transparent;
margin-top: var(--con-m);
box-sizing: border-box;
width: 100%;
padding: var(--con-p);
display: flex;
flex-flow: row nowrap;
align-items: center;][comment]-- Label --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: var(--label-p);
color: var(--c-line);
font-size: var(--f-s);
font-family: var(--f);
line-height: 1;]Username:[/border][comment]-- Field --[/comment][border=transparent;
box-sizing: border-box;
flex: 2 1;
padding: var(--field-p);
border-radius: var(--bar-b-r);
border: var(--b);
color: var(--c-bar);
font-size: var(--f-s);
font-family: var(--f);
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]cloud.peach[/border][/border][comment]

-- Password --[/comment][border=transparent;
margin-top: var(--con-m);
box-sizing: border-box;
width: 100%;
padding: var(--con-p);
display: flex;
flex-flow: row nowrap;
align-items: center;][comment]-- Label --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: var(--label-p);
color: var(--c-line);
font-size: var(--f-s);
font-family: var(--f);
line-height: 1;]Password:[/border][comment]-- Field --[/comment][border=transparent;
box-sizing: border-box;
flex: 2 1;
padding: var(--field-p);
border-radius: var(--bar-b-r);
border: var(--b);
color: var(--c-bar);
font-size: var(--f-s);
font-family: var(--f);
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]••••••••••[/border][/border][comment]

-- Login Button --[/comment][border=transparent;
margin-top: var(--login-m);
box-sizing: border-box;
width: var(--login-w);
padding: var(--bar-p);
border-radius: var(--bar-b-r);
border: var(--b);
background: var(--c-bar);
color: var(--c-base);
font-size: var(--f-s);
font-family: var(--f);
line-height: 1;
text-align: center;]LOGIN[/border][/border][/border][/border]

 

[Ambiloquous]

Block Bundle

In the same vein as the header pack, I present to you: the block bundle.

One day, I was going through the RPN block styles, and I had the idea to code some blocks of my own. I was just going to leave them in my workshop before I remembered I had a code thread with no standards to what I put there. And that's how this came to be.

You could probably use the string-and-beads block for links or a legend.

Edit: I feel like people haven't realized this, but you can add and take out "beads" (called circles in the comments), and the string will automatically resize to fit them.

Textbox

No Scroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Spoiler: Simple Code

[comment][font=Rubik]:x[/font][/comment][border=transparent;

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

margin: auto;
box-sizing: border-box;
max-width: 1100px;  /* Max width */
width: -moz-fit-content;
width: fit-content;
padding: 12px; /* Padding */

border-radius: 6px; /* Border radius, increase for rounder corners, decrease for less */
border-left: 4px solid #36b42b; /* Border, number before px is width, solid is style, hex code is colour */
background: rgba(190, 210, 190, 0.2); /* Background colour */ 

font-family: 'Rubik', sans-serif; /* Font, change font tag above if you change this */]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/border]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Spoiler: Simple Icon Code

[comment][font=Rubik]:x[/font][/comment][border=transparent;

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

margin: auto;
box-sizing: border-box;
max-width: 1100px;  /* Max width */
padding: 0px;

--p: 12px; /* Padding */
--br: 6px; /* Border radius, increase for rounder corners, decrease for less */
--b: 4px solid #36b42b; /* Border, number before px is width, solid is style, hex code is colour */
--bg: rgba(190, 210, 190, 0.2); /* Background colour */

--icon-m: 0px 0px 0px 12px;
--icon-c: #36b42b; /* Icon colour */
--icon-s: 1.3em; /* Icon size, increase or decrease by .1 increments */

--f: 'Rubik', sans-serif; /* Font, change font tag above if you change this */ 

border-radius: var(--br);
border-left: var(--b);
background: var(--bg);
display: flex;
flex-flow: row wrap;
align-items: center;][comment]-- Icon --[/comment][border=transparent;
margin: var(--icon-m);
flex: 0 0;
box-sizing: border-box;
padding: 0px;
color: var(--icon-c);
font-size: var(--icon-s);
line-height: 0;][fa]far fa-check-circle[/fa][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
min-width: 240px;
padding: var(--p);
font-family: var(--f);]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/border][/border]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vestibulum lacinia eget tellus in molestie. Ut euismod neque nec nibh interdum, cursus varius odio sagittis. Phasellus scelerisque, erat vitae tincidunt lacinia, mauris tortor pharetra odio, eu mollis justo erat quis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero justo, ultrices ac rhoncus sit amet, dignissim sit amet nisi. Ut imperdiet lacinia arcu, ut fringilla erat aliquet eget. Vestibulum sit amet fringilla nibh. Donec mauris lectus, bibendum accumsan ex eu, luctus sodales lorem. Quisque ut lectus id justo sagittis hendrerit vel finibus arcu. Quisque varius dui in ligula consequat blandit.

Spoiler: Big Icon Code

[comment][font=Rubik]:x[/font][/comment][border=transparent;

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

margin: auto;
box-sizing: border-box;
max-width: 1100px; /* Max width */
padding: 0px;

--p: 12px; /* Padding */
--br: 0px; /* Border radius, increase for rounder corners, decrease for less */
--b: 4px solid #3DADF2; /* Border, number before px is width, solid is style, hex code is colour */
--bg: rgba(190, 200, 210, 0.2); /* Background colour */
--f: 'Rubik', sans-serif; /* Font, change font tag above if you change this */

--icon-c: #3DADF2; /* Icon colour */
--icon-m: 2px 10px 10px 0px; /* Icon margin, top right bottom left */
--icon-s: 3em; /* Icon size, increase or decrease by .1 increments */

display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;][comment]-- Icon --[/comment][border=transparent;
margin: var(--icon-m);
box-sizing: border-box;
flex: 0 0;
padding: 0px;
color: var(--icon-c);
font-size: var(--icon-s);
line-height: 0;][fa]far fa-info-circle[/fa][/border][comment]-- Text Container --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
max-width: 100%;
min-width: 240px;
padding: var(--p);
border-radius: var(--br);
border-left: var(--b);
background: var(--bg); 
font-family: var(--f);]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vestibulum lacinia eget tellus in molestie. Ut euismod neque nec nibh interdum, cursus varius odio sagittis. Phasellus scelerisque, erat vitae tincidunt lacinia, mauris tortor pharetra odio, eu mollis justo erat quis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero justo, ultrices ac rhoncus sit amet, dignissim sit amet nisi. Ut imperdiet lacinia arcu, ut fringilla erat aliquet eget. Vestibulum sit amet fringilla nibh. Donec mauris lectus, bibendum accumsan ex eu, luctus sodales lorem. Quisque ut lectus id justo sagittis hendrerit vel finibus arcu. Quisque varius dui in ligula consequat blandit.[/border][/border]

Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vestibulum lacinia eget tellus in molestie. Ut euismod neque nec nibh interdum, cursus varius odio sagittis. Phasellus scelerisque, erat vitae tincidunt lacinia, mauris tortor pharetra odio, eu mollis justo erat quis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero justo, ultrices ac rhoncus sit amet, dignissim sit amet nisi. Ut imperdiet lacinia arcu, ut fringilla erat aliquet eget. Vestibulum sit amet fringilla nibh. Donec mauris lectus, bibendum accumsan ex eu, luctus sodales lorem. Quisque ut lectus id justo sagittis hendrerit vel finibus arcu. Quisque varius dui in ligula consequat blandit.

Spoiler: Big Icon Label Code

[comment][font=Rubik]:x[/font][/comment][border=transparent;

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

margin: auto;
box-sizing: border-box;
max-width: 1100px; /* Max width */
padding: 0px;

--p: 12px; /* Padding */
--br: 0px; /* Border radius, increase for rounder corners, decrease for less */
--b: 4px solid #3DADF2; /* Border, number before px is width, solid is style, hex code is colour */
--bg: rgba(190, 200, 210, 0.2); /* Background colour */
--f: 'Rubik', sans-serif; /* Font, change font tag above if you change this */

--m: 10px 0px 10px 0px;

--label-p: 1px 6px 0px 6px;
--label-c: rgb(245, 245, 245); /* Label text colour */

--icon-c: #3DADF2; /* Icon colour */
--icon-m: 10px 10px 0px 0px; /* Icon margin, top right bottom left */
--icon-s: 3em; /* Icon size, increase or decrease by .1 increments */

display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;][comment]-- Label + Icon --[/comment][border=transparent;
margin: var(--m);
box-sizing: border-box;
flex: 0 0;
padding: 0px;
display: flex;
flex-flow: column nowrap;
align-items: center;][comment]-- Label --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
min-height: 20px;
padding: var(--label-p);
background: var(--icon-c);
color: var(--label-c);
font-family: var(--f);
font-weight: bold;
line-height: 1.5;]Info[/border][comment]-- Icon --[/comment][border=transparent;
margin: var(--icon-m);
box-sizing: border-box;
padding: 0px;
color: var(--icon-c);
font-size: var(--icon-s);
line-height: 0;][fa]far fa-info-circle[/fa][/border][/border][comment]-- Text Container --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
max-width: 100%;
min-width: 240px;
padding: var(--p);
border-radius: var(--br);
border-left: var(--b);
background: var(--bg); 
font-family: var(--f);]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vestibulum lacinia eget tellus in molestie. Ut euismod neque nec nibh interdum, cursus varius odio sagittis. Phasellus scelerisque, erat vitae tincidunt lacinia, mauris tortor pharetra odio, eu mollis justo erat quis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero justo, ultrices ac rhoncus sit amet, dignissim sit amet nisi. Ut imperdiet lacinia arcu, ut fringilla erat aliquet eget. Vestibulum sit amet fringilla nibh. Donec mauris lectus, bibendum accumsan ex eu, luctus sodales lorem. Quisque ut lectus id justo sagittis hendrerit vel finibus arcu. Quisque varius dui in ligula consequat blandit.[/border][/border]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vestibulum lacinia eget tellus in molestie. Ut euismod neque nec nibh interdum, cursus varius odio sagittis. Phasellus scelerisque, erat vitae tincidunt lacinia, mauris tortor pharetra odio, eu mollis justo erat quis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero justo, ultrices ac rhoncus sit amet, dignissim sit amet nisi. Ut imperdiet lacinia arcu, ut fringilla erat aliquet eget. Vestibulum sit amet fringilla nibh. Donec mauris lectus, bibendum accumsan ex eu, luctus sodales lorem. Quisque ut lectus id justo sagittis hendrerit vel finibus arcu. Quisque varius dui in ligula consequat blandit.

Spoiler: String Code

[comment][font=Rubik]:x[/font][/comment][border=transparent;

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

margin: auto;
box-sizing: border-box;
max-width: 1100px; /* Max width */
padding: 0px;

--bar-h: 5px;
--bar-bg: #9266F2; /* Bar colour */

--m: 0px 10px;

--str-w: 3px;
--str-p: 40px 0px 0px 0px;
--str-bg: #DCC13E; /* String colour */

--cir-m: 6px 0px 0px 0px;
--cir-w: 25px;
--cir-c: rgb(245, 245, 245); /* Circle text colour */

--text-p: 12px; /* Text padding */
--text-bg: rgba(210, 190, 210, 0.2); /* Text background colour */
--f: 'Rubik', sans-serif; /* Font, change font tag above if you change this */][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
background: var(--bar-bg);][/border][comment]

-- Container --[/comment][border=transparent;
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;][comment]

-- String Container --[/comment][border=transparent;
margin: var(--m);
box-sizing: border-box;
flex: 0 0 var(--cir-w);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- String --[/comment][border=transparent;
box-sizing: border-box;
width: var(--str-w);
padding: var(--str-p);
background: var(--str-bg);
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Circles --[/comment][comment]-- Circle 1 --[/comment][border=transparent;
margin: var(--cir-m);
box-sizing: border-box;
width: var(--cir-w);
flex: 0 0 var(--cir-w);
padding: 0px;
border-radius: 50%;
background: var(--bar-bg); /* Circle background colour */
color: var(--cir-c);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-bolt[/fa][/border][comment]-- Circle 2 --[/comment][border=transparent;
margin: var(--cir-m);
box-sizing: border-box;
width: var(--cir-w);
flex: 0 0 var(--cir-w);
padding: 0px;
border-radius: 50%;
background: var(--bar-bg); /* Circle background colour */
color: var(--cir-c);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-star[/fa][/border][comment]-- Circle 3 --[/comment][border=transparent;
margin: var(--cir-m);
box-sizing: border-box;
width: var(--cir-w);
flex: 0 0 var(--cir-w);
padding: 0px;
border-radius: 50%;
background: var(--bar-bg); /* Circle background colour */
color: var(--cir-c);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-dagger[/fa][/border][comment]-- Knot --[/comment][border=transparent;
margin: 3px 0px;
box-sizing: border-box;
width: calc(var(--str-w) + 4px);
flex: 0 0 7px;
padding: 0px;
border-radius: 50%;
background: var(--str-bg);][/border][/border][/border][comment]-- String Container End --[/comment][comment]

-- Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
min-width: 240px;
padding: var(--text-p);
background: var(--text-bg);
font-family: var(--f);]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vestibulum lacinia eget tellus in molestie. Ut euismod neque nec nibh interdum, cursus varius odio sagittis. Phasellus scelerisque, erat vitae tincidunt lacinia, mauris tortor pharetra odio, eu mollis justo erat quis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero justo, ultrices ac rhoncus sit amet, dignissim sit amet nisi. Ut imperdiet lacinia arcu, ut fringilla erat aliquet eget. Vestibulum sit amet fringilla nibh. Donec mauris lectus, bibendum accumsan ex eu, luctus sodales lorem. Quisque ut lectus id justo sagittis hendrerit vel finibus arcu. Quisque varius dui in ligula consequat blandit.[/border][/border][/border]

Magic

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vestibulum lacinia eget tellus in molestie. Ut euismod neque nec nibh interdum, cursus varius odio sagittis. Phasellus scelerisque, erat vitae tincidunt lacinia, mauris tortor pharetra odio, eu mollis justo erat quis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero justo, ultrices ac rhoncus sit amet, dignissim sit amet nisi. Ut imperdiet lacinia arcu, ut fringilla erat aliquet eget. Vestibulum sit amet fringilla nibh. Donec mauris lectus, bibendum accumsan ex eu, luctus sodales lorem. Quisque ut lectus id justo sagittis hendrerit vel finibus arcu. Quisque varius dui in ligula consequat blandit.

Spoiler: String Label Code

[comment][font=Rubik]:x[/font][/comment][border=transparent;

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

margin: auto;
box-sizing: border-box;
max-width: 1100px; /* Max width */
padding: 0px;

--bar-h: 5px;
--bar-bg: #9266F2; /* Bar colour */

--m: 0px 10px;

--str-w: 3px;
--str-p: 40px 0px 0px 0px;
--str-bg: #DCC13E; /* String colour */

--label-m: 6px 0px 0px 0px;
--label-p: 6px 0px 6px 1px;
--label-c: rgb(245, 245, 245); /* Label text colour */

--text-p: 12px; /* Text padding */
--text-bg: rgba(210, 190, 210, 0.2); /* Text background colour */
--f: 'Rubik', sans-serif; /* Font, change font tag above if you change this */][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
background: var(--bar-bg);][/border][comment]

-- Container --[/comment][border=transparent;
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;][comment]

-- String Container --[/comment][border=transparent;
margin: var(--m);
box-sizing: border-box;
flex: 0 0 24px;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- String --[/comment][border=transparent;
box-sizing: border-box;
width: var(--str-w);
padding: var(--str-p);
background: var(--str-bg);
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Label --[/comment][border=transparent;
margin: var(--label-m);
box-sizing: border-box;
min-width: 20px;
padding: var(--label-p);
background: var(--bar-bg);
color: var(--label-c);
font-family: var(--f);
font-weight: bold;
letter-spacing: 1px;
line-height: 1.5;
writing-mode: vertical-lr;
transform: rotate(180deg);]Magic[/border][comment]-- Knot --[/comment][border=transparent;
margin: 3px 0px;
box-sizing: border-box;
width: calc(var(--str-w) + 4px);
flex: 0 0 7px;
padding: 0px;
border-radius: 50%;
background: var(--str-bg);][/border][/border][/border][comment]-- String Container End --[/comment][comment]

-- Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
min-width: 240px;
padding: var(--text-p);
background: var(--text-bg);
font-family: var(--f);]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vestibulum lacinia eget tellus in molestie. Ut euismod neque nec nibh interdum, cursus varius odio sagittis. Phasellus scelerisque, erat vitae tincidunt lacinia, mauris tortor pharetra odio, eu mollis justo erat quis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero justo, ultrices ac rhoncus sit amet, dignissim sit amet nisi. Ut imperdiet lacinia arcu, ut fringilla erat aliquet eget. Vestibulum sit amet fringilla nibh. Donec mauris lectus, bibendum accumsan ex eu, luctus sodales lorem. Quisque ut lectus id justo sagittis hendrerit vel finibus arcu. Quisque varius dui in ligula consequat blandit.[/border][/border][/border]