[comment]coded by uxie!

fonts used:
[font=Times New Roman]headers[/font]
[font=Open Sans]body text, subheaders[/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;
/*textbox background*/
--bg-color: #141414;
/*image background*/
--bg: url('https://orig00.deviantart.net/b5d5/f/2019/027/b/c/candle_light_by_justadissonans-dcy5dh3.gif');

/*accent colours -- white (make this contrast w background colour)*/
--color-1: #fff;
/*accent colour -- red (main accent to change)*/
--color-2: #aa1616;

/*header text colour*/
--h1: #fff;
/*body text colour*/
--t-color: #fff;

/*fonts used*/
--header: 'Times New Roman', serif;
--subheader: 'Open Sans', sans-serif;
--body: 'Open Sans', sans-serif;
--button: 'Open Sans', sans-serif;

/*main image*/
--img-1: url('https://i.pinimg.com/564x/2f/36/67/2f3667926d71e79c4bbec60751d37581.jpg');
/*rules images*/
--img-2: url('https://i.pinimg.com/564x/5b/17/2e/5b172eb20035ee718d19a51cff7366fb.jpg');
--img-3: url('https://i.pinimg.com/564x/23/c6/92/23c6925ec6a5686e96bf170e3582ec44.jpg');

/*music player image*/
--music: url('https://media.thehypemagazine.com/wp-content/uploads/2021/03/unnamed-15-620x350.png');

/*role images -- to add more just follow the format but replace the number in rX and the link*/
--r1: url('https://i.pinimg.com/564x/6e/6c/d9/6e6cd913d165d104fac20b36d23b587a.jpg');
--r2: url('https://i.pinimg.com/564x/90/21/1c/90211c778c781cd2963cc443ecaa6f4b.jpg');
--r3: url('https://i.pinimg.com/564x/6b/c8/5a/6bc85a01cc823b921386cba1c28e4f97.jpg');
--r4: url('https://i.pinimg.com/564x/c9/49/4b/c9494b5b676fc07427bcc76f048c4f4b.jpg');
--r5: url('https://i.pinimg.com/564x/85/64/83/856483859da126487172b614ad7cce15.jpg');
--r6: url('https://i.pinimg.com/564x/75/96/89/75968987e28e82fd8ba43475c7aa8e99.jpg');

height:auto; width:100%; max-width:640px; padding:20px; box-sizing:border-box; margin:auto; line-height:0; position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg), var(--color-2); 

/*change all values to 1 if you don't want your image edited*/ -webkit-filter: saturate(0.8); 

background-size:cover; background-position:center; position:absolute; top:0; left:0; z-index:1;][border=transparent; height:100%; width:100%; max-width:640px; padding:0; background: var(--bg-color); opacity:0.45;][/border][/border][border=transparent; height:auto; width:100%; padding:0; position:relative; z-index:2; display:flex; flex-flow:row wrap; justify-content:center;]

   [comment]----left----[/comment]
   [border=transparent; height:440px; width:100%; min-width:243px; max-width:400px; padding:20px 10px 20px 20px; box-sizing:border-box; flex:38; background: var(--bg-color); display:flex; flex-flow:column nowrap;]
      [comment]----top----[/comment]
      [border=transparent; height:150px; width:100%; padding:0; display:flex; flex-flow: row nowrap; justify-content:center; align-items:flex-start;]
         [comment]----image filler----[/comment]
         [border=transparent; height:150px; flex:1; min-width:120px; max-width:170px; padding:0; margin-right:10px;][/border]

         [comment]----tabs----[/comment]
         [border=transparent; height:145px; width:40px; padding:0; overflow:hidden; flex:auto 0; margin-top:15px;][border=transparent; padding:0; line-height:44px; margin:1px 0 0 -20px;][tabs]

[comment]----tab one----[/comment]
[tab=.][border=transparent; height:auto; width:100%; padding:0; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; pointer-events:none; line-height:0;]

   [comment]----left (ignore!)----[/comment]
   [border=transparent; height:440px; width:100%; min-width:243px; max-width:400px; padding:20px 10px 20px 20px; box-sizing:border-box; flex:38; display:flex; flex-flow:column nowrap; align-items:center;]
      [border=transparent; height:min-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; justify-content:center; align-items:flex-start; flex:auto 0;]
         [border=transparent; flex:1; min-width:120px; max-width:170px; padding:0; margin-right:10px;][border=transparent; padding-top:95%; box-sizing:border-box; position:relative;][/border][/border]

         [comment]----button select----[/comment]
         [border=transparent; height:145px; width:40px; padding:5px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; flex:auto 0; align-items:center; justify-content:center; margin-top:15px;]

[comment]----selected button----[/comment]
[border=transparent; height:35px; width:35px; padding:0; position:relative; background: var(--bg-color); display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:4px; box-sizing:border-box; font-family: var(--button); font-weight:bold; font-size:9px; color: var(--h1); white-space:nowrap; line-height:100%; writing-mode: vertical-lr; text-transform:uppercase; letter-spacing:1px; transform:rotate(-180deg); display:flex; align-items:center; justify-content:center; text-align:center; position:relative;][border=transparent; height:100%; width:100%; padding:0; border:1px solid var(--color-1); position:absolute; bottom:0.2px; right:-0.5px;][/border]intro[/border][/border]

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

   [comment]----right----[/comment]
   [border=transparent; height:440px; width:100%; min-width:260px; max-width:400px; padding:0; box-sizing:border-box; flex:62; display:flex; flex-direction:column; overflow:hidden; pointer-events:auto; position:relative; border-top:20px solid var(--bg-color); border-bottom:20px solid var(--bg-color);][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; scroll-snap-type:y proximity;][border=transparent; height:100%; width:15px; padding:0; background: var(--bg-color); position:absolute; top:0; right:0;][/border][border=transparent; height:2px; width:100%; padding:0; background: var(--bg-color); position:absolute; bottom:0; right:0;][/border]

      [comment]----music player----[/comment]
      [border=transparent; height:auto; width:50%; padding:0; box-sizing:border-box; border-bottom:20px solid var(--bg-color); border-right:10px solid var(--bg-color); border-left:15px solid var(--bg-color); scroll-snap-align:start;][border=transparent; height:90px; width:100%; padding:10px; box-sizing:border-box; border:1px solid var(--color-1);][border=transparent; height:100%; width:100%; padding:0;  position:relative; display:flex; justify-content:flex-end;]

         [comment]----song image----[/comment]
         [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:2; background: var(--music); background-size:cover; background-position:center; 

/*change all values to 1 if you don't want your image edited*/ -webkit-filter: saturate(0.8) brightness(0.9); 

pointer-events:none;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-color); opacity:0.4;][/border][/border][border=transparent; height:100%; width:calc(60% - 40px); padding:0; position:absolute; top:0; right:0; z-index:5; border-top:1px solid var(--color-2); border-right:1px solid var(--color-2); opacity:0.7; box-sizing:border-box;][/border][border=transparent; height:100%; width:60%; padding:0; position:absolute; bottom:-1px; right:0; z-index:5; border-bottom:1px solid var(--color-2); opacity:0.7; box-sizing:border-box;][/border]

         [comment]----play button----[/comment]
         [border=transparent; height:100%; width:40%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; justify-content:center; position:relative; z-index:5; color: var(--color-1); opacity:0.97; pointer-events:none;]
