Help Coding a Header

[Daddy Dream]

So, I was trying to code a header for a new interest thread suing this code.

Spoiler: Original

[comment]-- Body Font -->[/comment][font=Catamaran][comment][font=Unica One]:>[/font][/comment][border=transparent;

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

/* Colours */
--c-1: #7bc5e4; /* Top colour of gradient */
--c-2: #D9A172; /* Bottom colour of gradient and line */
--star-g: linear-gradient(#D9A172, #A66F51); /* Star gradient */
--text-c: #263F87; /* Text colour */
--quote-c: #273F87; /* Quotation mark colour */
--content-bg: rgba(255, 255, 200, 0.1); /* Content background colour */

/* Main Image URL, change first % (x-axis) and second % (y-axis) before / to shift image position in icon */
--main-img: url('https://i.pinimg.com/236x/1f/23/8d/1f238d7bc5b796a40f222c2d63bbdaed.jpg') no-repeat 50% 40% / cover;

/* Tab 2 Images URL, change first % (x-axis) and second % (y-axis) before / to shift image position in icon */
--img-1: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fshackmanlab.org%2Fwp-content%2Fuploads%2F2013%2F07%2Fperson-placeholder.jpg&f=1&nofb=1') 50% 0% / cover;
--img-2: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fshackmanlab.org%2Fwp-content%2Fuploads%2F2013%2F07%2Fperson-placeholder.jpg&f=1&nofb=1') 50% 0% / cover;
--img-3: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fshackmanlab.org%2Fwp-content%2Fuploads%2F2013%2F07%2Fperson-placeholder.jpg&f=1&nofb=1') 50% 0% / cover;

--w: 1000px;
--h: min(82vh, 540px);
--bg: linear-gradient(var(--c-1) 20%, var(--c-2) 110%);

--tabs-m: 0px 0px 30px 0px;
--tabs-w: 220px;
--tabs-h: 125px;
--tabs-l-h: 3;

--img-b-w: calc(var(--img-w) + 60px);
--img-b-h: calc(var(--img-h) + 60px);
--img-b-bg: linear-gradient(var(--c-1), var(--c-2));

--img-t: -40px;
--img-w: 200px;
--img-h: 280px;
--img-c-p: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

--credit-d: min(30px, 3vh);

--p: 20px;

--mask-h: calc(var(--img-h) + 20px);

--line-w: 2px;
--line-d: 70px;

--line-t-1: 238px;
--line-h-1: calc(var(--tab-t-1) - var(--line-t-1) + 1px);
--line-t-2: 298px;
--line-h-2: calc(var(--tab-t-2) - var(--line-t-2) + 1px);
--line-h-3: calc(var(--tab-t-3) - var(--line-t-1) + 1px);

--tab-d: 60px;
--tab-w: 25px;
--tab-h: 30px;

--tab-t-1: 344px;
--tab-t-s-1: calc(var(--tab-t-1)  - var(--line-d));
--tab-t-2: 388px;
--tab-t-s-2: calc(var(--tab-t-2)  - var(--line-d));
--tab-t-3: 432px;
--tab-t-s-3: calc(var(--tab-t-3)  - var(--line-d));

--header-m: 12px;
--header-f-s: 3em;/* Header font size, increase or decrease by .1 increments */
--header-f: 'Unica One', cursive; /* Header font, change the font tag above code if you change this */

--quote-m-b: -22px;
--quote-m: 20px;
--quote-f-s: 4.5em;

--content-p: 12px;
--content-l-h: 1.5;

--icon-w: 80px;
--icon-h: 120px;
--icon-m-b: 1.5em;

margin: auto;
box-sizing: border-box;
max-width: var(--w);
padding: 0px;][comment]


-- Note --[/comment][border=transparent;
position: relative;
top: calc(0px - var(--img-t));
padding: 5px 0px;
font-size: 0.9em;
line-height: 1;
opacity: 0.5;]Click Stars and Scroll[/border][comment]

-- Main Content --[/comment][border=transparent;
position: relative;
margin-top: calc(0px - var(--img-t));
box-sizing: border-box;
min-height: var(--h);
padding: 0px;
background: var(--bg);
display: flex;
flex-flow: row wrap;
align-items: stretch;][comment]

-- Image + Tabs Section --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1 120px;
padding: 0px var(--p);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Image Border --[/comment][border=transparent;
position: relative;
top: var(--img-t);
box-sizing: border-box;
flex: 0 0 var(--img-b-h);
width: var(--img-b-w);
padding; 0px;
background: var(--img-b-bg);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]

-- Image --[/comment][border=transparent;
box-sizing: border-box;
width: var(--img-w);
height: var(--img-h);
background: var(--main-img);
padding: 0px;
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][/border][comment]

-- Actual Tabs Container --[/comment][border=transparent;
margin: var(--tabs-m);
box-sizing: border-box;
flex: 0 0 var(--tabs-h);
width: var(--tabs-w);
padding: 0px;
line-height: var(--tabs-l-h);
overflow: hidden;][tabs]

[tab=0000000000000000000000][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;
align-items: stretch;
pointer-events: none;][comment]

-- Background Cover --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--bg);
-webkit-mask-image: linear-gradient(transparent var(--mask-h), black var(--mask-h));
padding: 0px;
z-index: 0;][/border][comment]

