Bug screen cut in half?

[neverlandeds]

so idk if this is happening to anyone else, but recently when i open dms, the longer the thread is, the messages start appearing weirdly squished on the side of the screen. here's a screenshot of it. it also does this on my phone.



additionally, speficially in the thread in my workshop where i save all the bbcode character sheets and stuff that i'm using, it's ALSO begun to split the screen in half. here's a screenshot of that.


i have no idea why this happening but it's really annoying and kind of gives me a headache to figure out where the messages are gonna end up :/

 

[Onmyoji]

Do the messages contain any BBCode?
If yes, that's the reason. Something in the code is interfering with the site layout.

 

[neverlandeds]

if i post the code here, do you think it would be fixable?

 

[Onmyoji]

if i post the code here, do you think it would be fixable?

We can take a look at it, but please post the code within CODE tags, so that it doesn't mess up the layout of the thread as well.

 

[neverlandeds]

and how do i do that?

 

[Onmyoji]

From desktop - just above the text field where you have buttons for text formatting, adding emotes and images, etc, the last button looks like three vertical dots. Prss it. A list of additional buttons will appear, one of them looks like </>. A window will appear where you input code.
On mobile should be similar, look for a three dots button and one of the options there will be Code.

Alternatively you can manually write [.CODE] [/.CODE] tags (without the dots, I put them so that the system doesn't think that I'm actually using tags) around the code you want to share.

 

[neverlandeds]

[comment]coded by uxie!

fonts used:
[font=Poppins]header[/font]
[font=Crimson Pro]quote[/font]
[font=Karla]subheader/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;
/*border colour -- make sure it's distinct from the other background*/
--bg-1: #f2f2f2;
/*main background colour*/
--bg-2: #fff;

/*main accent colour*/
--color-1: #d08f93;
/*secondary accent colour*/
--color-2: #f7b885;

/*header colour*/
--h1: var(--bg-2);
/*quote colour*/
--subtitle: #ffffff;
/*text colour*/
--t-color: #371a13;

/*fonts used*/
--header: 'Poppins', sans-serif;
--quote: 'Crimson Pro', serif;
--body: 'Karla', sans-serif;

/*background image*/
--bg-img: url('https://i.pinimg.com/736x/06/62/0a/06620a51bdf0a6f065f02e431581d1d2.jpg');
/*big image (left/top)*/
--img-1: url('https://i.postimg.cc/pLnB9sW-D/3ea3f7e432576ad6bc9c820e5696095f.png');
/*sidebar icon*/
--img-2: url('https://i.postimg.cc/2j2Ggq9B/e79f733c601ae3eb505465faf64d6e66-1.png');
/*appearance image*/
--img-3: url('https://i.postimg.cc/GhfQhWCL/b799090207f1a703a0f04e7c1985417a.png');
/*extra info image*/
--img-4: url('https://i.postimg.cc/jj3yq1m6/f63f09f09de48840b21287384aaa9491.png');

/*gallery images*/
--gimg-1: url('https://i.postimg.cc/02jnv8hX/cd4374dd8cb5611544cb9e2f42ecf088.png');
--gimg-2: url('https://i.postimg.cc/d1JRxv8B/f57fd08c35a7bcae06c25f3fb5e45159.png');
--gimg-3: url('https://i.postimg.cc/26xGk3zM/ed0cf587522162677093a09682ce90bf.png');
--gimg-4: url('https://i.postimg.cc/N067DLrF/75478c8cad3762b69cf723ef535c35b5.png');
--gimg-5: url('https://i.postimg.cc/mk2wtRkD/4306526f9b8308fd6d699dd302bb1197.png');
--gimg-6: url('https://i.postimg.cc/x8xPm7NP/1a4dd4dad2252a998a54e4f2557a57c3.png');

/*relationship images*/
--r1: url('https://i.postimg.cc/sxdQvCcW/88f53c02e8a6b4ca5d9beeee4bd7099b.png');
--r2: url('https://i.postimg.cc/dV4ynXsM/c3759a0119838264819c3f1e57028b1e.png');
--r3: url('https://i.postimg.cc/VNvbhRvJ/af74c6d24105f22bbf98fba9ca6418e1.png');
--r4: url('https://i.postimg.cc/jj1JY7nZ/f15dabf48cce16089b147e0ac1041663.png');
--r5: url('https://i.postimg.cc/Kzg3G8nF/c34610f0b958339b925fe3cb902e9530.png');
--r6: url('https://i.postimg.cc/65xnQnjP/86e252e7d5cd7b2c67d6e5d3a696511c.png');
--r7: url('https://i.postimg.cc/t4X63yHt/b22780ba022191a185946f584fffe6fa.png');
--r8: url('https://i.postimg.cc/Qxg5KCvd/c10370295bc2fc62bbc7b9d6d8e24d46.png');

height:auto; width:100%; max-width:600px; padding:clamp(10px, 2vw, 15px); box-sizing:border-box; background: var(--bg-1); margin:auto; line-height:0; overflow:hidden; position:relative;][border=transparent; height:auto; width:100%; padding:clamp(10px, 2vw, 15px); box-sizing:border-box; background: var(--bg-2); overflow:hidden;][border=transparent; height:auto; min-height:400px; width:100%; padding:0; display:flex; flex-flow:row wrap; position:relative; overflow:hidden; justify-content:center;]
   [comment]----left/top image----[/comment]
   [border=transparent; height:400px; flex:68; min-width:280px; max-width:340px; padding:0; background: var(--img-1); background-size:cover; box-sizing:border-box; position:relative;

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

][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][border=transparent; height:400px; flex:32; min-width:200px; padding:0; background: var(--bg-img); background-size:cover; background-position:center;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border]

   [comment]----right (main container----[/comment]
   [border=transparent; height:400px; width:100%; padding:0; position:absolute; bottom:0; left:0;]
[comment]----filler stuff----[/comment]
[border=transparent; height:400px; width:100%; padding:10px 15px 10px 0; box-sizing:border-box; position:absolute; top:-400px; left:0; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; pointer-events:none;][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); opacity:0.9; font-size:9.5px; text-transform:uppercase; font-family: var(--header); letter-spacing:2px; font-weight:bold; bottom:10px; right:clamp(5px, 30px - 3.5vw, 10px); position:absolute; z-index:3; text-shadow:1px 1px var(--color-1); pointer-events:none;][fa]fas fa-chevron-right[/fa] scroll[/border][border=transparent; height:calc(100% - 50px); width:calc(100% - 50px); padding:0; box-sizing:border-box; border:1px solid var(--color-1);][/border][/border]
[comment]----filler stuff end----[/comment]
   [border=transparent; height:400px; width:100%; padding:0; overflow:hidden;][border=transparent; height:417px; width:100%; padding:0; overflow-x:scroll; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior: smooth;][border=transparent; height:400px; width:auto; padding:0; display:flex; flex-flow:row nowrap;]

      [comment]----most left----[/comment]
      [border=transparent; height:400px; width:clamp(0px, 65vw - 280px, 340px); padding:0; box-sizing:border-box; flex-shrink:0; scroll-snap-align:start;][border=transparent; height:100%; width:100%; padding:10px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; overflow:hidden; position:relative; left:0.3px;]

         [comment]----instruction----[/comment]
         [border=transparent; height:auto; width:auto; padding:0; color: var(--h1); opacity:0.9; font-size:9.5px; text-transform:uppercase; font-family: var(--header); letter-spacing:2px; font-weight:bold; top:5px; right:5px; position:absolute; z-index:3; text-shadow:1px 1px var(--color-1); pointer-events:none;][fa]fas fa-chevron-right[/fa] scroll[/border]

         [comment]----box----[/comment]
         [border=transparent; height:calc(100% - 50px); width:calc(100% - 50px); padding:10px 15px; box-sizing:border-box; border:1px solid var(--color-1); display:flex; flex-flow:column nowrap; justify-content:flex-end;]