[border=transparent; height:fit-content; width:fit-content; padding:0; font-size:12px;][fa]fas fa-backward[/fa][/border]
[border=transparent; height:fit-content; width:fit-content; padding:0; font-size:18px; margin:0 20px;][fa]fas fa-play[/fa][/border]
[border=transparent; height:fit-content; width:fit-content; padding:0; font-size:12px;][fa]fas fa-forward[/fa][/border]
         [/border]

         [comment]----song info----[/comment]
         [border=transparent; height:100%; width:60%; padding:0; display:flex; flex-flow: row nowrap; position:relative; z-index:2;][border=transparent; height:0; width:0; padding:0; flex:auto 0; border-bottom:68px solid var(--bg-color); border-left:40px solid transparent; opacity:0.7;][/border][border=transparent; flex:1; height:100%; padding:5px 15px 5px 5px; box-sizing:border-box; position:relative; z-index:2; display:flex; flex-flow:column nowrap; justify-content:center; align-items:flex-end; font-family: var(--subheader);][border=transparent; height:68px; width:100%; padding:0; background: var(--bg-color); opacity:0.7; position:absolute; top:1px; left:0; z-index:1;][/border]

[comment]----song title----[/comment]
[border=transparent; height:auto; max-height:40px; overflow:hidden; width:fit-content; padding:0; text-align:right; color: var(--h1); font-size:20px; letter-spacing:0; font-weight:bold; line-height:100%; margin:1px 0 3px 0; text-transform:uppercase; position:relative; z-index:2;][comment]

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

[/comment]cirque[/border]

[comment]----song artist----[/comment]
[border=transparent; height:auto; width:auto; max-width:120px; padding:0 0 1px 0; box-sizing:border-box; text-align:right; color: var(--h1); font-size:9px; letter-spacing:3px; line-height:100%; position:relative; z-index:2; text-transform:uppercase; font-weight:bold; margin-right:-2.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]

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

[/comment]jukebox the ghost[/border]
         [/border][/border]
         [comment]----song info end----[/comment]

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

[comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
[border=transparent; height:80px; width:180px; padding:0; margin-top:-18px; margin-left:-18px; position:absolute; top:0; left:0;]
   [media=soundcloud]https://soundcloud.com/thatsuburban/cirque-3[/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:-309px; margin-left:-99px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
   [media=googledrive]google file code here[/MEDIA]
[/border]
         [/border][/border]
         [comment]----actual media player end----[/comment]

      [/border][/border][/border]
      [comment]----music player end----[/comment]

      [comment]----copy this whole thing to make another section!----[/comment]
      [border=transparent; width:50%; padding:0 15px; box-sizing:border-box; display:flex; flex-flow:column nowrap; scroll-snap-align:end; background: var(--bg-color);
/*if you don't want the section to take up the entire box, edit the percentage. do not touch anything after the -*/ max-height:100%;]

         [comment]----section title----[/comment]
         [border=transparent; height:auto; min-height:fit-content; width:100%; padding:0; flex:auto 0; display:flex; flex-flow:row-reverse nowrap; margin-bottom:14px;][border=transparent; height:auto; min-height:100%; flex:1; padding:0 0 5px 0; border-bottom:0.5px solid var(--color-1); box-sizing:border-box;][/border][border=transparent; height:auto; width:fit-content; padding:0 10px 5px 0; border-bottom:1px solid var(--color-2); box-sizing:border-box; color: var(--h1); font-weight:bold; letter-spacing:1px; font-family: var(--header); font-style:oblique; line-height:100%; font-size:28px; text-transform:uppercase;][comment]

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

[/comment]overview.[/border][/border]

         [comment]----section content----[/comment]
         [border=transparent; height:90%; width:100%; 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; color: var(--t-color); font-size:11px; font-family: var(--body); text-align:justify; line-height:16px;][border=transparent; height:48px; width:48px; padding:0 0 7px 0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--t-color); font-family: var(--header); font-size:35px; font-weight:bold; text-align:center; line-height:31px; float:left;

/*don't want the first letter? replace "here" with display:none*/ here ;][comment]

----* * * first letter here----

[/comment]L[/border][comment]

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

[/comment]orem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut sem in purus rutrum laoreet. Duis eget blandit ante. Mauris nec lectus ut lacus imperdiet consequat. Sed sit amet elementum orci. Vestibulum at orci molestie, dignissim libero quis, vestibulum magna. Maecenas in pretium ante. Sed laoreet metus a neque rutrum, et tincidunt dolor cursus. Sed accumsan leo odio, sit amet cursus sapien placerat quis.

Proin placerat augue tellus, et faucibus purus accumsan ac. Maecenas et euismod nisi. Pellentesque dictum nulla neque, non efficitur magna bibendum eu. Vivamus congue commodo urna, vel luctus tortor lacinia semper. Pellentesque et lorem nulla. Praesent tempus efficitur risus, at vulputate ipsum viverra quis. Mauris tincidunt lectus id sem maximus suscipit. Vestibulum ultricies in ante a rutrum. Vivamus a ipsum eu nibh commodo malesuada aliquam ullamcorper lectus.

Aliquam dui quam, interdum vitae enim eget, eleifend blandit orci. Phasellus sagittis ipsum lectus, at dapibus metus blandit quis. Maecenas a augue est. Pellentesque non tellus id dui laoreet convallis. Aliquam ex nulla, pretium ac arcu nec, maximus vehicula quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Sed fringilla, elit et vestibulum volutpat, ipsum quam gravida ipsum, nec laoreet dolor velit eu lacus. Mauris nec facilisis nisl, ut volutpat ipsum. Mauris arcu dolor, viverra sit amet viverra sed, convallis sed velit. In massa felis, molestie vel purus interdum, porttitor ultricies ex.
         [/border][/border][/border]
         [comment]----section content end----[/comment]
      [/border]
      [comment]----copy me too!----[/comment]


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


