[comment]code by nine lives ♡

fonts used:
[font=Oswald]headers & subheaders[/font]
[font=DM Sans]subtitles/body text[/font]
[font=Mr Dafoe]script accents[/font]

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

[/comment][border=transparent;
/*background colour*/
--bg-color: #fff;
/*border colour*/
--border: #ededed;
/*light accent colour -- colour strip, box accents idk*/
--color-1: #cfe4cc;
/*darker accent colour -- buttons, other box accents*/
--color-2: #939f92;
/*selected button colour on default same as dark headers, to change just replace everything between : and ; with a hexcode!*/
--s-button: var(--h1);

/*dark header colour*/
--h1: #364437;
/*lighter header colour (close to light accent colour, for fancy quote box 1)*/
--h2: #c1d1bf;
/*text colour for basics and some subheaders. make sure it contrasts w accent colours*/
--t-color-1: #fff;
/*text colour for main contents. make sure it contrasts w background colours*/
--t-color-2: #000;

/*fonts used*/
--header: 'Oswald', sans-serif;
--subheader: 'Oswald', sans-serif;
--body: 'DM Sans', sans-serif;
--quote: 'Mr Dafoe', display;

/*music player album image*/
--music: url('https://i1.sndcdn.com/artworks-000209382886-umg6v2-t500x500.jpg');

/*images are categorised based on which they're in. images in tab 1 are a, tab 2 are b and so on*/
--aimg-1: url('https://i.pinimg.com/564x/21/63/dd/2163dd3532656633b5a5492ac3a19735.jpg');
--bimg-1: url('https://i.pinimg.com/564x/0b/a4/5f/0ba45f86e68f76def759a3ba8c6b59c4.jpg');
--bimg-2: url('https://img.ananweb.jp/2020/12/11201626/2230-neverland1-1.jpg');
--cimg-1: url('https://64.media.tumblr.com/fb0f802f032cb86fd8cf6ad478e8116f/d01f125cb17e52f3-f9/s1280x1920/8dda8f81de80e57784fbed23c4433f455aed349a.jpg');
--cimg-2: url('https://64.media.tumblr.com/afedb35e047b2d8aa6ece410fef653eb/d01f125cb17e52f3-57/s1280x1920/1e29df60c6198dbfa6ef73c23f844c11edbe055b.jpg');
--cimg-3: url('https://64.media.tumblr.com/fad621b965bcb5bc3e1c8c71651bbe9e/d01f125cb17e52f3-e4/s640x960/5fe1da8cadf3f76a866958eed28f144034683253.jpg');
--cimg-4: url('https://64.media.tumblr.com/a57b8443fd3baa82b38c4d1622ade170/d01f125cb17e52f3-b8/s640x960/257251b5f834730cf26c7d121398c221fd9c20d1.jpg');
--cimg-5: url('https://64.media.tumblr.com/76cde0461684749cb9d3b6a14228a767/tumblr_pn4k8g1nKT1qe2uw2o1_1280.jpg');
--cimg-6: url('https://64.media.tumblr.com/60cd96a6c22bcd468cbcd20718403025/tumblr_pn4k8g1nKT1qe2uw2o2_1280.jpg');
--dimg-1: url('https://64.media.tumblr.com/78c3f22672eef09e2a495be3c4a5cf9b/tumblr_plgnedxz8C1see09a_1280.jpg');
--eimg-1: url('https://64.media.tumblr.com/f2ecd2d15a673e65db3bfab4c2e01e54/tumblr_plgnecdqTG1see09a_1280.jpg');

/*gallery images*/
--gimg-1: url('https://64.media.tumblr.com/e34220ee15dffa3e3e30e42d2dbf60b3/tumblr_pqexzgTnxR1see09a_1280.jpg');
--gimg-2: url('https://64.media.tumblr.com/b117164dde82942ad39d11216bfd14df/tumblr_pqexzgzEUa1see09a_1280.jpg');
--gimg-3: url('https://64.media.tumblr.com/8c9d88f0c4618de7a9cd8a0ddac99087/tumblr_pqexzj0VMs1see09a_1280.jpg');
--gimg-4: url('https://64.media.tumblr.com/8333f295fd7864df86a2d8db19b5678d/6dcd6e5b05b7a444-cb/s1280x1920/3d6da339e251494f43761f3a4e82e75646c0c011.jpg');
--gimg-5: url('https://64.media.tumblr.com/615fc41096989dadb0132f39ef5db2e9/6dcd6e5b05b7a444-65/s1280x1920/c8f718e2b44502cad8015afc4e0e8d1ef9e3e669.jpg');
--gimg-6: url('https://64.media.tumblr.com/cb2044859aafeaf9dab6d4cf672e42dc/6dcd6e5b05b7a444-24/s1280x1920/2d134008c743309b8aae9fc9fe5528404e509c19.jpg');

/*relationship images. add more based on the number of relationships you add in the actual code by following the same format and changing the number in rX*/
--r1: url('https://64.media.tumblr.com/e22d6a4debbec52e980c701a3087f20b/fd382c455a0aadc3-0f/s400x600/e44f50e312ad556961bdd45f69ea20e3f767a129.gifv');
--r2: url('https://64.media.tumblr.com/9b8fa9a9afaa18ce844b2c02f5c90c7f/tumblr_puohdw0S8z1r3hv4so4_400.gifv');


height:530px; width:100%; max-width:390px; padding:15px 20px; box-sizing:border-box; margin:auto; line-height:0; position:relative; background: var(--bg-color); border:1px solid var(--border); display:flex; align-items:flex-end; justify-content:flex-end; overflow:hidden;]

   [comment]----tabs----[/comment]
   [border=transparent; height:41%; width:30px; padding:0; flex:auto 0; overflow:hidden;][border=transparent; padding:0; margin:-5px 0 0 -25px; line-height:37px;][tabs]


      [comment]----tab one (basics)----[/comment]
      [tab=aa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:4; pointer-events:none; display:flex; flex-flow:row nowrap; align-items:flex-end; line-height:0;]
         [comment]----tab contents----[/comment]
         [border=transparent; height:100%; width:calc(100% - 50px); padding:0; display:flex; flex-flow:column nowrap; pointer-events:auto;]

[comment]----basics header----[/comment]
[border=transparent; height:23%; width:100%; padding:15px clamp(10px, 3vw, 20px); padding-top:25px; box-sizing:border-box; position:relative; display:flex; align-items:center;]
   [comment]----namebox----[/comment]
   [border=transparent; height:clamp(38px, 11vw, 54px); width:58%; padding:0; background: var(--color-1); position:relative; margin-left:clamp(15px, 4vw, 25px);]

      [comment]----nickname/short name----[/comment]
      [border=transparent; height:fit-content; width:fit-content; max-width:calc(100% - 5px); padding:0; overflow:hidden; white-space:nowrap; position:absolute; top:clamp(-14px, -4vw, -10px); left:clamp(-22px, -3.5vw, -17px); color: var(--h1); font-family: var(--header); text-transform:uppercase; font-weight:bold; letter-spacing:clamp(1px, 1.5vw, 6px); font-size:clamp(34px, 11.5vw, 55px); line-height:90%;][comment]

----* * * short name here (4-5 letters max plz!)----

[/comment]mina[/border]

      [comment]----subtitle here----[/comment]
      [border=transparent; height:fit-content; max-height:clamp(13px, 4vw, 17px); width:fit-content; max-width:calc(100% + 21px); padding:0; position:absolute; bottom:clamp(-5px, -1.5vw, -2px); left:clamp(-21px, -3.5vw, -16px); overflow:hidden; color: var(--color-2); font-family: var(--body); font-size:clamp(12px, 4vw, 16px); line-height:100%; white-space:nowrap;][comment]

----* * * subtitle here----