-- Fake Image + Tabs Section --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 1 1 120px;
padding: 0px var(--p);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
pointer-events: none;][comment]

-- Lines --[/comment][comment]-- Line 1 --[/comment][border=transparent;
position: absolute;
top: var(--line-t-1);
left: calc(50% - var(--tab-d) + (var(--tab-w) / 2) - (var(--line-w) / 2));
width: var(--line-w);
height: calc(var(--line-h-1) - var(--line-d));
background: var(--c-2);
padding: 0px;][/border][comment]-- Line 2 --[/comment][border=transparent;
position: absolute;
top: var(--line-t-2);
left: var(50% - (var(--line-w) / 2));
width: var(--line-w);
height: var(--line-h-2);
background: var(--c-2);
padding: 0px;][/border][comment]-- Line 3 --[/comment][border=transparent;
position: absolute;
top: var(--line-t-1);
left: calc(50% + var(--tab-d) - (var(--tab-w) / 2) - (var(--line-w) / 2));
width: var(--line-w);
height: var(--line-h-3);
background: var(--c-2);
padding: 0px;][/border][comment]

-- Tab Covers --[/comment][comment]-- Tab Cover 1 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t-s-1);
left: calc(50% - var(--tab-d));
width: var(--tab-w);
height: var(--tab-h);
box-sizing: border-box;
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t-2);
left: calc(50% - (var(--tab-w) / 2));
width: var(--tab-w);
height: var(--tab-h);
box-sizing: border-box;
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t-3);
left: calc(50% + var(--tab-d) - var(--tab-w));
width: var(--tab-w);
height: var(--tab-h);
box-sizing: border-box;
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][comment]

-- Fake Image Border --[/comment][border=transparent;
position: relative;
top: var(--img-t);
box-sizing: border-box;
flex: 0 0 var(--img-b-h);
width: var(--img-b-w);
padding; 0px;
clip-path: var(--img-c-p);][/border][comment]

-- Fake Tabs Container --[/comment][border=transparent;
margin: var(--tabs-m);
box-sizing: border-box;
flex: 0 0 var(--tabs-h);
width: var(--tabs-w);
padding: 0px;
line-height: var(--tabs-l-h);
pointer-events: none;][/border][comment]

-- Credits --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--credit-d));
padding: 0px;
color: var(--text-c);
line-height: 1;
opacity: 0.8;]Artist — vikisigh[/border][/border][comment]

