opaline

[comment]coded by uxie! loosely inspired by springdoy's [url='https://springdoythemes.tumblr.com/imd.']in my dreams[/url]

fonts used:
[font=Chonburi]buttons[/font]
[font=Libre Baskerville]header[/font]
[font=Mulish]body text[/font]

to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )

[/comment][border=transparent;

/*background colour*/
--bg-1: #fafafa;
/*textbox background colour*/
--bg-2: #fff;
/*border colour*/
--border:#ededed;

/*main accent colour*/
--color-1: #c3dbb8;
/*secondary accent colour -- slightly darker than main accent colour*/
--color-2: #9ba596;
/*contrast w. other two accents*/
--color-3: #fff;

/*unselected button colour -- lighter and less saturated than main accent*/
--unselected: #b8bfb5;
/*selected button colour*/
--selected: var(--color-1);

/*text colour*/
--t-color: #2a2b2a;

/*fonts used*/
--button: 'Chonburi', serif;
--header: 'Libre Baskerville', serif;
--body: 'Mulish', sans-serif;

/*big left image*/
--img-1: url('https://i.imgur.com/rt5xs4j.png');
/*tab 1 -- image icon next to basics*/
--img-2: url('https://i.imgur.com/Det3vKt.png');
/*tab 3 -- image between history and misc*/
--img-3: url('https://pbs.twimg.com/media/FUu0QHfXsAICX13.jpg');

/*gallery images -- add variables here to reference if you want to add more pictures!*/
--gimg-1: url('https://i.imgur.com/B442Nn0.png');
--gimg-2: url('https://i.imgur.com/B442Nn0.png');
--gimg-3: url('https://i.imgur.com/B442Nn0.png');
--gimg-4: url('https://i.imgur.com/B442Nn0.png');


height:auto; width:100%; padding:0; overflow-x:auto; margin:20px 0 30px 0; line-height:0;][border=transparent; height:auto; min-height:444px; width:clamp(320px, 80vw, 680px); box-sizing:border-box; padding:0; background: var(--bg-1); border:1px solid var(--border); border-top:12px solid var(--color-1); border-bottom:12px solid var(--color-1); margin:0 auto; position:relative;][border=transparent; height:auto; width:100%; padding:0; position:relative; display:flex; flex-flow:row wrap; overflow:hidden;
--f1:1 0 42%; --f2:1 0 58%; --f1-mw: 200px; --f2-mw: 260px;]

   [comment]----sidebar (tabs cover)----[/comment]
   [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow:row wrap; pointer-events:none;][border=transparent; height:auto; min-height:300px; flex: var(--f1); min-width: var(--f1-mw); padding:25px 20px 20px 20px; box-sizing:border-box; display:flex; flex-flow:column nowrap; position:relative;]

      [comment]----big text----[/comment]
      [border=transparent; height:auto; width:auto; max-width:calc(100% + 110px); padding:0; position:absolute; top:5%; left:-10px; z-index:1; color: var(--color-1); opacity:0.85; font-family: var(--header); line-height:80%; font-size:80px;][comment]

----* * * big text here (partially obscured, keep this short)----

[/comment]bigword.[/border]

      [comment]----big image----[/comment]
      [border=transparent; flex:1; width:100%; position:relative; z-index:2; padding:25px; box-sizing:border-box;]
         [border=transparent; height:50px; width:50px; padding:0; border:1px solid var(--color-2); border-bottom:0; border-right:0; position:absolute; top:0; left:0;][/border]
         [border=transparent; height:50px; width:50px; padding:0; border:1px solid var(--color-2); border-top:0; border-left:0; position:absolute; bottom:0; right:0;][/border]
         [border=transparent; height:100%; width:100%; padding:0; background: var(--img-1); background-size:cover; -webkit-filter: saturate(0.8) grayscale(0.2);

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.15;][/border][/border]

         [comment]----name----[/comment]
         [border=transparent; height:auto; width:auto; max-width:145px; position:absolute; bottom:13px; left:10px; padding:0;][border=transparent; height:auto; width:auto; padding:5px 8px 6px 10px; box-sizing:border-box; background: var(--color-1); color: var(--color-3); font-family: var(--body); line-height:160%; letter-spacing:2px; font-size:clamp(13px, -30px + 10vw, 15px); font-weight:bold; display:inline; -webkit-box-decoration-break:clone; text-transform:uppercase;][comment]

----* * * name here----

