Resource Ami's Lab 2.0 | Mobile Friendly Freebies

[. D O V E]

Install . D O V E

A Dove™ accordion. Very simple. Very eye-searing. Pink hurts.

Okay, I lied, maybe I do want to make a code for every commenter. Maybe. . D O V E

Install . D O V E

It's . D O V E-sama, peasant!

>>>

install
Installing . D O V E...
Install Complete.

>>>

run
Running . D O V E...

Spoiler: Code

[comment]-- Font -->[/comment][font=Inter][border=transparent;

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

--top: 160px;

/* Colours */
--dove-c: rgb(250, 80, 160); /* Dove body colour (and everything else that has that same colour) */
--accent-c: rgb(255, 160, 190); /* Accent colour */
--text-c: rgb(255, 240, 245); /* Body text colour (and everything else with that same colour) */

--head-w: 70px;
--beak-w: 30px;
--beak-l: 20px;
--beak-cp: polygon(100% 0, 0 50%, 100% 100%);
--eye-w: 4px;
--body-h: 108px;
--accent-w-1: 5px;
--accent-w-2: 10px;
--accent-w-3: 3px;
--shadow-d: 5px;

--accordion-w: 400px;
--button-w: 240px;
--button-h: 50px;
--screw-t: 5px;
--screw-l: 5px;
--screw-w: 8px;
--o-eye-w: 10px;

padding: 0px;][comment]-- Dove --[/comment][border=transparent;
position: relative;
margin: auto;
width: 240px;
padding: var(--top) 0px 0px var(--beak-l);][comment]-- Screw --[/comment][border=transparent;
position: absolute;
top: calc(var(--top) + (var(--head-w) / 2) + var(--screw-t));
left: calc((var(--beak-w) / 2) + 4px);
width: calc(var(--screw-w) * 0.7);
height: calc(var(--screw-w) * 0.7);
border-radius: 50%;
background: var(--accent-c);
padding: 0px;
z-index: 3;][/border][comment]

-- Head --[/comment][border=transparent;
position: relative;
top: 3px;
box-sizing: border-box;
width: var(--head-w);
height: var(--head-w);
padding: 0px;
border-radius: 50%;
background: var(--dove-c);
box-shadow: var(--shadow-d) var(--shadow-d) var(--accent-c);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Beak --[/comment][border=transparent;
flex: 0 0 var(--beak-w);
position: relative;
top: 6px;
left: calc(0px - var(--beak-l));
height: 28px;
padding: 0px;
background: var(--dove-c);
-webkit-clip-path: var(--beak-cp);
clip-path: var(--beak-cp);][/border][comment]-- Closed Eye --[/comment][border=transparent;
position: relative;
left: -8px;
width: 24px;
box-sizing: border-box;
height: 13px;
padding: 0px;
border-radius: 0px 0px 13px 13px;
border: var(--eye-w) solid var(--accent-c);
border-top: 0px;
padding: 0px;][/border][/border][comment]
-- Head End --[/comment][comment]

-- Body --[/comment][border=transparent;
position: relative;
margin: auto;
box-sizing: border-box;
width: 200px;
height: var(--body-h);
padding: 0px;
border-radius: 0px 0px 120px 120px;
background: var(--dove-c);
box-shadow: var(--shadow-d) var(--shadow-d) var(--accent-c);
z-index: 2;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-end;][comment]-- Feathers --[/comment][border=transparent;
flex: 0 0 var(--accent-w-2);
margin-top: 20px;
margin-bottom: 6px;
width: 45%;
padding: 0px;
background: var(--accent-c);][/border][border=transparent;
flex: 0 0 var(--accent-w-3);
margin-bottom: 12px;
width: 45%;
padding: 0px;
background: var(--accent-c);][/border][border=transparent;
flex: 0 0 var(--accent-w-1);
margin-bottom: 8px;
width: 45%;
padding: 0px;
background: var(--accent-c);][/border][/border][comment]
-- Body End --[/comment][/border][comment]
-- Dove End --[/comment][comment]

-- Accordion --[/comment][border=transparent;
visibility: hidden;
margin: auto;
box-sizing: border-box;
max-width: var(--accordion-w);
padding: 0px;][accordion=100%]
{slide=[comment]

-- Button --[/comment][border=transparent;
visibility: visible;
position: relative;
margin: auto;
box-sizing: border-box;
max-width: var(--button-w);
min-height: var(--button-h);
padding: 10px;
box-shadow: var(--shadow-d) var(--shadow-d) var(--accent-c);
background: var(--text-c);
color: var(--dove-c);
font-size: 1.6em;
font-weight: bold;
font-variant: normal;
text-align: center;][comment]

-- Screws --[/comment][comment]-- Screw 1 --[/comment][border=transparent;
position: absolute;
top: var(--screw-t);
left: var(--screw-l);
width: var(--screw-w);
height: var(--screw-w);
border-radius: 50%;
background: var(--accent-c);
padding: 0px;][/border][comment]-- Screw 2 --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--screw-t) - var(--screw-w));
left: var(--screw-l);
width: var(--screw-w);
height: var(--screw-w);
border-radius: 50%;
background: var(--accent-c);
padding: 0px;][/border][comment]-- Screw 3 --[/comment][border=transparent;
position: absolute;
top: var(--screw-t);
left: calc(100% - var(--screw-l) - var(--screw-w));
width: var(--screw-w);
height: var(--screw-w);
border-radius: 50%;
background: var(--accent-c);
padding: 0px;][/border][comment]-- Screw 4 --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--screw-t) - var(--screw-w));
left: calc(100% - var(--screw-l) - var(--screw-w));
width: var(--screw-w);
height: var(--screw-w);
border-radius: 50%;
background: var(--accent-c);
padding: 0px;][/border][comment]

-- Button Text --[/comment]Install . D O V E[/border]}[comment]

-- Speech Bubble --[/comment][border=transparent;
visibility: visible;
position: absolute;
top: -420px;
left: calc(50% - 100px);
box-sizing: border-box;
width: 200px;
height: 159px;
padding: 10px 30px;
background: var(--text-c);
-webkit-mask: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcliparts.co%2Fcliparts%2Frij%2Fry4%2Frijry4M7T.png&f=1&nofb=1) no-repeat 50% 50% / contain;
mask: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcliparts.co%2Fcliparts%2Frij%2Fry4%2Frijry4M7T.png&f=1&nofb=1) no-repeat 50% 50% / contain;
color: var(--dove-c);
z-index: 2;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;][border=transparent;
position: relative;
top: -16px;
padding: 0px;]It's . D O V E-[i]sama,[/i] peasant![/border][/border][comment]

-- Speech Bubble Shadow --[/comment][border=transparent;
visibility: visible;
position: absolute;
top: -417px;
left: calc(50% - 100px + 3px);
box-sizing: border-box;
width: 200px;
height: 159px;
padding: 10px 30px;
background: var(--accent-c);
-webkit-mask: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcliparts.co%2Fcliparts%2Frij%2Fry4%2Frijry4M7T.png&f=1&nofb=1) no-repeat 50% 50% / contain;
mask: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcliparts.co%2Fcliparts%2Frij%2Fry4%2Frijry4M7T.png&f=1&nofb=1) no-repeat 50% 50% / contain;
color: var(--dove-c);
z-index: 1;][/border][comment]

-- Open Eye --[/comment][border=transparent;
visibility: visible;
position: absolute;
top: calc(0px - var(--button-h) - var(--head-w) - var(--body-h) - 6px);
left: calc(50% - 77px - (var(--screw-w) / 2));
box-sizing: border-box;
width: var(--o-eye-w);
height: var(--o-eye-w);
border-radius: 50%;
border: 2px solid var(--accent-c);
background: var(--text-c);
padding: 0px;
z-index: 2;][/border][comment]

-- Accordion Body --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;][comment]