-- Content Section --[/comment][border=transparent;
box-sizing: border-box;
flex: 3 1 280px;
height: var(--h);
padding: var(--p);
overflow: hidden;
pointer-events: auto;
z-index: 1;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--p)));
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Content --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - (2 * var(--p)));
height: auto;
padding: 0px;][comment]-- Header --[/comment][border=transparent;
margin-bottom: calc(var(--header-m) / 2);
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
margin-right: var(--header-m);
box-sizing: border-box;
flex: 0 0;
min-width: -moz-fit-content;
min-width: fit-content;
padding: 0px;
background: var(--star-g);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: 1;]LORE[/border][comment]-- Line --[/comment][border=transparent;
margin-right: var(--header-m);
flex: 1 1;
height: var(--line-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Star --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 calc(var(--tab-w) - 4px);
height: calc(var(--tab-h) - 4px);
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--content-p);
background: var(--content-bg);
color: var(--text-c);
line-height: var(--content-l-h);][comment]-- Quote --[/comment][border=transparent;
display: inline-block;
margin-bottom: var(--quote-m-b);
box-sizing: border-box;
padding: 0px;][border=transparent;
margin-right: var(--quote-m);
float: left;
box-sizing: border-box;
color: var(--quote-c);
font-size: var(--quote-f-s);
line-height: 1;
padding: 0px;]“[/border][border=transparent;
margin-left: var(--quote-m);
float: right;
box-sizing: border-box;
color: var(--quote-c);
font-size: var(--quote-f-s);
line-height: 1;
padding: 0px;]”[/border][border=transparent;
display: inline;
font-style: italic;
padding: 0px;]Welcome to the Island of the Lost, dear players![/border][/border]

[pindent]While enjoying your day out and about, you are suddenly snatched up from behind and pulled into a van, losing consciousness along the way. Lightly bound, gagged, then thrown in an air crate, you are awoken by the sound of a plane as it rumbles through the sky. Darkness is what greets you when you wake up, and the sound of the plane engines further assist you with the process. You are only able to properly assess what is happening before you suddenly feel yourself rolling forward and drop off into the air. As your box wildly tumbles towards the earth, fear is the only emotion you feel when you crash against the oceans waters and your crate shatters apart, knocking you out once more. When you awaken again, you are on a sandy beach with the sun beating down on your skin and gulls squawking above.[/pindent][/border][comment]-- Header --[/comment][border=transparent;
margin-top: calc(var(--header-m) * 0.8);
margin-bottom: calc(var(--header-m) / 2);
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
margin-right: var(--header-m);
box-sizing: border-box;
flex: 0 0;
min-width: -moz-fit-content;
min-width: fit-content;
padding: 0px;
background: var(--star-g);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: 1;]MAP[/border][comment]-- Line --[/comment][border=transparent;
margin-right: var(--header-m);
flex: 1 1;
height: var(--line-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Star --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 calc(var(--tab-w) - 4px);
height: calc(var(--tab-h) - 4px);
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--content-p);
background: var(--content-bg);
color: var(--text-c);
line-height: var(--content-l-h);][pindent]This map shows different landmarks of the island, but beware as the further into the island one goes, the more dangerous it gets. Player do not access to the map, but sponsors do. They can send directions down to the player they are sponsoring to places on the map if they so wished.

[img]https://cdn2.inkarnate.com/X8XfaqDesaWMdT2bYQuqK8?disposition=attachment[/img][/pindent][/border][/border][comment]
-- Content End --[/comment][/border][/border][/border][/tab]

[tab=0000000000000000000000][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;
align-items: stretch;
pointer-events: none;][comment]

-- Background Cover --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--bg);
-webkit-mask-image: linear-gradient(transparent var(--mask-h), black var(--mask-h));
padding: 0px;
z-index: 0;][/border][comment]

-- Fake Image + Tabs Section --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 1 1 120px;
padding: 0px var(--p);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
pointer-events: none;][comment]