[/comment]she dreams of a sunrise[/border]

   [/border]
   [comment]----namebox end----[/comment]

   [comment]----music box----[/comment]
   [border=transparent; height:auto; min-height:48px; max-height:56px; width:clamp(130px, 41% + 10vw, 155px); padding:5px; box-sizing:border-box; background: var(--color-2); position:absolute; top:20px; right:5px; display:flex; flex-flow:row nowrap; align-items:center;]

      [comment]----play button----[/comment]
      [border=transparent; height:38px; width:38px; padding:0; position:relative; z-index:3; background: var(--music), var(--color-1); background-size:cover; background-position:50% 50%; display:flex; align-items:center; justify-content:center; font-size:13px; color: var(--bg-color); text-shadow:1px 2px var(--color-2); flex:auto 0; border-radius:2px; pointer-events:none; flex:auto 0;][fa]fas fa-play[/fa][/border]

      [comment]----song info----[/comment]
      [border=transparent; height:100%; flex:1; padding:0 0 0 5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:flex-end; justify-content:center;]
         [comment]----song name----[/comment]
         [border=transparent; height:fit-content; width:100%; padding:0; color: var(--bg-color); font-size:13px; letter-spacing:1px; text-transform:uppercase; line-height:100%; font-family: var(--header); text-align:right;][comment]

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

[/comment]goodbye world[/border]

         [comment]----artist name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-1); font-size:10px; text-align:right; line-height:100%; font-family: var(--body); margin:4px 0 0 auto; font-weight:bold; letter-spacing:clamp(0px, 0.2vw, 0.8px);][comment]

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

[/comment]by artist.[/border]
      [/border]
      [comment]----song info end----[/comment]

      [comment]----actual media player (put your song here!)----[/comment]
      [border=transparent; height:100%; width:35px; padding:0; position:absolute; top:0; left:6.5px; z-index:1; display:flex; align-items:center;][border=transparent; height:35px; width:35px; padding:0; overflow:hidden;]

         [comment]----soundcloud (put a soundcloud link within media tag)----[/comment]
         [border=transparent; height:80px; width:180px; padding:0; margin-top:-14px; margin-left:-13px;]
[media=soundcloud]https://soundcloud.com/sarah-wayne-744610086/goodbye-world-train-to-busan-ost[/media]
         [/border]

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

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

   [/border]
   [comment]----music box end----[/comment]
[/border]
[comment]----basics header end----[/comment]