[comment]----quote----[/comment]
[border=transparent; height:auto; height:fit-content; width:130px; position:relative; padding:0;

/*increase this value if the text is too light on your image*/ opacity:2.8;

][border=transparent; height:auto; width:auto; padding:0; position:absolute; top:15px; left:-15px; color: var(--color-1); font-size:125px; opacity:0.7; font-style:normal; font-weight:normal; z-index:-1; font-family: sans-serif; line-height:18px;]❝[/border][border=transparent; height:auto; height:fit-content; max-height:108px; width:100%; padding:0; color: var(--subtitle); font-size:11px; font-family: var(--quote); font-style:italic; line-height:18px; letter-spacing:1px; font-weight:bold; overflow:hidden;][comment]

----* * * quote here (keep it short)----

[/comment]FLOWER, GLEAM AND GLOW,
LET YOUR POWER SHINE.
MAKE THE CLOCK REVERSE,
AND BRING BACK WAS ONCE WAS MINE.[/border]
[/border]
[comment]----quote end----[/comment]

[comment]----quote credit----[/comment]
[border=transparent; height:auto; height:fit-content; width:120px; padding:0; display:flex; flex-flow: row nowrap; justify-content:flex-end; align-items:center; opacity:0.75;][border=transparent; height:0; width:30px; border-top:1px solid var(--subtitle); padding:0; flex-shrink:0; margin:2px 8px 0 0;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--subtitle); font-size:12px; font-family: var(--quote); font-style:oblique; line-height:18px; letter-spacing:0.5px; font-weight:bold; text-align:right;][comment]

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

[/comment]credit[/border][/border]
          [/border]

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

      [comment]----left (sidebar)----[/comment]
      [border=transparent; height:400px; width:calc(100vw - 30px); max-width:215px; padding:0; border:8px solid var(--bg-2); border-top:0; border-bottom:0; box-sizing:border-box; flex-shrink:0; display:flex; flex-flow:column nowrap;]

         [comment]----sidebar container----[/comment]
         [border=transparent; height:calc(100% - 55px); width:100%; padding:0 10px; box-sizing:border-box; background:var(--bg-2);][border=transparent; height:100%; width:100%; padding:10px 5px 0 5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:center; position:relative;]

[comment]----sidebar image----[/comment]
[border=transparent; height:132px; width:132px; padding:8px; border:1px solid var(--color-1); box-sizing:border-box; border-radius:50%; margin-right:auto; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--img-2); background-size:cover; background-position:50% 50%; position:relative; overflow:hidden; border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border]

[comment]----role----[/comment]
[border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:68px; padding:0; position:absolute; top:82px; right:4px;][border=transparent; display:inline; padding:3px 6px; box-sizing:border-box; box-decoration-break:clone; -webkit-box-decoration-break: clone; background: var(--color-1); border-radius:2px; color: var(--h1); font-size:9.5px; text-transform:uppercase; letter-spacing:1.5px; line-height:15px; font-family: var(--body); text-align:right;][comment]

----* * * role here----

[/comment]princess[/border][/border]

[comment]----name----[/comment]
[border=transparent; height:auto; min-height:30px; max-height:56px; width:100%; padding:0; color: var(--color-1); text-shadow:1px 1px var(--color-2); letter-spacing:2px; font-weight:bold; font-family: var(--header); font-size:34px; line-height:28px; margin-top:14px; flex-shrink:0; overflow:hidden;][comment]

----* * * character first name/nickname here----

[/comment]anxelin.[/border]