[comment]----tab two----[/comment]
[tab=.][border=transparent; height:auto; width:100%; padding:0; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; pointer-events:none; line-height:0;]

   [comment]----left (ignore!)----[/comment]
   [border=transparent; height:440px; width:100%; min-width:243px; max-width:400px; padding:20px 10px 20px 20px; box-sizing:border-box; flex:38; display:flex; flex-flow:column nowrap; align-items:center; overflow:hidden;]
      [border=transparent; height:min-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; justify-content:center; align-items:flex-start; flex:auto 0;]
         [border=transparent; flex:1; min-width:120px; max-width:170px; padding:0; margin-right:10px;][border=transparent; padding-top:95%; box-sizing:border-box; position:relative;][/border][/border]

         [comment]----button select----[/comment]
         [border=transparent; height:145px; width:40px; padding:5px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; flex:auto 0; align-items:center; justify-content:center; margin-top:15px;]
[comment]----filler button----[/comment]
[border=transparent; height:35px; width:35px; padding:0;][/border]

[comment]----selected button----[/comment]
[border=transparent; height:35px; width:35px; padding:0; position:relative; background: var(--bg-color); display:flex; align-items:center; justify-content:center; margin:auto 0;][border=transparent; height:fit-content; width:fit-content; padding:4px; box-sizing:border-box; font-family: var(--button); font-weight:bold; font-size:9px; color: var(--h1); white-space:nowrap; line-height:100%; writing-mode: vertical-lr; text-transform:uppercase; letter-spacing:1px; transform:rotate(-180deg); display:flex; align-items:center; justify-content:center; text-align:center; position:relative;][border=transparent; height:100%; width:100%; padding:0; border:1px solid var(--color-1); position:absolute; bottom:-0.2px; right:-0.5px;][/border]roles[/border][/border]

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

   [comment]----right----[/comment]
   [border=transparent; height:440px; width:100%; min-width:280px; max-width:400px; padding:0; flex:62; display:flex; flex-flow:column nowrap; pointer-events:auto; overflow:hidden; position:relative;]

      [comment]----tab title----[/comment]
      [border=transparent; height:auto; width:100%; padding:20px 20px 17px 15px; box-sizing:border-box; background: var(--bg-color); flex:auto 0; display:flex; flex-flow:row nowrap;][border=transparent; height:auto; min-height:100%; flex:1; padding:0 0 5px 0; border-bottom:0.5px solid var(--color-1); box-sizing:border-box;][/border][border=transparent; height:auto; width:fit-content; padding:0 0 5px 10px; border-bottom:1px solid var(--color-2); box-sizing:border-box; color: var(--h1); font-weight:bold; letter-spacing:1px; font-family: var(--header); font-style:oblique; line-height:100%; font-size:28px; text-transform:uppercase;][comment]

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

[/comment]roles.[/border][/border]

      [comment]----tab contents----[/comment]
      [border=transparent; height:90%; width:100%; padding:0; border-bottom:20px solid var(--bg-color); overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; min-height:100%; width:100%; padding:0; display:flex; flex-flow:column nowrap;]

         [comment]----copy this whole thing to make another role----[/comment]
         [border=transparent; height:auto; width:50%; padding:0; border:20px solid var(--bg-color); border-top:5px solid var(--bg-color); display:flex; flex-flow: row nowrap; position:relative;][border=transparent; height:1.5px; width:100%; padding:0; position:absolute; top:-1px; left:0; z-index:1;background:var(--bg-color);][/border]
[comment]----role image----[/comment]
[border=transparent; height:auto; min-height:100%; width:25%; min-width:70px; flex:auto 0; padding:0; display:flex; flex-flow:column nowrap; position:relative; z-index:2;][border=transparent; width:100%; padding:0; flex:auto 0;][border=transparent; padding:0; padding-top:100%; border:1px solid var(--color-1); box-sizing:border-box; 

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

background-size:cover; opacity:0.75; 

/*change all values to 1 if you don't want your image edited*/ -webkit-filter: contrast(1.3) brightness(0.8) saturate(1.2);

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

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

[comment]----role contents----[/comment]
[border=transparent; height:auto; flex:1; padding:0 5px 0 18px; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:column nowrap;]
   [comment]----role header----[/comment]
   [border=transparent; height:fit-content; width:100%; padding:0 15px 0 0; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:flex-end;]
      [comment]----role name----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:0; margin-right:12px; color: var(--h1); font-family: var(--header); font-size:clamp(18px, 5vw, 22px); letter-spacing:1px; font-weight:bold; line-height:20px; text-transform:uppercase;][comment]

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

[/comment]role one[/border]

      [comment]----role status----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:3px 6px 4px 6px; box-sizing:border-box; flex:auto 0; background: var(--color-2); font-family: var(--subheader); font-size:9px; font-weight:bold; color: var(--h1); letter-spacing:1px; text-transform:uppercase; line-height:7px; margin-bottom:2px; font-style:oblique;][comment]

----* * * role status----

[/comment]open[/border]
   [/border]
   [comment]----role header end----[/comment]

   [comment]----role description----[/comment]
   [border=transparent; height:auto; max-height:105px; width:100%; padding:10px 20px 0 0; box-sizing:border-box; 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:10px; font-family: var(--body); text-align:justify; line-height:16px;][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut sem in purus rutrum laoreet. Duis eget blandit ante. Mauris nec lectus ut lacus imperdiet consequat. Sed sit amet elementum orci. Vestibulum at orci molestie, dignissim libero quis, vestibulum magna. Maecenas in pretium ante. Sed laoreet metus a neque rutrum, et tincidunt dolor cursus. Sed accumsan leo odio, sit amet cursus sapien placerat quis.
   [/border][/border][/border]
   [comment]----role description end----[/comment]
[/border]
[comment]----role contents end----[/comment]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another role----[/comment]
         [border=transparent; height:auto; width:50%; padding:0; border:20px solid var(--bg-color); border-top:5px solid var(--bg-color); display:flex; flex-flow: row nowrap; position:relative;][border=transparent; height:1.5px; width:100%; padding:0; position:absolute; top:-1px; left:0; z-index:1;background:var(--bg-color);][/border]
[comment]----role image----[/comment]
[border=transparent; height:auto; min-height:100%; width:25%; min-width:70px; flex:auto 0; padding:0; display:flex; flex-flow:column nowrap; position:relative; z-index:2;][border=transparent; width:100%; padding:0; flex:auto 0;][border=transparent; padding:0; padding-top:100%; border:1px solid var(--color-1); box-sizing:border-box; 

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

background-size:cover; opacity:0.75; 

/*change all values to 1 if you don't want your image edited*/ -webkit-filter: contrast(1.3) brightness(0.8) saturate(1.2);

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

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

[comment]----role contents----[/comment]
[border=transparent; height:auto; flex:1; padding:0 5px 0 18px; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:column nowrap;]
   [comment]----role header----[/comment]
   [border=transparent; height:fit-content; width:100%; padding:0 15px 0 0; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:flex-end;]
      [comment]----role name----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:0; margin-right:12px; color: var(--h1); font-family: var(--header); font-size:clamp(18px, 5vw, 22px); letter-spacing:1px; font-weight:bold; line-height:20px; text-transform:uppercase;][comment]

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

[/comment]role two[/border]

      [comment]----role status----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:3px 6px 4px 6px; box-sizing:border-box; flex:auto 0; background: var(--color-2); font-family: var(--subheader); font-size:9px; font-weight:bold; color: var(--h1); letter-spacing:1px; text-transform:uppercase; line-height:7px; margin-bottom:2px; font-style:oblique;][comment]

