collab code!!! (unofficial)

[comment]code by sox

[font=Poly]titles[/font]
[font=Kosugi Maru]titles[/font]
[font=Source Serif Pro]body[/font]

[/comment][div=height:auto; width:100%; overflow-x:auto; overflow-y:hidden;


/*---- COLORS: i recommend keeping these in relatively the same range of brightness as the default values! -----*/
/*------------ note: changing these hex codes will change them everywhere they're used;  -----*/
/*------------ you can change which accent colors are used where in the "values to edit" section! ----*/

--accent00: #000;          /*bkgd: black*/
--accent01: #58a5d3;   /*character 1: blue*/
--accent02: #ba1118;   /*character 2: red*/
--accent03: #FFF;          /*text color: white*/
--accent04: #737373;      /*neutral color: gray*/



/*---- PICS ----*/
--oc1pic: url('https://i.imgur.com/TyhHwEa.png');   /*character 1 pic url*/
--oc1picsize: cover;   /*pic size*/
--oc1picposition: 50% 50%;   /*pic positioning*/
--oc1filter: brightness(100%) contrast(1.1) saturate(110%) hue-rotate(0deg);

--oc2pic: url('https://i.pinimg.com/736x/49/dd/c2/49ddc2e464616c1dd3af9baf9e9943ff.jpg');   /*character 2 pic url*/
--oc2picsize: cover;   /*pic size*/
--oc2picposition: 50% 0%;   /*pic positioning*/
--oc2filter: brightness(100%) contrast(1.1) saturate(100%) hue-rotate(0deg);

--elementpic: url('https://i.pinimg.com/736x/3a/a9/e8/3aa9e8ce57efe4969568366fd14752fa.jpg');   /*element pic url*/
--elementpicsize: cover;   /*pic size*/
--elementpicposition: 50% 50%;   /*pic positioning*/
--elementfilter: brightness(100%) contrast(1.1) saturate(100%) hue-rotate(0deg);



/*---- VALUES TO EDIT ----*/
--bkgd: var(--accent00);   /*sheet background color*/
--oc1: var(--accent01);   /*character 1 color*/
--oc2: var(--accent02);   /*character 2 color*/
--other: var(--accent04);   /*npc/neutral color*/

/*borders*/
--border1: 1px solid var(--oc1);   /*border 1 color + style*/
--border2: 1px solid var(--oc2);   /*border 2 color + style*/
--border3: 1px solid var(--other);   /*border 3 color + style*/

/*character titles*/
--titlefont: var(--font1);
--titlesize: 24px;
--titlelh: 35px;
--name1color: var(--oc1);
--name2color: var(--oc2);

/*scene title*/
--scenefont: var(--font1);
--scenesize: 14px;
--scenelh: 29px;
--scenecolor: var(--accent03);

/*subtitle tags*/
--subtitlefont: var(--font2);
--subtitlesize: 12px;
--subtitlelh: 14px;
--detailsize: 10px;
--outfitsize: 14px;

/*role icons*/
--rolesize: 15px;
--rolelh: 34px;
--rolecolor: var(--accent03);

/*main body text*/
--textcolor: var(--accent03);   /*body text color*/
--bodysize: 11px;   /*body text font size*/
--bodylineheight: 12px;   /*body text line height*/
--d1: var(--oc1);   /*character 1 dialogue color*/
--d2: var(--oc2);   /*character 2 dialogue color*/
--d3: var(--other);   /*other character dialogue color*/



/*---- FONTS ----*/
--font1: 'Poly', serif;   /*titles*/
--font2: 'Kosugi Maru', serif;   /*subtitles*/
--font3: 'Source Serif Pro', serif;   /*body*/



/*---- VALUES YOU PROBABLY DON'T NEED TO EDIT ----*/
/*------------- these are mostly to make my life easier! ----*/

/*bold presets*/
/*---- i use these instead of bold tags to preserve the font style on mobile! ----*/
--d1bold: 0.3px var(--d1);
--d2bold: 0.3px var(--d2);
--d3bold: 0.3px var(--d3);

/*margins + positions*/
--leftmargin: 10px;
--rightmargin: 10px;
--topmargin: 10px;
--bottommargin: 10px;
--xmargin: calc(var(--leftmargin) + var(--rightmargin));
--ymargin: calc(var(--topmargin) + var(--bottommargin));
--contentwidth: calc(100% - var(--xmargin));
--contentheight: calc(100% - var(--ymargin));


][div=margin:auto; position:relative; width:395px; height:450px; margin-top:20px; margin-bottom:20px; background:var(--bkgd); border-radius:0px; box-sizing:border-box; cursor: url(https://imgur.com/5ex8RXq.png), auto; font-family:var(--font1); color:var(--textcolor); outline:5px solid var(--bkgd); outline-offset:1px;][nobr]


[comment]---- content start ----[/comment]
[div=position:absolute; left:var(--leftmargin); top:var(--topmargin); width:calc(var(--contentwidth) + 5px); height:var(--contentheight); overflow-x:hidden; overflow-y:scroll; scrollbar-color:var(--oc1) var(--bkgd); scrollbar-width:thin;]

[comment]---- titles start ----[/comment]
[div=position:absolute; left:0px; top:0px; width:calc(175px - (var(--titlelh) / 2)); height:var(--titlelh); font-family:var(--titlefont); text-align:left; font-size:var(--titlesize); line-height:var(--titlelh); color:var(--name1color); border-top:var(--border1); border-bottom:var(--border1);][comment]

---- CHARACTER 1 NAME HERE ---
[/comment]repentance.
[/div]
[div=position:absolute; left:calc(175px - var(--titlelh)); top:0px; width:var(--titlelh); height:var(--titlelh); font-family:var(--titlefont); text-align:center; font-size:var(--rolesize); line-height:var(--rolelh); color:var(--rolecolor); border:var(--border1); border-radius:100%;][comment]

---- CHARACTER 1 ICON HERE ----
[/comment][fa]fas fa-fire[/fa]
[/div]

[div=position:absolute; left:calc(var(--titlelh) / 2); top:108px; width:calc(175px - (var(--titlelh) / 2)); height:var(--titlelh); font-family:var(--titlefont); text-align:right; font-size:var(--titlesize); line-height:var(--titlelh); color:var(--name2color); border-top:var(--border2); border-bottom:var(--border2);][comment]

---- CHARACTER 2 NAME HERE ----
[/comment]retribution.
[/div]
[div=position:absolute; left:0px; top:108px; width:var(--titlelh); height:var(--titlelh); font-family:var(--titlefont); text-align:center; font-size:var(--rolesize); line-height:var(--rolelh); color:var(--rolecolor); border:var(--border2); border-radius:100%;][comment]

---- CHARACTER 2 ICON HERE ----
[/comment][fa]fas fa-moon[/fa]
[/div]
[comment]---- titles end ----[/comment]


[comment]---- character 1 pic ----[/comment]
[div=position:absolute; left:0px; bottom:0px; width:175px; height:275px; border:var(--border1); background:var(--oc1pic); background-size:var(--oc1picsize); background-position:var(--oc1picposition);filter:var(--oc1filter);][/div]

[comment]---- character 2 pic ----[/comment]
[div=position:absolute; right:5px; top:0px; width:175px; height:275px; border:var(--border2); background:var(--oc2pic); background-size:var(--oc2picsize); background-position:var(--oc2picposition); filter:var(--oc2filter);][/div]

[comment]---- aesthetic pic ----[/comment]
[div=position:absolute; left:0px; top:45px; width:175px; height:53px; border:var(--border3); background:var(--elementpic); background-size:var(--elementpicsize); background-position:var(--elementpicposition); filter:var(--elementfilter);][/div]


[comment]---- scene title start ----[/comment]
[div=position:absolute; right:calc(var(--scenelh) / 2 + 5px); bottom:112px; width:calc(175px - (var(--scenelh) / 2)); height:var(--scenelh); font-family:var(--scenefont); text-align:left; font-size:var(--scenesize); line-height:var(--scenelh); color:var(--scenecolor); border-top:var(--border3); border-bottom:var(--border3);][comment]

---- SCENE TITLE HERE ----
[/comment]— risen once more...
[/div]
[div=position:absolute; right:5px; bottom:112px; width:var(--scenelh); height:var(--scenelh); font-family:var(--scenefont); text-align:center; font-size:calc(var(--rolesize) - 3px); line-height:var(--scenelh); color:var(--rolecolor); border:var(--border3); border-radius:100%;][comment]

---- SCENE ICON HERE ----
[/comment][fa]fas fa-sun[/fa]
[/div]
[comment]---- scene title end ----[/comment]


[comment]---- scene details start ----[/comment]
[div=position:absolute; right:calc(175px - ((175px / 2) - 10px)); bottom:0px; width:calc((175px / 2) - 5px); height:100px; border:var(--border2); text-align:center; font-size:var(--detailsize); overflow-x:hidden; overflow-y:scroll; scrollbar-width:none;]

[comment]---- location/setting/mood----[/comment]
[div=margin-top:10px; margin-bottom:5px; font-family:var(--subtitlefont); font-size:var(--subtitlesize); line-height:var(--subtitlelh); color:var(--oc2); text-transform:uppercase; text-decoration:underline;][comment]

---- LOCATION TAG HERE ----
[/comment]location:
[/div][comment]

---- LOCATION HERE: use [br][/br] tags for line breaks ----
[/comment]the ash cloud

[comment]---- outfit/attire/inventory ----[/comment]
[div=margin-top:10px; margin-bottom:5px; font-family:var(--subtitlefont); font-size:var(--subtitlesize); line-height:var(--subtitlelh); color:var(--other); text-transform:uppercase; text-decoration:underline;][comment]

---- OUTFITS TAG HERE ----
[/comment]outfits:
[/div][comment]

---- OUTFIT LINKS HERE ----
[/comment]
[URL='https://i.pinimg.com/736x/44/8e/c5/448ec5ae4cb0c2a2a75efe4288199ccd.jpg'][div=display:inline; color:var(--oc1); margin-right:5px; font-size:var(--outfitsize);][fa]fas fa-person[/fa][/div][/URL]
[URL='https://i.pinimg.com/736x/92/81/2f/92812f4afd318046bbf306e0d05f6167.jpg'][div=display:inline; color:var(--oc2); margin-right:5px; font-size:var(--outfitsize);][fa]fas fa-person[/fa][/div][/URL]
[/div]

[comment]---- mentions/tags ----[/comment]
[div=position:absolute; right:5px; bottom:0px; width:calc((175px / 2) - 5px); height:100px; border:var(--border1); text-align:center; font-size:var(--detailsize); overflow-x:hidden; overflow-y:scroll; scrollbar-width:none;][div=margin-top:10px; margin-bottom:5px; font-family:var(--subtitlefont); font-size:var(--subtitlesize); line-height:var(--subtitlelh); color:var(--oc1); text-transform:uppercase; text-decoration:underline;][comment]

---- MENTIONS TAG HERE ----
[/comment]mentioned:
[/div][comment]

---- MENTIONS HERE: use [br][/br] tags for line breaks ----
[/comment]name 001
[br][/br]name 002
[br][/br]name 003
[br][/br]name 004
[/div]
[comment]---- scene details end ----[/comment]

[comment]---- setting bar start ----[/comment]
[div=margin-top:460px; height:30px; width:99%; border-top:var(--border3); border-bottom:var(--border3); text-align:center; text-transform:lowercase; font-size:var(--scenesize); line-height:var(--scenelh);][div=display:inline; color:var(--oc1);][comment]

---- SETTING PT 1 HERE ----
[/comment]— act i.
[/div][div=display:inline; color:var(--oc2);][comment]

---- SETTING PT 2 HERE ---
[/comment]scene i.
[/div][/div]
[comment]---- setting bar end ----[/comment]



[comment]---- body start ----[/comment]
[div=margin-top:20px; margin-left:2%; width:96%; font-family:var(--font3); font-size:var(--bodysize); line-height:var(--bodylh); text-align:justify; white-space: pre-line;][comment]


---- BODY TEXT STARTS HERE ---
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis magna quis magna tempus ultrices. Vivamus vestibulum purus enim, eget lacinia ante sollicitudin vel. Aenean semper massa imperdiet risus semper, sit amet sodales leo egestas. Nullam interdum dignissim justo, elementum tincidunt urna pretium eu. Curabitur laoreet est interdum risus fermentum, id malesuada orci vestibulum. Vivamus ultricies, leo nec consequat dictum, metus elit gravida eros, at elementum sem purus et eros. Etiam at ligula est. Morbi id luctus erat. Sed nec rutrum nulla. Ut laoreet quam nec hendrerit euismod. Etiam tincidunt, magna eu semper laoreet, risus ipsum venenatis est, quis sodales metus mi posuere magna. Nulla ac odio sem.

[div=display:inline; color:var(--d1); -webkit-text-stroke:var(--d1bold); letter-spacing:0.1px;]“This is me saying things!”[/div] Fusce eu lacus mattis, molestie lacus ut, pellentesque quam. Sed eu orci quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id elementum leo, non mattis odio. Mauris ac nibh nec nisl placerat mattis. Duis lectus orci, rutrum nec dui eleifend, malesuada tempus erat. Sed fringilla lacinia auctor. Fusce scelerisque sodales enim eu aliquam. Donec hendrerit lectus vitae metus facilisis, a tristique ligula accumsan. Sed vulputate rutrum risus, in rhoncus nisl euismod vitae. Phasellus rutrum a elit nec congue. Vestibulum in finibus mi. Vestibulum consequat et neque nec egestas. Cras elementum erat vel ante consectetur gravida.

Phasellus molestie elementum nisi accumsan porttitor. Nullam accumsan lectus faucibus dictum aliquet. Vivamus accumsan feugiat quam ac aliquet. Mauris ullamcorper, massa ut dapibus feugiat, dolor ipsum dapibus neque, sit amet laoreet ex tellus eget tortor. Ut lobortis, arcu eu placerat malesuada, leo elit convallis dolor, sit amet condimentum lectus tellus et massa. Maecenas ac egestas dui. Nunc in laoreet neque. Fusce rutrum, nunc ac hendrerit rutrum, elit libero blandit ipsum, vitae aliquam orci mauris eget elit. Quisque auctor erat nec dui rutrum sodales. Sed laoreet metus et rhoncus euismod.

[div=display:inline; color:var(--d2); -webkit-text-stroke:var(--d2bold); letter-spacing:0.1px;]"I am also saying things!"[/div] Vivamus cursus in orci ut eleifend. Vestibulum vel nibh varius, cursus orci id, faucibus sem. Morbi a ante sit amet ex posuere sodales in sit amet ex. Quisque ut felis suscipit, interdum libero eget, ultricies ex. Sed a tincidunt metus. Mauris iaculis non neque eget pharetra. Donec non rhoncus quam, et consequat erat. Quisque vitae auctor dolor, dignissim lacinia arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent blandit, justo sit amet sagittis ornare, diam lacus fringilla enim, ut molestie enim tellus sed enim.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc in facilisis enim. Vestibulum facilisis eu dui ac elementum. Proin fermentum enim vel gravida auctor. Curabitur vitae euismod est. Maecenas eget feugiat nunc, ac tincidunt enim. Sed aliquet, nunc nec blandit malesuada, turpis est congue mauris, sit amet efficitur sem orci quis lorem. Morbi lobortis, lectus ut ornare posuere, est eros fringilla velit, sed elementum mi purus id nulla. Duis non sem condimentum, euismod mi vel, commodo nisi. Nulla scelerisque mauris vitae nunc dictum, sed maximus urna commodo. Suspendisse arcu lorem, pretium ac odio vel, dignissim varius est. Donec sodales turpis eu arcu convallis efficitur.

Fusce turpis tellus, posuere vulputate risus a, blandit placerat tellus. Pellentesque convallis eros enim, at placerat enim hendrerit a. Duis accumsan dolor libero, sed blandit purus ultricies vel. Cras nisi magna, dapibus ut ex nec, tincidunt bibendum enim. Integer dapibus ornare libero eu lobortis. In non enim et nulla efficitur tincidunt sit amet vel nisl. Nullam sollicitudin ut purus in vehicula. Pellentesque malesuada ipsum ex, sit amet vestibulum urna convallis id. Vivamus quis consequat velit.

[div=display:inline; color:var(--d3); -webkit-text-stroke:var(--d3bold); letter-spacing:0.1px;]"What if I wanna say things..."[/div] Morbi dui quam, dapibus vel purus vel, facilisis facilisis dui. Aliquam egestas ultricies tortor, at volutpat lacus facilisis eget. In dolor mi, posuere ut metus a, facilisis dignissim diam. Ut eget nunc id ipsum vestibulum posuere vehicula sed velit. Morbi nibh tellus, aliquet sit amet diam id, tristique posuere libero. Duis eu eros nunc. Nullam mattis lacinia turpis at consequat. Curabitur at nisl eros. Fusce facilisis dui vel urna placerat, non lacinia dolor sodales. Etiam arcu massa, ornare sed metus nec, porttitor lobortis nisl. Aenean vestibulum elementum lectus eu laoreet.

Donec rutrum facilisis nisl vel porttitor. Morbi pellentesque, enim mattis mattis congue, nisi velit eleifend lacus, vitae gravida mi nunc sed urna. Donec viverra, est eget convallis consectetur, lectus nunc venenatis nisl, nec rhoncus magna diam a risus. Sed faucibus suscipit lorem, eget vestibulum purus imperdiet a. Aliquam mattis felis leo. Pellentesque fringilla tristique mollis. Fusce porttitor diam ante, eu ullamcorper sem molestie eu. Vestibulum massa nulla, posuere in quam sit amet, sagittis pharetra purus. Maecenas fringilla vestibulum leo, sit amet luctus ex fermentum eget.

Aenean venenatis imperdiet nulla et vulputate. Fusce eros mi, faucibus ac convallis ac, volutpat nec leo. Praesent vitae vestibulum lorem. Vivamus lacinia tempus aliquet. Suspendisse potenti. Maecenas mauris arcu, ultricies faucibus erat sed, faucibus iaculis elit. Fusce interdum odio ut risus facilisis, in fermentum eros faucibus. Cras vel libero sed turpis venenatis tristique sit amet eget urna. Donec porttitor ultricies quam, vitae fermentum augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at pretium metus. Nulla scelerisque arcu ut lacus sollicitudin, sed faucibus purus blandit. Mauris sit amet ligula non erat ullamcorper pellentesque ac at nisl. Quisque nec erat id nibh aliquam sagittis.

Integer vulputate bibendum iaculis. Duis nec urna sit amet sem tincidunt ultrices. Phasellus vitae tincidunt lectus. Morbi aliquet aliquam nulla, dapibus lacinia mi efficitur non. Aenean blandit molestie erat vel pretium. Aliquam bibendum enim odio, congue vehicula libero iaculis eleifend. Etiam cursus elit eros, sed posuere magna fringilla et.
[/div]
[comment]---- body end----[/comment]

[comment]---- end marker start ----[/comment]
[div=margin-top:10px; text-align:center; font-size:10px;]
[div=display:inline; color:var(--oc1); -webkit-text-stroke:1px var(--oc1);][fa]far fa-diamond[/fa][/div]
[div=display:inline; color:var(--other); -webkit-text-stroke:1px var(--other);][fa]far fa-diamond[/fa][/div]
[div=display:inline; color:var(--oc2); -webkit-text-stroke:1px var(--oc2);][fa]far fa-diamond[/fa][/div]
[div=display:inline; color:var(--other); -webkit-text-stroke:1px var(--other);][fa]far fa-diamond[/fa][/div]
[div=display:inline; color:var(--oc1); -webkit-text-stroke:1px var(--oc1);][fa]far fa-diamond[/fa][/div]
[/div][comment]---- end marker end ----[/comment]

[/div][comment]---- content end ----[/comment]

[/nobr][/div][/div]