[comment]----basics----[/comment]
[border=transparent; height:60%; width:174px; padding:0; margin:20px 0 26px 1px; overflow:hidden;][border=transparent; height:100%; width:191px; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:174px; padding:0; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]full name[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

[/comment]anxelin flynn fitsherbert, princess of corona.[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]nicknames[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

[/comment]annie. xel. xellie. sunflower. ect.[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]age[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

[/comment]roleplay dependent; same age as the main cast.[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]d.o.b.[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

[/comment]june twenty-first.[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]ethnicity[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

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

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]sexuality[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

[/comment]asexual biromantic.[/border]
   [/border]
   [comment]----copy me too!----[/comment]

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

         [comment]----music player----[/comment]
         [border=transparent; height:55px; width:100%; padding:0; position:relative; flex-shrink:0; border-left:13px solid var(--bg-2); border-right:13px solid var(--bg-2); box-sizing:border-box;][border=transparent; height:55.5px; width:calc(100% + 1.5px); padding:1px 0 0 0; background: var(--color-1); opacity:0.65; position:absolute; top:-0.5px; left:-1px;][/border][border=transparent; height:100%; width:100%; padding:10px 20px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; position:relative; z-index:2;]

[comment]----play button----[/comment]
[border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; position:relative; overflow:hidden; pointer-events:auto;]
   [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; color: var(--h1); font-size:16px; flex-shrink:0;][fa]fas fa-play[/fa][/border]

   [comment]----actual media player----[/comment]
   [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; opacity:0.01%;]
[comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
[border=transparent; height:80px; width:180px; padding:0; margin-top:-20px; margin-left:-20px; position:absolute; top:0; left:0;]
   [media=spotify]https://soundcloud.com/green-thumb-431624934/phobiafirst-ver[/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:-313px; margin-left:-103px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
   [media=googledrive]google file code here[/MEDIA]
[/border]
   [/border]
   [comment]----actual media player end----[/comment]
[/border]

[comment]----music info----[/comment]
[border=transparent; flex:1; height:auto; padding:0; display:flex; flex-flow:column nowrap; margin-left:25px;]
   [border=transparent; height:auto; width:100%; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:12px; letter-spacing:1.5px; font-style:oblique; font-weight:bold;][comment]

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

[/comment]song name[/border]

   [border=transparent; height:auto; width:100%; padding:0; color: var(--h1); font-family: var(--Inter); line-height:100%; font-size:8px; letter-spacing:2px; text-transform:uppercase; margin-top:3px; font-weight:bold;][comment]

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

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

      [comment]----right (main contents)----[/comment]
      [border=transparent; height:400px; width:calc(100vw - 61px); max-width:340px; padding:0; border:clamp(0px, 25px - 3vw, 20px) solid var(--bg-2); border-bottom:clamp(0px, 15px - 1vw, 6px) solid var(--bg-2); border-right:0; border-left:clamp(0px, 0.8vw, 8px) solid var(--bg-2); box-sizing:border-box; flex-shrink:0; scroll-snap-align:end; display:flex; flex-direction:column; overflow:hidden; position:relative;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; scroll-snap-type:y proximity;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-23px;][/border]

         [comment]----section 1 (appearance)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]01.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

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

[/comment]visage[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2); display:flex; flex-flow:column nowrap;]
   [comment]----row one----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap;]
      [comment]----icon----[/comment]
      [border=transparent; width:clamp(85px, 10vw, 110px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border:1px solid var(--color-1); position:relative;][border=transparent; height:100%; width:100%; padding:8px; box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--img-3); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;]
      [border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----appearance contents----[/comment]
      [border=transparent; height:110px; flex:1; margin-left:15px; padding: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:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]description[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

[/comment]anxelin has a delicate, thoughtful look - like someone who notices the world more than she lets on. her features are soft but defined, with a quiet intensity behind them. she has fair skin that always seems just a little sun-kissed, like she’s been outside reading in the light too long. her hair is a light brown with golden undertones, usually worn loose in soft waves or pulled into simple braids with little ribbons or pins tucked in - not for show, but for sentiment. there’s always meaning in the little things she wears.

her eyes are the first thing people notice. wide, expressive, and shifting between green and hazel depending on the light. they give away what she’s feeling even when she doesn’t say a word - watchful, kind, and a little bit older than her years. she doesn’t smile constantly, but when she does, it’s genuine and slightly crooked, like she’s still a little surprised she made someone laugh.

anxelin moves with quiet purpose - graceful in a grounded way, never flashy. she wears clothes that are practical with soft, royal touches: muted tones, natural fabrics, simple embroidery. dresses layered under cloaks when needed, boots instead of slippers. her style reflects her personality: unassuming, thoughtful, and rooted in warmth.

she doesn't draw attention, but once you notice her, it's hard to look away - not because she's trying, but because there's something real about her. she looks like someone you'd trust with your secret, someone who sees past surfaces, someone who holds light without needing to chase it.
[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]



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

[/comment]faceclaim[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

[/comment]thomasin mckenzie.[/border]
         [/border]
         [comment]----copy me too!----[/comment]

      [/border][/border][/border]
      [comment]----appearance contents end----[/comment]
   [/border]
   [comment]----row one end----[/comment]

[/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 1 end----[/comment]

         [comment]----section 2 (psyche)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]02.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

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

[/comment]psyche[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2);][border=transparent; height:auto; max-height:341px; width:100%; padding:12px 0; box-sizing:border-box; border:1px solid var(--color-1); 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 15px; box-sizing:border-box;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

   [comment]----copy this whole thing to make another bit of info (text)----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin:3px 0 5px 0;]
      [border=transparent; width:100%; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:14px; text-align:justify; margin:5px 0 0 0;][comment]

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

[/comment]anxelin is calm, measured, and introspective. she feels things deeply but rarely lets her emotions lead the way. she’s a thinker, a question-asker, someone who watches before acting. her caution isn’t fear - it’s care. she wants to do right by people, and she’s always trying to see the full picture before jumping to conclusions.

she’s fiercely loyal to her family and to ruby, though she’s often the one pulling her twin back from the edge rather than jumping with her. anxelin believes in redemption, but she doesn’t give trust away for free - it has to be earned. even so, she’ll always be the one to offer someone their first real chance.

she’s not flashy, but she’s solid. dependable. her version of bravery is standing still when others run, or stepping forward when it’s uncomfortable. she believes in the quiet power of kindness, the strength in small gestures, and the importance of giving people the room to grow. she’s the steady heartbeat behind the chaos. the one holding the light when things go dark.
[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]fears[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

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

[/comment][/border][comment][/comment][/border][comment][/comment][/comment][/border][comment][comment][/comment][/comment][/border][comment][comment]
[comment]----section contents end----[/comment]
         [/comment][/comment][/border][comment][comment]
         [comment]----section 2 end----[/comment]

         [comment]----section 3 (history)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:start; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]03.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

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

[/comment]history[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2);][border=transparent; height:auto; max-height:341px; width:100%; padding:12px 0; box-sizing:border-box; border:1px solid var(--color-1); 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 15px; box-sizing:border-box;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

   [comment]----copy this whole thing to make another bit of info (text)----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin:3px 0 5px 0;]
      [border=transparent; width:100%; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:14px; text-align:justify; margin:5px 0 0 0;][comment]

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

[/comment]anxelin of corona was born into peace, but raised on the memory of struggle. her parents never let her forget that the happy ending they lived in was hard-won - that it came with scars, sacrifice, and second chances. she and her twin sister ruby entered the world just as dawn broke over the kingdom, their cries overlapping with bells ringing across the city.

it was a good omen, some said - sunlight and symmetry. the golden-haired daughters of the sunlit queen.

from the start, anxelin was the quieter twin. not timid - just observant. where ruby dove headfirst into life, anxelin watched it unfold. she was curious, measured, and always listening. while ruby thrived on adventure, anxelin preferred the castle library or long walks through the garden, asking her mother about the flowers, the stars, the murals that filled the castle walls. rapunzel was patient with her questions. eugene, in his own way, encouraged her to question everything - he liked that she didn’t just accept stories at face value.

growing up in corona meant a childhood full of music, lanterns, and the weight of a legacy she didn’t fully understand until she was older. the people adored her family. they still told stories about the lost princess who returned and the thief who helped her escape. anxelin heard the tales again and again, but what stuck with her weren’t the magical parts. it was the decisions. the turning points. the idea that people could choose love over fear, kindness over survival. she liked that part best.

by the time she was a teenager, anxelin had developed a keen sense of fairness. she wasn’t one to rush to judgment. she wanted to understand people - their motives, their stories, what made them who they were. so when the council of auradon - mainly, she knew, ben - raised the idea of bringing kids from the isle of the lost to the mainland, her first instinct wasn’t rejection. it was uncertainty. not because she believed the worst in them, but because she knew how hard change could be.

she had read the files, she knew the names: mal, jay, evie, carlos. kids tied to villains whose legacies were anything but light. she’d heard whispers of the isle - how magic was banned, how hope was scarce. it didn’t seem fair. it didn’t seem right. but it also didn’t seem simple.

anxelin struggled with that complexity. she spoke with her father about it often. eugene told her the truth - how hard it had been to be seen as more than a thief, how many people still gave him side glances, even years later. but he also reminded her that someone had believed in him once, and that made all the difference.

that stuck with her.

so when the first group of kids arrived from the isle, anxelin made a choice. she wouldn’t be naïve. but she wouldn’t be cold either. she would welcome them, watch closely, and offer trust slowly, deliberately. she knew not everyone wanted to change. but she also knew some did. and she wanted to be someone who left space for that. who didn’t shut the door just because it was safer to leave it closed.

over time, she became known for her quiet diplomacy. never the loudest in the room, but often the one people turned to when things got tense. anxelin didn’t need to be the hero. she just wanted to help people find their own way toward something better. because deep down, she still believed that a new story was always possible - if someone was brave enough to write it.
      [/border]
   [/border]
   [comment]----copy me too!----[/comment]

[/border][/border][/border][/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 3 end----[/comment]

         [comment]----section 4 (gallery)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]04.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

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

[/comment]gallery[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; --imgwidth: 70px; --margin: 4px; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2);][border=transparent; height:auto; width:100%; padding:12px 15px; box-sizing:border-box; border:1px solid var(--color-1); display:flex; flex-flow:row wrap;]

   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][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%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]
   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][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%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]
   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][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%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]
   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][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%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]
   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][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%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]
   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][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%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]