----* * * role status----

[/comment]open[/border]
   [/border]
   [comment]----role header end----[/comment]

   [comment]----role description----[/comment]
   [border=transparent; height:auto; max-height:105px; width:100%; padding:10px 20px 0 0; box-sizing:border-box; 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:10px; font-family: var(--body); text-align:justify; line-height:16px;][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut sem in purus rutrum laoreet. Duis eget blandit ante. Mauris nec lectus ut lacus imperdiet consequat. Sed sit amet elementum orci. Vestibulum at orci molestie, dignissim libero quis, vestibulum magna. Maecenas in pretium ante. Sed laoreet metus a neque rutrum, et tincidunt dolor cursus. Sed accumsan leo odio, sit amet cursus sapien placerat quis.
   [/border][/border][/border]
   [comment]----role description end----[/comment]
[/border]
[comment]----role contents end----[/comment]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another role----[/comment]
         [border=transparent; height:auto; width:50%; padding:0; border:20px solid var(--bg-color); border-top:5px solid var(--bg-color); display:flex; flex-flow: row nowrap; position:relative;][border=transparent; height:1.5px; width:100%; padding:0; position:absolute; top:-1px; left:0; z-index:1;background:var(--bg-color);][/border]
[comment]----role image----[/comment]
[border=transparent; height:auto; min-height:100%; width:25%; min-width:70px; flex:auto 0; padding:0; display:flex; flex-flow:column nowrap; position:relative; z-index:2;][border=transparent; width:100%; padding:0; flex:auto 0;][border=transparent; padding:0; padding-top:100%; border:1px solid var(--color-1); box-sizing:border-box; 

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

background-size:cover; opacity:0.75; 

/*change all values to 1 if you don't want your image edited*/-webkit-filter: contrast(1.3) brightness(0.8) saturate(1.2);

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

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

[comment]----role contents----[/comment]
[border=transparent; height:auto; flex:1; padding:0 5px 0 18px; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:column nowrap;]
   [comment]----role header----[/comment]
   [border=transparent; height:fit-content; width:100%; padding:0 15px 0 0; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:flex-end;]
      [comment]----role name----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:0; margin-right:12px; color: var(--h1); font-family: var(--header); font-size:clamp(18px, 5vw, 22px); letter-spacing:1px; font-weight:bold; line-height:20px; text-transform:uppercase;][comment]

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

[/comment]role three[/border]

      [comment]----role status----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:3px 6px 4px 6px; box-sizing:border-box; flex:auto 0; background: var(--color-2); font-family: var(--subheader); font-size:9px; font-weight:bold; color: var(--h1); letter-spacing:1px; text-transform:uppercase; line-height:7px; margin-bottom:2px; font-style:oblique;][comment]

----* * * role status----

[/comment]open[/border]
   [/border]
   [comment]----role header end----[/comment]

   [comment]----role description----[/comment]
   [border=transparent; height:auto; max-height:105px; width:100%; padding:10px 20px 0 0; box-sizing:border-box; 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:10px; font-family: var(--body); text-align:justify; line-height:16px;][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut sem in purus rutrum laoreet. Duis eget blandit ante. Mauris nec lectus ut lacus imperdiet consequat. Sed sit amet elementum orci. Vestibulum at orci molestie, dignissim libero quis, vestibulum magna. Maecenas in pretium ante. Sed laoreet metus a neque rutrum, et tincidunt dolor cursus. Sed accumsan leo odio, sit amet cursus sapien placerat quis.
   [/border][/border][/border]
   [comment]----role description end----[/comment]
[/border]
[comment]----role contents end----[/comment]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another role----[/comment]
         [border=transparent; height:auto; width:50%; padding:0; border:20px solid var(--bg-color); border-top:5px solid var(--bg-color); display:flex; flex-flow: row nowrap; position:relative;][border=transparent; height:1.5px; width:100%; padding:0; position:absolute; top:-1px; left:0; z-index:1;background:var(--bg-color);][/border]
[comment]----role image----[/comment]
[border=transparent; height:auto; min-height:100%; width:25%; min-width:70px; flex:auto 0; padding:0; display:flex; flex-flow:column nowrap; position:relative; z-index:2;][border=transparent; width:100%; padding:0; flex:auto 0;][border=transparent; padding:0; padding-top:100%; border:1px solid var(--color-1); box-sizing:border-box; 

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

background-size:cover; opacity:0.75; 

/*change all values to 1 if you don't want your image edited*/ -webkit-filter: contrast(1.3) brightness(0.8) saturate(1.2);

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

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

[comment]----role contents----[/comment]
[border=transparent; height:auto; flex:1; padding:0 5px 0 18px; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:column nowrap;]
   [comment]----role header----[/comment]
   [border=transparent; height:fit-content; width:100%; padding:0 15px 0 0; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:flex-end;]
      [comment]----role name----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:0; margin-right:12px; color: var(--h1); font-family: var(--header); font-size:clamp(18px, 5vw, 22px); letter-spacing:1px; font-weight:bold; line-height:20px; text-transform:uppercase;][comment]

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

[/comment]role four[/border]

      [comment]----role status----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:3px 6px 4px 6px; box-sizing:border-box; flex:auto 0; background: var(--color-2); font-family: var(--subheader); font-size:9px; font-weight:bold; color: var(--h1); letter-spacing:1px; text-transform:uppercase; line-height:7px; margin-bottom:2px; font-style:oblique;][comment]

----* * * role status----