[comment]----basics container----[/comment]
[border=transparent; height:360px; width:clamp(195px, 68vw, 295px); max-width:calc(100% - 15px); margin:0 clamp(15px, 5vw, 35px) 0 0; padding:0; background:var(--aimg-1); background-size:cover; background-position:50% 50%; position:relative; box-shadow:clamp(15px, 5vw, 20px) clamp(15px, 5vw, 20px) var(--color-1); overflow:hidden;][border=transparent; padding:0; margin:-20px;][accordion]

   [comment]----image slide----[/comment]
   {slide=[border=transparent; padding:20px; height:360px; width:clamp(195px, 68vw, 295px);][border=transparent; padding:3px; height:100%; width:100%; background:var(--aimg-1); background-size:cover; position:relative; top:-23px; left:-10px;

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

][/border][/border] | open}[border=transparent; height:360px; width:200px; padding:0;][/border]{/slide}

   [comment]----contents slide----[/comment]
   {slide=[border=transparent; height:364px; width:clamp(195px, 68vw, 295px); position:absolute; top:-409px; left:19px; padding:0; pointer-events:none;][border=transparent; height:100%; width:100%; padding:clamp(15px, 3.5vw, 25px); box-sizing:border-box; position:relative; font-variant:none; font-weight:normal;]

      [comment]----basics contents----[/comment]
      [border=transparent; height:100%; width:100%; padding:0; position:relative; z-index:2; display:flex; flex-direction:column; overflow:hidden; pointer-events:auto; cursor:auto;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap; color: var(--t-color-1);]

         [comment]----copy this whole thing to make another bit of info!----[/comment]
         [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin:12px 0;]
[border=transparent; height:fit-content; width:100%; padding:0; font-weight:bold; font-family: var(--header); text-transform:uppercase; font-size:17px; letter-spacing:clamp(0px, 0.5vw, 1.5px); line-height:100%; margin:0 0 5px 0;][comment]

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

[/comment]name[/border]

[border=transparent; height:fit-content; width:100%; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:15px; line-height:100%; letter-spacing:clamp(0px, 0.5vw, 0.5px);][comment]

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

[/comment]hamabe minami[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info!----[/comment]
         [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin:12px 0;]
[border=transparent; height:fit-content; width:100%; padding:0; font-weight:bold; font-family: var(--header); text-transform:uppercase; font-size:17px; letter-spacing:clamp(0px, 0.5vw, 1.5px); line-height:100%; margin:0 0 5px 0;][comment]

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

[/comment]age[/border]

[border=transparent; height:fit-content; width:100%; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:15px; line-height:100%; letter-spacing:clamp(0px, 0.5vw, 0.5px);][comment]

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

[/comment]twenty-one[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info!----[/comment]
         [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin:12px 0;]
[border=transparent; height:fit-content; width:100%; padding:0; font-weight:bold; font-family: var(--header); text-transform:uppercase; font-size:17px; letter-spacing:clamp(0px, 0.5vw, 1.5px); line-height:100%; margin:0 0 5px 0;][comment]

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

[/comment]gender[/border]

[border=transparent; height:fit-content; width:100%; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:15px; line-height:100%; letter-spacing:clamp(0px, 0.5vw, 0.5px);][comment]

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

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

         [comment]----copy this whole thing to make another bit of info!----[/comment]
         [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin:12px 0;]
[border=transparent; height:fit-content; width:100%; padding:0; font-weight:bold; font-family: var(--header); text-transform:uppercase; font-size:17px; letter-spacing:clamp(0px, 0.5vw, 1.5px); line-height:100%; margin:0 0 5px 0;][comment]

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

[/comment]p.o.b.[/border]

[border=transparent; height:fit-content; width:100%; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:15px; line-height:100%; letter-spacing:clamp(0px, 0.5vw, 0.5px);][comment]

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

[/comment]ishikawa prefecture, japan[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info!----[/comment]
         [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin:12px 0;]
[border=transparent; height:fit-content; width:100%; padding:0; font-weight:bold; font-family: var(--header); text-transform:uppercase; font-size:17px; letter-spacing:clamp(0px, 0.5vw, 1.5px); line-height:100%; margin:0 0 5px 0;][comment]

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

[/comment]d.o.b.[/border]

[border=transparent; height:fit-content; width:100%; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:15px; line-height:100%; letter-spacing:clamp(0px, 0.5vw, 0.5px);][comment]

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

[/comment]august 29, 2000[/border]
         [/border]
         [comment]----copy me too!----[/comment]

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

      [comment]----basics background (ignore!)----[/comment]
      [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; opacity:0.8; backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px);] 
[border=transparent; height:100%; width:100%; padding:0; background: var(--color-2); opacity:0.4; filter:brightness(0.7);][/border][/border]

   [/border][/border]}{/slide}
   [comment]----contents slide end----[/comment]

[/accordion][/border][/border]
[comment]----basics container end----[/comment]

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

         [comment]----button select----[/comment]
         [border=transparent; height:41%; width:30px; padding:5px 0; box-sizing:border-box; pointer-events:none; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; margin:0 20px 10px auto;]

[comment]----selected button----[/comment]
[border=transparent; height:30px; min-height:30px; min-width:30px; width:30px; padding:0; background: var(--s-button); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center; color: var(--bg-color); font-size:14px; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice. remember to match icons at "tab cover")----

[/comment][fa]fas fa-home[/fa][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
         [/border]
         [comment]----button select end----[/comment]
      [/border][/tab]
      [comment]----tab one end----[/comment]


      [comment]----tab two (visage)----[/comment]
      [tab=aa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:4; pointer-events:none; display:flex; flex-flow:row nowrap; align-items:flex-end; line-height:0;]
         [comment]----tab contents----[/comment]
         [border=transparent; height:100%; width:calc(100% - 50px); padding:0 5px 0 0; box-sizing:border-box;display:flex; flex-flow:column nowrap; pointer-events:auto;]

[comment]----visage pt.1----[/comment]
[border=transparent; height:clamp(128px, 15.5vw + 6vw, 145px); min-height:fit-content; max-height:145px; width:100%; padding:clamp(10px, 3vw, 20px) 0 0 clamp(10px, 3vw, 20px); box-sizing:border-box; flex:auto 0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:row wrap;]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; min-height:clamp(26px, 4vw, 28px); flex:1; min-width:calc(50% - 10px); padding:0; margin:6px 5px; background: var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
      [border=transparent; height:auto; min-height:100%; width:fit-content; min-width:clamp(50px, 7vw, 58px); max-width:50%; padding:3px 5px 5px 5px; box-sizing:border-box; background: var(--color-2); color: var(--bg-color); font-size:clamp(12px, 2vw, 14px); text-transform:uppercase; font-family: var(--header); font-weight:bold; letter-spacing:0.5px; flex:auto 0; line-height:100%; display:flex; align-items:center; justify-content:center; text-align:center;letter-spacing:clamp(0.5px, 0.5vw, 1px);][comment]

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

[/comment]height[/border]

      [border=transparent; height:fit-content; max-height:100%; flex:1; padding:5px; box-sizing:border-box; color: var(--t-color-2); font-family: var(--body); font-size:clamp(11px, 1.6vw, 12px); line-height:14px; text-align:center;][comment]

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

[/comment]height info[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; min-height:clamp(26px, 4vw, 28px); flex:1; min-width:calc(50% - 10px); padding:0; margin:6px 5px; background: var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
      [border=transparent; height:auto; min-height:100%; width:fit-content; min-width:clamp(50px, 7vw, 58px); max-width:50%; padding:3px 5px 5px 5px; box-sizing:border-box; background: var(--color-2); color: var(--bg-color); font-size:clamp(12px, 2vw, 14px); text-transform:uppercase; font-family: var(--header); font-weight:bold; letter-spacing:0.5px; flex:auto 0; line-height:100%; display:flex; align-items:center; justify-content:center; text-align:center;letter-spacing:clamp(0.5px, 0.5vw, 1px);][comment]

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

[/comment]weight[/border]

      [border=transparent; height:fit-content; max-height:100%; flex:1; padding:5px; box-sizing:border-box; color: var(--t-color-2); font-family: var(--body); font-size:clamp(11px, 1.6vw, 12px); line-height:14px; text-align:center;][comment]

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

[/comment]weight info[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; min-height:clamp(26px, 4vw, 28px); flex:1; min-width:calc(50% - 10px); padding:0; margin:6px 5px; background: var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
      [border=transparent; height:auto; min-height:100%; width:fit-content; min-width:clamp(50px, 7vw, 58px); max-width:50%; padding:3px 5px 5px 5px; box-sizing:border-box; background: var(--color-2); color: var(--bg-color); font-size:clamp(12px, 2vw, 14px); text-transform:uppercase; font-family: var(--header); font-weight:bold; letter-spacing:0.5px; flex:auto 0; line-height:100%; display:flex; align-items:center; justify-content:center; text-align:center;letter-spacing:clamp(0.5px, 0.5vw, 1px);][comment]

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

[/comment]hair[/border]

      [border=transparent; height:fit-content; max-height:100%; flex:1; padding:5px; box-sizing:border-box; color: var(--t-color-2); font-family: var(--body); font-size:clamp(11px, 1.6vw, 12px); line-height:14px; text-align:center;][comment]

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

[/comment]hair info[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; min-height:clamp(26px, 4vw, 28px); flex:1; min-width:calc(50% - 10px); padding:0; margin:6px 5px; background: var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
      [border=transparent; height:auto; min-height:100%; width:fit-content; min-width:clamp(50px, 7vw, 58px); max-width:50%; padding:3px 5px 5px 5px; box-sizing:border-box; background: var(--color-2); color: var(--bg-color); font-size:clamp(12px, 2vw, 14px); text-transform:uppercase; font-family: var(--header); font-weight:bold; letter-spacing:0.5px; flex:auto 0; line-height:100%; display:flex; align-items:center; justify-content:center; text-align:center;letter-spacing:clamp(0.5px, 0.5vw, 1px);][comment]

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

[/comment]eyes[/border]

      [border=transparent; height:fit-content; max-height:100%; flex:1; padding:5px; box-sizing:border-box; color: var(--t-color-2); font-family: var(--body); font-size:clamp(11px, 1.6vw, 12px); line-height:14px; text-align:center;][comment]

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

[/comment]eyes info[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; min-height:clamp(26px, 4vw, 28px); flex:1; min-width:calc(50% - 10px); padding:0; margin:6px 5px; background: var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
      [border=transparent; height:auto; min-height:100%; width:fit-content; min-width:clamp(50px, 7vw, 58px); max-width:50%; padding:3px 5px 5px 5px; box-sizing:border-box; background: var(--color-2); color: var(--bg-color); font-size:clamp(12px, 2vw, 14px); text-transform:uppercase; font-family: var(--header); font-weight:bold; letter-spacing:0.5px; flex:auto 0; line-height:100%; display:flex; align-items:center; justify-content:center; text-align:center;letter-spacing:clamp(0.5px, 0.5vw, 1px);][comment]

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

[/comment]build[/border]

      [border=transparent; height:fit-content; max-height:100%; flex:1; padding:5px; box-sizing:border-box; color: var(--t-color-2); font-family: var(--body); font-size:clamp(11px, 1.6vw, 12px); line-height:14px; text-align:center;][comment]

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

[/comment]build info[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; min-height:clamp(26px, 4vw, 28px); flex:1; min-width:calc(50% - 10px); padding:0; margin:6px 5px; background: var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
      [border=transparent; height:auto; min-height:100%; width:fit-content; min-width:clamp(50px, 7vw, 58px); max-width:50%; padding:3px 5px 5px 5px; box-sizing:border-box; background: var(--color-2); color: var(--bg-color); font-size:clamp(12px, 2vw, 14px); text-transform:uppercase; font-family: var(--header); font-weight:bold; letter-spacing:0.5px; flex:auto 0; line-height:100%; display:flex; align-items:center; justify-content:center; text-align:center;letter-spacing:clamp(0.5px, 0.5vw, 1px);][comment]

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

[/comment]fc[/border]

      [border=transparent; height:fit-content; max-height:100%; flex:1; padding:5px; box-sizing:border-box; color: var(--t-color-2); font-family: var(--body); font-size:clamp(11px, 1.6vw, 12px); line-height:14px; text-align:center;][comment]

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

[/comment]fc info[/border]
   [/border]
   [comment]----copy me too!----[/comment]

[/border][/border][/border]
[comment]----visage pt.1 end----[/comment]


[comment]----fancy quote box----[/comment]
[border=transparent; flex:1; width:calc(100% - 15px); padding:0; margin:5px 15px 15px 0; position:relative; display:flex; flex-flow:column nowrap; align-items:center; justify-content:flex-start;]

   [comment]----small image----[/comment]
   [border=transparent; height:87px; width:87px; padding:0; background: var(--bimg-1); background-size:cover; margin:30px 0 -30px 105px; position:relative; top:clamp(-30px, -6vw, -15px); left:clamp(-45px, 6vw, -10px); border-radius:50%;

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


   [comment]----quote container----[/comment]
   [border=transparent; height:50%; max-height:clamp(115px, 13vw, 130px); width:65%; padding:0; margin:auto 0 10px auto; overflow:hidden;]

      [comment]----quote title----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:0; position:absolute; top:clamp(-30px, -6vw, -3px); right:clamp(30px, 6vw, 65px); margin:91px clamp(-35px, -5vw, -10px) 0 0; z-index:2; font-size:clamp(78px, 10vw, 84px); font-family: var(--quote); color: var(--h2); line-height:60%; transform: rotate(-8deg); text-align:right; pointer-events:none; text-shadow:2px 2px var(--bg-color);][comment]

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

[/comment]dream[/border]

      [comment]----quote contents----[/comment]
      [border=transparent; height:100%; width:100%; padding:0; color: var(--t-color-2); font-family: var(--body); font-size:11px; text-align:justify; line-height:14.5px;][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet. Donec eget tortor et odio tincidunt feugiat non ac dolor. Ut tristique magna quis consequat mattis. Aliquam eleifend odio et placerat pellentesque. Nunc risus velit, semper vel tincidunt eu, tincidunt vel tellus. Morbi faucibus nisi quis purus malesuada congue. Aliquam id velit sed elit sodales auctor. Phasellus lorem diam, ultricies at rhoncus et, sagittis ut lorem. Nulla ut vestibulum est. Aenean pulvinar nulla at dignissim vestibulum.
      [/border]
      [comment]----quote contents end----[/comment]

   [/border]
   [comment]----quote container end----[/comment]

   [comment]---big image----[/comment]
   [border=transparent; height:195px; width:195px; padding:0; background: var(--bimg-2); position:absolute; bottom:0; left:-30px; z-index:1; border-radius:50%; background-size:cover;

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

[/border]
[comment]----fancy quote box end----[/comment]


[comment]----visage pt.2----[/comment]
[border=transparent; height:140px; min-height:fit-content; max-height:140px; width:100%; padding: 0 5px clamp(10px, 3vw, 20px) clamp(10px, 3vw, 20px); box-sizing:border-box; flex:auto 0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]

   [comment]----copy this whole thing to make another bit of (long) info----[/comment]
   [border=transparent; height:calc(100% - 10px); max-height:calc(100% - 10px); width:50%; padding:0; margin:5px 0; background: var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
      [border=transparent; height:auto; min-height:100%; width:fit-content; min-width:clamp(50px, 7vw, 58px); max-width:50%; padding:3px 5px 5px 5px; box-sizing:border-box; background: var(--color-2); color: var(--bg-color); font-size:clamp(12px, 2vw, 14px); text-transform:uppercase; font-family: var(--header); font-weight:bold; letter-spacing:0.5px; flex:auto 0; line-height:100%; display:flex; align-items:center; justify-content:center; text-align:center;letter-spacing:clamp(0.5px, 0.5vw, 1px);][comment]

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

[/comment]style[/border]

      [border=transparent; height:fit-content; max-height:100%; flex:1; padding:8px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:auto;][border=transparent; height:auto; width:50%; padding:0 8px; box-sizing:border-box; color: var(--t-color-2); font-family: var(--body); font-size:11px; line-height:14px; text-align:justify;][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet. Donec eget tortor et odio tincidunt feugiat non ac dolor. Ut tristique magna quis consequat mattis. Aliquam eleifend odio et placerat pellentesque. Nunc risus velit, semper vel tincidunt eu, tincidunt vel tellus. Morbi faucibus nisi quis purus malesuada congue. Aliquam id velit sed elit sodales auctor. Phasellus lorem diam, ultricies at rhoncus et, sagittis ut lorem. Nulla ut vestibulum est. Aenean pulvinar nulla at dignissim vestibulum.[/border]
      [/border][/border]
   [/border]
   [comment]----copy me too!----[/comment]


[/border][/border]
[comment]----visage pt.2 end----[/comment]

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

         [comment]----button select----[/comment]
         [border=transparent; height:41%; width:30px; padding:5px 0; box-sizing:border-box; pointer-events:none; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; margin:0 20px 10px auto;]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

[comment]----selected button----[/comment]
[border=transparent; height:30px; min-height:30px; min-width:30px; width:30px; padding:0; background: var(--s-button); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center; color: var(--bg-color); font-size:14px; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice. remember to match icons at "tab cover")----

[/comment][fa]fas fa-flower-tulip[/fa][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
         [/border]
         [comment]----button select end----[/comment]
      [/border][/tab]
      [comment]----tab two end----[/comment]


      [comment]----tab three (persona)----[/comment]
      [tab=aa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:4; pointer-events:none; display:flex; flex-flow:row nowrap; align-items:flex-end; line-height:0;]
         [comment]----tab contents----[/comment]
         [border=transparent; height:100%; width:calc(100% - 50px); padding:clamp(10px, 3vw, 20px); padding-right:10px; box-sizing:border-box; display:flex; flex-flow:column nowrap; pointer-events:auto;]

[comment]----persona tabs container----[/comment]
[border=transparent; height:calc(64% - 15px); width:100%; padding:10px 0; box-sizing:border-box; position:relative;]

   [comment]----persona tabs----[/comment]
   [border=transparent; height:10%; width:145px; padding:0; margin:0 clamp(33px, 8vw, 36px) 0 auto; overflow:hidden][border=transparent; padding:0; letter-spacing:-10px; margin:0 -80px 0 clamp(-25px, -7vw, -10px);][tabs]


      [comment]----persona tab one----[/comment]
      [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow:column nowrap; pointer-events:none; letter-spacing:0;]

         [comment]----persona tab header----[/comment]
         [border=transparent; height:57%; width:100%; padding:0; display:flex; flex-flow:column nowrap;]

[comment]----row one (ignore!)----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow: row nowrap; flex:auto 0;]

   [comment]----image one----[/comment]
   [border=transparent; flex:1; height:110px; max-width:clamp(50px, 100% - 134px, 110px); padding:0; background: var(--cimg-1); background-size:cover; margin-right:auto;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
   [border=transparent; height:100%; width:134px; flex:auto 0; margin-left:clamp(10px, 7vw, 15px);][/border]

   [comment]----button select (ignore!)----[/comment]
   [border=transparent; height:60%; width:100%; padding:0; pointer-events:none; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center;][border=transparent; height:70%; width:calc(100% - 30px); max-width:240px; padding:0; position:relative;][border=transparent; height:30px; width:134px; padding:0 3px; box-sizing:border-box; position:absolute; top:-15px; right:10px; display:flex; flex-flow:row nowrap; justify-content:center;]

      [comment]----selected button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--s-button); border-radius:50%; flex:auto 0;][/border]
      [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]

      [comment]----filler button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; border-radius:50%; flex:auto 0;][/border]
      [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]
      [comment]----filler button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; border-radius:50%; flex:auto 0;][/border]
   [/border][/border][/border]
   [comment]----button select end----[/comment]
[/border]
[comment]----row one end----[/comment]

[comment]----row two----[/comment]
[border=transparent; flex:1; width:100%; padding:0; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start; pointer-events:auto;]
   [comment]----persona tab title----[/comment]
   [border=transparent; height:fit-content; width:fit-content; min-width:100px; padding:0 8px; box-sizing:border-box; color: var(--h1); font-size:clamp(38px, 8vw, 43px); font-family: var(--header); text-transform:uppercase; font-weight:bold; letter-spacing:clamp(2px, 1vw, 5px); line-height:100%; flex:auto 0; margin:5px 0 0 0;][comment]

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

[/comment]virtues[/border]

   [comment]----image two----[/comment]
   [border=transparent; height:100%; flex:1; padding:0; position:relative; margin-left:7px;][border=transparent; height:90px; width:100%; max-width:90px; padding:0; position:absolute; bottom:0; right:0; background: var(--cimg-2); background-size:cover;

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

[/border]
[comment]----row two end----[/comment]
         [/border]
         [comment]----persona tab header end----[/comment]

         [comment]----persona tab contents----[/comment]
         [border=transparent; height:calc(43% - 15px); width:100%; padding:0; margin-top:15px; pointer-events:auto; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color-2); font-size:11px; text-align:justify; line-height:14.8px; font-family: var(--body);][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet. Donec eget tortor et odio tincidunt feugiat non ac dolor. Ut tristique magna quis consequat mattis. Aliquam eleifend odio et placerat pellentesque. Nunc risus velit, semper vel tincidunt eu, tincidunt vel tellus. Morbi faucibus nisi quis purus malesuada congue. Aliquam id velit sed elit sodales auctor. Phasellus lorem diam, ultricies at rhoncus et, sagittis ut lorem. Nulla ut vestibulum est. Aenean pulvinar nulla at dignissim vestibulum.

Pellentesque feugiat est ac metus tempor vehicula. Integer magna velit, accumsan vitae odio et, pulvinar suscipit urna. Mauris et felis vitae purus feugiat fringilla vitae ut risus. Pellentesque placerat est nec justo pretium luctus. Mauris porta, nibh in mattis vehicula, ipsum tortor egestas velit, id aliquet sem libero ut massa. Integer ut nunc quis dolor lacinia volutpat a eget dolor. Etiam euismod nisl sit amet ipsum maximus, sit amet viverra leo porttitor. Curabitur ullamcorper, turpis ac aliquam fringilla, mi tortor viverra nulla, at ultrices neque ligula in mass.
         [/border][/border][/border]
         [comment]----persona tab contents end----[/comment]
      [/border][/tab]
      [comment]----persona tab one end----[/comment]


      [comment]----persona tab two----[/comment]
      [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow:column nowrap; pointer-events:none; letter-spacing:0;]

         [comment]----persona tab header----[/comment]
         [border=transparent; height:57%; width:100%; padding:0; display:flex; flex-flow:column nowrap;]

[comment]----row one (ignore!)----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow: row nowrap; flex:auto 0;]

   [comment]----image one----[/comment]
   [border=transparent; flex:1; height:110px; max-width:clamp(50px, 100% - 134px, 110px); padding:0; background: var(--cimg-3); background-size:cover; margin-right:auto;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
   [border=transparent; height:100%; width:134px; flex:auto 0; margin-left:clamp(10px, 7vw, 15px);][/border]

   [comment]----button select (ignore!)----[/comment]
   [border=transparent; height:60%; width:100%; padding:0; pointer-events:none; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center;][border=transparent; height:70%; width:calc(100% - 30px); max-width:240px; padding:0; position:relative;][border=transparent; height:30px; width:134px; padding:0 3px; box-sizing:border-box; position:absolute; top:-15px; right:10px; display:flex; flex-flow:row nowrap; justify-content:center;]
      [comment]----filler button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; border-radius:50%; flex:auto 0;][/border]
      [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]

      [comment]----selected button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--s-button); border-radius:50%; flex:auto 0;][/border]
      [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]

      [comment]----filler button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; border-radius:50%; flex:auto 0;][/border]
   [/border][/border][/border]
   [comment]----button select end----[/comment]
[/border]
[comment]----row one end----[/comment]

[comment]----row two----[/comment]
[border=transparent; flex:1; width:100%; padding:0; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start; pointer-events:auto;]
   [comment]----persona tab title----[/comment]
   [border=transparent; height:fit-content; width:fit-content; min-width:100px; padding:0 8px; box-sizing:border-box; color: var(--h1); font-size:clamp(38px, 8vw, 43px); font-family: var(--header); text-transform:uppercase; font-weight:bold; letter-spacing:clamp(2px, 1vw, 5px); line-height:100%; flex:auto 0; margin:5px 0 0 0;][comment]

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

[/comment]vices[/border]

   [comment]----image two----[/comment]
   [border=transparent; height:100%; flex:1; padding:0; position:relative; margin-left:7px;][border=transparent; height:90px; width:100%; max-width:90px; padding:0; position:absolute; bottom:0; right:0; background: var(--cimg-4); background-size:cover;

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

[/border]
[comment]----row two end----[/comment]
         [/border]
         [comment]----persona tab header end----[/comment]

         [comment]----persona tab contents----[/comment]
         [border=transparent; height:calc(43% - 15px); width:100%; padding:0; margin-top:15px; pointer-events:auto; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color-2); font-size:11px; text-align:justify; line-height:14.5px; font-family: var(--body);][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet. Donec eget tortor et odio tincidunt feugiat non ac dolor. Ut tristique magna quis consequat mattis. Aliquam eleifend odio et placerat pellentesque. Nunc risus velit, semper vel tincidunt eu, tincidunt vel tellus. Morbi faucibus nisi quis purus malesuada congue. Aliquam id velit sed elit sodales auctor. Phasellus lorem diam, ultricies at rhoncus et, sagittis ut lorem. Nulla ut vestibulum est. Aenean pulvinar nulla at dignissim vestibulum.

Pellentesque feugiat est ac metus tempor vehicula. Integer magna velit, accumsan vitae odio et, pulvinar suscipit urna. Mauris et felis vitae purus feugiat fringilla vitae ut risus. Pellentesque placerat est nec justo pretium luctus. Mauris porta, nibh in mattis vehicula, ipsum tortor egestas velit, id aliquet sem libero ut massa. Integer ut nunc quis dolor lacinia volutpat a eget dolor. Etiam euismod nisl sit amet ipsum maximus, sit amet viverra leo porttitor. Curabitur ullamcorper, turpis ac aliquam fringilla, mi tortor viverra nulla, at ultrices neque ligula in mass.
         [/border][/border][/border]
         [comment]----persona tab contents end----[/comment]
      [/border][/tab]
      [comment]----persona tab two end----[/comment]


      [comment]----persona tab three----[/comment]
      [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow:column nowrap; pointer-events:none; letter-spacing:0;]

         [comment]----persona tab header----[/comment]
         [border=transparent; height:57%; width:100%; padding:0; display:flex; flex-flow:column nowrap;]

[comment]----row one (ignore!)----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow: row nowrap; flex:auto 0;]

   [comment]----image one----[/comment]
   [border=transparent; flex:1; height:110px; max-width:clamp(50px, 100% - 134px, 110px); padding:0; background: var(--cimg-5); background-size:cover; margin-right:auto;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
   [border=transparent; height:100%; width:134px; flex:auto 0; margin-left:clamp(10px, 7vw, 15px);][/border]

   [comment]----button select (ignore!)----[/comment]
   [border=transparent; height:60%; width:100%; padding:0; pointer-events:none; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center;][border=transparent; height:70%; width:calc(100% - 30px); max-width:240px; padding:0; position:relative;][border=transparent; height:30px; width:134px; padding:0 3px; box-sizing:border-box; position:absolute; top:-15px; right:10px; display:flex; flex-flow:row nowrap; justify-content:center;]
      [comment]----filler button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; border-radius:50%; flex:auto 0;][/border]
      [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]
      [comment]----filler button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; border-radius:50%; flex:auto 0;][/border]
      [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]

      [comment]----selected button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--s-button); border-radius:50%; flex:auto 0;][/border]

   [/border][/border][/border]
   [comment]----button select end----[/comment]
[/border]
[comment]----row one end----[/comment]

[comment]----row two----[/comment]
[border=transparent; flex:1; width:100%; padding:0; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start; pointer-events:auto;]
   [comment]----persona tab title----[/comment]
   [border=transparent; height:fit-content; width:fit-content; min-width:100px; padding:0 8px; box-sizing:border-box; color: var(--h1); font-size:clamp(38px, 8vw, 43px); font-family: var(--header); text-transform:uppercase; font-weight:bold; letter-spacing:clamp(2px, 1vw, 5px); line-height:100%; flex:auto 0; margin:5px 0 0 0;][comment]

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

[/comment]other[/border]

   [comment]----image two----[/comment]
   [border=transparent; height:100%; flex:1; padding:0; position:relative; margin-left:7px;][border=transparent; height:90px; width:100%; max-width:90px; padding:0; position:absolute; bottom:0; right:0; background: var(--cimg-6); background-size:cover;

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

[/border]
[comment]----row two end----[/comment]
         [/border]
         [comment]----persona tab header end----[/comment]

         [comment]----persona tab contents----[/comment]
         [border=transparent; height:calc(43% - 15px); width:100%; padding:0; margin-top:15px; pointer-events:auto; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color-2); font-size:11px; text-align:justify; line-height:14.5px; font-family: var(--body);][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet. Donec eget tortor et odio tincidunt feugiat non ac dolor. Ut tristique magna quis consequat mattis. Aliquam eleifend odio et placerat pellentesque. Nunc risus velit, semper vel tincidunt eu, tincidunt vel tellus. Morbi faucibus nisi quis purus malesuada congue. Aliquam id velit sed elit sodales auctor. Phasellus lorem diam, ultricies at rhoncus et, sagittis ut lorem. Nulla ut vestibulum est. Aenean pulvinar nulla at dignissim vestibulum.

Pellentesque feugiat est ac metus tempor vehicula. Integer magna velit, accumsan vitae odio et, pulvinar suscipit urna. Mauris et felis vitae purus feugiat fringilla vitae ut risus. Pellentesque placerat est nec justo pretium luctus. Mauris porta, nibh in mattis vehicula, ipsum tortor egestas velit, id aliquet sem libero ut massa. Integer ut nunc quis dolor lacinia volutpat a eget dolor. Etiam euismod nisl sit amet ipsum maximus, sit amet viverra leo porttitor. Curabitur ullamcorper, turpis ac aliquam fringilla, mi tortor viverra nulla, at ultrices neque ligula in mass.
         [/border][/border][/border]
         [comment]----persona tab contents end----[/comment]
      [/border][/tab]
      [comment]----persona tab three end----[/comment]


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

   [comment]----persona tabs cover----[/comment]
   [border=transparent; height:60%; width:100%; padding:0; pointer-events:none; background: var(--bg-color); position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center;][border=transparent; height:70%; width:calc(100% - 30px); max-width:240px; padding:0; background: var(--color-1); position:relative;][border=transparent; height:30px; width:134px; padding:0 3px; box-sizing:border-box; position:absolute; top:-15px; right:10px; display:flex; flex-flow:row nowrap; justify-content:center;]

      [comment]----persona button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--color-2); border-radius:50%; flex:auto 0;][/border]
      [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]

      [comment]----persona button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--color-2); border-radius:50%; flex:auto 0;][/border]
      [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]

      [comment]----persona button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--color-2); border-radius:50%; flex:auto 0;][/border]

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

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