-- Text --[/comment][border=transparent;
visibility: visible;
box-sizing: border-box;
min-width: var(--button-w);
padding: 10px;
background: var(--accent-c);
box-shadow: var(--shadow-d) var(--shadow-d) var(--dove-c);][border=transparent;
display: inline;
color: var(--dove-c);
padding: 0px;]>>>[/border] [border=transparent;
display: inline;
color: var(--text-c);
padding: 0px;]install
Installing . D O V E...
Install Complete.[/border]
[border=transparent;
display: inline;
color: var(--dove-c);
padding: 0px;]>>>[/border] [border=transparent;
display: inline;
color: var(--text-c);
padding: 0px;]run
Running . D O V E...[/border][/border][/border]{/slide}
[/accordion][/border][/border][/font]

AHAHAHAHAHA PERFECTION THE BIRD EVEN OPENS ITS EYE????? WHAT SORCERY?? Your attention to details is impeccable as always. Thank you, I love it *chef kiss*


Did you just slander the color pink

 

[Ambiloquous]

AHAHAHAHAHA PERFECTION THE BIRD EVEN OPENS ITS EYE????? WHAT SORCERY?? Your attention to details is impeccable as always. Thank you, I love it *chef kiss*


Did you just slander the color pink

I love u

I-I, n-no, I didn't slander the colour pink, wdym?

 

[. D O V E]

I love u

I-I, n-no, I didn't slander the colour pink, wdym?

I love u too
*squints I must've hallucinated you saying pink hurts or smthng*

 

[ravensunset]

your codes are incredibly creative and just, gorgeous, I'm a little obsessed

 

[Ambiloquous]

your codes are incredibly creative and just, gorgeous, I'm a little obsessed

Thank you! I try.

 

[EccentricFantasy]

So, I have an old character I am about to revamp for a new roleplay. I was hoping you might make me a mobile code for him? Would I need to pay or do you do it for free?

Also, all your codes are so lovely.

 

[Ambiloquous]

So, I have an old character I am about to revamp for a new roleplay. I was hoping you might make me a mobile code for him? Would I need to pay or do you do it for free?

Also, all your codes are so lovely.

Sorry! I don't do requests. I only code because I have an idea I have to put down or because I'm stressed and need to do something productive.

And thank you!

 

[EccentricFantasy]

Sorry! I don't do requests. I only code because I have an idea I have to put down or because I'm stressed and need to do something productive.

And thank you!

No worries. Thought I'd ask. Keep up the good work!

 

[Ambiloquous]

Starry Sky

It's a stylized star-filled tabs code. The OG design was very different, and I wasn't all that motivated to code it after pushing it off because of my workload, but it came out surprisingly okay.

You can see I got lazy and put placeholder images in the second tab.

Tabs

Hidden Scroll

Click Stars and Scroll

• 0000000000000000000000
• 0000000000000000000000
• 0000000000000000000000

• Artist — vikisigh

  ACT I

  “

  ”

  In the land of Ingary where such things as seven-league boots and cloaks of invisibility really exist, it is quite a misfortune to be born the eldest of the three.

  
  
  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.

  ACT II

  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.
  
  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.
• ACT III

  “

  ”

  Yes, you are nosy. You're a dreadfully nosy, horribly bossy, appallingly clean old woman. Control yourself. You're victimizing us all.

  
  
  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.

  ACT IV

  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.
  
  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.

  ACT V

  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.

  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.

  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.
• ACT VI

  “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.
  "It should be hair-raising," added Howl.
  "And you'll exploit me," Sophie said.
  "And then you'll cut up all my suits to teach me.”

  ACT VII

  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.
  
  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.

Spoiler: Code