-- Lines --[/comment][comment]-- Line 1 --[/comment][border=transparent;
position: absolute;
top: var(--line-t-1);
left: calc(50% - var(--tab-d) + (var(--tab-w) / 2) - (var(--line-w) / 2));
width: var(--line-w);
height: var(--line-h-1);
background: var(--c-2);
padding: 0px;][/border][comment]-- Line 2 --[/comment][border=transparent;
position: absolute;
top: var(--line-t-2);
left: var(50% - (var(--line-w) / 2));
width: var(--line-w);
height: calc(var(--line-h-2) - var(--line-d));
background: var(--c-2);
padding: 0px;][/border][comment]-- Line 3 --[/comment][border=transparent;
position: absolute;
top: var(--line-t-1);
left: calc(50% + var(--tab-d) - (var(--tab-w) / 2) - (var(--line-w) / 2));
width: var(--line-w);
height: var(--line-h-3);
background: var(--c-2);
padding: 0px;][/border][comment]

-- Tab Covers --[/comment][comment]-- Tab Cover 1 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t-1);
left: calc(50% - var(--tab-d));
width: var(--tab-w);
height: var(--tab-h);
box-sizing: border-box;
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t-s-2);
left: calc(50% - (var(--tab-w) / 2));
width: var(--tab-w);
height: var(--tab-h);
box-sizing: border-box;
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t-3);
left: calc(50% + var(--tab-d) - var(--tab-w));
width: var(--tab-w);
height: var(--tab-h);
box-sizing: border-box;
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][comment]

-- Fake Image Border --[/comment][border=transparent;
position: relative;
top: var(--img-t);
box-sizing: border-box;
flex: 0 0 var(--img-b-h);
width: var(--img-b-w);
padding; 0px;
clip-path: var(--img-c-p);][/border][comment]

-- Fake Tabs Container --[/comment][border=transparent;
margin: var(--tabs-m);
box-sizing: border-box;
flex: 0 0 var(--tabs-h);
width: var(--tabs-w);
padding: 0px;
line-height: var(--tabs-l-h);
pointer-events: none;][/border][/border][comment]

-- Content Section --[/comment][border=transparent;
box-sizing: border-box;
flex: 3 1 280px;
height: var(--h);
padding: var(--p);
overflow: hidden;
pointer-events: auto;
z-index: 1;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--p)));
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Content --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - (2 * var(--p)));
height: auto;
padding: 0px;][comment]-- Header --[/comment][border=transparent;
margin-bottom: calc(var(--header-m) / 2);
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
margin-right: var(--header-m);
box-sizing: border-box;
flex: 0 0;
min-width: -moz-fit-content;
min-width: fit-content;
padding: 0px;
background: var(--star-g);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: 1;]PLAYERS[/border][comment]-- Line --[/comment][border=transparent;
margin-right: var(--header-m);
flex: 1 1;
height: var(--line-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Star --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 calc(var(--tab-w) - 4px);
height: calc(var(--tab-h) - 4px);
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--content-p);
background: var(--content-bg);
color: var(--text-c);
line-height: var(--content-l-h);][comment]-- Quote --[/comment][border=transparent;
display: inline-block;
margin-bottom: var(--quote-m-b);
box-sizing: border-box;
padding: 0px;][border=transparent;
margin-right: var(--quote-m);
float: left;
box-sizing: border-box;
color: var(--quote-c);
font-size: var(--quote-f-s);
line-height: 1;
padding: 0px;]“[/border][border=transparent;
margin-left: var(--quote-m);
float: right;
box-sizing: border-box;
color: var(--quote-c);
font-size: var(--quote-f-s);
line-height: 1;
padding: 0px;]”[/border][border=transparent;
display: inline;
font-style: italic;
padding: 0px;]You are to survive! Run around like little mice and entertain us![/border][/border]