[/border][/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 4 end----[/comment]

         [comment]----section 5 (relationships)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]05.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

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

[/comment]connections[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2);][border=transparent; height:auto; max-height:341px; width:100%; padding:12px 0; box-sizing:border-box; border:1px solid var(--color-1); 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 15px; box-sizing:border-box;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-20px;][/border]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r1);

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

background-size:cover; border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent; height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

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

[/comment]her mother, rapunzel[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

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

[/comment]anxelin has a strong, steady bond with her mother - one built on long talks, quiet understanding, and shared values. rapunzel raised her daughters with warmth and curiosity, encouraging them to explore the world and their emotions with equal care. anxelin took that to heart. she admired her mother not for her crown, but for her resilience - for the way she always chose love, even when it hurt. their relationship is full of soft moments: hands held across a table, long walks through the castle gardens, sketchbooks passed between them without words. when anxelin feels uncertain, rapunzel is her calm, her root.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r2);

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

background-size:cover; border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent; height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

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

[/comment]her father, eugene[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

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

[/comment]her father is her reality check and her reminder that people are more than their beginnings. eugene is the one who taught her to laugh at herself, to see past labels, and to look for the story under the story. anxelin adores him, even when he tries too hard to be the “cool” dad. they bond over late-night talks and shared sarcasm. when she doubts herself, he reminds her that no one’s perfect - but anyone can choose to do better. his past shaped how she sees redemption, and his honesty helps her stay grounded. they’re a lot alike in quieter ways - observant, thoughtful, more guarded than they seem.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r3);

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

background-size:cover;  border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent; height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

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

[/comment]her sister, ruby[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

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

[/comment]ruby is her spark. her chaos. her best friend. the two of them are inseparable, but wildly different. where ruby is bold, anxelin is careful. where ruby charges into the unknown, anxelin hangs back to watch. and yet, they balance each other perfectly. they argue, sure - especially when ruby’s impulsiveness puts them in tricky spots - but there’s no one anxelin trusts more. ruby pushes her to be braver. anxelin keeps ruby from burning out. their bond runs deeper than words. it’s unshakable. they don’t need to say much to know what the other’s thinking.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r4);

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

background-size:cover;  border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent ;height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

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

[/comment]her confidant, ben[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

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

[/comment]anxelin and ben connect through their shared sense of responsibility. both raised in the spotlight, both trying to lead with compassion. ben leans on her more than most people realize - she gives him honest feedback without flattery, and he trusts her judgment completely. she, in turn, appreciates his idealism and tries to help him keep it rooted in reality. they’re not romantic, but they have the kind of friendship that feels old and solid, built on mutual respect and a lot of late-night policy talks that somehow turn into conversations about life and legacy.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r5);

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

background-size:cover;  border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent ;height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

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

[/comment]her best friend, audrey[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

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

[/comment]anxelin and audrey have known each other since they were kids - raised in the same circles, attending the same lessons, navigating the same expectations. for years, they were close in that effortless, childhood way: braiding each other’s hair, sneaking desserts during royal events, passing notes during etiquette classes. audrey was bold and sparkly and always had a plan; anxelin was quieter, more grounded, but happy to be pulled along. they balanced each other out. but as they got older, things changed. the arrival of the vks shook something in audrey, and for a while, their friendship strained under it. anxelin didn’t understand the anger, and audrey didn’t understand anxelin’s openness to change. they argued more. drifted a little. but they never fully let go. too much history. too much love.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r6);

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

background-size:cover;  border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent ;height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

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

[/comment]her friend, chad[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

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

[/comment]chad is... complicated. anxelin doesn’t dislike him, but she keeps him at arm’s length. his arrogance grates on her, and his knee-jerk reactions - especially around the vks - frustrate her deeply. she tries to understand him, but it’s hard when he refuses to see past his own privilege. still, she doesn’t shut him out. she offers chances, patience, and the occasional pointed truth. whether he listens or not is up to him. she hasn’t given up on him, but she doesn’t rely on him either.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r7);

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

background-size:cover;  border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent ;height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

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