[comment]----persona details----[/comment]
[border=transparent; height:36%; width:100%; padding:0; margin-top:15px; padding:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]

   [comment]----copy this whole thing to make another set of details----[/comment]
   [border=transparent; height:auto; min-height:calc(50% - 10px); width:50%; padding:0; display:flex; flex-flow:column nowrap; margin:5px 0;]
      [comment]----details title----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; color: var(--h1); font-family: var(--header); text-transform:uppercase; font-weight:bold; letter-spacing:clamp(1px, 1vw, 2px); font-size:28px; line-height:100%;][comment]

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

[/comment]likes[/border]

      [comment]----details contents----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; color: var(--t-color-2); font-family: var(--body); font-size:12px; text-align:left; line-height:15px; margin-top:10px;][comment]

----* * * details contents here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border]

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

   [comment]----copy this whole thing to make another set of details----[/comment]
   [border=transparent; height:auto; min-height:calc(50% - 10px); width:50%; padding:0; display:flex; flex-flow:column nowrap; margin:5px 0;]
      [comment]----details title----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; color: var(--h1); font-family: var(--header); text-transform:uppercase; font-weight:bold; letter-spacing:clamp(1px, 1vw, 2px); font-size:28px; line-height:100%;][comment]

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

[/comment]dislikes[/border]

      [comment]----details contents----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; color: var(--t-color-2); font-family: var(--body); font-size:12px; text-align:left; line-height:15px; margin-top:10px;][comment]