[pindent]Players are the entertainment to the Wealthy(Sponsors) and the lifeblood of the island. They are what brings in the cashflow and causes more sponsors to come flowing in. Winning players are granted massive rewards to themselves and their families, and the rewards double if you are a returning player to the game. Because of this, the poorer community is split between viewing being selected as an honor and being selected as a death sentence.[/pindent][/border][comment]-- Header --[/comment][border=transparent;
margin-top: calc(var(--header-m) * 0.8);
margin-bottom: calc(var(--header-m) / 2);
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
margin-right: var(--header-m);
box-sizing: border-box;
flex: 0 0;
min-width: -moz-fit-content;
min-width: fit-content;
padding: 0px;
background: var(--star-g);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: 1;]PARTICIPATING[/border][comment]-- Line --[/comment][border=transparent;
margin-right: var(--header-m);
flex: 1 1;
height: var(--line-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Star --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 calc(var(--tab-w) - 4px);
height: calc(var(--tab-h) - 4px);
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--content-p);
background: var(--content-bg);
color: var(--text-c);
line-height: var(--content-l-h);][comment]

-- Image + Text 1 --[/comment][border=transparent;
margin-bottom: var(--icon-m-b);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
padding: 0px;][border=transparent;
margin-right: var(--content-p);
flex: 0 0 var(--icon-w);
height: var(--icon-h);
background: var(--img-1);
padding: 0px;
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][border=transparent;
flex: 1 1;
padding: 0px;]Lorem ipsum id eros vitae augue ultricies efficitur. Tempor massa ut, gravida lorem. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Nullam dapibus nunc risus. Nullam dapibus nunc risus. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Sed finibus lectus eget fermentum consectetur. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Sed finibus lectus eget fermentum consectetur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem.[/border][/border][comment]

-- Image + Text 2 --[/comment][border=transparent;
margin-bottom: var(--icon-m-b);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
padding: 0px;][border=transparent;
margin-right: var(--content-p);
flex: 0 0 var(--icon-w);
height: var(--icon-h);
background: var(--img-2);
padding: 0px;
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][border=transparent;
flex: 1 1;
padding: 0px;]Vestibulum id eros vitae augue ultricies efficitur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Nullam dapibus nunc risus. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Sed finibus lectus eget fermentum consectetur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem.[/border][/border][comment]

-- Image + Text 3 --[/comment][border=transparent;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
padding: 0px;][border=transparent;
margin-right: var(--content-p);
flex: 0 0 var(--icon-w);
height: var(--icon-h);
background: var(--img-3);
padding: 0px;
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][border=transparent;
flex: 1 1;
padding: 0px;]Restibulum id eros vitae augue ultricies efficitur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Nullam dapibus nunc risus. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Sed finibus lectus eget fermentum consectetur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem.[/border][/border][comment]

-- Image + Text 4 --[/comment]
[border=transparent;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
padding: 0px;][border=transparent;
margin-right: var(--content-p);
flex: 0 0 var(--icon-w);
height: var(--icon-h);
background: var(--img-3);
padding: 0px;
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][border=transparent;
flex: 1 1;
padding: 0px;]Restibulum id eros vitae augue ultricies efficitur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Nullam dapibus nunc risus. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Sed finibus lectus eget fermentum consectetur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem.[/border][/border][comment]

-- Image + Text 5 --[/comment]
[border=transparent;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
padding: 0px;][border=transparent;
margin-right: var(--content-p);
flex: 0 0 var(--icon-w);
height: var(--icon-h);
background: var(--img-3);
padding: 0px;
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][border=transparent;
flex: 1 1;
padding: 0px;]Restibulum id eros vitae augue ultricies efficitur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Nullam dapibus nunc risus. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Sed finibus lectus eget fermentum consectetur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem.[/border][/border][comment]