[/comment]her friend, evie[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

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

[/comment]anxelin really likes evie. they bonded over fashion at first - evie made her a simple gown with embroidered sunbursts along the sleeves, and anxelin still wears it on important days. but deeper than that, anxelin admires how evie turned her creativity into power. they have thoughtful conversations, often about legacy, family, and how to build a life beyond what others expect. evie brings out a lighter, more playful side in anxelin, and in return, anxelin gives evie space to be vulnerable. their friendship is one of slow unfolding.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

 [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r8);

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

background-size:cover; border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent; height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

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

[/comment]her love, jay[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

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

[/comment]when anxelin first met jay, she didn’t know what to make of him. he was loud, confident, always moving - everything she wasn’t. he teased her constantly, called her “sunshine” with a grin that made her roll her eyes, but never in a mean way. he liked pushing her buttons, and she liked pretending it annoyed her more than it did. at first, she figured they were just opposites - friendly, maybe flirty, but nothing serious.

but then came the moments in between. when he stuck around to help her carry books without being asked. when he sat next to her at a crowded event just so she’d feel less overwhelmed. when he actually listened - really listened - when she talked about the pressure of being royal, about the fear she sometimes carried.

jay saw through her quiet. and she saw past his swagger.

their friendship deepened slowly. neither of them were in a rush. jay had spent his life earning trust, and anxelin didn’t give hers away easily. but one day, she realized she wasn’t just comfortable around him - she felt safe. known. and he, who had always kept people at arm’s length, started letting her see the parts of himself he usually hid behind jokes and smirks.

it wasn’t a grand confession or dramatic moment that shifted things. it was subtle. a hand held a little longer. a look that lingered too long. a quiet night walk where neither of them said it out loud, but everything changed anyway.

their romance grew out of real friendship, built on respect and shared space. jay never tried to change her. and she never expected him to be someone he wasn’t. they challenged each other - she softened his edges, he pushed her out of her comfort zone - but it was always rooted in care.

now, he calls her “sunshine” with a different tone. and she doesn’t roll her eyes anymore. she smiles. every time.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

[/border][/border][/border][/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 5 end----[/comment]

         [comment]----section 6 (extra information)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]06.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

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

[/comment]miscellaneous[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2); display:flex; flex-flow:column nowrap;]
   [comment]----row one----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap;]
      [comment]----image----[/comment]
      [border=transparent; height:auto; min-height:100%; width:clamp(85px, 10vw, 115px); flex-shrink:0; border:1px solid var(--color-1); padding:8px; box-sizing:border-box;][border=transparent; height:100%; width:100%; padding:0; background: var(--img-4); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;]
      [border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border]

      [comment]----misc contents----[/comment]
      [border=transparent; height:auto; min-height:clamp(85px, 10vw, 115px); max-height:260px; flex:1; margin:0 10px 0 1px; padding: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:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]whatever[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

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

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]whatever[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

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

      [/border][/border][/border]
      [comment]----misc contents end----[/comment]
   [/border]
   [comment]----row one end----[/comment]

[/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 6 end----[/comment]

      [/comment][/comment][/border][comment][comment][/comment][/comment][/border][comment][comment]
      [comment]----right end----[/comment]

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

[/comment][/comment][/border][comment][comment][/comment][/comment][/border][comment][comment][comment]
----signature! do not remove
[/comment][bg=transparent; height:auto; width:auto; padding:0; position:absolute;z-index:6;opacity:0.4;color: var(--bg-1); font-size:10px;text-align:center; top:13px; right:15px; line-height:100%; -webkit-filter:brightness(0.8);][font=Open Sans]♡coded by uxie♡[/font][/bg][/comment][/comment][/border][comment][comment][/comment][/comment][/border][/border][/border][/border]

 

[Alteras]

Usually the issue is with the last post before the split at the bottom of the page. There would be stray or missing/extra closing tags in the wrong order. Unfortunately you'd have to go through and look for them.

Feel free to post it here so we can take a closer look.

 

[neverlandeds]

it's the post above yours

 

[Alteras]

Looks like there were a bunch of extra [comment] tags that was messing with it.

This should work:

[comment]coded by uxie!

fonts used:
[font=Poppins]header[/font]
[font=Crimson Pro]quote[/font]
[font=Karla]subheader/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;
/*border colour -- make sure it's distinct from the other background*/
--bg-1: #f2f2f2;
/*main background colour*/
--bg-2: #fff;

/*main accent colour*/
--color-1: #d08f93;
/*secondary accent colour*/
--color-2: #f7b885;

/*header colour*/
--h1: var(--bg-2);
/*quote colour*/
--subtitle: #ffffff;
/*text colour*/
--t-color: #371a13;

/*fonts used*/
--header: 'Poppins', sans-serif;
--quote: 'Crimson Pro', serif;
--body: 'Karla', sans-serif;

/*background image*/
--bg-img: url('https://i.pinimg.com/736x/06/62/0a/06620a51bdf0a6f065f02e431581d1d2.jpg');
/*big image (left/top)*/
--img-1: url('https://i.postimg.cc/pLnB9sW-D/3ea3f7e432576ad6bc9c820e5696095f.png');
/*sidebar icon*/
--img-2: url('https://i.postimg.cc/2j2Ggq9B/e79f733c601ae3eb505465faf64d6e66-1.png');
/*appearance image*/
--img-3: url('https://i.postimg.cc/GhfQhWCL/b799090207f1a703a0f04e7c1985417a.png');
/*extra info image*/
--img-4: url('https://i.postimg.cc/jj3yq1m6/f63f09f09de48840b21287384aaa9491.png');

/*gallery images*/
--gimg-1: url('https://i.postimg.cc/02jnv8hX/cd4374dd8cb5611544cb9e2f42ecf088.png');
--gimg-2: url('https://i.postimg.cc/d1JRxv8B/f57fd08c35a7bcae06c25f3fb5e45159.png');
--gimg-3: url('https://i.postimg.cc/26xGk3zM/ed0cf587522162677093a09682ce90bf.png');
--gimg-4: url('https://i.postimg.cc/N067DLrF/75478c8cad3762b69cf723ef535c35b5.png');
--gimg-5: url('https://i.postimg.cc/mk2wtRkD/4306526f9b8308fd6d699dd302bb1197.png');
--gimg-6: url('https://i.postimg.cc/x8xPm7NP/1a4dd4dad2252a998a54e4f2557a57c3.png');

/*relationship images*/
--r1: url('https://i.postimg.cc/sxdQvCcW/88f53c02e8a6b4ca5d9beeee4bd7099b.png');
--r2: url('https://i.postimg.cc/dV4ynXsM/c3759a0119838264819c3f1e57028b1e.png');
--r3: url('https://i.postimg.cc/VNvbhRvJ/af74c6d24105f22bbf98fba9ca6418e1.png');
--r4: url('https://i.postimg.cc/jj1JY7nZ/f15dabf48cce16089b147e0ac1041663.png');
--r5: url('https://i.postimg.cc/Kzg3G8nF/c34610f0b958339b925fe3cb902e9530.png');
--r6: url('https://i.postimg.cc/65xnQnjP/86e252e7d5cd7b2c67d6e5d3a696511c.png');
--r7: url('https://i.postimg.cc/t4X63yHt/b22780ba022191a185946f584fffe6fa.png');
--r8: url('https://i.postimg.cc/Qxg5KCvd/c10370295bc2fc62bbc7b9d6d8e24d46.png');

height:auto; width:100%; max-width:600px; padding:clamp(10px, 2vw, 15px); box-sizing:border-box; background: var(--bg-1); margin:auto; line-height:0; overflow:hidden; position:relative;][border=transparent; height:auto; width:100%; padding:clamp(10px, 2vw, 15px); box-sizing:border-box; background: var(--bg-2); overflow:hidden;][border=transparent; height:auto; min-height:400px; width:100%; padding:0; display:flex; flex-flow:row wrap; position:relative; overflow:hidden; justify-content:center;]
   [comment]----left/top image----[/comment]
   [border=transparent; height:400px; flex:68; min-width:280px; max-width:340px; padding:0; background: var(--img-1); background-size:cover; box-sizing:border-box; position:relative;

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

][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][border=transparent; height:400px; flex:32; min-width:200px; padding:0; background: var(--bg-img); background-size:cover; background-position:center;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border]

   [comment]----right (main container----[/comment]
   [border=transparent; height:400px; width:100%; padding:0; position:absolute; bottom:0; left:0;]
[comment]----filler stuff----[/comment]
[border=transparent; height:400px; width:100%; padding:10px 15px 10px 0; box-sizing:border-box; position:absolute; top:-400px; left:0; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; pointer-events:none;][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); opacity:0.9; font-size:9.5px; text-transform:uppercase; font-family: var(--header); letter-spacing:2px; font-weight:bold; bottom:10px; right:clamp(5px, 30px - 3.5vw, 10px); position:absolute; z-index:3; text-shadow:1px 1px var(--color-1); pointer-events:none;][fa]fas fa-chevron-right[/fa] scroll[/border][border=transparent; height:calc(100% - 50px); width:calc(100% - 50px); padding:0; box-sizing:border-box; border:1px solid var(--color-1);][/border][/border]
[comment]----filler stuff end----[/comment]
   [border=transparent; height:400px; width:100%; padding:0; overflow:hidden;][border=transparent; height:417px; width:100%; padding:0; overflow-x:scroll; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior: smooth;][border=transparent; height:400px; width:auto; padding:0; display:flex; flex-flow:row nowrap;]

      [comment]----most left----[/comment]
      [border=transparent; height:400px; width:clamp(0px, 65vw - 280px, 340px); padding:0; box-sizing:border-box; flex-shrink:0; scroll-snap-align:start;][border=transparent; height:100%; width:100%; padding:10px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; overflow:hidden; position:relative; left:0.3px;]

         [comment]----instruction----[/comment]
         [border=transparent; height:auto; width:auto; padding:0; color: var(--h1); opacity:0.9; font-size:9.5px; text-transform:uppercase; font-family: var(--header); letter-spacing:2px; font-weight:bold; top:5px; right:5px; position:absolute; z-index:3; text-shadow:1px 1px var(--color-1); pointer-events:none;][fa]fas fa-chevron-right[/fa] scroll[/border]

         [comment]----box----[/comment]
         [border=transparent; height:calc(100% - 50px); width:calc(100% - 50px); padding:10px 15px; box-sizing:border-box; border:1px solid var(--color-1); display:flex; flex-flow:column nowrap; justify-content:flex-end;]
[comment]----quote----[/comment]
[border=transparent; height:auto; height:fit-content; width:130px; position:relative; padding:0;

/*increase this value if the text is too light on your image*/ opacity:2.8;

][border=transparent; height:auto; width:auto; padding:0; position:absolute; top:15px; left:-15px; color: var(--color-1); font-size:125px; opacity:0.7; font-style:normal; font-weight:normal; z-index:-1; font-family: sans-serif; line-height:18px;]❝[/border][border=transparent; height:auto; height:fit-content; max-height:108px; width:100%; padding:0; color: var(--subtitle); font-size:11px; font-family: var(--quote); font-style:italic; line-height:18px; letter-spacing:1px; font-weight:bold; overflow:hidden;][comment]

----* * * quote here (keep it short)----

[/comment]FLOWER, GLEAM AND GLOW,
LET YOUR POWER SHINE.
MAKE THE CLOCK REVERSE,
AND BRING BACK WAS ONCE WAS MINE.[/border]
[/border]
[comment]----quote end----[/comment]

[comment]----quote credit----[/comment]
[border=transparent; height:auto; height:fit-content; width:120px; padding:0; display:flex; flex-flow: row nowrap; justify-content:flex-end; align-items:center; opacity:0.75;][border=transparent; height:0; width:30px; border-top:1px solid var(--subtitle); padding:0; flex-shrink:0; margin:2px 8px 0 0;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--subtitle); font-size:12px; font-family: var(--quote); font-style:oblique; line-height:18px; letter-spacing:0.5px; font-weight:bold; text-align:right;][comment]

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