[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: #3733A6; /* Top colour of gradient */
--c-2: #d299db; /* Bottom colour of gradient and line */
--star-g: linear-gradient(#ffe183, #ffc368); /* Star gradient */
--text-c: lavender; /* Text colour */
--quote-c: #7d61be; /* 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/564x/7d/20/2b/7d202b9f8c3075f5201c8fc7ec3a4de8.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;]ACT I[/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;]In the land of Ingary where such things as seven-league boots and cloaks of invisibility really exist, it is quite a misfortune to be born the eldest of the three.[/border][/border]

[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][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 II[/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]

[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;]ACT III[/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;]Yes, you are nosy. You're a dreadfully nosy, horribly bossy, appallingly clean old woman. Control yourself. You're victimizing us all.[/border][/border]

[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][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 IV[/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][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 V[/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][/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]

 

[EccentricFantasy]

Starry Sky

It's a stylized star-filled tabs code. The OG design was very different, and I wasn't all that motivated to code it after pushing it off because of my workload, but it came out surprisingly okay.

You can see I got lazy and put placeholder images in the second tab.

Click Stars and Scroll

• 0000000000000000000000
• 0000000000000000000000
• 0000000000000000000000

• Artist — vikisigh

  ACT I

  “

  ”

  In the land of Ingary where such things as seven-league boots and cloaks of invisibility really exist, it is quite a misfortune to be born the eldest of the three.

  
  
  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.

  ACT II

  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.
  
  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.
• ACT III

  “

  ”

  Yes, you are nosy. You're a dreadfully nosy, horribly bossy, appallingly clean old woman. Control yourself. You're victimizing us all.

  
  
  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.

  ACT IV

  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.
  
  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.

  ACT V

  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.

  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.

  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.
• ACT VI

  “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.
  "It should be hair-raising," added Howl.
  "And you'll exploit me," Sophie said.
  "And then you'll cut up all my suits to teach me.”

  ACT VII

  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.
  
  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.

Spoiler: Code

[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: #3733A6; /* Top colour of gradient */
--c-2: #d299db; /* Bottom colour of gradient and line */
--star-g: linear-gradient(#ffe183, #ffc368); /* Star gradient */
--text-c: lavender; /* Text colour */
--quote-c: #7d61be; /* 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/564x/7d/20/2b/7d202b9f8c3075f5201c8fc7ec3a4de8.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;]ACT I[/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;]In the land of Ingary where such things as seven-league boots and cloaks of invisibility really exist, it is quite a misfortune to be born the eldest of the three.[/border][/border]

[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][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 II[/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]

[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;]ACT III[/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;]Yes, you are nosy. You're a dreadfully nosy, horribly bossy, appallingly clean old woman. Control yourself. You're victimizing us all.[/border][/border]

[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][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 IV[/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][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 V[/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][/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]

Oh, that's cool!

 

[TerrorKitty]

Starry Sky

It's a stylized star-filled tabs code. The OG design was very different, and I wasn't all that motivated to code it after pushing it off because of my workload, but it came out surprisingly okay.

You can see I got lazy and put placeholder images in the second tab.

Click Stars and Scroll

• 0000000000000000000000
• 0000000000000000000000
• 0000000000000000000000

• Artist — vikisigh

  ACT I

  “

  ”

  In the land of Ingary where such things as seven-league boots and cloaks of invisibility really exist, it is quite a misfortune to be born the eldest of the three.

  
  
  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.

  ACT II

  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.
  
  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.
• ACT III

  “

  ”

  Yes, you are nosy. You're a dreadfully nosy, horribly bossy, appallingly clean old woman. Control yourself. You're victimizing us all.

  
  
  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.

  ACT IV

  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.
  
  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.

  ACT V

  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.

  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.

  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.
• ACT VI

  “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.
  "It should be hair-raising," added Howl.
  "And you'll exploit me," Sophie said.
  "And then you'll cut up all my suits to teach me.”

  ACT VII

  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.
  
  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.

Spoiler: Code

[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: #3733A6; /* Top colour of gradient */
--c-2: #d299db; /* Bottom colour of gradient and line */
--star-g: linear-gradient(#ffe183, #ffc368); /* Star gradient */
--text-c: lavender; /* Text colour */
--quote-c: #7d61be; /* 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/564x/7d/20/2b/7d202b9f8c3075f5201c8fc7ec3a4de8.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;]ACT I[/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;]In the land of Ingary where such things as seven-league boots and cloaks of invisibility really exist, it is quite a misfortune to be born the eldest of the three.[/border][/border]

[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][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 II[/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]

[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;]ACT III[/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;]Yes, you are nosy. You're a dreadfully nosy, horribly bossy, appallingly clean old woman. Control yourself. You're victimizing us all.[/border][/border]

[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][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 IV[/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][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 V[/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][/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]

MY GOD YOU'VE DONE IT AGAIN

 

[Ambiloquous]

MY GOD YOU'VE DONE IT AGAIN

MY GOD I HAVE???

 

[Lucifers Advocate]

OMG these are AMAZING!! I just need to comment here to see these and follow them. You're just giving them out?? That's insane

 

[Ambiloquous]

OMG these are AMAZING!! I just need to comment here to see these and follow them. You're just giving them out?? That's insane

Thank you! Why yes, I am insane. Jk, it's because I never use my own code (if you look at most of my posts there's the bare minimum BBCode slapped on), so the only way I can see them in action is through others using them.

 

[Kaya]

Ohh, I love your new starry sky code, it's beautiful!

 

[give_toast_hugs]

THESE ARE SO COOL

 

[Ambiloquous]

THESE ARE SO COOL

THANK YOU

 

[dove.]

you are insanely talented, oh my god.

 

[Ambiloquous]

you are insanely talented, oh my god.

Thank u sm!

 

[stennie]

these are adorable! i've been working up the courage to say so for a little while tbh- skjdgdk

 

[Aurealis]

These are so fun and interactive! I love how imaginative and unique each design is.

I hope you don’t mind if I use one of them for my search thread. It’s just so pretty!

 

[Ambiloquous]

these are adorable! i've been working up the courage to say so for a little while tbh- skjdgdk

Thank you for working up that courage then!

 

[Ambiloquous]

These are so fun and interactive! I love how imaginative and unique each design is.

I hope you don’t mind if I use one of them for my search thread. It’s just so pretty!

Thank you so much!

Go ahead, all of them are free to use!

 

[Ambiloquous]

Is It a Hill?

A hill-inspired accordion. I couldn't think of anything else that related to "Isthill".

If it looks haphazard, you're right. I'm not entirely satisfied with the end result since I was literally just smashing code together, but heck is it hard to find things to fill it with that look like they fit.

I also stole the the sliding accordion idea from Uxie's code — though my version is probs real trash hacks territory.

Don't hurt me plz. Kaya

Accordion

Hidden Scroll

Click Anywhere

A HILL

A Hill, It Is

Scroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate hendrerit ligula at pretium. Pellentesque dui felis, semper sit amet mollis vel, scelerisque at diam. Aliquam scelerisque purus at velit ullamcorper tincidunt. Proin pretium velit eu dui tincidunt maximus. Nam accumsan mauris in consequat finibus. Etiam posuere lacinia congue. In sagittis nibh vitae metus suscipit, ut venenatis est scelerisque. Morbi semper ultrices nisl, sit amet congue lacus imperdiet id. Etiam dapibus at urna eu vehicula. Proin dui dui, faucibus et dui auctor, pulvinar laoreet ligula. Nulla laoreet, purus sit amet imperdiet laoreet, justo sapien mattis ligula, eget sollicitudin leo sapien ut dolor. Maecenas mattis ut lorem nec malesuada. Cras ultrices aliquam nulla, nec placerat diam molestie vel. Curabitur quis mattis ante, vitae cursus massa. Aliquam ut fringilla dolor.

Aenean mattis lacus vel dapibus tincidunt. Quisque pharetra nunc eget ultrices dapibus. Mauris feugiat facilisis massa sit amet mollis. Proin ultricies eget metus eget congue. Nam aliquam justo in risus ullamcorper, molestie porta eros tristique. Fusce id quam at purus tristique malesuada id placerat odio. Quisque lacinia, arcu ac vehicula vestibulum, augue lectus finibus lacus, et porta lorem urna et felis. Mauris sollicitudin elementum augue, faucibus tristique diam ultricies non. Nunc vehicula sit amet lectus eu porta. Maecenas nec ultricies odio. Cras ut ultrices elit. Mauris interdum purus eget odio pharetra hendrerit. Nulla fermentum vehicula purus ac luctus. Integer non ante vitae nisi pharetra ultricies.

Sed at eleifend nibh. Curabitur molestie eleifend nulla id ultricies. Fusce sodales ultricies elit, bibendum interdum nibh molestie tincidunt. Nam fringilla nisl vitae neque interdum venenatis. In a ligula ultricies nibh dapibus blandit vel quis elit. Nulla non quam ut ipsum gravida maximus. In hac habitasse platea dictumst. Pellentesque facilisis egestas leo in hendrerit. Sed blandit dignissim arcu et tempor. Donec aliquam vestibulum ante in hendrerit.

Phasellus porta, nunc nec lacinia pharetra, massa enim ullamcorper quam, in iaculis dolor nisi vel dolor. Ut arcu nibh, tristique vel est vel, suscipit pellentesque justo. Duis et hendrerit leo. Mauris a nisl pharetra, imperdiet ipsum id, sodales est. Vivamus orci dui, rutrum id justo ut, faucibus imperdiet est. Aenean cursus tempor lacus a vulputate. Vestibulum posuere tellus quis ex vulputate, id dictum augue elementum. Aenean a ex in neque tempor gravida vel nec purus. Maecenas ac hendrerit nibh. Nulla facilisis mauris in ex placerat dignissim. In et ipsum ex. Nam varius volutpat arcu a vehicula. Proin augue metus, suscipit a nunc eu, congue auctor lorem. Mauris hendrerit est quis ornare bibendum.

Spoiler: Code

[comment][font=Delius][font=Varela Round]:∩[/font][/font][/comment][border=transparent;
padding: 0px;

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

--w: 800px;
--h: min(450px, 85vh);

--accord-m: 0px -7px;
--body-m: -6px 0px;

--cover-b-h: 16px; /* Bar width */
--cover-b-c: #e1ac7a; /* Bar and sign colour */
--cover-b: var(--cover-b-h) solid var(--cover-b-c);

--displace: 40px;

--sky-c-1: #CEECF2; /* Sky gradient top colour */
--sky-c-2: #78DFF5; /* Sky gradient bottom colour */

--sky-w: calc(100% - min(var(--displace), 5%));
--sky-h: calc(100% - var(--displace) - (var(--cover-b-h) * 2));
--sky-bg: linear-gradient(var(--sky-c-1), var(--sky-c-2)); 

--sky-str-h: 20px;
--sky-str-bg: linear-gradient(var(--sky-c-1) 20%, var(--sky-c-2));

--sign-t: calc(50% - (var(--sign-h) / 2));
--sign-w: 240px; /* Sign width */
--sign-h: 100px;
--sign-p: 2px 10px;
--sign-c:  #b57a57;
--sign-f-s: 2.6em; /* Sign font size, increase or decrease by .1 increments */
--sign-f: 'Varela Round', sans-serif; /* Sign font, change font tag above code if you change this */
--sign-t-s: 1px 1px #eccbab; /* Sign text shadow, first px is x-axis displacement, second px is y-axis displacement, hex code is colour */
--sign-l-s: 6px; /* Sign letter spacing */

--pole-w: 14px; /* Sign pole width */
--pole-bg: linear-gradient(var(--sign-c) calc((var(--sign-h) / 2) + 6px), var(--cover-b-c) calc((var(--sign-h) / 2) + 10%));

--str-w: 4px; /* String width */

--sun-c-1: #FFA400; /* Sun core colour */
--sun-c-2: #FFBD37; /* Sun ring colour */
--sun-c-3: #F5E564; /* Sun beam colour */

--sun-w: min(40vw, 170px);
--sun-bg: radial-gradient(var(--sun-c-1) 30%, var(--sun-c-2) 30% 40%, var(--sun-c-3) 40%);
--sun-mask: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclipart-library.com%2Fimages_k%2Fsun-silhouette-vector%2Fsun-silhouette-vector-1.png&f=1&nofb=1) 0px 0px / contain;

--sun-str-h: 40px;
--sun-str-bg: linear-gradient(var(--sun-c-3) 40%, var(--sun-c-2) 90%);

--cloud-c-1: #F1F5FA; /* Cloud gradient top colour */
--cloud-c-2: #DCE7F2; /* Cloud gradient bottom colour */

--cloud-l-1: 4vw;
--cloud-l-2: calc(30% + 200px);
--cloud-w: min(50vw, 200px);
--cloud-bg: linear-gradient(var(--cloud-c-1) 70%, var(--cloud-c-2) 70%);
--cloud-mask: url(https://clipground.com/images/clouds-dark-clipart-20.jpg) 0px 0px / contain;

--cloud-str-h-1: 65px;
--cloud-str-h-2: 110px;
--cloud-str-bg: linear-gradient(var(--cloud-c-1) 60%, var(--cloud-c-2) 90%);

--hill-bg: linear-gradient(#a3d43d 60% , #84c125 60% 80%, #65ae0d 80%); /* Hill gradient, hex codes are colours from top to bottom */

--hill-t-1: calc(100% - var(--hill-h-1) - var(--cover-b-h) + 1px);
--hill-w-1: min(320px, calc(56vw - 6px));
--hill-h-1: calc(var(--hill-w-1) / 2);
--hill-b-r-1: var(--hill-w-1) var(--hill-w-1) 0px 0px;

--hill-t-2: calc(100% - var(--hill-h-2) - var(--cover-b-h) + 1px);
--hill-l-2: var(--hill-w-1);
--hill-w-2: min(260px, calc(40vw - 6px));
--hill-h-2: calc(var(--hill-w-2) / 2);
--hill-b-r-2: var(--hill-w-2) var(--hill-w-2) 0px 0px;

--hill-t-3: calc(100% - var(--hill-h-3) - var(--cover-b-h) + 1px);
--hill-l-3: calc(var(--hill-w-1) + var(--hill-w-2));
--hill-w-3: min(220px, calc(28vw - 6px));
--hill-h-3: calc(var(--hill-w-3) / 2);
--hill-b-r-3: var(--hill-w-3) var(--hill-w-3) 0px 0px;

--hill-w-4: min(180px, 40vw);
--hill-h-4: calc(var(--hill-w-4) / 2);
--hill-b-r-4: var(--hill-w-4) var(--hill-w-4) 0px 0px;

--castle-w: min(40vw, 200px);
--castle-bg: url('https://www.shareicon.net/data/512x512/2016/09/05/825165_landscape_512x512.png') 50% 50% / contain; /* Castle image URL */

--castle-mini-w: min(36vw, 120px);

--pull-h: 20px;
--pull-bg: linear-gradient(var(--sign-c), var(--text-c) 20%);

--ring-w: 35px;
--ring-bg: radial-gradient(transparent 35%, var(--cover-b-c) 35%);

--header-p: 23px 0px;
--header-c: #f36053; /* Header font colour */
--header-f-s: 2.6em; /* Header font size, increase or decrease by .1 increments */
--header-f: 'Delius', cursive; /* Header font, change font tag above code if you change this */
--header-l-h: 1.5;

--text-p: 12px;
--text-bg: #eccbab; /* Text background colour */
--text-c: #b57a57; /* Text colour */
--text-f-s: 1.1em; /* Text font size, increase or decrease by .1 increments */
--text-t-s: 1px 1px #f3dfcc; /* Body text shadow, first px is x-axis displacement, second px is y-axis displacement, hex code is colour */

--note-f-s: 12px; /* Note font size */
--note-o: 0.7; /* Note opacity */][comment]-- Note --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
color: var(--sign-c);
font-family: var(--sign-f);
font-size: var(--note-f-s);
text-align: center;
padding: 0px;
opacity: var(--note-o);]Click Anywhere[/border][comment]
 
-- Main Content Container --[/comment][border=transparent;
visibility: hidden;
margin: auto;
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px;
overflow: hidden;
display: flex;
flex-flow: row nowrap;
align-items: center;
pointer-events: none;][comment]

-- Accordion --[/comment][accordion=100%]
{slide=[comment]

-- Content Container --[/comment][border=transparent;
margin: var(--accord-m);
box-sizing: border-box;
max-width: var(--w);
height: calc(var(--h) * 3);
padding: 0px;][comment]

-- Cover --[/comment][border=transparent;
visibility: visible;
position: relative;
top: var(--h);
left: 0px;
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px;
pointer-events: auto;][comment]

-- Top/Bottom Border --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
border-top: var(--cover-b);
border-bottom: var(--cover-b);
padding: 0px;][comment]

-- Sky String 1 --[/comment][border=transparent;
position: absolute;
top: var(--cover-b-h);
left: calc(20px + 5%);
box-sizing: border-box;
width: var(--str-w);
height: var(--sky-str-h);
background: var(--sky-str-bg);
padding: 0px;][/border][comment]

-- Sky String 2 --[/comment][border=transparent;
position: absolute;
top: var(--cover-b-h);
left: calc(100% - (20px + 5%));
box-sizing: border-box;
width: var(--str-w);
height: var(--sky-str-h);
background: var(--sky-str-bg);
padding: 0px;][/border][comment]

-- Sky --[/comment][border=transparent;
position: absolute;
top: calc(50% - (var(--sky-h) / 2));
left: calc(50% - (var(--sky-w) / 2));
box-sizing: border-box;
width: var(--sky-w);
height: var(--sky-h);
background: var(--sky-bg);
padding: 0px;][/border][comment]

-- Sign --[/comment][border=transparent;
position: relative;
top: var(--sign-t);
margin: auto;
box-sizing: border-box;
max-width: var(--sign-w);
min-height: var(--sign-h);
padding: var(--sign-p);
background: var(--cover-b-c);
color: var(--sign-c);
font-size: var(--sign-f-s);
font-family: var(--sign-f);
font-weight: normal;
font-variant: normal;
letter-spacing: var(--sign-l-s);
text-shadow: var(--sign-t-s);
line-height: 1.5;
text-align: center;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
z-index: 3;]A HILL[/border][comment]

-- Sign Pole --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% - (var(--pole-w) / 2));
width: var(--pole-w);
height: 50%;
background: var(--pole-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Sun String --[/comment][border=transparent;
position: absolute;
top: var(--cover-b-h);
left: calc(100% - (var(--sun-w) / 2) - (var(--str-w) / 2));
box-sizing: border-box;
width: var(--str-w);
height: var(--sun-str-h);
background: var(--sun-str-bg);
padding: 0px;][/border][comment]

-- Sun --[/comment][border=transparent;
position: absolute;
top: var(--cover-b-h);
left: calc(100% - var(--sun-w));
box-sizing: border-box;
width: var(--sun-w);
height: var(--sun-w);
background: var(--sun-bg);
-webkit-mask: var(--sun-mask);
mask: var(--sun-mask);
transform: rotate(22deg);
padding: 0px;][/border][comment]

-- Cloud String 1 --[/comment][border=transparent;
position: absolute;
top: var(--cover-b-h);
left: calc(var(--cloud-l-1) + (var(--cloud-w) / 2) - (var(--str-w) / 2));
box-sizing: border-box;
width: var(--str-w);
height: var(--cloud-str-h-1);
background: var(--cloud-str-bg);
padding: 0px;][/border][comment]

-- Cloud 1 --[/comment][border=transparent;
position: absolute;
top: calc(var(--cover-b-h) + 5%);
left: var(--cloud-l-1);
box-sizing: border-box;
width: var(--cloud-w);
height: var(--cloud-w);
background: var(--cloud-bg);
-webkit-mask: var(--cloud-mask);
mask: var(--cloud-mask);
padding: 0px;][/border][comment]

-- Cloud String 2 --[/comment][border=transparent;
position: absolute;
top: var(--cover-b-h);
left: calc(var(--cloud-l-2) + (var(--cloud-w) / 2) - (var(--str-w) / 2));
box-sizing: border-box;
width: var(--str-w);
height: var(--cloud-str-h-2);
background: var(--cloud-str-bg);
padding: 0px;][/border][comment]

-- Cloud 2 --[/comment][border=transparent;
position: absolute;
top: calc(var(--cover-b-h) + 15%);
left: var(--cloud-l-2);
box-sizing: border-box;
width: var(--cloud-w);
height: var(--cloud-w);
background: var(--cloud-bg);
-webkit-mask: var(--cloud-mask);
mask: var(--cloud-mask);
padding: 0px;][/border][comment]

-- Hills --[/comment][comment]-- Hill 1 --[/comment][border=transparent;
position: absolute;
top: var(--hill-t-1);
left: 0px;
max-width: 100%;
width: var(--hill-w-1);
height: var(--hill-h-1);
border-radius: var(--hill-b-r-1);
background: var(--hill-bg);
padding: 0px;][/border][comment]-- Hill 2 --[/comment][border=transparent;
position: absolute;
top: var(--hill-t-2);
left: var(--hill-l-2);
max-width: 100%;
width: var(--hill-w-2);
height: var(--hill-h-2);
border-radius: var(--hill-b-r-2);
background: var(--hill-bg);
padding: 0px;][/border][comment]-- Hill 3 --[/comment][border=transparent;
position: absolute;
top: var(--hill-t-3);
left: var(--hill-l-3);
max-width: 100%;
width: var(--hill-w-3);
height: var(--hill-h-3);
border-radius: var(--hill-b-r-3);
background: var(--hill-bg);
padding: 0px;][/border][comment]-- Hills End --[/comment][comment]

-- Castle --[/comment][border=transparent;
position: absolute;
top: calc(var(--hill-t-1) - var(--castle-w) + (var(--castle-w) * 0.2));
left: calc((var(--hill-w-1) / 2) - (var(--castle-w) / 2));
box-sizing: border-box;
width: var(--castle-w);
height: var(--castle-w);
background: var(--castle-bg);
padding: 0px;
filter: saturate(90%);
z-index: 3;][/border][/border][/border][comment]

-- Content --[/comment][border=transparent;
visibility: visible;
position: relative;
top: var(--h);
left: 0px;
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: calc(var(--displace) * 1.5) calc(var(--displace) / 2) calc(var(--displace) / 2) calc(var(--displace) / 2);][comment]

-- Pull String --[/comment][border=transparent;
position: absolute;
top: 0px;
left: calc(50% - (var(--str-w) / 2));
width: var(--str-w);
height: var(--pull-h);
background: var(--pull-bg);
padding: 0px;
pointer-events: auto;][/border][comment]

-- Ring --[/comment][border=transparent;
position: absolute;
top: var(--pull-h);
left: calc(50% - (var(--ring-w) / 2));
width: var(--ring-w);
height: var(--ring-w);
border-radius: var(--ring-w);
background: var(--ring-bg);
padding: 0px;
pointer-events: auto;][/border][comment]

-- Header --[/comment][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--displace) / 2);
box-sizing: border-box;
max-width: 100%;
padding: var(--header-p);
color: var(--header-c);
font-size: var(--header-f-s);
font-family: var(--header-f);
font-weight: normal;
font-variant: normal;
line-height: var(--header-l-h);
pointer-events: auto;]A Hill, It Is[/border][comment]

-- Hill --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--hill-h-4));
left: calc(100% - var(--hill-w-4));
max-width: 100%;
width: var(--hill-w-4);
height: var(--hill-h-4);
border-radius: var(--hill-b-r-4);
background: var(--hill-bg);
padding: 0px;
pointer-events: auto;][/border][comment]

-- Castle --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--hill-h-4) - var(--castle-mini-w) + (var(--castle-mini-w) * 0.2));
left: calc(100% - (var(--hill-w-4) / 2) - (var(--castle-mini-w) / 2));
box-sizing: border-box;
width: var(--castle-mini-w);
height: var(--castle-mini-w);
background: var(--castle-bg);
padding: 0px;
filter: saturate(90%);
pointer-events: auto;
z-index: 3;][/border][comment] 

-- Note --[/comment][border=transparent;
position: absolute;
top: calc(100% - 15px);
left: 0px;
box-sizing: border-box;
width: 100%;
color: var(--sign-c);
font-family: var(--sign-f);
font-size: var(--note-f-s);
font-weight: normal;
font-variant: normal;
text-align: center;
padding: 0px;
opacity: var(--note-o);]Scroll [fa]fas fa-arrow-up[/fa][/border][comment]

-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + var(--displace));
height: 100%;
padding: 0px;
overflow: auto;
pointer-events: auto;][comment]

-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - var(--displace));
height: auto;
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
font-family: var(--sign-f);
font-weight: normal;
font-variant: normal;
text-shadow: var(--text-t-s);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate hendrerit ligula at pretium. Pellentesque dui felis, semper sit amet mollis vel, scelerisque at diam. Aliquam scelerisque purus at velit ullamcorper tincidunt. Proin pretium velit eu dui tincidunt maximus. Nam accumsan mauris in consequat finibus. Etiam posuere lacinia congue. In sagittis nibh vitae metus suscipit, ut venenatis est scelerisque. Morbi semper ultrices nisl, sit amet congue lacus imperdiet id. Etiam dapibus at urna eu vehicula. Proin dui dui, faucibus et dui auctor, pulvinar laoreet ligula. Nulla laoreet, purus sit amet imperdiet laoreet, justo sapien mattis ligula, eget sollicitudin leo sapien ut dolor. Maecenas mattis ut lorem nec malesuada. Cras ultrices aliquam nulla, nec placerat diam molestie vel. Curabitur quis mattis ante, vitae cursus massa. Aliquam ut fringilla dolor.

Aenean mattis lacus vel dapibus tincidunt. Quisque pharetra nunc eget ultrices dapibus. Mauris feugiat facilisis massa sit amet mollis. Proin ultricies eget metus eget congue. Nam aliquam justo in risus ullamcorper, molestie porta eros tristique. Fusce id quam at purus tristique malesuada id placerat odio. Quisque lacinia, arcu ac vehicula vestibulum, augue lectus finibus lacus, et porta lorem urna et felis. Mauris sollicitudin elementum augue, faucibus tristique diam ultricies non. Nunc vehicula sit amet lectus eu porta. Maecenas nec ultricies odio. Cras ut ultrices elit. Mauris interdum purus eget odio pharetra hendrerit. Nulla fermentum vehicula purus ac luctus. Integer non ante vitae nisi pharetra ultricies.

Sed at eleifend nibh. Curabitur molestie eleifend nulla id ultricies. Fusce sodales ultricies elit, bibendum interdum nibh molestie tincidunt. Nam fringilla nisl vitae neque interdum venenatis. In a ligula ultricies nibh dapibus blandit vel quis elit. Nulla non quam ut ipsum gravida maximus. In hac habitasse platea dictumst. Pellentesque facilisis egestas leo in hendrerit. Sed blandit dignissim arcu et tempor. Donec aliquam vestibulum ante in hendrerit.

Phasellus porta, nunc nec lacinia pharetra, massa enim ullamcorper quam, in iaculis dolor nisi vel dolor. Ut arcu nibh, tristique vel est vel, suscipit pellentesque justo. Duis et hendrerit leo. Mauris a nisl pharetra, imperdiet ipsum id, sodales est. Vivamus orci dui, rutrum id justo ut, faucibus imperdiet est. Aenean cursus tempor lacus a vulputate. Vestibulum posuere tellus quis ex vulputate, id dictum augue elementum. Aenean a ex in neque tempor gravida vel nec purus. Maecenas ac hendrerit nibh. Nulla facilisis mauris in ex placerat dignissim. In et ipsum ex. Nam varius volutpat arcu a vehicula. Proin augue metus, suscipit a nunc eu, congue auctor lorem. Mauris hendrerit est quis ornare bibendum.[comment]

-- Spacing --[/comment][border=transparent;
padding: 0px;
height: calc(var(--hill-h-4) + var(--castle-mini-w) - (var(--castle-mini-w) * 0.5));][/border][/border][/border][/border][comment]

-- Placeholder --[/comment][border=transparent;
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px;][/border][/border]}[border=transparent;
margin: var(--body-m);
box-sizing: border-box;
height: calc(var(--h) * 2);
padding: 0px;][/border]{/slide}
[/accordion][/border][/border]

 

[Kaya]

Is It a Hill?

A hill-inspired accordion. Look, I couldn't think of anything else that related to "Isthill".

If it looks haphazard, you're right, it is. I'm not entirely happy with the end result since I was literally just smashing code together, but heck is it hard to find things to fill it with that look like they fit. Oh, I also stole the the sliding accordion idea from Uxie's code — though my version is probs real trash hacks territory.

Don't hurt me plz. Kaya

Click Anywhere

A HILL

A Hill, It Is

Scroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate hendrerit ligula at pretium. Pellentesque dui felis, semper sit amet mollis vel, scelerisque at diam. Aliquam scelerisque purus at velit ullamcorper tincidunt. Proin pretium velit eu dui tincidunt maximus. Nam accumsan mauris in consequat finibus. Etiam posuere lacinia congue. In sagittis nibh vitae metus suscipit, ut venenatis est scelerisque. Morbi semper ultrices nisl, sit amet congue lacus imperdiet id. Etiam dapibus at urna eu vehicula. Proin dui dui, faucibus et dui auctor, pulvinar laoreet ligula. Nulla laoreet, purus sit amet imperdiet laoreet, justo sapien mattis ligula, eget sollicitudin leo sapien ut dolor. Maecenas mattis ut lorem nec malesuada. Cras ultrices aliquam nulla, nec placerat diam molestie vel. Curabitur quis mattis ante, vitae cursus massa. Aliquam ut fringilla dolor.

Aenean mattis lacus vel dapibus tincidunt. Quisque pharetra nunc eget ultrices dapibus. Mauris feugiat facilisis massa sit amet mollis. Proin ultricies eget metus eget congue. Nam aliquam justo in risus ullamcorper, molestie porta eros tristique. Fusce id quam at purus tristique malesuada id placerat odio. Quisque lacinia, arcu ac vehicula vestibulum, augue lectus finibus lacus, et porta lorem urna et felis. Mauris sollicitudin elementum augue, faucibus tristique diam ultricies non. Nunc vehicula sit amet lectus eu porta. Maecenas nec ultricies odio. Cras ut ultrices elit. Mauris interdum purus eget odio pharetra hendrerit. Nulla fermentum vehicula purus ac luctus. Integer non ante vitae nisi pharetra ultricies.

Sed at eleifend nibh. Curabitur molestie eleifend nulla id ultricies. Fusce sodales ultricies elit, bibendum interdum nibh molestie tincidunt. Nam fringilla nisl vitae neque interdum venenatis. In a ligula ultricies nibh dapibus blandit vel quis elit. Nulla non quam ut ipsum gravida maximus. In hac habitasse platea dictumst. Pellentesque facilisis egestas leo in hendrerit. Sed blandit dignissim arcu et tempor. Donec aliquam vestibulum ante in hendrerit.

Phasellus porta, nunc nec lacinia pharetra, massa enim ullamcorper quam, in iaculis dolor nisi vel dolor. Ut arcu nibh, tristique vel est vel, suscipit pellentesque justo. Duis et hendrerit leo. Mauris a nisl pharetra, imperdiet ipsum id, sodales est. Vivamus orci dui, rutrum id justo ut, faucibus imperdiet est. Aenean cursus tempor lacus a vulputate. Vestibulum posuere tellus quis ex vulputate, id dictum augue elementum. Aenean a ex in neque tempor gravida vel nec purus. Maecenas ac hendrerit nibh. Nulla facilisis mauris in ex placerat dignissim. In et ipsum ex. Nam varius volutpat arcu a vehicula. Proin augue metus, suscipit a nunc eu, congue auctor lorem. Mauris hendrerit est quis ornare bibendum.

Spoiler: Code

[comment][font=Delius][font=Varela Round]:∩[/font][/font][/comment][border=transparent;
padding: 0px;

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

--w: 800px;
--h: min(450px, 85vh);

--accord-m: 0px -7px;
--body-m: -6px 0px;

--cover-b-h: 16px; /* Bar width */
--cover-b-c: #e1ac7a; /* Bar and sign colour */
--cover-b: var(--cover-b-h) solid var(--cover-b-c);

--displace: 40px;

--sky-c-1: #CEECF2; /* Sky gradient top colour */
--sky-c-2: #78DFF5; /* Sky gradient bottom colour */

--sky-w: calc(100% - min(var(--displace), 5%));
--sky-h: calc(100% - var(--displace) - (var(--cover-b-h) * 2));
--sky-bg: linear-gradient(var(--sky-c-1), var(--sky-c-2));

--sky-str-h: 20px;
--sky-str-bg: linear-gradient(var(--sky-c-1) 20%, var(--sky-c-2));

--sign-t: calc(50% - (var(--sign-h) / 2));
--sign-w: 240px; /* Sign width */
--sign-h: 100px;
--sign-p: 2px 10px;
--sign-c:  #b57a57;
--sign-f-s: 2.6em; /* Sign font size, increase or decrease by .1 increments */
--sign-f: 'Varela Round', sans-serif; /* Sign font, change font tag above code if you change this */
--sign-t-s: 1px 1px #eccbab; /* Sign text shadow, first px is x-axis displacement, second px is y-axis displacement, hex code is colour */
--sign-l-s: 6px; /* Sign letter spacing */

--pole-w: 14px; /* Sign pole width */
--pole-bg: linear-gradient(var(--sign-c) calc((var(--sign-h) / 2) + 6px), var(--cover-b-c) calc((var(--sign-h) / 2) + 10%));

--str-w: 4px; /* String width */

--sun-c-1: #FFA400; /* Sun core colour */
--sun-c-2: #FFBD37; /* Sun ring colour */
--sun-c-3: #F5E564; /* Sun beam colour */

--sun-w: min(40vw, 170px);
--sun-bg: radial-gradient(var(--sun-c-1) 30%, var(--sun-c-2) 30% 40%, var(--sun-c-3) 40%);
--sun-mask: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclipart-library.com%2Fimages_k%2Fsun-silhouette-vector%2Fsun-silhouette-vector-1.png&f=1&nofb=1) 0px 0px / contain;

--sun-str-h: 40px;
--sun-str-bg: linear-gradient(var(--sun-c-3) 40%, var(--sun-c-2) 90%);

--cloud-c-1: #F1F5FA; /* Cloud gradient top colour */
--cloud-c-2: #DCE7F2; /* Cloud gradient bottom colour */

--cloud-l-1: 4vw;
--cloud-l-2: calc(30% + 200px);
--cloud-w: min(50vw, 200px);
--cloud-bg: linear-gradient(var(--cloud-c-1) 70%, var(--cloud-c-2) 70%);
--cloud-mask: url(https://clipground.com/images/clouds-dark-clipart-20.jpg) 0px 0px / contain;

--cloud-str-h-1: 65px;
--cloud-str-h-2: 110px;
--cloud-str-bg: linear-gradient(var(--cloud-c-1) 60%, var(--cloud-c-2) 90%);

--hill-bg: linear-gradient(#a3d43d 60% , #84c125 60% 80%, #65ae0d 80%); /* Hill gradient, hex codes are colours from top to bottom */

--hill-t-1: calc(100% - var(--hill-h-1) - var(--cover-b-h) + 1px);
--hill-w-1: min(320px, calc(56vw - 6px));
--hill-h-1: calc(var(--hill-w-1) / 2);
--hill-b-r-1: var(--hill-w-1) var(--hill-w-1) 0px 0px;

--hill-t-2: calc(100% - var(--hill-h-2) - var(--cover-b-h) + 1px);
--hill-l-2: var(--hill-w-1);
--hill-w-2: min(260px, calc(40vw - 6px));
--hill-h-2: calc(var(--hill-w-2) / 2);
--hill-b-r-2: var(--hill-w-2) var(--hill-w-2) 0px 0px;

--hill-t-3: calc(100% - var(--hill-h-3) - var(--cover-b-h) + 1px);
--hill-l-3: calc(var(--hill-w-1) + var(--hill-w-2));
--hill-w-3: min(220px, calc(28vw - 6px));
--hill-h-3: calc(var(--hill-w-3) / 2);
--hill-b-r-3: var(--hill-w-3) var(--hill-w-3) 0px 0px;

--hill-w-4: min(180px, 40vw);
--hill-h-4: calc(var(--hill-w-4) / 2);
--hill-b-r-4: var(--hill-w-4) var(--hill-w-4) 0px 0px;

--castle-w: min(40vw, 200px);
--castle-bg: url('https://www.shareicon.net/data/512x512/2016/09/05/825165_landscape_512x512.png') 50% 50% / contain; /* Castle image URL */

--castle-mini-w: min(36vw, 120px);

--pull-h: 20px;
--pull-bg: linear-gradient(var(--sign-c), var(--text-c) 20%);

--ring-w: 35px;
--ring-bg: radial-gradient(transparent 35%, var(--cover-b-c) 35%);

--header-p: 23px 0px;
--header-c: #f36053; /* Header font colour */
--header-f-s: 2.6em; /* Header font size, increase or decrease by .1 increments */
--header-f: 'Delius', cursive; /* Header font, change font tag above code if you change this */
--header-l-h: 1.5;

--text-p: 12px;
--text-bg: #eccbab; /* Text background colour */
--text-c: #b57a57; /* Text colour */
--text-f-s: 1.1em; /* Text font size, increase or decrease by .1 increments */
--text-t-s: 1px 1px #f3dfcc; /* Body text shadow, first px is x-axis displacement, second px is y-axis displacement, hex code is colour */

--note-f-s: 12px; /* Note font size */
--note-o: 0.7; /* Note opacity */][comment]-- Note --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
color: var(--sign-c);
font-family: var(--sign-f);
font-size: var(--note-f-s);
text-align: center;
padding: 0px;
opacity: var(--note-o);]Click Anywhere[/border][comment]
 
-- Main Content Container --[/comment][border=transparent;
visibility: hidden;
margin: auto;
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px;
overflow: hidden;
display: flex;
flex-flow: row nowrap;
align-items: center;
pointer-events: none;][comment]

-- Accordion --[/comment][accordion=100%]
{slide=[comment]

-- Content Container --[/comment][border=transparent;
margin: var(--accord-m);
box-sizing: border-box;
max-width: var(--w);
height: calc(var(--h) * 3);
padding: 0px;][comment]

-- Cover --[/comment][border=transparent;
visibility: visible;
position: relative;
top: var(--h);
left: 0px;
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px;
pointer-events: auto;][comment]

-- Top/Bottom Border --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: 100%;
border-top: var(--cover-b);
border-bottom: var(--cover-b);
padding: 0px;][comment]

-- Sky String 1 --[/comment][border=transparent;
position: absolute;
top: var(--cover-b-h);
left: calc(20px + 5%);
box-sizing: border-box;
width: var(--str-w);
height: var(--sky-str-h);
background: var(--sky-str-bg);
padding: 0px;][/border][comment]

-- Sky String 2 --[/comment][border=transparent;
position: absolute;
top: var(--cover-b-h);
left: calc(100% - (20px + 5%));
box-sizing: border-box;
width: var(--str-w);
height: var(--sky-str-h);
background: var(--sky-str-bg);
padding: 0px;][/border][comment]

-- Sky --[/comment][border=transparent;
position: absolute;
top: calc(50% - (var(--sky-h) / 2));
left: calc(50% - (var(--sky-w) / 2));
box-sizing: border-box;
width: var(--sky-w);
height: var(--sky-h);
background: var(--sky-bg);
padding: 0px;][/border][comment]

-- Sign --[/comment][border=transparent;
position: relative;
top: var(--sign-t);
margin: auto;
box-sizing: border-box;
max-width: var(--sign-w);
min-height: var(--sign-h);
padding: var(--sign-p);
background: var(--cover-b-c);
color: var(--sign-c);
font-size: var(--sign-f-s);
font-family: var(--sign-f);
font-weight: normal;
font-variant: normal;
letter-spacing: var(--sign-l-s);
text-shadow: var(--sign-t-s);
line-height: 1.5;
text-align: center;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
z-index: 3;]A HILL[/border][comment]

-- Sign Pole --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% - (var(--pole-w) / 2));
width: var(--pole-w);
height: 50%;
background: var(--pole-bg);
padding: 0px;
z-index: 0;][/border][comment]