[/comment]open[/border]
   [/border]
   [comment]----role header end----[/comment]

   [comment]----role description----[/comment]
   [border=transparent; height:auto; max-height:105px; width:100%; padding:10px 20px 0 0; box-sizing:border-box; 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:10px; font-family: var(--body); text-align:justify; line-height:16px;][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut sem in purus rutrum laoreet. Duis eget blandit ante. Mauris nec lectus ut lacus imperdiet consequat. Sed sit amet elementum orci. Vestibulum at orci molestie, dignissim libero quis, vestibulum magna. Maecenas in pretium ante. Sed laoreet metus a neque rutrum, et tincidunt dolor cursus. Sed accumsan leo odio, sit amet cursus sapien placerat quis.
   [/border][/border][/border]
   [comment]----role description end----[/comment]
[/border]
[comment]----role contents end----[/comment]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another role----[/comment]
         [border=transparent; height:auto; width:50%; padding:0; border:20px solid var(--bg-color); border-top:5px solid var(--bg-color); display:flex; flex-flow: row nowrap; position:relative;][border=transparent; height:1.5px; width:100%; padding:0; position:absolute; top:-1px; left:0; z-index:1;background:var(--bg-color);][/border]
[comment]----role image----[/comment]
[border=transparent; height:auto; min-height:100%; width:25%; min-width:70px; flex:auto 0; padding:0; display:flex; flex-flow:column nowrap; position:relative; z-index:2;][border=transparent; width:100%; padding:0; flex:auto 0;][border=transparent; padding:0; padding-top:100%; border:1px solid var(--color-1); box-sizing:border-box; 

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

background-size:cover; opacity:0.75; 

/*change all values to 1 if you don't want your image edited*/ -webkit-filter: contrast(1.3) brightness(0.8) saturate(1.2);

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

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

[comment]----role contents----[/comment]
[border=transparent; height:auto; flex:1; padding:0 5px 0 18px; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:column nowrap;]
   [comment]----role header----[/comment]
   [border=transparent; height:fit-content; width:100%; padding:0 15px 0 0; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:flex-end;]
      [comment]----role name----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:0; margin-right:12px; color: var(--h1); font-family: var(--header); font-size:clamp(18px, 5vw, 22px); letter-spacing:1px; font-weight:bold; line-height:20px; text-transform:uppercase;][comment]

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

[/comment]role five[/border]

      [comment]----role status----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:3px 6px 4px 6px; box-sizing:border-box; flex:auto 0; background: var(--color-2); font-family: var(--subheader); font-size:9px; font-weight:bold; color: var(--h1); letter-spacing:1px; text-transform:uppercase; line-height:7px; margin-bottom:2px; font-style:oblique;][comment]

----* * * role status----

[/comment]open[/border]
   [/border]
   [comment]----role header end----[/comment]

   [comment]----role description----[/comment]
   [border=transparent; height:auto; max-height:105px; width:100%; padding:10px 20px 0 0; box-sizing:border-box; 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:10px; font-family: var(--body); text-align:justify; line-height:16px;][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut sem in purus rutrum laoreet. Duis eget blandit ante. Mauris nec lectus ut lacus imperdiet consequat. Sed sit amet elementum orci. Vestibulum at orci molestie, dignissim libero quis, vestibulum magna. Maecenas in pretium ante. Sed laoreet metus a neque rutrum, et tincidunt dolor cursus. Sed accumsan leo odio, sit amet cursus sapien placerat quis.
   [/border][/border][/border]
   [comment]----role description end----[/comment]
[/border]
[comment]----role contents end----[/comment]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another role----[/comment]
         [border=transparent; height:auto; width:50%; padding:0; border:20px solid var(--bg-color); border-top:5px solid var(--bg-color); display:flex; flex-flow: row nowrap; position:relative;][border=transparent; height:1.5px; width:100%; padding:0; position:absolute; top:-1px; left:0; z-index:1;background:var(--bg-color);][/border]
[comment]----role image----[/comment]
[border=transparent; height:auto; min-height:100%; width:25%; min-width:70px; flex:auto 0; padding:0; display:flex; flex-flow:column nowrap; position:relative; z-index:2;][border=transparent; width:100%; padding:0; flex:auto 0;][border=transparent; padding:0; padding-top:100%; border:1px solid var(--color-1); box-sizing:border-box; 

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

background-size:cover; opacity:0.75;

/*change all values to 1 if you don't want your image edited*/ -webkit-filter: contrast(1.3) brightness(0.8) saturate(1.2);

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

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

[comment]----role contents----[/comment]
[border=transparent; height:auto; flex:1; padding:0 5px 0 18px; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:column nowrap;]
   [comment]----role header----[/comment]
   [border=transparent; height:fit-content; width:100%; padding:0 15px 0 0; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:flex-end;]
      [comment]----role name----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:0; margin-right:12px; color: var(--h1); font-family: var(--header); font-size:clamp(18px, 5vw, 22px); letter-spacing:1px; font-weight:bold; line-height:20px; text-transform:uppercase;][comment]

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

[/comment]role six[/border]

      [comment]----role status----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:3px 6px 4px 6px; box-sizing:border-box; flex:auto 0; background: var(--color-2); font-family: var(--subheader); font-size:9px; font-weight:bold; color: var(--h1); letter-spacing:1px; text-transform:uppercase; line-height:7px; margin-bottom:2px; font-style:oblique;][comment]

----* * * role status----