[/comment]some title here.[/border]
         [/border]

      [/border]
      [comment]----image end----[/comment]

      [comment]----button container----[/comment]
      [border=transparent; height:30px; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; flex-shrink:0; margin-top:25px; background: var(--bg-1);][border=transparent; height:0; flex:1; padding:0; border-top:1px solid var(--color-2); margin-right:5px;][/border]

         [comment]----button----[/comment]
         [border=transparent; height:auto; width:50px; padding:0; margin-left:8px; font-family: var(--button); color:transparent; -webkit-text-stroke:0.8px var(--unselected); font-size:28px; line-height:100%; font-style:oblique; white-space:nowrap;]01.[/border]

         [comment]----button----[/comment]
         [border=transparent; height:auto; width:50px; padding:0; margin-left:8px; font-family: var(--button); color:transparent; -webkit-text-stroke:0.8px var(--unselected); font-size:28px; line-height:100%; font-style:oblique; white-space:nowrap;]02.[/border]

         [comment]----button----[/comment]
         [border=transparent; height:auto; width:50px; padding:0; margin-left:8px; font-family: var(--button); color:transparent; -webkit-text-stroke:0.8px var(--unselected); font-size:28px; line-height:100%; font-style:oblique; white-space:nowrap;]03.[/border]

      [/border]
      [comment]----button container end----[/comment]
   [/border][border=transparent; height:420px; flex: var(--f2); min-width: var(--f2-mw); padding:0;][/border][/border]
   [comment]----sidebar (tabs cover) end----[/comment]


   [comment]----tabs (left)----[/comment]
   [border=transparent; height:auto; min-height:300px; flex: var(--f1); min-width: var(--f1-mw); padding:25px 20px 20px 20px; box-sizing:border-box; display:flex; justify-content:flex-end;][border=transparent; height:30px; width:165px; padding:0; overflow:hidden; margin:auto 0 0 auto;][border=transparent; padding:0; margin:3px -40px 0 -30px][tabs]

      [comment]----tab 1----[/comment]
      [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:3; display:flex; flex-flow:row wrap; pointer-events:none;]
         [comment]----button select----[/comment]
         [border=transparent; height:auto; min-height:300px; flex: var(--f1); min-width: var(--f1-mw); padding:25px 20px 20px 20px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:flex-end; align-items:flex-end; position:relative;][border=transparent; height:30px; width:auto; padding:0; display:flex; flex-flow:row nowrap; align-items:center; flex-shrink:0; margin-top:25px;]

[comment]----selected button----[/comment]
[border=transparent; height:auto; width:50px; padding:0; margin-left:8px; font-family: var(--button); color: var(--selected); font-size:28px; line-height:100%; font-style:oblique; font-weight:bold; background: var(--bg-1); white-space:nowrap;]01.[/border]

[comment]----filler button----[/comment]
[border=transparent; height:auto; width:50px; padding:0; margin-left:8px][/border]
[comment]----filler button----[/comment]
[border=transparent; height:auto; width:50px; padding:0; margin-left:8px][/border]
         [/border][/border]
         [comment]----button select end----[/comment]

         [comment]----tab contents----[/comment]
         [border=transparent; height:420px; flex: var(--f2); min-width: var(--f2-mw); padding:20px; box-sizing:border-box; display:flex; flex-flow:column nowrap; pointer-events:auto;]

[comment]----basics----[/comment]
[border=transparent; height:138px; width:100%; padding:0; display:flex; flex-flow:row nowrap; flex-shrink:0;]

   [comment]----basics contents----[/comment]
   [border=transparent; height:100%; flex:1; padding:8px 0 5px 0; box-sizing:border-box; overflow:hidden; margin-right:20px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; box-sizing:border-box; --m:10px;][border=transparent; height:0; width:100%; padding:0; margin-bottom: calc(var(--m) * -1);][/border]

      [comment]----copy this whole thing to make another piece of info----[/comment]
      [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top: var(--m);]
         [border=transparent; height:auto; width:40px; padding:0; color: var(--color-2); font-family: var(--button); font-size:30px; line-height:100%; white-space:nowrap; flex-shrink:0; margin-right:22px; text-shadow:1.5px 1.5px var(--bg-1);][comment]

----* * * info number here----

[/comment]01[/border]
         [border=transparent; flex:1; height:auto; padding:0; display:flex; flex-flow:column nowrap;]
[border=transparent; height:auto; width:auto; padding:2px 3px 2px 4px; box-sizing:border-box; background: var(--color-1); color: var(--color-3); font-family: var(--body); font-size:10px; font-weight:bold; line-height:12px; letter-spacing:2px; text-transform:uppercase; margin-right:auto;][comment]

----* * * info title here----