[/comment]credit[/border][/border]
          [/border]

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

      [comment]----left (sidebar)----[/comment]
      [border=transparent; height:400px; width:calc(100vw - 30px); max-width:215px; padding:0; border:8px solid var(--bg-2); border-top:0; border-bottom:0; box-sizing:border-box; flex-shrink:0; display:flex; flex-flow:column nowrap;]

         [comment]----sidebar container----[/comment]
         [border=transparent; height:calc(100% - 55px); width:100%; padding:0 10px; box-sizing:border-box; background:var(--bg-2);][border=transparent; height:100%; width:100%; padding:10px 5px 0 5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:center; position:relative;]

[comment]----sidebar image----[/comment]
[border=transparent; height:132px; width:132px; padding:8px; border:1px solid var(--color-1); box-sizing:border-box; border-radius:50%; margin-right:auto; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--img-2); background-size:cover; background-position:50% 50%; position:relative; overflow:hidden; border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border]

[comment]----role----[/comment]
[border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:68px; padding:0; position:absolute; top:82px; right:4px;][border=transparent; display:inline; padding:3px 6px; box-sizing:border-box; box-decoration-break:clone; -webkit-box-decoration-break: clone; background: var(--color-1); border-radius:2px; color: var(--h1); font-size:9.5px; text-transform:uppercase; letter-spacing:1.5px; line-height:15px; font-family: var(--body); text-align:right;][comment]

----* * * role here----

[/comment]princess[/border][/border]

[comment]----name----[/comment]
[border=transparent; height:auto; min-height:30px; max-height:56px; width:100%; padding:0; color: var(--color-1); text-shadow:1px 1px var(--color-2); letter-spacing:2px; font-weight:bold; font-family: var(--header); font-size:34px; line-height:28px; margin-top:14px; flex-shrink:0; overflow:hidden;][comment]

----* * * character first name/nickname here----

[/comment]anxelin.[/border]