[/comment]open[/border]
   [/border]
   [comment]----role header end----[/comment]

   [comment]----role description----[/comment]
   [border=transparent; height:auto; max-height:105px; width:100%; padding:10px 20px 0 0; box-sizing:border-box; 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:10px; font-family: var(--body); text-align:justify; line-height:16px;][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut sem in purus rutrum laoreet. Duis eget blandit ante. Mauris nec lectus ut lacus imperdiet consequat. Sed sit amet elementum orci. Vestibulum at orci molestie, dignissim libero quis, vestibulum magna. Maecenas in pretium ante. Sed laoreet metus a neque rutrum, et tincidunt dolor cursus. Sed accumsan leo odio, sit amet cursus sapien placerat quis.
   [/border][/border][/border]
   [comment]----role description end----[/comment]
[/border]
[comment]----role contents end----[/comment]
         [/border]
         [comment]----copy me too!----[/comment]


      [border=transparent; flex:1; min-height:0; width:100%; padding:0; background: var(--bg-color);][/border][/border][/border][/border]
      [comment]----tab contents end----[/comment]
   [/border]
   [comment]----right end----[/comment]
[/border][/tab]
[comment]----tab two end----[/comment]


[comment]----tab three----[/comment]
[tab=.][border=transparent; height:auto; width:100%; padding:0; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; pointer-events:none; line-height:0;]

   [comment]----left (ignore!)----[/comment]
   [border=transparent; height:440px; width:100%; min-width:243px; max-width:400px; padding:20px 10px 20px 20px; box-sizing:border-box; flex:38; display:flex; flex-flow:column nowrap; align-items:center;]
      [border=transparent; height:min-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; justify-content:center; align-items:flex-start; flex:auto 0;]
         [border=transparent; flex:1; min-width:120px; max-width:170px; padding:0; margin-right:10px;][border=transparent; padding-top:95%; box-sizing:border-box; position:relative;][/border][/border]

         [comment]----button select----[/comment]
         [border=transparent; height:145px; width:40px; padding:5px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; flex:auto 0; align-items:center; justify-content:center; margin-top:15px;]
[comment]----filler button----[/comment]
[border=transparent; height:35px; width:35px; padding:0;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:35px; width:35px; padding:0; margin:auto;][/border]

[comment]----selected button----[/comment]
[border=transparent; height:35px; width:35px; padding:0; position:relative; background: var(--bg-color); display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:4px; box-sizing:border-box; font-family: var(--button); font-weight:bold; font-size:9px; color: var(--h1); white-space:nowrap; line-height:100%; writing-mode: vertical-lr; text-transform:uppercase; letter-spacing:1px; transform:rotate(-180deg); display:flex; align-items:center; justify-content:center; text-align:center; position:relative;][border=transparent; height:100%; width:100%; padding:0; border:1px solid var(--color-1); position:absolute; bottom:-0.2px; right:-0.5px;][/border]rules[/border][/border]

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

   [comment]----right----[/comment]
   [border=transparent; height:440px; width:100%; min-width:280px; max-width:400px; padding:0; flex:62; display:flex; flex-flow:column nowrap; pointer-events:auto; overflow:hidden;]

      [comment]----tab container----[/comment]
      [border=transparent; height:74%; width:100%; padding:0; border:20px solid var(--bg-color); border-left:15px solid var(--bg-color); border-bottom:12px solid var(--bg-color); box-sizing:border-box; display:flex; flex-flow:column nowrap; position:relative;][border=transparent; height:100%; width:1.5px; padding:0; position:absolute; left:-1px; top:0; z-index:1; background: var(--bg-color);][/border]

         [comment]----tab title----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; box-sizing:border-box; background: var(--bg-color); flex:auto 0; display:flex; flex-flow:row-reverse nowrap;][border=transparent; height:auto; min-height:100%; flex:1; padding:0 0 5px 0; border-bottom:0.5px solid var(--color-1); box-sizing:border-box;][/border][border=transparent; height:auto; width:fit-content; padding:0 10px 5px 0; border-bottom:1px solid var(--color-2); box-sizing:border-box; color: var(--h1); font-weight:bold; letter-spacing:1px; font-family: var(--header); font-style:oblique; line-height:100%; font-size:28px; text-transform:uppercase;][comment]

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

[/comment]rules.[/border][/border]
         [border=transparent; height:17px; width:100%; padding:0; background: var(--bg-color);][/border]

         [comment]----tab contents----[/comment]
         [border=transparent; height:90%; width:100%; padding:0; display:flex; flex-direction:column; overflow:hidden; background: var(--bg-color);][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]

[comment]----copy this whole thing to make a new rule!----[/comment]
[border=transparent; height:fit-content; width:50%; padding:0; border-right:10px solid var(--bg-color); display:flex; flex-flow:column nowrap; margin:8px 0;]

   [comment]----rule title----[/comment]
   [border=transparent; height:fit-content; width:fit-content; padding:4px 6px 6px 8px; box-sizing:border-box; position:relative; z-index:1; flex:auto 0; background: var(--color-2);][border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:12px; letter-spacing:3px; line-height:12px; position:relative; z-index:2;][comment]

----* * * rule title----