-- Image + Text 6 --[/comment]
[border=transparent;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
padding: 0px;][border=transparent;
margin-right: var(--content-p);
flex: 0 0 var(--icon-w);
height: var(--icon-h);
background: var(--img-3);
padding: 0px;
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][border=transparent;
flex: 1 1;
padding: 0px;]Restibulum id eros vitae augue ultricies efficitur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Nullam dapibus nunc risus. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Sed finibus lectus eget fermentum consectetur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem.[/border][/border][/border][/border][comment]
-- Content End --[/comment][/border][/border][/border][/tab]

[tab=0000000000000000000000][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;
align-items: stretch;
pointer-events: none;][comment]

-- Background Cover --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--bg);
-webkit-mask-image: linear-gradient(transparent var(--mask-h), black var(--mask-h));
padding: 0px;
z-index: 0;][/border][comment]

-- Fake Image + Tabs Section --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 1 1 120px;
padding: 0px var(--p);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
pointer-events: none;][comment]

-- Lines --[/comment][comment]-- Line 1 --[/comment][border=transparent;
position: absolute;
top: var(--line-t-1);
left: calc(50% - var(--tab-d) + (var(--tab-w) / 2) - (var(--line-w) / 2));
width: var(--line-w);
height: var(--line-h-1);
background: var(--c-2);
padding: 0px;][/border][comment]-- Line 2 --[/comment][border=transparent;
position: absolute;
top: var(--line-t-2);
left: var(50% - (var(--line-w) / 2));
width: var(--line-w);
height: var(--line-h-2);
background: var(--c-2);
padding: 0px;][/border][comment]-- Line 3 --[/comment][border=transparent;
position: absolute;
top: var(--line-t-1);
left: calc(50% + var(--tab-d) - (var(--tab-w) / 2) - (var(--line-w) / 2));
width: var(--line-w);
height: calc(var(--line-h-1) - var(--line-d));
background: var(--c-2);
padding: 0px;][/border][comment]

-- Tab Covers --[/comment][comment]-- Tab Cover 1 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t-1);
left: calc(50% - var(--tab-d));
width: var(--tab-w);
height: var(--tab-h);
box-sizing: border-box;
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t-2);
left: calc(50% - (var(--tab-w) / 2));
width: var(--tab-w);
height: var(--tab-h);
box-sizing: border-box;
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t-s-1);
left: calc(50% + var(--tab-d) - var(--tab-w));
width: var(--tab-w);
height: var(--tab-h);
box-sizing: border-box;
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][comment]

-- Fake Image Border --[/comment][border=transparent;
position: relative;
top: var(--img-t);
box-sizing: border-box;
flex: 0 0 var(--img-b-h);
width: var(--img-b-w);
padding; 0px;
clip-path: var(--img-c-p);][/border][comment]

-- Fake Tabs Container --[/comment][border=transparent;
margin: var(--tabs-m);
box-sizing: border-box;
flex: 0 0 var(--tabs-h);
width: var(--tabs-w);
padding: 0px;
line-height: var(--tabs-l-h);
pointer-events: none;][/border][/border][comment]