-- Sun String --[/comment][border=transparent;
position: absolute;
top: var(--cover-b-h);
left: calc(100% - (var(--sun-w) / 2) - (var(--str-w) / 2));
box-sizing: border-box;
width: var(--str-w);
height: var(--sun-str-h);
background: var(--sun-str-bg);
padding: 0px;][/border][comment]

-- Sun --[/comment][border=transparent;
position: absolute;
top: var(--cover-b-h);
left: calc(100% - var(--sun-w));
box-sizing: border-box;
width: var(--sun-w);
height: var(--sun-w);
background: var(--sun-bg);
-webkit-mask: var(--sun-mask);
mask: var(--sun-mask);
transform: rotate(22deg);
padding: 0px;][/border][comment]

-- Cloud String 1 --[/comment][border=transparent;
position: absolute;
top: var(--cover-b-h);
left: calc(var(--cloud-l-1) + (var(--cloud-w) / 2) - (var(--str-w) / 2));
box-sizing: border-box;
width: var(--str-w);
height: var(--cloud-str-h-1);
background: var(--cloud-str-bg);
padding: 0px;][/border][comment]

-- Cloud 1 --[/comment][border=transparent;
position: absolute;
top: calc(var(--cover-b-h) + 5%);
left: var(--cloud-l-1);
box-sizing: border-box;
width: var(--cloud-w);
height: var(--cloud-w);
background: var(--cloud-bg);
-webkit-mask: var(--cloud-mask);
mask: var(--cloud-mask);
padding: 0px;][/border][comment]