[/comment]name.[/border]

         [border=transparent; height:auto; flex:1; padding:0; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:15px; margin:3px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
         [/border]
      [/border]
      [comment]----copy me too!----[/comment]

      [comment]----copy this whole thing to make another piece of info----[/comment]
      [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top: var(--m);]
         [border=transparent; height:auto; width:40px; padding:0; color: var(--color-2); font-family: var(--button); font-size:30px; line-height:100%; white-space:nowrap; flex-shrink:0; margin-right:22px; text-shadow:1.5px 1.5px var(--bg-1);][comment]

----* * * info number here----

[/comment]02[/border]
         [border=transparent; flex:1; height:auto; padding:0; display:flex; flex-flow:column nowrap;]
[border=transparent; height:auto; width:auto; padding:2px 3px 2px 4px; box-sizing:border-box; background: var(--color-1); color: var(--color-3); font-family: var(--body); font-size:10px; font-weight:bold; line-height:12px; letter-spacing:2px; text-transform:uppercase; margin-right:auto;][comment]

----* * * info title here----

[/comment]a.k.a.[/border]

         [border=transparent; height:auto; flex:1; padding:0; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:15px; margin:3px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
         [/border]
      [/border]
      [comment]----copy me too!----[/comment]

      [comment]----copy this whole thing to make another piece of info----[/comment]
      [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top: var(--m);]
         [border=transparent; height:auto; width:40px; padding:0; color: var(--color-2); font-family: var(--button); font-size:30px; line-height:100%; white-space:nowrap; flex-shrink:0; margin-right:22px; text-shadow:1.5px 1.5px var(--bg-1);][comment]

----* * * info number here----

[/comment]03[/border]
         [border=transparent; flex:1; height:auto; padding:0; display:flex; flex-flow:column nowrap;]
[border=transparent; height:auto; width:auto; padding:2px 3px 2px 4px; box-sizing:border-box; background: var(--color-1); color: var(--color-3); font-family: var(--body); font-size:10px; font-weight:bold; line-height:12px; letter-spacing:2px; text-transform:uppercase; margin-right:auto;][comment]

----* * * info title here----

[/comment]age.[/border]

         [border=transparent; height:auto; flex:1; padding:0; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:15px; margin:3px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
         [/border]
      [/border]
      [comment]----copy me too!----[/comment]

      [comment]----copy this whole thing to make another piece of info----[/comment]
      [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top: var(--m);]
         [border=transparent; height:auto; width:40px; padding:0; color: var(--color-2); font-family: var(--button); font-size:30px; line-height:100%; white-space:nowrap; flex-shrink:0; margin-right:22px; text-shadow:1.5px 1.5px var(--bg-1);][comment]

----* * * info number here----

[/comment]04[/border]
         [border=transparent; flex:1; height:auto; padding:0; display:flex; flex-flow:column nowrap;]
[border=transparent; height:auto; width:auto; padding:2px 3px 2px 4px; box-sizing:border-box; background: var(--color-1); color: var(--color-3); font-family: var(--body); font-size:10px; font-weight:bold; line-height:12px; letter-spacing:2px; text-transform:uppercase; margin-right:auto;][comment]

----* * * info title here----

[/comment]gender.[/border]

         [border=transparent; height:auto; flex:1; padding:0; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:15px; margin:3px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
         [/border]
      [/border]
      [comment]----copy me too!----[/comment]

      [comment]----copy this whole thing to make another piece of info----[/comment]
      [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top: var(--m);]
         [border=transparent; height:auto; width:40px; padding:0; color: var(--color-2); font-family: var(--button); font-size:30px; line-height:100%; white-space:nowrap; flex-shrink:0; margin-right:22px; text-shadow:1.5px 1.5px var(--bg-1);][comment]

----* * * info number here----

[/comment]05[/border]
         [border=transparent; flex:1; height:auto; padding:0; display:flex; flex-flow:column nowrap;]
[border=transparent; height:auto; width:auto; padding:2px 3px 2px 4px; box-sizing:border-box; background: var(--color-1); color: var(--color-3); font-family: var(--body); font-size:10px; font-weight:bold; line-height:12px; letter-spacing:2px; text-transform:uppercase; margin-right:auto;][comment]

----* * * info title here----

[/comment]ethnicity[/border]

         [border=transparent; height:auto; flex:1; padding:0; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:15px; margin:3px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
         [/border]
      [/border]
      [comment]----copy me too!----[/comment]

   [/border][/border][/border]
   [comment]----basics content end----[/comment]

   [comment]----basics image----[/comment]
   [border=transparent; height:100%; width:clamp(90px, -50px + 26vw, 135px); padding:12px; box-sizing:border-box; position:relative;]
      [border=transparent; height:35px; width:35px; padding:0; border:1px solid var(--color-2); border-bottom:0; border-right:0; position:absolute; top:0; left:0;][/border]
      [border=transparent; height:35px; width:35px; padding:0; border:1px solid var(--color-2); border-top:0; border-left:0; position:absolute; bottom:0; right:0;][/border]
      [border=transparent; height:100%; width:100%; padding:0; background: var(--img-2); background-size:cover; -webkit-filter: saturate(0.8) grayscale(0.2);

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.15;][/border][/border][/border]
[/border]
[comment]----basics end----[/comment]

[comment]----visage----[/comment]
[border=transparent; height:58%; width:100%; padding:13px 0; box-sizing:border-box; background: var(--bg-2); border:1px solid var(--border); display:flex; flex-flow:column nowrap; margin-top:25px;]
    [comment]----visage title----[/comment]
    [border=transparent; height:auto; width:100%; padding:0 20px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; flex-shrink:0;][border=transparent; height:0; flex:1; padding:0; border-top:1px solid var(--color-2);][/border][border=transparent; height:auto; width:auto; padding:0; flex-shrink:0; margin-left:15px; color: var(--color-1); font-style:oblique; text-transform:uppercase; font-family: var(--header); font-weight:bold; font-size:19px; letter-spacing:1px; line-height:100%;][comment]

----* * * box title here----

[/comment]visage.[/border][/border]

   [comment]----visage contents----[/comment]
   [border=transparent; height:90%; width:100%; padding:0; overflow:hidden; margin-top:10px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 12px 0 20px; box-sizing:border-box; --m:4px;][border=transparent; height:0; width:100%; padding:0; margin-bottom: calc(var(--m) * -1 - 4px);][/border]

      [comment]----copy this whole thing to make another tag----[/comment]
      [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top:var(--m);]
         [border=transparent; height:auto; width:auto; padding:4px 5px 3px 6px; box-sizing:border-box; background: var(--color-1); color: var(--color-3); font-family: var(--body); font-size:10.5px; font-weight:bold; line-height:12px; letter-spacing:2px; text-transform:uppercase; margin:4px 12px 0 0;][comment]

----* * * info title here----

[/comment]height.[/border]

         [border=transparent; height:auto; flex:1; min-width:fit-content; padding:0; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:16px; margin:4px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
      [/border]
      [comment]----copy me too!----[/comment]

      [comment]----copy this whole thing to make another tag----[/comment]
      [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top:var(--m);]
         [border=transparent; height:auto; width:auto; padding:4px 5px 3px 6px; box-sizing:border-box; background: var(--color-1); color: var(--color-3); font-family: var(--body); font-size:10.5px; font-weight:bold; line-height:12px; letter-spacing:2px; text-transform:uppercase; margin:4px 12px 0 0;][comment]

----* * * info title here----

[/comment]appearance.[/border]

         [border=transparent; height:auto; flex:1; min-width:fit-content; padding:0; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:16px; margin:4px 0 0 0;][comment]

----* * * info contents here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit fringilla justo volutpat consectetur. Maecenas quis dui quis neque fringilla tincidunt nec in arcu. Pellentesque aliquam nulla interdum velit tristique auctor. Maecenas urna nibh, vehicula vel tempus quis, semper vitae velit.[/border]
      [/border]
      [comment]----copy me too!----[/comment]

      [comment]----copy this whole thing to make another tag----[/comment]
      [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top:var(--m);]
         [border=transparent; height:auto; width:auto; padding:4px 5px 3px 6px; box-sizing:border-box; background: var(--color-1); color: var(--color-3); font-family: var(--body); font-size:10.5px; font-weight:bold; line-height:12px; letter-spacing:2px; text-transform:uppercase; margin:4px 12px 0 0;][comment]

----* * * info title here----

[/comment]faceclaim.[/border]

         [border=transparent; height:auto; flex:1; min-width:fit-content; padding:0; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:16px; margin:4px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
      [/border]
      [comment]----copy me too!----[/comment]

   [/border][/border][/border]
   [comment]----visage contents end----[/comment]
[/border]
[comment]----visage end----[/comment]
         [/border]
         [comment]----tab contents end----[/comment]
      [/border][/tab]
      [comment]----tab 1 end----[/comment]


      [comment]----tab 2----[/comment]
      [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:3; display:flex; flex-flow:row wrap; pointer-events:none;]
         [comment]----button select----[/comment]
         [border=transparent; height:auto; min-height:300px; flex: var(--f1); min-width: var(--f1-mw); padding:25px 20px 20px 20px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:flex-end; align-items:flex-end; position:relative;][border=transparent; height:30px; width:auto; padding:0; display:flex; flex-flow:row nowrap; align-items:center; flex-shrink:0; margin-top:25px;]
[comment]----filler button----[/comment]
[border=transparent; height:auto; width:50px; padding:0; margin-left:8px][/border]

[comment]----selected button----[/comment]
[border=transparent; height:auto; width:50px; padding:0; margin-left:8px; font-family: var(--button); color: var(--selected); font-size:28px; line-height:100%; font-style:oblique; font-weight:bold; background: var(--bg-1); white-space:nowrap;]02.[/border]

[comment]----filler button----[/comment]
[border=transparent; height:auto; width:50px; padding:0; margin-left:8px][/border]
         [/border][/border]
         [comment]----button select end----[/comment]

         [comment]----tab contents----[/comment]
         [border=transparent; height:420px; flex: var(--f2); min-width: var(--f2-mw); padding:20px; box-sizing:border-box; pointer-events:auto; display:flex; flex-flow:column nowrap; align-items:center;]

[comment]----personality main----[/comment]
[border=transparent; height:90%; max-height:calc(100% - 100px); width:100%; padding:0; box-sizing:border-box;][border=transparent; height:100%; width:100%; padding:13px 0; box-sizing:border-box; background: var(--bg-2); border:1px solid var(--border); display:flex; flex-flow:column nowrap;]
    [comment]----personality title----[/comment]
    [border=transparent; height:auto; width:100%; padding:0 20px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; flex-shrink:0;][border=transparent; height:0; flex:1; padding:0; border-top:1px solid var(--color-2);][/border][border=transparent; height:auto; width:auto; padding:0; flex-shrink:0; margin-left:15px; color: var(--color-1); font-style:oblique; text-transform:uppercase; font-family: var(--header); font-weight:bold; font-size:19px; letter-spacing:1px; line-height:100%;][comment]

----* * * box title here----

[/comment]psyche.[/border][/border]

   [comment]----personality contents----[/comment]
   [border=transparent; height:100%; width:100%; padding:0; overflow:hidden; margin-top:10px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 12px 0 20px; box-sizing:border-box; --m:4px;][border=transparent; height:0; width:100%; padding:0; margin-bottom: calc(var(--m) * -1 - 4px);][/border]

      [comment]----copy this whole thing to make another paragraph text----[/comment]
      [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:16px; margin: calc(var(--m) + 4px) 0 14px 0; text-align:justify;][comment]

----* * * text starts here here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in turpis sit amet mauris sodales accumsan sit amet in lectus. Sed euismod placerat ex quis tincidunt. Cras tristique purus ut est aliquet, suscipit bibendum augue auctor. Suspendisse potenti. Sed dignissim, eros vitae pulvinar gravida, libero massa sagittis arcu, quis cursus tortor est in turpis. Cras rhoncus, urna ac porta tincidunt, enim libero porta arcu, non vulputate neque urna et mi. Phasellus non justo vitae velit volutpat imperdiet. Suspendisse et maximus erat, ac pretium ligula. Quisque auctor, quam ac viverra ultricies, augue eros interdum arcu, ullamcorper consectetur mi ligula et nibh. Nulla libero tellus, pellentesque non dui hendrerit, pellentesque dictum nisl. Fusce neque massa, gravida sed lorem vel, suscipit iaculis enim. Vestibulum interdum ultrices odio. Proin laoreet placerat est nec hendrerit. Nunc quis lorem gravida, facilisis est sit amet, tincidunt odio. Interdum et malesuada fames ac ante ipsum primis in faucibus.
      [/border]
      [comment]----copy me too!----[/comment]


      [comment]----copy this whole thing to make another tag----[/comment]
      [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top:var(--m);]
         [border=transparent; height:auto; width:auto; padding:4px 5px 3px 6px; box-sizing:border-box; background: var(--color-1); color: var(--color-3); font-family: var(--body); font-size:10.5px; font-weight:bold; line-height:12px; letter-spacing:2px; text-transform:uppercase; margin:4px 12px 0 0;][comment]

----* * * info title here----

[/comment]virtues.[/border]

         [border=transparent; height:auto; flex:1; min-width:fit-content; padding:0; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:16px; margin:4px 0 0 0;][comment]

----* * * info contents here----

[/comment]virtue. virtue. virtue.[/border]
      [/border]
      [comment]----copy me too!----[/comment]

      [comment]----copy this whole thing to make another tag----[/comment]
      [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top:var(--m);]
         [border=transparent; height:auto; width:auto; padding:4px 5px 3px 6px; box-sizing:border-box; background: var(--color-1); color: var(--color-3); font-family: var(--body); font-size:10.5px; font-weight:bold; line-height:12px; letter-spacing:2px; text-transform:uppercase; margin:4px 12px 0 0;][comment]

----* * * info title here----

[/comment]vices.[/border]

         [border=transparent; height:auto; flex:1; min-width:fit-content; padding:0; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:16px; margin:4px 0 0 0;][comment]

----* * * info contents here----

[/comment]vice. vice. vice.[/border]
      [/border]
      [comment]----copy me too!----[/comment]

      [comment]----copy this whole thing to make another tag----[/comment]
      [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top:var(--m);]
         [border=transparent; height:auto; width:auto; padding:4px 5px 3px 6px; box-sizing:border-box; background: var(--color-1); color: var(--color-3); font-family: var(--body); font-size:10.5px; font-weight:bold; line-height:12px; letter-spacing:2px; text-transform:uppercase; margin:4px 12px 0 0;][comment]

----* * * info title here----

[/comment]fears.[/border]

         [border=transparent; height:auto; flex:1; min-width:fit-content; padding:0; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:16px; margin:4px 0 0 0;][comment]

----* * * info contents here----

[/comment]fear. fear. fear.[/border]
      [/border]
      [comment]----copy me too!----[/comment]

   [/border][/border][/border]
   [comment]----personality contents end----[/comment]
[/border][/border]
[comment]----personality main end----[/comment]

[comment]----quote----[/comment]
[border=transparent; height:auto; width:97%; padding:0 30px; box-sizing:border-box; position:relative; margin:auto 0 20px 0;][border=transparent; height:40px; width:auto; padding:0; color: var(--color-1); opacity:0.5; font-size:110px; line-height:100%; position:absolute; top:-30px; left:-4px; pointer-events:none; letter-spacing:-4px;]❛❛[/border][border=transparent; height:40px; width:auto; padding:0; color: var(--color-1); opacity:0.5; font-size:110px; line-height:100%; position:absolute; bottom:5px; right:0; pointer-events:none; letter-spacing:-4px;]❜❜[/border][border=transparent; height:auto; max-height:45px; width:100%; padding:0; text-align:center; font-weight:bold; font-style:oblique; letter-spacing:1px; font-family: var(--header); font-size:9px; line-height:15px; position:relative; z-index:2; color: var(--t-color); overflow:hidden;][comment]

----* * * quote here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in turpis sit amet mauris sodales accumsan sit amet in lectus. Sed euismod placerat[/border]
[/border]
[comment]----quote end----[/comment]
         [/border]
         [comment]----tab contents end----[/comment]
      [/border][/tab]
      [comment]----tab 2 end----[/comment]


      [comment]----tab 3----[/comment]
      [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:3; display:flex; flex-flow:row wrap; pointer-events:none;]
         [comment]----button select----[/comment]
         [border=transparent; height:auto; min-height:300px; flex: var(--f1); min-width: var(--f1-mw); padding:25px 20px 20px 20px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:flex-end; align-items:flex-end; position:relative;][border=transparent; height:30px; width:auto; padding:0; display:flex; flex-flow:row nowrap; align-items:center; flex-shrink:0; margin-top:25px;]
[comment]----filler button----[/comment]
[border=transparent; height:auto; width:50px; padding:0; margin-left:8px][/border]
[comment]----filler button----[/comment]
[border=transparent; height:auto; width:50px; padding:0; margin-left:8px][/border]

[comment]----selected button----[/comment]
[border=transparent; height:auto; width:50px; padding:0; margin-left:8px; font-family: var(--button); color: var(--selected); font-size:28px; line-height:100%; font-style:oblique; font-weight:bold; background: var(--bg-1); white-space:nowrap;]03.[/border]
         [/border][/border]
         [comment]----button select end----[/comment]

         [comment]----tab contents----[/comment]
         [border=transparent; height:420px; flex: var(--f2); min-width: var(--f2-mw); padding:20px; box-sizing:border-box;][border=transparent; height:380px; width:100%; padding:0; display:flex; flex-flow:column nowrap; justify-content:flex-end; pointer-events:auto; position:relative; overflow:hidden;]

[comment]----history main----[/comment]
[border=transparent; height:265px; width:100%; padding:0; box-sizing:border-box;][border=transparent; height:100%; width:100%; padding:13px 0; box-sizing:border-box; background: var(--bg-2); border:1px solid var(--border); display:flex; flex-flow:column nowrap;]
    [comment]----history title----[/comment]
    [border=transparent; height:auto; width:100%; padding:0 20px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; flex-shrink:0;][border=transparent; height:0; flex:1; padding:0; border-top:1px solid var(--color-2);][/border][border=transparent; height:auto; width:auto; padding:0; flex-shrink:0; margin-left:15px; color: var(--color-1); font-style:oblique; text-transform:uppercase; font-family: var(--header); font-weight:bold; font-size:20px; letter-spacing:1px; line-height:100%;][comment]

----* * * box title here----

[/comment]history.[/border][/border]

   [comment]----history contents----[/comment]
   [border=transparent; height:100%; width:100%; padding:0; overflow:hidden; margin-top:10px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 12px 0 20px; box-sizing:border-box; --m:4px;][border=transparent; height:0; width:100%; padding:0; margin-bottom: calc(var(--m) * -1 - 4px);][/border]

      [comment]----copy this whole thing to make another paragraph text----[/comment]
      [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:16px; margin: calc(var(--m) + 4px) 0 14px 0; text-align:justify;][comment]

----* * * text starts here here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in turpis sit amet mauris sodales accumsan sit amet in lectus. Sed euismod placerat ex quis tincidunt. Cras tristique purus ut est aliquet, suscipit bibendum augue auctor. Suspendisse potenti. Sed dignissim, eros vitae pulvinar gravida, libero massa sagittis arcu, quis cursus tortor est in turpis. Cras rhoncus, urna ac porta tincidunt, enim libero porta arcu, non vulputate neque urna et mi. Phasellus non justo vitae velit volutpat imperdiet. Suspendisse et maximus erat, ac pretium ligula. Quisque auctor, quam ac viverra ultricies, augue eros interdum arcu, ullamcorper consectetur mi ligula et nibh. Nulla libero tellus, pellentesque non dui hendrerit, pellentesque dictum nisl. Fusce neque massa, gravida sed lorem vel, suscipit iaculis enim. Vestibulum interdum ultrices odio. Proin laoreet placerat est nec hendrerit. Nunc quis lorem gravida, facilisis est sit amet, tincidunt odio. Interdum et malesuada fames ac ante ipsum primis in faucibus.
      [/border]
      [comment]----copy me too!----[/comment]


   [/border][/border][/border]
   [comment]----history contents end----[/comment]
[/border][/border]
[comment]----history main end----[/comment]


[comment]----miscellaneous main----[/comment]
[border=transparent; height:auto; width:100%; padding:0; position:relative; visibility:hidden; margin:0 0 -15px 0; display:flex;][accordion=100%]

   [comment]----misc image/button----[/comment]
   {slide=[border=transparent; height:99px; width:auto; padding:15px; box-sizing:border-box; position:relative; visibility:visible; margin:-7px;]
      [border=transparent; height:45px; width:55px; padding:0; border:1px solid var(--color-2); border-bottom:0; border-right:0; position:absolute; top:0; left:0;][/border]
      [border=transparent; height:45px; width:55px; padding:0; border:1px solid var(--color-2); border-top:0; border-left:0; position:absolute; bottom:0; right:0;][/border]
      [border=transparent; height:100%; width:auto; padding:0; background: var(--img-3); background-size:cover; -webkit-filter: saturate(0.8) grayscale(0.2);

/*edit the following to adjust the cropping of the image*/ background-position:50% 60%;

][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.15;][/border][/border]
         [comment]----title----[/comment]
         [border=transparent; height:auto; width:auto; max-width:145px; position:absolute; bottom:8px; left:9px; padding:6px 10px 5px 10px; box-sizing:border-box; background: var(--color-1); color: var(--color-3); font-family: var(--header); letter-spacing:2px; font-size:15px; font-weight:bold; text-transform:uppercase; line-height:120%; font-style:oblique;][comment]

----* * * title here----

[/comment]extra.[/border]
         [border=transparent; height:auto; width:auto; position:absolute; top:15px; right:15px; padding:4px 5px 4px 6px; box-sizing:border-box; background: var(--color-1); color: var(--color-3); font-family: var(--body); letter-spacing:2px; font-size:7px; font-weight:bold; text-transform:uppercase; line-height:120%;]click[/border][/border]}
   [comment]----misc image/button end----[/comment]

   [comment]----misc contents----[/comment]
   [border=transparent; height:265px; width:auto; padding:0; position:relative; visibility:visible; margin:10px -7px -7px -5px;][border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:row nowrap;]

      [comment]----left----[/comment]
      [border=transparent; height:265px; flex:1; padding:0; margin-right:20px; display:flex; flex-flow:column nowrap;]

         [comment]----misc main----[/comment]
         [border=transparent; height:90%; width:100%; padding:0; box-sizing:border-box;][border=transparent; height:100%; width:100%; padding:13px 0; box-sizing:border-box; background: var(--bg-2); border:1px solid var(--border); display:flex; flex-flow:column nowrap;]
[comment]----misc title----[/comment]
[border=transparent; height:auto; width:100%; padding:0 20px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; flex-shrink:0;][border=transparent; height:0; flex:1; padding:0; border-top:1px solid var(--color-2);][/border][border=transparent; height:auto; width:auto; padding:0; flex-shrink:0; margin-left:15px; color: var(--color-1); font-style:oblique; text-transform:uppercase; font-family: var(--header); font-weight:bold; font-size:18px; letter-spacing:1px; line-height:100%;][comment]

----* * * box title here----

[/comment]misc.[/border][/border]

[comment]----misc contents----[/comment]
[border=transparent; height:100%; width:100%; padding:0; overflow:hidden; margin-top:10px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  [border=transparent; height:auto; width:50%; padding:0 12px 0 20px; box-sizing:border-box; --m:4px;][border=transparent; height:0; width:100%; padding:0; margin-bottom: calc(var(--m) * -1 - 4px);][/border]

   [comment]----copy this whole thing to make another tag----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top:var(--m);]
      [border=transparent; height:auto; width:auto; padding:4px 5px 3px 6px; box-sizing:border-box; background: var(--color-1); color: var(--color-3); font-family: var(--body); font-size:10.5px; font-weight:bold; line-height:12px; letter-spacing:2px; text-transform:uppercase; margin:4px 12px 0 0;][comment]

----* * * info title here----

[/comment]extra facts.[/border]

      [border=transparent; height:auto; flex:1; min-width:fit-content; padding:0; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:16px; margin:4px 0 0 0;][comment]

----* * * info contents here----

[/comment]✧ this is a pretty cool fact!
✧ fact 2
✧ fact 3[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another tag----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top:var(--m);]
      [border=transparent; height:auto; width:auto; padding:4px 5px 3px 6px; box-sizing:border-box; background: var(--color-1); color: var(--color-3); font-family: var(--body); font-size:10.5px; font-weight:bold; line-height:12px; letter-spacing:2px; text-transform:uppercase; margin:4px 12px 0 0;][comment]

----* * * info title here----

[/comment]question.[/border]

      [border=transparent; height:auto; flex:1; min-width:fit-content; padding:0; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:16px; margin:4px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
   [/border]
   [comment]----copy me too!----[/comment]

[/border][/border][/border]
[comment]----misc contents end----[/comment]
         [/border][/border]
         [comment]----misc main end----[/comment]

         [comment]----music player----[/comment]
         [border=transparent; height:20px; width:100%; padding:0; display:flex; flex-flow:row nowrap; flex-shrink:0; margin-top:5px;]
[comment]----play button----[/comment]
[border=transparent; height:20px; width:20px; padding:0; position:relative; display:flex; align-items:center; flex-shrink:0; margin:1px 0 0 0;]
   [border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:11px; position:relative; z-index:2; pointer-events:none;][fa]fas fa-play[/fa][/border]
   [border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:13px; position:relative; z-index:2; pointer-events:none; margin:0.5px 0 0 2px;][fa]fas fa-pause[/fa][/border]

      [comment]----actual media player----[/comment]
      [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0.01%;][border=transparent; height:32px; width:32px; padding:0; position:relative; pointer-events:auto;]

[comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
[border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
   [media=soundcloud]soundcloud link[/media]
[/border]

[comment]----google drive (replace the google file code within media tag with your own)----[/comment]
[border=transparent; height:500px; width:500px; margin-top:-170px; margin-left:-93px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
   [media=googledrive]drive link[/MEDIA]
[/border]

      [/border][/border]
      [comment]----actual media player end----[/comment]
[/border]
[comment]----play button end----[/comment]

[comment]----song info----[/comment]
[border=transparent; height:auto; max-height:20px; flex:1; padding:1px 0 0 0; box-sizing:border-box; display:flex; flex-flow:row wrap; align-items:center; margin-left:12px; overflow:hidden;]
   [comment]----song title----[/comment]
   [border=transparent; height:20px; width:auto; padding:0; display:flex; align-items:center;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:clamp(120px, 12vw, 230px); padding:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-family: var(--body); text-transform:uppercase; color: var(--color-2); font-size:11px; line-height:100%; font-weight:bold; letter-spacing:1px;][comment]

----* * * song title here----

[/comment]title[/border]
   [/border]

   [comment]----song artist----[/comment]
   [border=transparent; height:20px; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0.5px 0 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;][border=transparent; height:0; width:25px; padding:0; border-top:1px solid var(--color-2); flex-shrink:0; margin:0 8px;][/border][border=transparent; height:auto; width:auto; padding:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-family: var(--body); text-transform:uppercase; color: var(--color-2); font-size:10px; line-height:100%; opacity:0.8;][comment]


----* * * song artist here----

[/comment]artist[/border]
   [/border]
[/border]
[comment]----song info end----[/comment]
         [/border]
         [comment]----music player end----[/comment]

      [/border]
      [comment]----left end----[/comment]


      [comment]----gallery----[/comment]
      [border=transparent; height:265px; width:96px; padding:12px; box-sizing:border-box; flex-shrink:0; position:relative;][border=transparent; height:35px; width:55px; padding:0; border:1px solid var(--color-2); border-bottom:0; border-right:0; position:absolute; top:0; left:0; pointer-events:none;][/border][border=transparent; height:35px; width:55px; padding:0; border:1px solid var(--color-2); border-top:0; border-left:0; position:absolute; bottom:0; right:0; pointer-events:none;][/border][border=transparent; height:100%; width:72px; padding:0; overflow:hidden; position:relative;][border=transparent; height:100%; width:89px; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:72px; padding:0; --x:72px; --m-g:12px;][border=transparent; height:0; width:100%; padding:0; margin-bottom: calc(var(--m-g) * -1);][/border][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:2px; box-sizing:border-box; background: var(--bg-1); color: var(--color-2); font-family: var(--body); font-size:8px; text-transform:uppercase; opacity:0.8; line-height:80%; position:absolute; top:0px; left:0; z-index:5;][fa]fas fa-angle-down[/fa][/border]

         [comment]----copy this whole thing to add another gallery image----[/comment]
         [border=transparent; height: var(--x); width: var(--x); padding:0; margin-top: var(--m-g);

/*replace the number in gimg-X to match variables*/ background: var(--gimg-1);

background-size:cover; -webkit-filter: saturate(0.8) grayscale(0.2);

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.15;][/border][/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to add another gallery image----[/comment]
         [border=transparent; height: var(--x); width: var(--x); padding:0; margin-top: var(--m-g);

/*replace the number in gimg-X to match variables*/ background: var(--gimg-2);

background-size:cover; -webkit-filter: saturate(0.8) grayscale(0.2);

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.15;][/border][/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to add another gallery image----[/comment]
         [border=transparent; height: var(--x); width: var(--x); padding:0; margin-top: var(--m-g);

/*replace the number in gimg-X to match variables*/ background: var(--gimg-3);

background-size:cover; -webkit-filter: saturate(0.8) grayscale(0.2);

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.15;][/border][/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to add another gallery image----[/comment]
         [border=transparent; height: var(--x); width: var(--x); padding:0; margin-top: var(--m-g);

/*replace the number in gimg-X to match variables*/ background: var(--gimg-4);

background-size:cover; -webkit-filter: saturate(0.8) grayscale(0.2);

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.15;][/border][/border]
         [comment]----copy me too!----[/comment]

      [/border][/border][/border][/border]
      [comment]----gallery end----[/comment]
   [/border][/border]
   [comment]----misc contents end----[/comment]

{/slide}[/accordion][/border]
[comment]----miscellaneous main end----[/comment]
         [/border][/border]
         [comment]----tab contents end----[/comment]
      [/border][/tab]
      [comment]----tab 3 end----[/comment]


   [/tabs][/border][/border][/border]
   [comment]----tabs end----[/comment]

   [comment]----right (filler)----[/comment]
   [border=transparent; height:420px; flex: var(--f2); min-width: var(--f2-mw); padding:20px; box-sizing:border-box;][/border]

[/border]
[comment]----signature! do not remove----[/comment]
[bg=transparent; height:auto;width:fit-content; padding:0px 5px 3px 5px; box-sizing:border-box; position:absolute ;z-index:6;opacity:0.5;color: var(--color-2); font-size:9px;text-align:center; top:-1px; right:8px; background:var(--bg-color); line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/bg]
[/border][/border]