-- Content Section --[/comment][border=transparent;
box-sizing: border-box;
flex: 3 1 280px;
height: var(--h);
padding: var(--p);
overflow: hidden;
pointer-events: auto;
z-index: 1;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--p)));
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Content --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - (2 * var(--p)));
height: auto;
padding: 0px;][comment]-- Header --[/comment][border=transparent;
margin-bottom: calc(var(--header-m) / 2);
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
margin-right: var(--header-m);
box-sizing: border-box;
flex: 0 0;
min-width: -moz-fit-content;
min-width: fit-content;
padding: 0px;
background: var(--star-g);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: 1;]ACT VI[/border][comment]-- Line --[/comment][border=transparent;
margin-right: var(--header-m);
flex: 1 1;
height: var(--line-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Star --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 calc(var(--tab-w) - 4px);
height: calc(var(--tab-h) - 4px);
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--content-p);
background: var(--content-bg);
color: var(--text-c);
line-height: var(--content-l-h);][pindent]“I think we ought to live happily ever after," and she thought he meant it. Sophie knew that living happily ever after with Howl would be a good deal more hair-raising than any storybook made it sound, though she was determined to try.[/pindent]
[pindent]"It should be hair-raising," added Howl.[/pindent]
[pindent]"And you'll exploit me," Sophie said.[/pindent]
[pindent]"And then you'll cut up all my suits to teach me.”[/pindent][/border][comment]-- Header --[/comment][border=transparent;
margin-top: calc(var(--header-m) * 0.8);
margin-bottom: calc(var(--header-m) / 2);
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
margin-right: var(--header-m);
box-sizing: border-box;
flex: 0 0;
min-width: -moz-fit-content;
min-width: fit-content;
padding: 0px;
background: var(--star-g);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: 1;]ACT VII[/border][comment]-- Line --[/comment][border=transparent;
margin-right: var(--header-m);
flex: 1 1;
height: var(--line-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Star --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 calc(var(--tab-w) - 4px);
height: calc(var(--tab-h) - 4px);
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--content-p);
background: var(--content-bg);
color: var(--text-c);
line-height: var(--content-l-h);][pindent]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dictum eu velit eu porttitor. Integer pellentesque lectus ut turpis lacinia ullamcorper. Maecenas sed pharetra ligula. In hac habitasse platea dictumst. Donec est enim, ultrices quis nunc sed, ultricies venenatis nulla. Sed magna arcu, consequat molestie ipsum non, euismod elementum libero. Nullam luctus, nibh in lacinia faucibus, eros velit bibendum tortor, ac imperdiet urna quam quis sem. Vivamus eget diam iaculis, tincidunt arcu sed, finibus odio. Integer eget placerat diam, nec fringilla nisl. Sed eu lacinia purus. Nullam magna est, condimentum ut fringilla ac, accumsan in odio. Duis sed elit non diam egestas convallis. Phasellus eget tellus sed enim hendrerit commodo. Etiam eu ultricies enim, at mollis eros.[/pindent]

[pindent]Nullam dapibus nunc risus. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Sed finibus lectus eget fermentum consectetur. Sed accumsan, ex a condimentum ullamcorper, eros lectus rhoncus purus, sit amet aliquet lectus leo non dolor. Aliquam erat volutpat. Etiam sodales commodo facilisis. Etiam semper porttitor odio. Pellentesque porta justo nunc, id ultrices felis egestas et. Nulla ac neque id metus rhoncus posuere vitae non nisl. Vestibulum id eros vitae augue ultricies efficitur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem.[/pindent][/border][/border][comment]
-- Content End --[/comment][/border][/border][/border][/tab]

[/tabs][/border][/border][comment]

-- Fake Content Section --[/comment][border=transparent;
box-sizing: border-box;
flex: 3 1 280px;
height: var(--h);
padding: 0px;][/border][/border][comment]
-- Main Content End --[/comment][/border][/font]

The part I have been trying to code a header to is this section here (I have 6 sections)

Spoiler: Insert Header Here

[comment]

-- Image + Text 1 --[/comment][border=transparent;
margin-bottom: var(--icon-m-b);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
padding: 0px;][border=transparent;
margin-right: var(--content-p);
flex: 0 0 var(--icon-w);
height: var(--icon-h);
background: var(--img-1);
padding: 0px;
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][border=transparent;
flex: 1 1;
padding: 0px;]Lorem ipsum id eros vitae augue ultricies efficitur. Tempor massa ut, gravida lorem. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Nullam dapibus nunc risus. Nullam dapibus nunc risus. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Sed finibus lectus eget fermentum consectetur. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Sed finibus lectus eget fermentum consectetur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem.[/border][/border]

If someone could explain it to me in simple terms and show me what they did, that would be great. As all the reading and research I have done is failing me lol.