-- Cloud String 2 --[/comment][border=transparent;
position: absolute;
top: var(--cover-b-h);
left: calc(var(--cloud-l-2) + (var(--cloud-w) / 2) - (var(--str-w) / 2));
box-sizing: border-box;
width: var(--str-w);
height: var(--cloud-str-h-2);
background: var(--cloud-str-bg);
padding: 0px;][/border][comment]

-- Cloud 2 --[/comment][border=transparent;
position: absolute;
top: calc(var(--cover-b-h) + 15%);
left: var(--cloud-l-2);
box-sizing: border-box;
width: var(--cloud-w);
height: var(--cloud-w);
background: var(--cloud-bg);
-webkit-mask: var(--cloud-mask);
mask: var(--cloud-mask);
padding: 0px;][/border][comment]

-- Hills --[/comment][comment]-- Hill 1 --[/comment][border=transparent;
position: absolute;
top: var(--hill-t-1);
left: 0px;
max-width: 100%;
width: var(--hill-w-1);
height: var(--hill-h-1);
border-radius: var(--hill-b-r-1);
background: var(--hill-bg);
padding: 0px;][/border][comment]-- Hill 2 --[/comment][border=transparent;
position: absolute;
top: var(--hill-t-2);
left: var(--hill-l-2);
max-width: 100%;
width: var(--hill-w-2);
height: var(--hill-h-2);
border-radius: var(--hill-b-r-2);
background: var(--hill-bg);
padding: 0px;][/border][comment]-- Hill 3 --[/comment][border=transparent;
position: absolute;
top: var(--hill-t-3);
left: var(--hill-l-3);
max-width: 100%;
width: var(--hill-w-3);
height: var(--hill-h-3);
border-radius: var(--hill-b-r-3);
background: var(--hill-bg);
padding: 0px;][/border][comment]-- Hills End --[/comment][comment]