[comment]----basics----[/comment]
[border=transparent; height:60%; width:174px; padding:0; margin:20px 0 26px 1px; overflow:hidden;][border=transparent; height:100%; width:191px; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:174px; padding:0; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]full name[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

[/comment]anxelin flynn fitsherbert, princess of corona.[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]nicknames[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

[/comment]annie. xel. xellie. sunflower. ect.[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]age[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

[/comment]roleplay dependent; same age as the main cast.[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]d.o.b.[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

[/comment]june twenty-first.[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]ethnicity[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

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

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]sexuality[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

[/comment]asexual biromantic.[/border]
   [/border]
   [comment]----copy me too!----[/comment]

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

         [comment]----music player----[/comment]
         [border=transparent; height:55px; width:100%; padding:0; position:relative; flex-shrink:0; border-left:13px solid var(--bg-2); border-right:13px solid var(--bg-2); box-sizing:border-box;][border=transparent; height:55.5px; width:calc(100% + 1.5px); padding:1px 0 0 0; background: var(--color-1); opacity:0.65; position:absolute; top:-0.5px; left:-1px;][/border][border=transparent; height:100%; width:100%; padding:10px 20px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; position:relative; z-index:2;]

[comment]----play button----[/comment]
[border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; position:relative; overflow:hidden; pointer-events:auto;]
   [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; color: var(--h1); font-size:16px; flex-shrink:0;][fa]fas fa-play[/fa][/border]

   [comment]----actual media player----[/comment]
   [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; opacity:0.01%;]
[comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
[border=transparent; height:80px; width:180px; padding:0; margin-top:-20px; margin-left:-20px; position:absolute; top:0; left:0;]
   [media=spotify]https://soundcloud.com/green-thumb-431624934/phobiafirst-ver[/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:-313px; margin-left:-103px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
   [media=googledrive]google file code here[/MEDIA]
[/border]
   [/border]
   [comment]----actual media player end----[/comment]
[/border]

[comment]----music info----[/comment]
[border=transparent; flex:1; height:auto; padding:0; display:flex; flex-flow:column nowrap; margin-left:25px;]
   [border=transparent; height:auto; width:100%; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:12px; letter-spacing:1.5px; font-style:oblique; font-weight:bold;][comment]

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

[/comment]song name[/border]

   [border=transparent; height:auto; width:100%; padding:0; color: var(--h1); font-family: var(--Inter); line-height:100%; font-size:8px; letter-spacing:2px; text-transform:uppercase; margin-top:3px; font-weight:bold;][comment]

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

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

      [comment]----right (main contents)----[/comment]
      [border=transparent; height:400px; width:calc(100vw - 61px); max-width:340px; padding:0; border:clamp(0px, 25px - 3vw, 20px) solid var(--bg-2); border-bottom:clamp(0px, 15px - 1vw, 6px) solid var(--bg-2); border-right:0; border-left:clamp(0px, 0.8vw, 8px) solid var(--bg-2); box-sizing:border-box; flex-shrink:0; scroll-snap-align:end; display:flex; flex-direction:column; overflow:hidden; position:relative;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; scroll-snap-type:y proximity;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-23px;][/border]

         [comment]----section 1 (appearance)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]01.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

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

[/comment]visage[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2); display:flex; flex-flow:column nowrap;]
   [comment]----row one----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap;]
      [comment]----icon----[/comment]
      [border=transparent; width:clamp(85px, 10vw, 110px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border:1px solid var(--color-1); position:relative;][border=transparent; height:100%; width:100%; padding:8px; box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--img-3); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;]
      [border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----appearance contents----[/comment]
      [border=transparent; height:110px; flex:1; margin-left:15px; padding: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:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]description[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

[/comment]anxelin has a delicate, thoughtful look - like someone who notices the world more than she lets on. her features are soft but defined, with a quiet intensity behind them. she has fair skin that always seems just a little sun-kissed, like she’s been outside reading in the light too long. her hair is a light brown with golden undertones, usually worn loose in soft waves or pulled into simple braids with little ribbons or pins tucked in - not for show, but for sentiment. there’s always meaning in the little things she wears.

her eyes are the first thing people notice. wide, expressive, and shifting between green and hazel depending on the light. they give away what she’s feeling even when she doesn’t say a word - watchful, kind, and a little bit older than her years. she doesn’t smile constantly, but when she does, it’s genuine and slightly crooked, like she’s still a little surprised she made someone laugh.

anxelin moves with quiet purpose - graceful in a grounded way, never flashy. she wears clothes that are practical with soft, royal touches: muted tones, natural fabrics, simple embroidery. dresses layered under cloaks when needed, boots instead of slippers. her style reflects her personality: unassuming, thoughtful, and rooted in warmth.

she doesn't draw attention, but once you notice her, it's hard to look away - not because she's trying, but because there's something real about her. she looks like someone you'd trust with your secret, someone who sees past surfaces, someone who holds light without needing to chase it.
[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]



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

[/comment]faceclaim[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

[/comment]thomasin mckenzie.[/border]
         [/border]
         [comment]----copy me too!----[/comment]

      [/border][/border][/border]
      [comment]----appearance contents end----[/comment]
   [/border]
   [comment]----row one end----[/comment]

[/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 1 end----[/comment]

         [comment]----section 2 (psyche)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]02.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

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

[/comment]psyche[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2);][border=transparent; height:auto; max-height:341px; width:100%; padding:12px 0; box-sizing:border-box; border:1px solid var(--color-1); 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 15px; box-sizing:border-box;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

   [comment]----copy this whole thing to make another bit of info (text)----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin:3px 0 5px 0;]
      [border=transparent; width:100%; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:14px; text-align:justify; margin:5px 0 0 0;][comment]

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

[/comment]anxelin is calm, measured, and introspective. she feels things deeply but rarely lets her emotions lead the way. she’s a thinker, a question-asker, someone who watches before acting. her caution isn’t fear - it’s care. she wants to do right by people, and she’s always trying to see the full picture before jumping to conclusions.

she’s fiercely loyal to her family and to ruby, though she’s often the one pulling her twin back from the edge rather than jumping with her. anxelin believes in redemption, but she doesn’t give trust away for free - it has to be earned. even so, she’ll always be the one to offer someone their first real chance.

she’s not flashy, but she’s solid. dependable. her version of bravery is standing still when others run, or stepping forward when it’s uncomfortable. she believes in the quiet power of kindness, the strength in small gestures, and the importance of giving people the room to grow. she’s the steady heartbeat behind the chaos. the one holding the light when things go dark.
[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]fears[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

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

[/border][/border][/border][/border][comment]
----section contents end----
         [/comment][/border][comment]
         ----section 2 end----[/comment]

         [comment]----section 3 (history)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:start; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]03.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

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

[/comment]history[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2);][border=transparent; height:auto; max-height:341px; width:100%; padding:12px 0; box-sizing:border-box; border:1px solid var(--color-1); 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 15px; box-sizing:border-box;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

   [comment]----copy this whole thing to make another bit of info (text)----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin:3px 0 5px 0;]
      [border=transparent; width:100%; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:14px; text-align:justify; margin:5px 0 0 0;][comment]

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

[/comment]anxelin of corona was born into peace, but raised on the memory of struggle. her parents never let her forget that the happy ending they lived in was hard-won - that it came with scars, sacrifice, and second chances. she and her twin sister ruby entered the world just as dawn broke over the kingdom, their cries overlapping with bells ringing across the city.

it was a good omen, some said - sunlight and symmetry. the golden-haired daughters of the sunlit queen.

from the start, anxelin was the quieter twin. not timid - just observant. where ruby dove headfirst into life, anxelin watched it unfold. she was curious, measured, and always listening. while ruby thrived on adventure, anxelin preferred the castle library or long walks through the garden, asking her mother about the flowers, the stars, the murals that filled the castle walls. rapunzel was patient with her questions. eugene, in his own way, encouraged her to question everything - he liked that she didn’t just accept stories at face value.

growing up in corona meant a childhood full of music, lanterns, and the weight of a legacy she didn’t fully understand until she was older. the people adored her family. they still told stories about the lost princess who returned and the thief who helped her escape. anxelin heard the tales again and again, but what stuck with her weren’t the magical parts. it was the decisions. the turning points. the idea that people could choose love over fear, kindness over survival. she liked that part best.

by the time she was a teenager, anxelin had developed a keen sense of fairness. she wasn’t one to rush to judgment. she wanted to understand people - their motives, their stories, what made them who they were. so when the council of auradon - mainly, she knew, ben - raised the idea of bringing kids from the isle of the lost to the mainland, her first instinct wasn’t rejection. it was uncertainty. not because she believed the worst in them, but because she knew how hard change could be.

she had read the files, she knew the names: mal, jay, evie, carlos. kids tied to villains whose legacies were anything but light. she’d heard whispers of the isle - how magic was banned, how hope was scarce. it didn’t seem fair. it didn’t seem right. but it also didn’t seem simple.

anxelin struggled with that complexity. she spoke with her father about it often. eugene told her the truth - how hard it had been to be seen as more than a thief, how many people still gave him side glances, even years later. but he also reminded her that someone had believed in him once, and that made all the difference.

that stuck with her.

so when the first group of kids arrived from the isle, anxelin made a choice. she wouldn’t be naïve. but she wouldn’t be cold either. she would welcome them, watch closely, and offer trust slowly, deliberately. she knew not everyone wanted to change. but she also knew some did. and she wanted to be someone who left space for that. who didn’t shut the door just because it was safer to leave it closed.

over time, she became known for her quiet diplomacy. never the loudest in the room, but often the one people turned to when things got tense. anxelin didn’t need to be the hero. she just wanted to help people find their own way toward something better. because deep down, she still believed that a new story was always possible - if someone was brave enough to write it.
      [/border]
   [/border]
   [comment]----copy me too!----[/comment]

[/border][/border][/border][/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 3 end----[/comment]

         [comment]----section 4 (gallery)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]04.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

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

[/comment]gallery[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; --imgwidth: 70px; --margin: 4px; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2);][border=transparent; height:auto; width:100%; padding:12px 15px; box-sizing:border-box; border:1px solid var(--color-1); display:flex; flex-flow:row wrap;]

   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][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%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]
   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][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%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]
   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][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%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]
   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][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%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]
   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][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%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]
   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][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%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]

[/border][/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 4 end----[/comment]

         [comment]----section 5 (relationships)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]05.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

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