[/comment]rule one.[/border]
   [/border]

   [comment]----rule contents----[/comment]
   [border=transparent; height:auto; width:100%; padding:5px 2px 5px 0; box-sizing:border-box; position:relative; color: var(--t-color); font-size:11px; font-family: var(--body); text-align:justify; line-height:16px;][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut sem in purus rutrum laoreet. Duis eget blandit ante. Mauris nec lectus ut lacus imperdiet consequat. Sed sit amet elementum orci. Vestibulum at orci molestie, dignissim libero quis, vestibulum magna. Maecenas in pretium ante. Sed laoreet metus a neque rutrum, et tincidunt dolor cursus. Sed accumsan leo odio, sit amet cursus sapien placerat quis.
   [/border]
   [comment]----rule contents end----[/comment]
[/border]
[comment]----copy me too!----[/comment]

[comment]----copy this whole thing to make a new rule!----[/comment]
[border=transparent; height:fit-content; width:50%; padding:0; border-right:10px solid var(--bg-color); display:flex; flex-flow:column nowrap; margin:8px 0;]

   [comment]----rule title----[/comment]
   [border=transparent; height:fit-content; width:fit-content; padding:4px 6px 6px 8px; box-sizing:border-box; position:relative; z-index:1; flex:auto 0; background: var(--color-2);][border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:12px; letter-spacing:3px; line-height:12px; position:relative; z-index:2;][comment]

----* * * rule title----

[/comment]rule two.[/border]
   [/border]

   [comment]----rule contents----[/comment]
   [border=transparent; height:auto; width:100%; padding:5px 2px 5px 0; box-sizing:border-box; position:relative; color: var(--t-color); font-size:11px; font-family: var(--body); text-align:justify; line-height:16px;][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut sem in purus rutrum laoreet. Duis eget blandit ante. Mauris nec lectus ut lacus imperdiet consequat. Sed sit amet elementum orci. Vestibulum at orci molestie, dignissim libero quis, vestibulum magna. Maecenas in pretium ante. Sed laoreet metus a neque rutrum, et tincidunt dolor cursus. Sed accumsan leo odio, sit amet cursus sapien placerat quis.
   [/border]
   [comment]----rule contents end----[/comment]
[/border]
[comment]----copy me too!----[/comment]

[comment]----copy this whole thing to make a new rule!----[/comment]
[border=transparent; height:fit-content; width:50%; padding:0; border-right:10px solid var(--bg-color); display:flex; flex-flow:column nowrap; margin:8px 0;]

   [comment]----rule title----[/comment]
   [border=transparent; height:fit-content; width:fit-content; padding:4px 6px 6px 8px; box-sizing:border-box; position:relative; z-index:1; flex:auto 0; background: var(--color-2);][border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:12px; letter-spacing:3px; line-height:12px; position:relative; z-index:2;][comment]

----* * * rule title----

[/comment]rule three.[/border]
   [/border]

   [comment]----rule contents----[/comment]
   [border=transparent; height:auto; width:100%; padding:5px 2px 5px 0; box-sizing:border-box; position:relative; color: var(--t-color); font-size:11px; font-family: var(--body); text-align:justify; line-height:16px;][comment]

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

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut sem in purus rutrum laoreet. Duis eget blandit ante. Mauris nec lectus ut lacus imperdiet consequat. Sed sit amet elementum orci. Vestibulum at orci molestie, dignissim libero quis, vestibulum magna. Maecenas in pretium ante. Sed laoreet metus a neque rutrum, et tincidunt dolor cursus. Sed accumsan leo odio, sit amet cursus sapien placerat quis.
   [/border]
   [comment]----rule contents end----[/comment]
[/border]
[comment]----copy me too!----[/comment]

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

      [comment]----images----[/comment]
      [border=transparent; height:26%; width:100%; padding:0; border:15px solid var(--bg-color); border-top:0; border-right:20px solid var(--bg-color); box-sizing:border-box; position:relative;][border=transparent; height:100%; width:3px; padding:0; background: var(--bg-color); position:absolute; top:0; left:-2px; z-index:3;][/border][border=transparent; height:3px; width:100%; padding:0; background: var(--bg-color); position:absolute; bottom:-2px; left:0; z-index:3;][/border][border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow: row wrap; position:relative; z-index:2;]

         [border=transparent; height:100%; flex:1; min-width:calc(50% - 20px); padding:0; border:10px solid var(--bg-color); box-sizing:border-box;][border=transparent; height:100%; width:100%; padding:5px; box-sizing:border-box; border:1px solid var(--color-1);][border=transparent; height:100%; width:100%; padding:0; background: var(--img-2); background-size:cover; 

/*change all values to 1 if you don't want your image edited*/ -webkit-filter: saturate(0.9) brightness(0.8);

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

         [border=transparent; height:100%; flex:1; min-width:calc(50% - 20px); padding:0; border:10px solid var(--bg-color); box-sizing:border-box;][border=transparent; height:100%; width:100%; padding:5px; box-sizing:border-box; border:1px solid var(--color-1);][border=transparent; height:100%; width:100%; padding:0; background: var(--img-3); background-size:cover; 

/*change all values to 1 if you don't want your image edited*/-webkit-filter: saturate(0.9) brightness(0.8);

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

      [/border][/border]
      [comment]----images end----[/comment]
   [/border]
   [comment]----right end----[/comment]
[/border][/tab]
[comment]----tab three end----[/comment]

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

   [comment]----tabs cover (non-tabs info!)----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; pointer-events:none;]

      [comment]----left----[/comment]
      [border=transparent; height:440px; width:100%; min-width:243px; max-width:400px; padding:20px 10px 18px 20px; box-sizing:border-box; flex:38; display:flex; flex-flow:column nowrap; align-items:center; background: var(--bg-color);]
[comment]----top----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow: row nowrap; justify-content:center; align-items:flex-start; flex:auto 0;]

   [comment]----static image----[/comment]
   [border=transparent; flex:1; min-width:120px; max-width:170px; padding:0; margin-right:10px;][border=transparent; padding-top:95%; border:1px solid var(--color-1); box-sizing:border-box; position:relative;][border=transparent; height:90%; width:35%; padding:0; border-top:1px solid var(--color-2); border-right:1px solid var(--color-2); box-sizing:border-box; position:absolute; top:-1px; right:-1px;][/border][border=transparent; height:100%; width:100%; padding:0; border:10px solid var(--bg-color); box-sizing:border-box; position:absolute; top:0; left:0; background: var(--img-1); background-size:cover;

/*change all values to 1 if you don't want your image edited*/ -webkit-filter: contrast(1.3) brightness(0.66);

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

   [comment]----tab buttons (ignore!)----[/comment]
   [border=transparent; height:145px; width:40px; padding:5px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; flex:auto 0; align-items:center; justify-content:center; margin-top:15px;]

      [comment]----button----[/comment]
      [border=transparent; height:35px; width:35px; padding:0; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:4px; box-sizing:border-box; font-family: var(--button); font-weight:bold; font-size:9px; color: var(--h1); white-space:nowrap; line-height:100%; writing-mode: vertical-lr; text-transform:uppercase; letter-spacing:1px; transform:rotate(-180deg); display:flex; align-items:center; justify-content:center; text-align:center;]intro[/border][/border]

      [comment]----button----[/comment]
      [border=transparent; height:35px; width:35px; padding:0; display:flex; align-items:center; justify-content:center; margin:auto 0;][border=transparent; height:fit-content; width:fit-content; padding:4px; box-sizing:border-box; font-family: var(--button); font-weight:bold; font-size:9px; color: var(--h1); white-space:nowrap; line-height:100%; writing-mode: vertical-lr; text-transform:uppercase; letter-spacing:1px; transform:rotate(-180deg); display:flex; align-items:center; justify-content:center; text-align:center;]roles[/border][/border]

      [comment]----button----[/comment]
      [border=transparent; height:35px; width:35px; padding:0; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:4px; box-sizing:border-box; font-family: var(--button); font-weight:bold; font-size:9px; color: var(--h1); white-space:nowrap; line-height:100%; writing-mode: vertical-lr; text-transform:uppercase; letter-spacing:1px; transform:rotate(-180deg); display:flex; align-items:center; justify-content:center; text-align:center;]rules[/border][/border]

   [/border]
   [comment]----tab buttons end----[/comment]
[/border]
[comment]----top end----[/comment]

[comment]----title----[/comment]
[border=transparent; height:fit-content; width:calc(100% - 10px); max-width:260px; padding:0; color: var(--h1); font-family: var(--header); font-size:35px; font-weight:bold; letter-spacing:-2px; line-height:31px; margin:20px 10px 0.5px 0; text-transform:uppercase; flex:auto 0; pointer-events:auto;][comment]

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

[/comment]go and try,[/border]

[comment]----subtitle----[/comment]
[border=transparent; height:fit-content; width:calc(100% - 20px); max-width:250px; padding:0; color: var(--h1); font-family: var(--subheader); font-size:10px; font-weight:bold; letter-spacing:2px; line-height:100%; margin:0 5px 10px 20px; text-transform:uppercase; font-style:oblique; text-align:right; flex:auto 0; pointer-events:auto;][comment]

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

[/comment]good fuckin' [border=0; padding:0; color: var(--color-2); display:inline;]luck[/border][/border]

[comment]----roleplay information container----[/comment]
[border=transparent; height:auto; min-height:15%; max-height:20%; width:213px; padding:0; overflow:hidden; pointer-events:auto; margin:auto 0; display:flex; flex-direction:column;][border=transparent; height:100%; width:230px; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:213px; padding:0; display:flex; flex-flow:column nowrap;]

   [comment]----copy this whole thing to add another bit of info!----[/comment]
   [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin:5px 0;]
      [comment]----info title----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:4px 6px; box-sizing:border-box; flex:auto 0; background: var(--color-2); color: var(--h1); font-size:9.5px; font-family: var(--subheader); text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:11px; margin-bottom:auto;][comment]

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

[/comment]genre[/border]

      [comment]----info contents----[/comment]
      [border=transparent; height:fit-content; flex:1; padding:0 0 0 10px; box-sizing:border-box; text-align:right; font-family: var(--subheader); font-weight:bold; font-size:10px; color: var(--t-color); letter-spacing:1px; line-height:11px; text-transform:uppercase;][comment]

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

[/comment]horror, mystery[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to add another bit of info!----[/comment]
   [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin:5px 0;]
      [comment]----info title----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:4px 6px; box-sizing:border-box; flex:auto 0; background: var(--color-2); color: var(--h1); font-size:9.5px; font-family: var(--subheader); text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:11px; margin-bottom:auto;][comment]

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

[/comment]status[/border]

      [comment]----info contents----[/comment]
      [border=transparent; height:fit-content; flex:1; padding:0 0 0 10px; box-sizing:border-box; text-align:right; font-family: var(--subheader); font-weight:bold; font-size:10px; color: var(--t-color); letter-spacing:1px; line-height:11px; text-transform:uppercase;][comment]

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

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

   [comment]----copy this whole thing to add another bit of info!----[/comment]
   [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin:5px 0;]
      [comment]----info title----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:4px 6px; box-sizing:border-box; flex:auto 0; background: var(--color-2); color: var(--h1); font-size:9.5px; font-family: var(--subheader); text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:11px; margin-bottom:auto;][comment]

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

[/comment]gms[/border]

      [comment]----info contents----[/comment]
      [border=transparent; height:fit-content; flex:1; padding:0 0 0 10px; box-sizing:border-box; text-align:right; font-family: var(--subheader); font-weight:bold; font-size:10px; color: var(--t-color); letter-spacing:1px; line-height:11px; text-transform:uppercase;][comment]

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

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

   [comment]----copy this whole thing to add another bit of info!----[/comment]
   [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin:5px 0;]
      [comment]----info title----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:4px 6px; box-sizing:border-box; flex:auto 0; background: var(--color-2); color: var(--h1); font-size:9.5px; font-family: var(--subheader); text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:11px; margin-bottom:auto;][comment]

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