-- Castle --[/comment][border=transparent;
position: absolute;
top: calc(var(--hill-t-1) - var(--castle-w) + (var(--castle-w) * 0.2));
left: calc((var(--hill-w-1) / 2) - (var(--castle-w) / 2));
box-sizing: border-box;
width: var(--castle-w);
height: var(--castle-w);
background: var(--castle-bg);
padding: 0px;
filter: saturate(90%);
z-index: 3;][/border][/border][/border][comment]

-- Content --[/comment][border=transparent;
visibility: visible;
position: relative;
top: var(--h);
left: 0px;
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: calc(var(--displace) * 1.5) calc(var(--displace) / 2) calc(var(--displace) / 2) calc(var(--displace) / 2);][comment]

-- Pull String --[/comment][border=transparent;
position: absolute;
top: 0px;
left: calc(50% - (var(--str-w) / 2));
width: var(--str-w);
height: var(--pull-h);
background: var(--pull-bg);
padding: 0px;
pointer-events: auto;][/border][comment]

-- Ring --[/comment][border=transparent;
position: absolute;
top: var(--pull-h);
left: calc(50% - (var(--ring-w) / 2));
width: var(--ring-w);
height: var(--ring-w);
border-radius: var(--ring-w);
background: var(--ring-bg);
padding: 0px;
pointer-events: auto;][/border][comment]