[/comment]connections[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2);][border=transparent; height:auto; max-height:341px; width:100%; padding:12px 0; box-sizing:border-box; border:1px solid var(--color-1); 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 15px; box-sizing:border-box;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-20px;][/border]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][[border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r1);

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

background-size:cover; border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent; height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

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

[/comment]her mother, rapunzel[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

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

[/comment]anxelin has a strong, steady bond with her mother - one built on long talks, quiet understanding, and shared values. rapunzel raised her daughters with warmth and curiosity, encouraging them to explore the world and their emotions with equal care. anxelin took that to heart. she admired her mother not for her crown, but for her resilience - for the way she always chose love, even when it hurt. their relationship is full of soft moments: hands held across a table, long walks through the castle gardens, sketchbooks passed between them without words. when anxelin feels uncertain, rapunzel is her calm, her root.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r2);

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

background-size:cover; border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent; height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

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

[/comment]her father, eugene[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

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

[/comment]her father is her reality check and her reminder that people are more than their beginnings. eugene is the one who taught her to laugh at herself, to see past labels, and to look for the story under the story. anxelin adores him, even when he tries too hard to be the “cool” dad. they bond over late-night talks and shared sarcasm. when she doubts herself, he reminds her that no one’s perfect - but anyone can choose to do better. his past shaped how she sees redemption, and his honesty helps her stay grounded. they’re a lot alike in quieter ways - observant, thoughtful, more guarded than they seem.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r3);

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

background-size:cover;  border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent; height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

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

[/comment]her sister, ruby[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

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

[/comment]ruby is her spark. her chaos. her best friend. the two of them are inseparable, but wildly different. where ruby is bold, anxelin is careful. where ruby charges into the unknown, anxelin hangs back to watch. and yet, they balance each other perfectly. they argue, sure - especially when ruby’s impulsiveness puts them in tricky spots - but there’s no one anxelin trusts more. ruby pushes her to be braver. anxelin keeps ruby from burning out. their bond runs deeper than words. it’s unshakable. they don’t need to say much to know what the other’s thinking.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r4);

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

background-size:cover;  border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent ;height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

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

[/comment]her confidant, ben[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

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

[/comment]anxelin and ben connect through their shared sense of responsibility. both raised in the spotlight, both trying to lead with compassion. ben leans on her more than most people realize - she gives him honest feedback without flattery, and he trusts her judgment completely. she, in turn, appreciates his idealism and tries to help him keep it rooted in reality. they’re not romantic, but they have the kind of friendship that feels old and solid, built on mutual respect and a lot of late-night policy talks that somehow turn into conversations about life and legacy.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r5);

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

background-size:cover;  border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent ;height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

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

[/comment]her best friend, audrey[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

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

[/comment]anxelin and audrey have known each other since they were kids - raised in the same circles, attending the same lessons, navigating the same expectations. for years, they were close in that effortless, childhood way: braiding each other’s hair, sneaking desserts during royal events, passing notes during etiquette classes. audrey was bold and sparkly and always had a plan; anxelin was quieter, more grounded, but happy to be pulled along. they balanced each other out. but as they got older, things changed. the arrival of the vks shook something in audrey, and for a while, their friendship strained under it. anxelin didn’t understand the anger, and audrey didn’t understand anxelin’s openness to change. they argued more. drifted a little. but they never fully let go. too much history. too much love.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r6);

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

background-size:cover;  border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent ;height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

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

[/comment]her friend, chad[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

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

[/comment]chad is... complicated. anxelin doesn’t dislike him, but she keeps him at arm’s length. his arrogance grates on her, and his knee-jerk reactions - especially around the vks - frustrate her deeply. she tries to understand him, but it’s hard when he refuses to see past his own privilege. still, she doesn’t shut him out. she offers chances, patience, and the occasional pointed truth. whether he listens or not is up to him. she hasn’t given up on him, but she doesn’t rely on him either.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r7);

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

background-size:cover;  border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent ;height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

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

[/comment]her friend, evie[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

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

[/comment]anxelin really likes evie. they bonded over fashion at first - evie made her a simple gown with embroidered sunbursts along the sleeves, and anxelin still wears it on important days. but deeper than that, anxelin admires how evie turned her creativity into power. they have thoughtful conversations, often about legacy, family, and how to build a life beyond what others expect. evie brings out a lighter, more playful side in anxelin, and in return, anxelin gives evie space to be vulnerable. their friendship is one of slow unfolding.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

 [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r8);

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

background-size:cover; border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent; height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

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

[/comment]her love, jay[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

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

[/comment]when anxelin first met jay, she didn’t know what to make of him. he was loud, confident, always moving - everything she wasn’t. he teased her constantly, called her “sunshine” with a grin that made her roll her eyes, but never in a mean way. he liked pushing her buttons, and she liked pretending it annoyed her more than it did. at first, she figured they were just opposites - friendly, maybe flirty, but nothing serious.

but then came the moments in between. when he stuck around to help her carry books without being asked. when he sat next to her at a crowded event just so she’d feel less overwhelmed. when he actually listened - really listened - when she talked about the pressure of being royal, about the fear she sometimes carried.

jay saw through her quiet. and she saw past his swagger.

their friendship deepened slowly. neither of them were in a rush. jay had spent his life earning trust, and anxelin didn’t give hers away easily. but one day, she realized she wasn’t just comfortable around him - she felt safe. known. and he, who had always kept people at arm’s length, started letting her see the parts of himself he usually hid behind jokes and smirks.

it wasn’t a grand confession or dramatic moment that shifted things. it was subtle. a hand held a little longer. a look that lingered too long. a quiet night walk where neither of them said it out loud, but everything changed anyway.

their romance grew out of real friendship, built on respect and shared space. jay never tried to change her. and she never expected him to be someone he wasn’t. they challenged each other - she softened his edges, he pushed her out of her comfort zone - but it was always rooted in care.

now, he calls her “sunshine” with a different tone. and she doesn’t roll her eyes anymore. she smiles. every time.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

[/border][/border][/border][/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 5 end----[/comment]

         [comment]----section 6 (extra information)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]06.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

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

[/comment]miscellaneous[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2); display:flex; flex-flow:column nowrap;]
   [comment]----row one----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap;]
      [comment]----image----[/comment]
      [border=transparent; height:auto; min-height:100%; width:clamp(85px, 10vw, 115px); flex-shrink:0; border:1px solid var(--color-1); padding:8px; box-sizing:border-box;][border=transparent; height:100%; width:100%; padding:0; background: var(--img-4); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;]
      [border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border]

      [comment]----misc contents----[/comment]
      [border=transparent; height:auto; min-height:clamp(85px, 10vw, 115px); max-height:260px; flex:1; margin:0 10px 0 1px; padding: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:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]whatever[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

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

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

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

[/comment]whatever[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

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

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

      [/border][/border][/border]
      [comment]----misc contents end----[/comment]
   [/border]
   [comment]----row one end----[/comment]

[/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 6 end----[/comment][/border][/border][comment]
      ----right end----

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

[/comment][/border][/border][comment]
----signature! do not remove
[border=transparent; height:auto; width:auto; padding:0; position:absolute;z-index:6;opacity:0.4;color: var(--bg-1); font-size:10px;text-align:center; top:13px; right:15px; line-height:100%; -webkit-filter:brightness(0.8);][font=Open Sans]♡coded by uxie♡[/font][/border][/comment][/border]