[/comment]spots open[/border]

      [comment]----info contents----[/comment]
      [border=transparent; height:fit-content; flex:1; padding:0 0 0 10px; box-sizing:border-box; text-align:right; font-family: var(--subheader); font-weight:bold; font-size:10px; color: var(--t-color); letter-spacing:1px; line-height:11px; text-transform:uppercase;][comment]

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

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

   [comment]----copy this whole thing to add another bit of info!----[/comment]
   [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin:5px 0;]
      [comment]----info title----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:4px 6px; box-sizing:border-box; flex:auto 0; background: var(--color-2); color: var(--h1); font-size:9.5px; font-family: var(--subheader); text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:11px; margin-bottom:auto;][comment]

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

[/comment]question[/border]

      [comment]----info contents----[/comment]
      [border=transparent; height:fit-content; flex:1; padding:0 0 0 10px; box-sizing:border-box; text-align:right; font-family: var(--subheader); font-weight:bold; font-size:10px; color: var(--t-color); letter-spacing:1px; line-height:11px; text-transform:uppercase;][comment]

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

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

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

[comment]----links----[/comment]
[border=transparent; height:max-content; width:100%; padding:0; margin:15px -5px 0 -5px; flex:auto 0; display:flex; flex-flow:row wrap; pointer-events:auto;]

   [comment]---copy this whole thing to add another link----[/comment]
   [border=transparent; height:fit-content; width:max-content; flex:1; min-width:calc(33% - 10px); padding:5px 8px; box-sizing:border-box; border:1px solid var(--color-1); flex:auto 0; font-family: var(--subheader); text-transform:uppercase; font-weight:bold; font-size:9px; margin: 0 5px; letter-spacing:1px; text-align:center;][comment]

----* * * link here----

[/comment][url='link here'][comment]
[/comment][border=transparent; color: var(--color-1); padding:0; display:inline-block; text-decoration: underline transparent; line-height:100%;][comment]

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

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

   [comment]---copy this whole thing to add another link----[/comment]
   [border=transparent; height:fit-content; width:max-content; flex:1; min-width:calc(33% - 10px); padding:5px 8px; box-sizing:border-box; border:1px solid var(--color-1); flex:auto 0; font-family: var(--subheader); text-transform:uppercase; font-weight:bold; font-size:9px; margin: 0 5px; letter-spacing:1px; text-align:center;][comment]

----* * * link here----

[/comment][url='link here'][comment]
[/comment][border=transparent; color: var(--color-1); padding:0; display:inline-block; text-decoration: underline transparent; line-height:100%;][comment]

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

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

   [comment]---copy this whole thing to add another link----[/comment]
   [border=transparent; height:fit-content; width:max-content; flex:1; min-width:calc(33% - 10px); padding:5px 8px; box-sizing:border-box; border:1px solid var(--color-1); flex:auto 0; font-family: var(--subheader); text-transform:uppercase; font-weight:bold; font-size:9px; margin: 0 5px; letter-spacing:1px; text-align:center;][comment]

----* * * link here----

[/comment][url='link here'][comment]
[/comment][border=transparent; color: var(--color-1); padding:0; display:inline-block; text-decoration: underline transparent; line-height:100%;][comment]

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

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

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

      [comment]----right (ignore!)----[/comment]
      [border=transparent; height:440px; width:100%; min-width:280px; max-width:400px; padding:0; flex:62;][/border]
   [/border]
   [comment]----tabs cover end----[/comment]

   [comment]----content filler area (ignore!)----[/comment]
   [border=transparent; height:440px; width:100%; min-width:280px; max-width:400px; padding:0; flex:62;][/border]
[/border][comment]
----signature! do not remove
[/comment][bg=transparent; height:fit-content; width:fit-content; padding:0; position:absolute;z-index:6;opacity:0.4;color: var(--color-1); font-size:10px;text-align:center; top:20px; right:15px;][font=Open Sans]♡coded by uxie♡[/font][/bg][/border]