-- Header --[/comment][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--displace) / 2);
box-sizing: border-box;
max-width: 100%;
padding: var(--header-p);
color: var(--header-c);
font-size: var(--header-f-s);
font-family: var(--header-f);
font-weight: normal;
font-variant: normal;
line-height: var(--header-l-h);
pointer-events: auto;]A Hill, It Is[/border][comment]

-- Hill --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--hill-h-4));
left: calc(100% - var(--hill-w-4));
max-width: 100%;
width: var(--hill-w-4);
height: var(--hill-h-4);
border-radius: var(--hill-b-r-4);
background: var(--hill-bg);
padding: 0px;
pointer-events: auto;][/border][comment]

-- Castle --[/comment][border=transparent;
position: absolute;
top: calc(100% - var(--hill-h-4) - var(--castle-mini-w) + (var(--castle-mini-w) * 0.2));
left: calc(100% - (var(--hill-w-4) / 2) - (var(--castle-mini-w) / 2));
box-sizing: border-box;
width: var(--castle-mini-w);
height: var(--castle-mini-w);
background: var(--castle-bg);
padding: 0px;
filter: saturate(90%);
pointer-events: auto;
z-index: 3;][/border][comment]

-- Note --[/comment][border=transparent;
position: absolute;
top: calc(100% - 15px);
left: 0px;
box-sizing: border-box;
width: 100%;
color: var(--sign-c);
font-family: var(--sign-f);
font-size: var(--note-f-s);
font-weight: normal;
font-variant: normal;
text-align: center;
padding: 0px;
opacity: var(--note-o);]Scroll [fa]fas fa-arrow-up[/fa][/border][comment]