----* * * details contents here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border]

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

[/border][/border]
[comment]----persona details end----[/comment]

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

         [comment]----button select----[/comment]
         [border=transparent; height:41%; width:30px; padding:5px 0; box-sizing:border-box; pointer-events:none; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; margin:0 20px 10px auto;]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

[comment]----selected button----[/comment]
[border=transparent; height:30px; min-height:30px; min-width:30px; width:30px; padding:0; background: var(--s-button); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center; color: var(--bg-color); font-size:14px; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice. remember to match icons at "tab cover")----

[/comment][fa]fas fa-heart[/fa][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
         [/border]
         [comment]----button select end----[/comment]
      [/border][/tab]
      [comment]----tab three end----[/comment]


      [comment]----tab four (history)----[/comment]
      [tab=aa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:4; pointer-events:none; display:flex; flex-flow:row nowrap; align-items:flex-end; line-height:0;]

         [comment]----tab contents----[/comment]
         [border=transparent; height:100%; width:calc(100% - 50px); padding:clamp(10px, 3vw, 20px); padding-right:10px; box-sizing:border-box; display:flex; flex-flow:column nowrap; pointer-events:auto;]

[comment]----history header----[/comment]
[border=transparent; height:24%; width:100%; padding:0; position:relative; display:flex; align-items:flex-start; justify-content:flex-end;]

   [comment]----tab title----[/comment]
   [border=transparent; height:fit-content; width:fit-content; padding:0 8px; box-sizing:border-box; position:relative; z-index:2; color: var(--h1); font-family: var(--header); font-size:43px; font-weight:bold; text-transform:uppercase; line-height:100%; letter-spacing:clamp(1px, 1.5vw, 4px); text-shadow:1.5px 1.5px var(--bg-color); text-align:right;][comment]

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

[/comment]history[/border]

   [comment]----image background (ignore!)----[/comment]
   [border=transparent; height:calc(100% - 22px); width:100%; padding:0; position:absolute; bottom:0; left:0; z-index:1; background: var(--dimg-1); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
[/border]
[comment]----history header end----[/comment]

[comment]----history contents----[/comment]
[border=transparent; height:calc(76% - 15px); width:100%; padding:0; margin-top:15px; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]

   [comment]----copy this whole thing to make another event----[/comment]
   [border=transparent; height:auto; width:50%; padding:0; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
      [comment]----event title----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; margin-bottom:-11px; position:sticky; top:0; display:flex; flex-flow: row nowrap; align-items:center;]
         [border=transparent; height:fit-content; flex:1; padding:4px 10px 4px 0; box-sizing:border-box; color: var(--color-2); font-family: var(--header); font-weight:bold; letter-spacing:clamp(0px, 0.5vw, 1px); line-height:20px; font-size:18px; text-align:right; background:var(--bg-color);][comment]

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

[/comment]place, year[/border]
         [border=transparent; height:8px; width:8px; padding:0; display:flex; justify-content:center; align-items:center; flex:auto 0;][border=transparent; height:8px; width:8px; padding:0; border-radius:50%; background: var(--color-2); margin:5px 0 0 0;][/border][/border]
      [/border]

      [comment]----event contents----[/comment]
      [border=transparent; height:fit-content; width:calc(100% - 3px); padding:9px 10px 20px 0; box-sizing:border-box; margin:3px 0 -13px 0; border-right:2px solid var(--color-2); font-size:11px; font-family: var(--body); color: var(--t-color-2); text-align:justify; line-height:15px;][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet. Donec eget tortor et odio tincidunt feugiat non ac dolor. Ut tristique magna quis consequat mattis. Aliquam eleifend odio et placerat pellentesque. Nunc risus velit, semper vel tincidunt eu, tincidunt vel tellus. Morbi faucibus nisi quis purus malesuada congue. Aliquam id velit sed elit sodales auctor. Phasellus lorem diam, ultricies at rhoncus et, sagittis ut lorem. Nulla ut vestibulum est. Aenean pulvinar nulla at dignissim vestibulum. Pellentesque feugiat est ac metus tempor.
      [/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another event----[/comment]
   [border=transparent; height:auto; width:50%; padding:0; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
      [comment]----event title----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; margin-bottom:-11px; position:sticky; top:0; display:flex; flex-flow: row nowrap; align-items:center;]
         [border=transparent; height:fit-content; flex:1; padding:4px 10px 4px 0; box-sizing:border-box; color: var(--color-2); font-family: var(--header); font-weight:bold; letter-spacing:clamp(0px, 0.5vw, 1px); line-height:20px; font-size:18px; text-align:right; background:var(--bg-color);][comment]

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

[/comment]place, year[/border]
         [border=transparent; height:8px; width:8px; padding:0; display:flex; justify-content:center; align-items:center; flex:auto 0;][border=transparent; height:8px; width:8px; padding:0; border-radius:50%; background: var(--color-2); margin:5px 0 0 0;][/border][/border]
      [/border]

      [comment]----event contents----[/comment]
      [border=transparent; height:fit-content; width:calc(100% - 3px); padding:9px 10px 20px 0; box-sizing:border-box; margin:3px 0 -13px 0; border-right:2px solid var(--color-2); font-size:11px; font-family: var(--body); color: var(--t-color-2); text-align:justify; line-height:15px;][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet. Donec eget tortor et odio tincidunt feugiat non ac dolor. Ut tristique magna quis consequat mattis. Aliquam eleifend odio et placerat pellentesque. Nunc risus velit, semper vel tincidunt eu, tincidunt vel tellus. Morbi faucibus nisi quis purus malesuada congue. Aliquam id velit sed elit sodales auctor. Phasellus lorem diam, ultricies at rhoncus et, sagittis ut lorem. Nulla ut vestibulum est. Aenean pulvinar nulla at dignissim vestibulum. Pellentesque feugiat est ac metus tempor.
      [/border]
   [/border]
   [comment]----copy me too!----[/comment]

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

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

         [comment]----button select----[/comment]
         [border=transparent; height:41%; width:30px; padding:5px 0; box-sizing:border-box; pointer-events:none; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; margin:0 20px 10px auto;]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

[comment]----selected button----[/comment]
[border=transparent; height:30px; min-height:30px; min-width:30px; width:30px; padding:0; background: var(--s-button); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center; color: var(--bg-color); font-size:14px; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice. remember to match icons at "tab cover")----

[/comment][fa]fas fa-book[/fa][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
         [/border]
         [comment]----button select end----[/comment]
      [/border][/tab]
      [comment]----tab four end----[/comment]


      [comment]----tab five (extra)----[/comment]
      [tab=aa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:4; pointer-events:none; display:flex; flex-flow:row nowrap; align-items:flex-end; line-height:0;]
         [comment]----tab contents----[/comment]
         [border=transparent; height:100%; width:calc(100% - 50px); padding:clamp(10px, 3vw, 20px); padding-right:8px; padding-bottom:0; box-sizing:border-box;  display:flex; flex-flow:column nowrap; pointer-events:auto;]

[comment]----gallery----[/comment]
[border=transparent; height:33%; width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap; flex:auto 0;]

   [comment]----gallery title----[/comment]
   [border=transparent; height:100%; width:fit-content; padding:0; writing-mode: vertical-rl; color: var(--h1); font-size:clamp(38px, 8vw, 42px); font-weight:bold; letter-spacing:clamp(3px, 6px - 1vw, 5px); text-align:center; line-height:100%; text-transform:uppercase; font-family: var(--header); white-space:nowrap; flex:auto 0;]gallery[/border]

   [comment]----gallery images----[/comment]
   [border=transparent; height:100%; flex:1; padding:0; display:flex; flex-flow: row wrap; justify-content:center; align-items:center; align-content:center; margin-right:10px;]
      [border=transparent; flex:1; hmin-width:clamp(50px, 33% - 10px, 90px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-1); background-size:cover;

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

      [border=transparent; flex:1; min-width:clamp(30px, 33% - 10px, 90px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-2); background-size:cover;

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

      [border=transparent; flex:1; min-width:clamp(30px, 33% - 10px, 90px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-3); background-size:cover;

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

      [border=transparent; flex:1; min-width:clamp(30px, 33% - 10px, 90px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-4); background-size:cover;

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

      [border=transparent; flex:1; min-width:clamp(30px, 33% - 10px, 90px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-5); background-size:cover;

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

      [border=transparent; flex:1; min-width:clamp(30px, 33% - 10px, 90px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-6); background-size:cover;

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

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

[comment]----relationships----[/comment]
[border=transparent; height:32%; width:100%; padding:0; margin:15px 0 20px 0; display:flex; flex-flow: row nowrap; flex:auto 0;]
   [comment]----relationships title----[/comment]
   [border=transparent; height:100%; width:fit-content; padding:0; writing-mode: vertical-rl; color: var(--h1); font-size:clamp(38px, 8vw, 42px); font-weight:bold; letter-spacing:clamp(3px, 6px - 1vw, 5px); text-align:center; line-height:100%; text-transform:uppercase; font-family: var(--header); white-space:nowrap; flex:auto 0; transform:rotate(-180deg);]rel.[/border]

   [comment]----relationships container----[/comment]
   [border=transparent; height:100%; flex:1; padding:0; overflow:hidden; display:flex; flex-direction:column; margin-left:10px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; scroll-snap-type: y mandatory;]

      [comment]----copy this whole thing to add another relationship----[/comment]
      [border=transparent; height:calc(100% - 15px); width:50%; flex:auto 0; padding:10px 5px 10px 10px; margin:15px 0 5px 0; box-sizing:border-box; background: var(--color-1); display:flex; flex-flow:column nowrap; scroll-snap-align: end;]

         [comment]----relationship header----[/comment]
         [border=transparent; height:auto; max-height:50%; width:100%; padding:0; display:flex; flex-flow: row nowrap; flex:auto 0;]
[comment]----name container----[/comment]
[border=transparent; height:max-content; width:fit-content; padding:0; flex:auto 0; display:flex; flex-flow: column nowrap;]
   [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--h1); font-size:clamp(16px, 5vw, 20px); text-transform:uppercase; font-weight:bold; letter-spacing:clamp(0.5px, 0.3vw, 1px); line-height:90%; font-family: var(--header);][comment]

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

[/comment]name of rel[/border]

   [border=transparent; height:max-content; width:fit-content; padding:0; margin-top:5px; color: var(--color-2); font-family: var(--header); font-size:clamp(12px, 4vw, 14px); line-height:100%; letter-spacing:0.5px;][comment]

----* * * extra info here----

[/comment]role | relationship[/border]
[/border]
[comment]----name container end----[/comment]

[comment]----relationship image----[/comment]
[border=transparent; height:calc(100% - 7px); min-height:30px; flex:1; min-width:50px; padding:0; position:relative; margin:0 5px 0 20px;][border=transparent; height:calc(100% + 25px); width:100%; padding:0; position:absolute; top:-23px; left:0; 

/*replace the number in rX to match the variable at the top of the code! */ background:var(--r1);

box-shadow:-7px 7px var(--color-2); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 30%;][/border][/border]
         [/border]
         [comment]----relationship header end----[/comment]

         [comment]----relationship contents----[/comment]
         [border=transparent; height:auto; max-height:80%; width:100%; padding:0; margin-top:10px; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color-2); font-size:11px; text-align:justify; line-height:14px; font-family: var(--body);][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet.
         [/border][/border][/border]
         [comment]----relationship contents end----[/comment]
      [/border]
      [comment]----copy me too!----[/comment]

      [comment]----copy this whole thing to add another relationship----[/comment]
      [border=transparent; height:calc(100% - 15px); width:50%; flex:auto 0; padding:10px 5px 10px 10px; margin:15px 0 5px 0; box-sizing:border-box; background: var(--color-1); display:flex; flex-flow:column nowrap; scroll-snap-align: end;]

         [comment]----relationship header----[/comment]
         [border=transparent; height:auto; max-height:50%; width:100%; padding:0; display:flex; flex-flow: row nowrap; flex:auto 0;]
[comment]----name container----[/comment]
[border=transparent; height:max-content; width:fit-content; padding:0; flex:auto 0; display:flex; flex-flow: column nowrap;]
   [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--h1); font-size:clamp(16px, 5vw, 20px); text-transform:uppercase; font-weight:bold; letter-spacing:clamp(0.5px, 0.3vw, 1px); line-height:90%; font-family: var(--header);][comment]

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

[/comment]name of rel[/border]

   [border=transparent; height:max-content; width:fit-content; padding:0; margin-top:5px; color: var(--color-2); font-family: var(--header); font-size:clamp(12px, 4vw, 14px); line-height:100%; letter-spacing:0.5px;][comment]

----* * * extra info here----

[/comment]role | relationship[/border]
[/border]
[comment]----name container end----[/comment]

[comment]----relationship image----[/comment]
[border=transparent; height:calc(100% - 7px); min-height:30px; flex:1; min-width:50px; padding:0; position:relative; margin:0 5px 0 20px;][border=transparent; height:calc(100% + 25px); width:100%; padding:0; position:absolute; top:-23px; left:0; 

/*replace the number in rX to match the variable at the top of the code! */ background:var(--r2);

box-shadow:-7px 7px var(--color-2); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 30%;][/border][/border]
         [/border]
         [comment]----relationship header end----[/comment]

         [comment]----relationship contents----[/comment]
         [border=transparent; height:auto; max-height:80%; width:100%; padding:0; margin-top:10px; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color-2); font-size:11px; text-align:justify; line-height:14px; font-family: var(--body);][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet.
         [/border][/border][/border]
         [comment]----relationship contents end----[/comment]
      [/border]
      [comment]----copy me too!----[/comment]

   [/border][/border]
[/border]
[comment]----relationships end----[/comment]

[comment]----fancy quote----[/comment]
[border=transparent; flex:1; width:clamp(100% + 10px, 100% + 3vw, 100% + 20px); padding:0 5px 0 0; box-sizing:border-box; position:relative; left:clamp(-20px, -3vw, -10px); display:flex; align-items:flex-end; justify-content:flex-end;]

   [comment]----quote title----[/comment]
   [border=transparent; height:fit-content; width:auto; padding:0; color: var(--h1); font-family: var(--quote); font-size:clamp(38px, 8vw, 45px); transform:rotate(-7deg); position:absolute; top:5px; right:15px; z-index:2; line-height:100%; text-shadow:1px 1px var(--bg-color); pointer-events:none;][comment]

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

[/comment]hinode no yume[/border]

   [comment]----quote contents----[/comment]
   [border=transparent; height:115px; width:clamp(150px, 60%, 200px); padding:0; color: var(--t-color-2); font-size:11px; text-align:justify; line-height:16px; font-family: var(--body); overflow:hidden;][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet. Donec eget tortor et odio tincidunt feugiat non ac dolor. Ut tristique magna quis consequat mattis. Aliquam eleifend odio et placerat pellentesque. Nunc risus velit, semper vel tincidunt eu, tincidunt vel tellus. Morbi faucibus nisi quis purus malesuada congue. Aliquam id velit sed elit sodales auctor. Phasellus lorem diam, ultricies at rhoncus et, sagittis ut lorem. Nulla ut vestibulum est. Aenean pulvinar nulla at dignissim vestibulum.
   [/border]
   [comment]----quote contents end----[/comment]

   [comment]----big image----[/comment]
   [border=transparent; height:200px; width:200px; padding:0; position:absolute; top:0; left:-50px; z-index:1; border-radius:50%; background: var(--eimg-1); background-size:cover;

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


[/border]
[comment]----fancy quote end----[/comment]

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

         [comment]----button select----[/comment]
         [border=transparent; height:41%; width:30px; padding:5px 0; box-sizing:border-box; pointer-events:none; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; margin:0 20px 10px auto;]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

[comment]----selected button----[/comment]
[border=transparent; height:30px; min-height:30px; min-width:30px; width:30px; padding:0; background: var(--s-button); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center; color: var(--bg-color); font-size:14px; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice. remember to match icons at "tab cover")----

[/comment][fa]fas fa-users[/fa][/border]

         [/border]
         [comment]----button select end----[/comment]
      [/border][/tab]
      [comment]----tab five end----[/comment]


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

   [comment]----tabs cover----[/comment]
   [border=transparent; height:41%; width:30px; padding:5px 0; box-sizing:border-box; position:absolute; bottom:10px; right:20px; z-index:3; pointer-events:none; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center;]
      [comment]----button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--color-2); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; font-size:14px; color: var(--bg-color); opacity:0.5; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice)----

[/comment][fa]fas fa-home[/fa][/border][/border]
      [border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

      [comment]----button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--color-2); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; font-size:14px; color: var(--bg-color); opacity:0.5; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice)----

[/comment][fa]fas fa-flower-tulip[/fa][/border][/border]
      [border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

      [comment]----button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--color-2); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; font-size:14px; color: var(--bg-color); opacity:0.5; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice)----

[/comment][fa]fas fa-heart[/fa][/border][/border]
      [border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

      [comment]----button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--color-2); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; font-size:14px; color: var(--bg-color); opacity:0.5; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice)----

[/comment][fa]fas fa-book[/fa][/border][/border]
      [border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

      [comment]----button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--color-2); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; font-size:14px; color: var(--bg-color); opacity:0.5; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice)----

[/comment][fa]fas fa-users[/fa][/border][/border]
   [/border]
   [comment]----tabs cover end----[/comment]

   [comment]-----colour strip (ignore!)----[/comment]
   [border=transparent; height:100%; width:35px; padding:0; background: var(--color-1); position:absolute; top:0; right:0; z-index:1; pointer-events:none;][/border]
   [border=transparent; height:100%; width:calc(100% - 35px); padding:0; background: var(--bg-color); position:absolute; top:0; left:0; z-index:1; pointer-events:none;][/border]


   [comment]----made with love by uxie and triples ♡ do not remove!! !!----[/comment]
   [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--s-button); font-size:10px; position:absolute; z-index:7; top:5.5px; right:5px; display:flex; flex-flow: row nowrap; align-items:center; line-height:100%; writing-mode:vertical-rl;][border=transparent; height:fit-content; width:fit-content; padding:0; letter-spacing:0.5px; font-weight:bold;][font=Space Grotesk]nine lives[/font][/border][border=transparent; height:fit-content; width:fit-content; padding:0; margin:5px 0 0 0; font-size:8px; transform:rotate(90deg);][fa]fas fa-cat[/fa][/border][/border]
[/border]