-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + var(--displace));
height: 100%;
padding: 0px;
overflow: auto;
pointer-events: auto;][comment]

-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - var(--displace));
height: auto;
background: var(--text-bg);
padding: var(--text-p);
color: var(--text-c);
font-size: var(--text-f-s);
font-family: var(--sign-f);
font-weight: normal;
font-variant: normal;
text-shadow: var(--text-t-s);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate hendrerit ligula at pretium. Pellentesque dui felis, semper sit amet mollis vel, scelerisque at diam. Aliquam scelerisque purus at velit ullamcorper tincidunt. Proin pretium velit eu dui tincidunt maximus. Nam accumsan mauris in consequat finibus. Etiam posuere lacinia congue. In sagittis nibh vitae metus suscipit, ut venenatis est scelerisque. Morbi semper ultrices nisl, sit amet congue lacus imperdiet id. Etiam dapibus at urna eu vehicula. Proin dui dui, faucibus et dui auctor, pulvinar laoreet ligula. Nulla laoreet, purus sit amet imperdiet laoreet, justo sapien mattis ligula, eget sollicitudin leo sapien ut dolor. Maecenas mattis ut lorem nec malesuada. Cras ultrices aliquam nulla, nec placerat diam molestie vel. Curabitur quis mattis ante, vitae cursus massa. Aliquam ut fringilla dolor.

Aenean mattis lacus vel dapibus tincidunt. Quisque pharetra nunc eget ultrices dapibus. Mauris feugiat facilisis massa sit amet mollis. Proin ultricies eget metus eget congue. Nam aliquam justo in risus ullamcorper, molestie porta eros tristique. Fusce id quam at purus tristique malesuada id placerat odio. Quisque lacinia, arcu ac vehicula vestibulum, augue lectus finibus lacus, et porta lorem urna et felis. Mauris sollicitudin elementum augue, faucibus tristique diam ultricies non. Nunc vehicula sit amet lectus eu porta. Maecenas nec ultricies odio. Cras ut ultrices elit. Mauris interdum purus eget odio pharetra hendrerit. Nulla fermentum vehicula purus ac luctus. Integer non ante vitae nisi pharetra ultricies.

Sed at eleifend nibh. Curabitur molestie eleifend nulla id ultricies. Fusce sodales ultricies elit, bibendum interdum nibh molestie tincidunt. Nam fringilla nisl vitae neque interdum venenatis. In a ligula ultricies nibh dapibus blandit vel quis elit. Nulla non quam ut ipsum gravida maximus. In hac habitasse platea dictumst. Pellentesque facilisis egestas leo in hendrerit. Sed blandit dignissim arcu et tempor. Donec aliquam vestibulum ante in hendrerit.

Phasellus porta, nunc nec lacinia pharetra, massa enim ullamcorper quam, in iaculis dolor nisi vel dolor. Ut arcu nibh, tristique vel est vel, suscipit pellentesque justo. Duis et hendrerit leo. Mauris a nisl pharetra, imperdiet ipsum id, sodales est. Vivamus orci dui, rutrum id justo ut, faucibus imperdiet est. Aenean cursus tempor lacus a vulputate. Vestibulum posuere tellus quis ex vulputate, id dictum augue elementum. Aenean a ex in neque tempor gravida vel nec purus. Maecenas ac hendrerit nibh. Nulla facilisis mauris in ex placerat dignissim. In et ipsum ex. Nam varius volutpat arcu a vehicula. Proin augue metus, suscipit a nunc eu, congue auctor lorem. Mauris hendrerit est quis ornare bibendum.[/border][/border][/border][comment]

-- Placeholder --[/comment][border=transparent;
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
padding: 0px;][/border][/border]}[border=transparent;
margin: var(--body-m);
box-sizing: border-box;
height: calc(var(--h) * 2);
padding: 0px;][/border]{/slide}
[/accordion][/border][/border]

Hahaha it looks so cute, honestly! I love how the sun and clouds look like they're dangling from strings!

(In case anyone's wondering- my username actually came from WoW! I'm playing a Draenei Beast Master, and that race just reminded me of the Andalites from Animorphs; one of them was named Aximili-Esgarrouth-Isthill. And the name kinda stuck xD)