API tools faq
paste
Advertisement
soxxx

013 - light

soxxx
Jan 29th, 2025 (edited)
292
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 91.32 KB | None | 0 0
raw download clone embed print report
  1. [comment]code by sox
  2.  
  3. THE PREVIEW WILL LOOK KINDA WONKY. idk why but that's normal!
  4.  
  5. [font=League Spartan]titles[/font]
  6. [font=Outfit]body text[/font]
  7. [font=Lekton]relationship ids[/font]
  8.  
  9. [/comment][div=height:auto; width:100%; overflow-x:auto; overflow-y:hidden;
  10.  
  11.  
  12. /*---- COLORS: i recommend keeping these in relatively the same range of brightness as the default values! -----*/
  13. /*------------ note: changing these hex codes will change them everywhere they're used; -----*/
  14. /*------------ you can change which accent colors are used where in the "values to edit" section! ----*/
  15.  
  16. /*background*/
  17. --bkgd: #f0f0f0; /*very light gray*/
  18.  
  19. /*monochrome colors*/
  20. --accent00: #000; /*black*/
  21. --accent01: #cfcfcf; /*gray*/
  22. --accent02: #FFF; /*white*/
  23.  
  24. /*dull colors*/
  25. --accent10: #312926; /*dark - grayish brown*/
  26. --accent11: #937B7F; /*medium - mauve gray*/
  27. --accent12: #EBE2DB; /*light - cream white*/
  28.  
  29. /*saturated colors*/
  30. --accent20: #401100; /*dark - blood red*/
  31. --accent21: #C65B51; /*medium - orange red*/
  32. --accent22: #D1DBC2; /*light - pastel green*/
  33.  
  34. /*body diagram colors*/
  35. --haircolor: #3A2718; /*HAIR: black-brown*/
  36. --eyescolor: #613C19; /*EYES: chocolate brown*/
  37. --skincolor: #EBBA95; /*SKIN: warm olive tan*/
  38. --lipscolor: #a15957; /*LIPS: muted rosy pink*/
  39.  
  40.  
  41. /*---- PICS: ctrl+f these names to edit size/positioning! ----*/
  42.  
  43. /*tab 1: profile*/
  44. --tab1a: url('https://i.imgur.com/1B2H31i.png'); /*profile main pic*/
  45. --tab1icon: url('https://i.imgur.com/GVfpjGQ.png'); /*profile quote pic*/
  46.  
  47. /*tab 2: psyche*/
  48. --tab2a: url('https://i.imgur.com/nhEdxCJ.png'); /*psyche main pic*/
  49. --tab2virtue: url('https://i.imgur.com/htCd30m.png'); /*virtues pic*/
  50. --tab2vice: url('https://i.imgur.com/O3o40QV.png'); /*vices pic*/
  51.  
  52. /*tab 3: backstory*/
  53. --tab3a: url('https://i.imgur.com/71VfmpO.png'); /*backstory main pic*/
  54.  
  55. /*tab 4: relations*/
  56. --rship1: url('https://i.imgur.com/tYjEbIJ.jpeg'); /*relationship 1*/
  57. --rship2: url('https://i.imgur.com/KwBz7aL.jpeg'); /*relationship 2*/
  58. --rship3: url('https://i.imgur.com/dBBEnla.png'); /*relationship 3*/
  59. --rship4: url('xx'); /*EXTRA - relationship 4*/
  60. --rship5: url('xx'); /*EXTRA - relationship 5*/
  61.  
  62. /*tab 5: gallery*/
  63. --tab5a: url('https://i.imgur.com/IkQwTuX.png'); /*gallery main pic left*/
  64. --gal1: url('https://i.imgur.com/QOhnEjI.jpeg'); /*top middle left*/
  65. --gal2: url('https://i.imgur.com/LpDcbVO.png'); /*top middle right*/
  66. --gal3: url('https://i.imgur.com/XJh5JcX.png'); /*top right*/
  67. --gal4: url('https://i.imgur.com/wmiLiQm.png'); /*bottom middle left*/
  68. --gal5: url('https://i.imgur.com/ddc0BDD.jpeg'); /*bottom middle right*/
  69. --gal6: url('https://i.imgur.com/9jBPILA.jpeg'); /*bottom right*/
  70.  
  71. /*tab 6: stylebook*/
  72. --tab6a: url('https://i.imgur.com/i8kWnrZ.jpeg'); /*style 1*/
  73. --tab6b: url('https://i.imgur.com/7ST4ajk.png'); /*style 2*/
  74. --tab6c: url('https://i.imgur.com/F0Y9iNO.png'); /*mods+assets 1*/
  75. --tab6d: url('https://i.imgur.com/ezP3l4K.png'); /*mods+assets 2*/
  76.  
  77. /*tab 7: playlist*/
  78. --tab7a: url('https://i.imgur.com/XHJrsTr.png'); /*playlist main pic*/
  79.  
  80.  
  81. /*---- VALUES TO EDIT ----*/
  82. --windowbkgd: var(--accent02); /*page background color*/
  83. --border0: 1px solid var(--accent00); /*main border color + style*/
  84. --border1: 1px solid var(--accent01); /*meter border color + style*/
  85.  
  86. /*body text*/
  87. --tagspace: 10px; /*margin above tags*/
  88. --bodyfont: var(--font2); /*font family*/
  89. --bodysize: 12px; /*font size*/
  90. --bodylineheight: 14px; /*line height*/
  91. --textcolor: var(--accent00); /*color*/
  92.  
  93. /*diagram colors*/
  94. --diagram1color: var(--accent21);
  95. --diagram4color: var(--accent11);
  96. --diagram6color: var(--accent11);
  97.  
  98. /*relationship 1 metrics*/
  99. --r1meter1level: 90%; /*trust*/
  100. --r1meter2level: 65%; /*platonic*/
  101. --r1meter3level: 5%; /*romantic*/
  102. --r1meter4level: 55%; /*communication*/
  103.  
  104. /*relationship 2 metrics*/
  105. --r2meter1level: 80%; /*trust*/
  106. --r2meter2level: 95%; /*platonic*/
  107. --r2meter3level: 45%; /*romantic*/
  108. --r2meter4level: 25%; /*communication*/
  109.  
  110. /*relationship 3 metrics*/
  111. --r3meter1level: 20%; /*trust*/
  112. --r3meter2level: 15%; /*platonic*/
  113. --r3meter3level: 75%; /*romantic*/
  114. --r3meter4level: 85%; /*communication*/
  115.  
  116. /*EXTRA - relationship 4 metrics*/
  117. --r4meter1level: xx%; /*trust*/
  118. --r4meter2level: xx%; /*platonic*/
  119. --r4meter3level: xx%; /*romantic*/
  120. --r4meter4level: xx%; /*communication*/
  121.  
  122. /*EXTRA - relationship 5 metrics*/
  123. --r5meter1level: xx%; /*trust*/
  124. --r5meter2level: xx%; /*platonic*/
  125. --r5meter3level: xx%; /*romantic*/
  126. --r5meter4level: xx%; /*communication*/
  127.  
  128.  
  129. /*---- FONTS ----*/
  130. --font1: 'League Spartan', sans-serif; /*titles*/
  131. --font2: 'Outfit', sans-serif; /*body*/
  132. --font3: 'Lekton', sans-serif; /*relationships*/
  133.  
  134.  
  135.  
  136.  
  137. /*---- VALUES YOU PROBABLY DON'T NEED TO EDIT ----*/
  138. /*------------- these are mostly to make my life easier! ----*/
  139.  
  140. /*bold presets*/
  141. /*---- i use these instead of bold tags to preserve the font style on mobile! ----*/
  142. --lilbold: 0.5px var(--textcolor);
  143. --morebold: 0.8px var(--textcolor);
  144. --extrabold: 1px var(--textcolor);
  145. --blackbold: 1.5px var(--textcolor);
  146. --tabbold1: 0.5px var(--tabcolor1);
  147. --tabbold2: 0.5px var(--tabcolor2);
  148. --quoteattbold: 0.8px var(--quoteattcolor);
  149. --traitbold: 1.5px var(--accent11);
  150. --rbold: 1px var(--rcolor);
  151. --plotbold: 1px var(--plotcolor);
  152. --songbold: 1px var(--songcolor);
  153. --artistbold: 1px var(--artistcolor);
  154. --currentbold: 0.8px var(--currentcolor);
  155.  
  156. /*margins + positions*/
  157. --leftmargin: 40px;
  158. --rightmargin: 40px;
  159. --topmargin: 25px;
  160. --bottommargin: 20px;
  161. --xmargin: calc(var(--leftmargin) + var(--rightmargin));
  162. --ymargin: calc(var(--topmargin) + var(--bottommargin));
  163. --contentwidth: 710px;
  164. --contentheight: calc(100% - var(--ymargin) - 60px);
  165. --innerheight: 340px;
  166. --ytabs: 80px;
  167. --xtabs: 40px;
  168.  
  169. /*sizes*/
  170. --smalldotwidth: 15px;
  171. --largedotwidth: 25px;
  172. --tinydotwidth: 12px;
  173. --playdotwidth: 40px;
  174. --tabswidth: var(--contentwidth);
  175. --tabcoverheight: 35px;
  176. --ytabcover: 75px;
  177.  
  178. /*buttons*/
  179. --buttonheight: 25px;
  180. --buttonwidth: 67px;
  181. --buttonspace: 13px;
  182. --buttonfontsize: 11px;
  183. --buttonlineheight: 25px;
  184. --lastbuttonwidth: 150px;
  185.  
  186. /*title*/
  187. --titlesize: 30px; /*title text font size*/
  188. --titlelineheight: 30px; /*title text line height*/
  189. --titlestroke: var(--accent00);
  190. --titlefont: var(--font1);
  191.  
  192. /*diagrams*/
  193. --tab1diagram: url('https://i.imgur.com/pEtOvAF.png'); /*visage diagram*/
  194. --tab4diagram: url('https://i.imgur.com/wZAj2tC.png'); /*reputation diagram*/
  195. --tab6diagram: url('https://i.imgur.com/Agymuos.png'); /*style diagram*/
  196. --labelsize: 8px; /*label text font size*/
  197. --labellineheight: 8px; /*label text line height*/
  198. --labelfont: var(--font1);
  199.  
  200. /*tab labels*/
  201. --tabcolor1: var(--accent02);
  202. --tabcolor2: var(--accent00);
  203.  
  204. /*quote*/
  205. --quoteattcolor: var(--accent11);
  206. --quotesize: 12px; /*quote text font size*/
  207. --quotelineheight: 14px; /*quote text line height*/
  208. --quotefont: var(--font2);
  209.  
  210. /*music player*/
  211. --playsize: 25px; /*play text font size*/
  212. --playlineheight: calc(var(--playdotwidth) + 5px); /*play text line height*/
  213. --playcolor: var(--accent02);
  214. --playfont: var(--font1);
  215. --playbkgd: var(--accent10);
  216.  
  217. /*traits*/
  218. --vvsize: 11px; /*trait text font size*/
  219. --vvlineheight: 13px; /*trait text line height*/
  220.  
  221. /*relationships*/
  222. --rcolor: var(--accent11);
  223. --rtitlesize: 20px; /*relationship title text font size*/
  224. --rtitlelineheight: 20px; /*relationship title text line height*/
  225. --rtitlefont: var(--font1);
  226. --rdescsize: 14px; /*relationship description text font size*/
  227. --rdesclineheight: 14px; /*relationship description text line height*/
  228. --rdescfont: var(--font1);
  229. --rbodysize: 12px; /*relationship body text font size*/
  230. --rbodylineheight: 13px; /*relationship body text line height*/
  231. --rbodyfont: var(--font3);
  232. --rmargin: 0px 0 10px 0;
  233.  
  234. /*reputation*/
  235. --repsize: 10px; /*reputation text font size*/
  236. --replineheight: 11px; /*reputation text line height*/
  237. --repfont: var(--font2);
  238.  
  239. /*plots*/
  240. --plotcolor: var(--accent12);
  241. --plotwidth: 250px;
  242. --plotcontent: 205px;
  243. --plottitlesize: 16px; /*plot title text font size*/
  244. --plottitlelineheight: 16px; /*plot title text line height*/
  245.  
  246. /*playlist*/
  247. --songfont: var(--font1);
  248. --songcolor: var(--accent02);
  249. --artistsize: 13px; /*playlist artist text font size*/
  250. --artistcolor: var(--accent02); /*playlist artist text color*/
  251. --currentcolor: var(--accent22); /*playlist current song text color*/
  252. --queue1: 3px solid var(--accent10); /*playlist song queue bkgd color 1*/
  253. --queue2: 3px solid var(--accent22); /*playlist song queue bkgd color 2*/
  254.  
  255.  
  256.  
  257. ][div=margin:auto; position:relative; width:850px; height:600px; margin-top:20px; margin-bottom:20px; background:var(--bkgd); border-radius:2px; box-sizing:border-box; overflow:hidden; cursor: url(https://imgur.com/5ex8RXq.png), auto; font-family:var(--font1); color:var(--accent00); color:var(--textcolor);][nobr]
  258.  
  259. [comment]---- HEADER BAR START ----[/comment]
  260. [div=position:absolute; left:30px; top:25px; width:790px; height:50px; background:var(--windowbkgd); border:var(--border0); box-sizing:border-box; border-radius:50px 0 0 50px; padding-right: var(--rightmargin); font-family:var(--titlefont); font-size:12px; line-height:50px; color:var(--textcolor); font-weight:100; text-align:right; text-transform:uppercase;]
  261.  
  262. [comment]---- header menu ----[/comment]
  263. home⠀|⠀ browse⠀|⠀ library⠀|⠀ friends⠀|⠀ [div=display:inline; -webkit-text-stroke:var(--morebold); letter-spacing:1px; font-size:11.5px;]profile[/div] ⠀|⠀ log out
  264.  
  265. [comment]---- left window buttons ----[/comment]
  266. [div=position:absolute; left:15px; top:17px; width:var(--smalldotwidth); height:var(--smalldotwidth); background:var(--accent10); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  267. [div=position:absolute; left:40px; top:17px; width:var(--smalldotwidth); height:var(--smalldotwidth); background:var(--accent11); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  268. [div=position:absolute; left:65px; top:17px; width:var(--smalldotwidth); height:var(--smalldotwidth); background:var(--accent12); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  269. [/div]
  270. [comment]---- HEADER BAR END ----[/comment]
  271.  
  272.  
  273.  
  274. [comment]---- PAGE BODY START ----[/comment]
  275. [div=position:absolute; left:30px; top:80px; width:790px; height:495px; background:var(--windowbkgd); border:var(--border0); box-sizing:border-box; border-radius:50px 0 50px 50px;]
  276.  
  277.  
  278. [comment]---- title start ----[/comment]
  279.  
  280. [comment]---- title decorations----[/comment]
  281. [comment]-- line --[/comment][div=position:absolute; left:var(--leftmargin); top:41px; width:708px; height:1px; background:var(--accent00);][/div]
  282. [comment]-- dot --[/comment][div=position:absolute; right:var(--rightmargin); top:35px; width:var(--tinydotwidth); height:var(--tinydotwidth); background:var(--accent01); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  283.  
  284. [comment]---- title text ----[/comment]
  285. [div=position:absolute; left:var(--leftmargin); top:30px; width:auto; height:30px; padding-right:15px; background:var(--windowbkgd); font-family:var(--titlefont); font-size:var(--titlesize); line-height:var(--titlelineheight); color:var(--textcolor); font-weight:100; text-align:left; text-transform:uppercase;][div=display:inline; -webkit-text-stroke:var(--blackbold); letter-spacing:1px; font-size:calc(var(--titlesize) - 1px);][comment]
  286.  
  287. ---- NAME HERE ----
  288. [/comment]sunwoo kim[/div]
  289. // [comment]
  290.  
  291. ---- ROLE HERE ----
  292. [/comment][I]the all-rounder[/I]
  293. [/div]
  294. [comment]---- title end----[/comment]
  295.  
  296. [comment]---- TABS START ----[/comment]
  297. [comment]-- container --[/comment][div=transparent; position:absolute; left:var(--xtabs); top:var(--ytabs); width:var(--tabswidth); height:var(--contentheight); padding:0px; line-height:0px;]
  298. [comment]-- border a --[/comment][div=transparent; height:30px; width:100%; padding:0px; overflow:hidden;]
  299. [comment]-- border b --[/comment][div=transparent; padding:0px; margin:-2px -15px 0 -20px; letter-spacing:clamp(3px, -200px + 25vw, 4px);]
  300.  
  301.  
  302.  
  303.  
  304. [tabs]
  305. [comment]---- TAB ONE: BASICS & VISAGE ----[/comment]
  306. [tab=xx][div=transparent; position:absolute; height:var(--innerheight); width:100%; padding:10px 0 0 0; bottom:0px; right:0px; background:var(--tabbkgd); letter-spacing:0;]
  307.  
  308.  
  309. [comment]-- pic --[/comment]
  310. [div=position:absolute; left:0px; top:0px; width:230px; height:315px; background:var(--tab1a); background-size:cover; background-position:50% 50%; border:var(--border0); box-sizing:border-box; border-radius:40px; opacity:1;][/div]
  311.  
  312. [comment]-- quote --[/comment]
  313. [div=position:absolute; right:0px; top:0px; width:460px; height:75px; background:var(--accent20); border:var(--border0); box-sizing:border-box; border-radius:40px; opacity:1;]
  314.  
  315. [comment]-- quote pic--[/comment][div=position:absolute; right:10px; top:10px; width:53px; height:53px; background:var(--tab1icon); background-size:cover; background:position: 50% 50%; border-radius:100%; opacity:1;][/div]
  316.  
  317. [comment]-- quote text --[/comment][div=position:absolute; left:20px; width:370px; height:30px; margin-top:15px; font-family:var(--quotefont); font-size:var(--quotesize); line-height:var(--quotelineheight); color:var(--accent02); text-align:center;][comment]
  318.  
  319. ---- QUOTE TEXT HERE ----
  320. [/comment]"Those rats are still trying to lock up my favorite vigilante— if they can catch the man. He’s... a slippery one, isn’t he?"
  321.  
  322. [comment]-- quote name --[/comment][br][/br][div=display:inline; color:var(--quoteattcolor); text-transform:uppercase; font-size:calc(var(--quotesize) - 5px); -webkit-text-stroke:var(--quoteattbold); letter-spacing:1px;][comment]
  323.  
  324. ---- QUOTE NAME HERE ----
  325. [/comment]— kim sunwoo, 5th year[/div][/div]
  326.  
  327. [/div]
  328.  
  329.  
  330. [comment]-- basics scroll --[/comment]
  331. [div=position:absolute; left:250px; bottom:40px; width:215px; height:220px; background:var(--accent02); border:var(--border0); box-sizing:border-box; border-radius:40px; opacity:1; overflow:hidden;]
  332. [div=position:relative; overflow-y:scroll; width:320px; height:160px; margin-top:18px; padding:0px 0px 20px 30px; color:var(--text); font-family:var(--bodyfont); font-size:var(--bodysize); line-height:var(--bodylineheight); text-align:justify;][div=width:50%;][comment]
  333.  
  334. ---- BASICS TEXT HERE: use [br][/br] tags for line breaks ----[/comment]
  335.  
  336. [comment]-- first tag --[/comment][div=text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]name.[/div]kim sunwoo — 김선우.
  337. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]nicknames.[/div]seonu. acorn. choco poodle.
  338. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]age.[/div]twenty-four.
  339. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]gender.[/div]cis male.
  340. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]sexuality.[/div]questioning.
  341. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]nationality.[/div]south korean.
  342. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]ethnicity.[/div]korean.
  343. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]occupation.[/div]renaissance man.
  344. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]role.[/div]the all-rounder.
  345. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]faceclaim.[/div]kim sunwoo.
  346. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]visage.[/div]lorem ipsum odor amet, consectetuer adipiscing elit. placerat tristique cubilia dolor habitasse; nam habitasse. amet hac tortor maximus aptent vel massa tincidunt. integer ex ipsum gravida suspendisse risus diam nullam. volutpat class cubilia euismod justo rhoncus. lorem montes fringilla laoreet, ut orci arcu. et viverra semper est; finibus per mauris euismod. fermentum sem neque mi sem rutrum dui mauris dignissim. nostra phasellus natoque semper natoque nisi.
  347. [/div][/div][/div]
  348.  
  349. [comment]-- basics deco --[/comment][div=position:absolute; left:445px; bottom:235px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent22); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  350.  
  351.  
  352. [comment]-- diagram --[/comment]
  353. [div=position:absolute; right:20px; bottom:60px; width:190px; height:180px; background:var(--tab1diagram); background-size:cover; background-position:50% 50%; border-radius:40px; opacity:1; background-color:var(--windowbkgd);][/div]
  354. [comment]-- color overlay --[/comment][div=position:absolute; right:20px; bottom:60px; width:200px; height:190px; background:var(--diagram1color); mix-blend-mode:lighten; border-radius:40px; opacity:1;][/div]
  355.  
  356.  
  357. [comment]-- diagram labels start --[/comment]
  358.  
  359. [comment]-- height --[/comment]
  360. [div=position:absolute; right:50px; bottom:250px; width:auto; height:8px; font-family:var(--labelfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--textcolor); text-align:left; text-transform:uppercase;][div=display:inline; -webkit-text-stroke:var(--lilbold); letter-spacing:0.5px;][comment]
  361.  
  362. ---- LABEL NAME HERE ----
  363. [/comment]height // [/div][comment]
  364.  
  365. ---- VALUE HERE ----
  366. [/comment]172 cm.[/div]
  367.  
  368.  
  369. [comment]-- weight --[/comment]
  370. [div=position:absolute; right:140px; bottom:45px; width:auto; height:8px; font-family:var(--labelfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--textcolor); text-align:left; text-transform:uppercase;][div=display:inline; -webkit-text-stroke:var(--lilbold); letter-spacing:0.5px;][comment]
  371.  
  372. ---- LABEL NAME HERE ----
  373. [/comment]weight // [/div][comment]
  374.  
  375. ---- VALUE HERE ----
  376. [/comment]132 lbs.[/div]
  377.  
  378.  
  379. [comment]-- hair --[/comment]
  380. [div=position:absolute; right:170px; bottom:217px; width:auto; height:8px; font-family:var(--labelfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--textcolor); text-align:left; text-transform:uppercase;][div=display:inline; -webkit-text-stroke:var(--lilbold); letter-spacing:0.5px;][comment]
  381.  
  382. ---- LABEL NAME HERE ----
  383. [/comment]hair.[/div][/div]
  384.  
  385.  
  386. [comment]-- eyes --[/comment]
  387. [div=position:absolute; right:21px; bottom:184px; width:auto; height:8px; font-family:var(--labelfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--textcolor); text-align:right; text-transform:uppercase;][div=display:inline; -webkit-text-stroke:var(--lilbold); letter-spacing:0.5px;][comment]
  388.  
  389. ---- LABEL NAME HERE ----
  390. [/comment]eyes.[/div][/div]
  391.  
  392.  
  393. [comment]-- skin --[/comment]
  394. [div=position:absolute; right:180px; bottom:156px; width:auto; height:8px; font-family:var(--labelfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--textcolor); text-align:left; text-transform:uppercase;][div=display:inline; -webkit-text-stroke:var(--lilbold); letter-spacing:0.5px;][comment]
  395.  
  396. ---- LABEL NAME HERE ----
  397. [/comment]skin.[/div][/div]
  398.  
  399.  
  400. [comment]-- lips --[/comment]
  401. [div=position:absolute; right:31px; bottom:135px; width:auto; height:8px; font-family:var(--labelfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--textcolor); text-align:right; text-transform:uppercase;][div=display:inline; -webkit-text-stroke:var(--lilbold); letter-spacing:0.5px;][comment]
  402.  
  403. ---- LABEL NAME HERE ----
  404. [/comment]lips.[/div][/div]
  405.  
  406.  
  407. [comment]-- lines --[/comment]
  408. [comment]-- hair --[/comment][div=position:absolute; right:155px; bottom:217px; width:45px; height:1px; background:var(--accent00);][/div]
  409. [comment]-- eyes --[/comment][div=position:absolute; right:13px; bottom:184px; width:50px; height:1px; background:var(--accent00);][/div]
  410. [comment]-- skin --[/comment][div=position:absolute; right:156px; bottom:155px; width:55px; height:1px; background:var(--accent00);][/div]
  411. [comment]-- lips --[/comment][div=position:absolute; right:23px; bottom:135px; width:42px; height:1px; background:var(--accent00);][/div]
  412.  
  413. [comment]-- height horiz --[/comment][div=position:absolute; right:50px; bottom:250px; width:68px; height:1px; background:var(--accent00);][/div]
  414. [comment]-- height vert --[/comment][div=position:absolute; right:117px; bottom:236px; width:1px; height:14px; background:var(--accent00);][/div]
  415. [comment]-- weight horiz --[/comment][div=position:absolute; right:128px; bottom:45px; width:83px; height:1px; background:var(--accent00);][/div]
  416. [comment]-- weight vert --[/comment][div=position:absolute; right:128px; bottom:46px; width:1px; height:20px; background:var(--accent00);][/div]
  417.  
  418.  
  419. [comment]-- dots --[/comment]
  420. [comment]-- hair --[/comment][div=position:absolute; right:200px; bottom:211px; width:var(--smalldotwidth); height:var(--smalldotwidth); background:var(--haircolor); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  421. [comment]-- eyes --[/comment][div=position:absolute; right:0px; bottom:178px; width:var(--smalldotwidth); height:var(--smalldotwidth); background:var(--eyescolor); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  422. [comment]-- skin --[/comment][div=position:absolute; right:210px; bottom:149px; width:var(--smalldotwidth); height:var(--smalldotwidth); background:var(--skincolor); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  423. [comment]-- lips --[/comment][div=position:absolute; right:10px; bottom:129px; width:var(--smalldotwidth); height:var(--smalldotwidth); background:var(--lipscolor); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  424.  
  425. [comment]-- diagram labels end --[/comment]
  426.  
  427.  
  428. [comment] ---- MUSIC PLAYER
  429. ---- graciously granted to me by uxie ty queen ily [/comment]
  430. [div=position:absolute; right:0px; bottom:0px; width:var(--playdotwidth); height:var(--playdotwidth);]
  431. [div=width:var(--playdotwidth); height:var(--playdotwidth); flex-shrink:0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;]
  432.  
  433. [comment] ---- play button ---- [/comment]
  434. [div=width:var(--playdotwidth); height:var(--playdotwidth); border-radius:100%; position:relative; flex-shrink:0;][div=height:100%; width:100%; background:var(--playbkgd); border:var(--border0); box-sizing:border-box; border-radius:100%; position:relative; z-index:2; pointer-events:none; text-align:center; font-family:var(--playfont); font-size:var(--playsize); line-height:var(--playlineheight); color:var(--playcolor);][fa]fas fa-circle-play[/fa][/div]
  435.  
  436. [comment] ---- media files ---- [/comment]
  437. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0.01%;][border=transparent; height:32px; width:32px; padding:0; position:relative; pointer-events:auto;]
  438.  
  439. [comment]---- SOUNDCLOUD ---- (replace the soundcloud link within media tag with your own) ---- [/comment]
  440. [border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  441. [media=soundcloud]https://soundcloud.com/official_theboyz/like-a-birthday-cake[/media][/border]
  442.  
  443. [comment]---- GOOGLE DRIVE ---- (replace the google file code within media tag with your own) ---- [/comment]
  444. [border=transparent; height:500px; width:500px; margin-top:-170px; margin-left:-93px; padding:0px;/*remove this to use me, and add it to the other*/ display:none;]
  445. [media=googledrive]1EwyiuGOGDy8NrbyIm2mfdHc7szRnCMBC[/MEDIA]
  446.  
  447. [/border][/border][/border]
  448. [/div][/div][/div]
  449.  
  450. [comment]-- music details --[/comment]
  451. [comment]-- line --[/comment][div=position:absolute; bottom:12px; width:99%; height:1px; background:var(--accent00);][/div]
  452. [comment]-- start dot --[/comment][div=position:absolute; left:0px; bottom:7px; width:var(--tinydotwidth); height:var(--tinydotwidth); background:var(--accent21); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  453.  
  454. [comment]-- song details--[/comment]
  455. [div=position:absolute; left:40px; bottom:0px; width:auto; height:25px; padding:0 10px 0 10px; background:var(--windowbkgd); font-family:var(--playfont); font-size:12px; line-height:25px; color:var(--textcolor); text-align:left; text-transform:uppercase;][div=display:inline; -webkit-text-stroke:var(--morebold); letter-spacing:1px; font-size:11px;][comment]
  456.  
  457. ---- SONG NAME // ARTIST // LYRICS HERE ----
  458. [/comment]berry. // [/div]kim sunwoo. // [div=display:inline; font-style:italic; color:var(--accent11);]"what do you say? you and i will be like cherries..."[/div][/div]
  459.  
  460. [comment] ---- MUSIC END ---- [/comment]
  461.  
  462.  
  463. [div=display:none;]basics[/div]
  464. [/div][/tab]
  465.  
  466.  
  467.  
  468.  
  469.  
  470. [comment]---- TAB TWO: PERSONA ----[/comment]
  471. [tab=xx][div=transparent; position:absolute; height:var(--innerheight); width:100%; padding:10px 0 0 0; bottom:0px; right:0px; background:var(--tabbkgd); letter-spacing:0;]
  472.  
  473. [comment]-- pic --[/comment]
  474. [div=position:absolute; left:260px; top:0px; width:215px; height:100%; background:var(--tab2a); background-size:cover; background-position:50% 50%; border:var(--border0); box-sizing:border-box; border-radius:40px; opacity:1;][/div]
  475.  
  476. [comment]-- headers --[/comment]
  477. [comment]-- virtues --[/comment][div=position:absolute; left:0px; top:0px; width:240px; height:25px; font-family:var(--playfont); font-size:20px; line-height:25px; color:var(--accent11); text-align:right; text-transform:uppercase;-webkit-text-stroke:var(--traitbold); letter-spacing:1.5px;]virtues[/div]
  478. [comment]-- underline --[/comment][div=position:absolute; left:0px; top:22px; width:240px; height:1px; background:var(--accent00);][/div]
  479. [comment]-- dot --[/comment][div=position:absolute; left:0px; top:16px; width:var(--tinydotwidth); height:var(--tinydotwidth); background:var(--accent10); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  480.  
  481. [comment]-- vices --[/comment][div=position:absolute; left:0px; bottom:140px; width:240px; height:25px; font-family:var(--playfont); font-size:20px; line-height:25px; color:var(--accent11); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--traitbold); letter-spacing:1.5px;]vices[/div]
  482. [comment]-- underline --[/comment][div=position:absolute; left:0px; bottom:142px; width:240px; height:1px; background:var(--accent00);][/div]
  483. [comment]-- dot --[/comment][div=position:absolute; left:228px; bottom:137px; width:var(--tinydotwidth); height:var(--tinydotwidth); background:var(--accent10); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  484.  
  485. [comment]-- virtues scroll --[/comment]
  486. [div=position:absolute; left:0px; top:35px; width:240px; height:130px; background:var(--accent02); border:var(--border0); box-sizing:border-box; border-radius:35px 35px 35px 0; opacity:1; overflow:hidden;]
  487. [div=position:relative; overflow-y:scroll; width:270px; height:90px; margin-top:10px; margin-left:110px; padding:0px 0px 20px 0px; color:var(--text); font-family:var(--bodyfont); font-size:var(--vvsize); line-height:var(--vvlineheight); text-align:left; text-transform:uppercase; -webkit-text-stroke:var(--morebold); letter-spacing:1px;][div=width:50%;][comment]
  488.  
  489. ---- VIRTUES TEXT HERE: use [br][/br] tags for line breaks ----[/comment]
  490.  
  491. [LIST]
  492. [*]virtue 1.
  493. [*]virtue 2.
  494. [*]virtue 3.
  495. [*]virtue 4.
  496. [*]virtue 5.
  497. [*]virtue 6.
  498. [*]virtue 7.
  499. [*]virtue 8.
  500. [/LIST]
  501. [/div][/div]
  502.  
  503. [comment]-- virtues pic --[/comment]
  504. [div=position:absolute; left:10px; top:9px; width:110px; height:110px; background:var(--tab2virtue); background-size:cover; background-position:50% 50%; border:var(--border0); box-sizing:border-box; border-radius:30px 30px 30px 0; opacity:1;][/div]
  505. [/div]
  506.  
  507. [comment]-- virtues deco --[/comment][div=position:absolute; left:105px; top:40px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent22); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  508.  
  509.  
  510.  
  511. [comment]-- vices scroll --[/comment]
  512. [div=position:absolute; left:0px; bottom:0px; width:240px; height:130px; background:var(--accent02); border:var(--border0); box-sizing:border-box; border-radius:35px 35px 0 35px; opacity:1; overflow:hidden;]
  513. [div=position:relative; overflow-y:scroll; width:270px; height:90px; margin-top:10px; margin-left:-10px; padding:0px 30px 20px 0px; color:var(--text); font-family:var(--bodyfont); font-size:var(--vvsize); line-height:var(--vvlineheight); text-align:left; text-transform:uppercase; -webkit-text-stroke:var(--morebold); letter-spacing:1px;][div=width:50%;][comment]
  514.  
  515. ---- VICES TEXT HERE: use [br][/br] tags for line breaks ----[/comment]
  516.  
  517. [LIST]
  518. [*]vice 1.
  519. [*]vice 2.
  520. [*]vice 3.
  521. [*]vice 4.
  522. [*]vice 5.
  523. [*]vice 6.
  524. [*]vice 7.
  525. [*]vice 8.
  526. [/LIST]
  527. [/div][/div]
  528.  
  529. [comment]-- vices pic --[/comment]
  530. [div=position:absolute; right:10px; top:9px; width:110px; height:110px; background:var(--tab2vice); background-size:cover; background-position:50% 50%; border:var(--border0); box-sizing:border-box; border-radius:30px 30px 0 30px; opacity:1;][/div]
  531. [/div]
  532.  
  533. [comment]-- vices deco --[/comment][div=position:absolute; left:110px; top:225px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent21); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  534.  
  535.  
  536.  
  537.  
  538. [comment]-- persona scroll --[/comment]
  539. [div=position:absolute; right:0px; top:0px; width:215px; height:100%; background:var(--accent02); border:var(--border0); box-sizing:border-box; border-radius:40px; opacity:1; overflow:hidden;]
  540. [div=position:relative; overflow-y:scroll; width:320px; height:295px; margin-top:18px; padding:0px 0px 20px 30px; color:var(--text); font-family:var(--bodyfont); font-size:var(--bodysize); line-height:var(--bodylineheight); text-align:justify;][div=width:50%;][comment]
  541.  
  542. ---- PERSONA TEXT HERE: use [br][/br] tags for line breaks ----[/comment]
  543.  
  544. [comment]-- first tag --[/comment][div=text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]personality.[/div]tincidunt fermentum massa vestibulum vivamus pellentesque sociosqu lobortis tempus. turpis varius dui cursus gravida sapien. mollis nec ad class nibh molestie volutpat quisque magnis. urna a dui posuere fames ex posuere. ultrices potenti himenaeos vehicula habitasse congue elementum ad.
  545.  
  546. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]ambitions.[/div]lobortis cras torquent montes litora magnis rutrum tortor. arcu dictum vel litora sagittis proin molestie phasellus condimentum.
  547.  
  548. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]fears.[/div]iaculis tempus suspendisse aptent cubilia adipiscing sit primis.
  549.  
  550. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]hobbies.[/div]nam massa hendrerit taciti congue vehicula laoreet.
  551.  
  552. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]aversions.[/div]magna conubia pharetra netus.
  553.  
  554. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]likes.[/div]quam nostra dui risus bibendum quis habitasse porttitor. orci est parturient tempor adipiscing maecenas. etiam quisque lacus nisl venenatis elementum sapien.
  555.  
  556. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]dislikes.[/div]nisl natoque habitant pretium mi magna. sodales sit gravida dictum lectus justo penatibus porta, fusce egestas.
  557.  
  558. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]bucket list.[/div]elementum hac sapien malesuada posuere molestie pellentesque. luctus inceptos finibus vulputate vel dictumst platea ante enim.
  559.  
  560. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]ailments.[/div]congue senectus amet felis lobortis elit ridiculus iaculis. dapibus suspendisse rhoncus fermentum lacus tincidunt. maecenas fames proin maximus; aliquet magnis penatibus per blandit.
  561. [/div][/div][/div]
  562.  
  563. [comment]-- persona deco --[/comment][div=position:absolute; right:0px; top:0px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent20); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  564.  
  565.  
  566. [div=display:none;]psyche[/div]
  567. [/div][/tab]
  568.  
  569.  
  570.  
  571.  
  572.  
  573.  
  574. [comment]---- TAB THREE: BACKSTORY ----[/comment][tab=xx][div=transparent; position:absolute; height:var(--innerheight); width:100%; padding:10px 0 0 0; bottom:0px; right:0px; background:var(--tabbkgd); letter-spacing:0;]
  575.  
  576. [comment]-- pic --[/comment]
  577. [div=position:absolute; right:0px; top:0px; width:360px; height:100%; background:var(--tab3a); background-size:cover; background-position:50% 50%; border:var(--border0); box-sizing:border-box; border-radius:40px; opacity:1;][/div]
  578.  
  579. [comment]-- pic deco --[/comment][div=position:absolute; right:340px; bottom:0px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent21); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  580.  
  581.  
  582. [comment]-- backstory scroll --[/comment]
  583. [div=position:absolute; left:0px; top:0px; width:330px; height:100%; background:var(--accent02); border:var(--border0); box-sizing:border-box; border-radius:40px; opacity:1; overflow:hidden;]
  584. [div=position:relative; overflow-y:scroll; width:550px; height:290px; margin-top:18px; padding:0px 0px 20px 30px; color:var(--text); font-family:var(--bodyfont); font-size:var(--bodysize); line-height:var(--bodylineheight); text-align:justify;][div=width:50%;][comment]
  585.  
  586. ---- BACKSTORY TEXT HERE: use [br][/br] tags for line breaks ----[/comment]
  587.  
  588. [comment]-- first tag --[/comment][div=text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]hometown.[/div]seongnam, gyeonggi province, south korea.
  589.  
  590. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]residence.[/div]lobortis cras torquent montes litora magnis rutrum tortor. arcu dictum vel litora sagittis proin molestie phasellus condimentum.
  591.  
  592. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]family.[/div]tincidunt fermentum massa vestibulum vivamus pellentesque sociosqu lobortis tempus. turpis varius dui cursus gravida sapien. mollis nec ad class nibh molestie volutpat quisque magnis. urna a dui posuere fames ex posuere. ultrices potenti himenaeos vehicula habitasse congue elementum ad.
  593.  
  594. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]history.[/div]nam massa hendrerit taciti congue vehicula laoreet. magna conubia pharetra netus. quam nostra dui risus bibendum quis habitasse porttitor. orci est parturient tempor adipiscing maecenas. etiam quisque lacus nisl venenatis elementum sapien. nisl natoque habitant pretium mi magna. sodales sit gravida dictum lectus justo penatibus porta, fusce egestas. elementum hac sapien malesuada posuere molestie pellentesque. luctus inceptos finibus vulputate vel dictumst platea ante enim. congue senectus amet felis lobortis elit ridiculus iaculis. dapibus suspendisse rhoncus fermentum lacus tincidunt. maecenas fames proin maximus; aliquet magnis penatibus per blandit.
  595. [br][/br][br][/br]
  596. nam massa hendrerit taciti congue vehicula laoreet. augue ex felis ridiculus vehicula egestas mus maximus duis nec. nisl quisque diam aliquam pharetra dictum. magna conubia pharetra netus ullamcorper quis condimentum rhoncus metus. cubilia cras sagittis eu cursus egestas nibh ipsum. adipiscing vestibulum aliquet nisi lobortis donec, morbi maximus.
  597. [br][/br][br][/br]
  598. quam nostra dui risus bibendum quis habitasse porttitor. orci est parturient tempor adipiscing maecenas. etiam quisque lacus nisl venenatis elementum sapien. nisl natoque habitant pretium mi magna. sodales sit gravida dictum lectus justo penatibus porta, fusce egestas. elementum hac sapien malesuada posuere molestie pellentesque. luctus inceptos finibus vulputate vel dictumst platea ante enim. congue senectus amet felis lobortis elit ridiculus iaculis. dapibus suspendisse rhoncus fermentum lacus tincidunt. maecenas fames proin maximus; aliquet magnis penatibus per blandit.
  599. [/div][/div][/div]
  600.  
  601.  
  602. [comment]-- backstory deco --[/comment][div=position:absolute; right:375px; top:0px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent22); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  603.  
  604. [div=display:none;]backstory[/div]
  605. [/div][/tab]
  606.  
  607.  
  608.  
  609.  
  610.  
  611.  
  612. [comment]---- TAB FOUR: RELATIONSHIPS ----[/comment][tab=xx][div=transparent; position:absolute; height:var(--innerheight); width:100%; padding:10px 0 0 0; bottom:0px; right:0px; background:var(--tabbkgd); letter-spacing:0;]
  613.  
  614. [comment]-- header --[/comment][div=position:absolute; right:0px; top:0px; width:235px; height:25px; font-family:var(--playfont); font-size:20px; line-height:25px; color:var(--accent11); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--traitbold); letter-spacing:1.5px;]reputation[/div]
  615. [comment]-- underline --[/comment][div=position:absolute; right:95px; top:22px; width:155px; height:1px; background:var(--accent20);][/div]
  616. [comment]-- dot --[/comment][div=position:absolute; right:245px; top:16px; width:var(--tinydotwidth); height:var(--tinydotwidth); background:var(--accent10); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  617.  
  618. [comment]---- reputation start ----[/comment]
  619. [comment]-- pic --[/comment][div=position:absolute; right:0px; top:0px; width:110px; height:100px; background:var(--tab4diagram); background-size:cover; background-position:50% 50%; border-radius:40px; opacity:1; background-color:var(--windowbkgd);][/div]
  620. [comment]-- color overlay --[/comment][div=position:absolute; right:0px; top:0px; width:110px; height:100px; background:var(--diagram4color); mix-blend-mode:lighten; border-radius:59px 40px 40px 40px; opacity:1;][/div]
  621.  
  622. [comment]-- pupil overlay --[/comment][div=position:absolute; right:54.5px; top:48px; width:25px; height:25px; overflow:hidden; border-radius:8px; transform:rotate(75deg); mix-blend-mode:overlay;]
  623. [div=position:absolute; left:-5px; top:0px; width:25px; height:25px; border-radius:100%; background:var(--accent00);][/div]
  624. [div=position:absolute; left:-5px; top:0px; width:25px; height:25px; border-radius:100%; background:var(--accent20);][/div]
  625. [/div]
  626.  
  627.  
  628. [comment]-- body --[/comment][div=position:absolute; right:115px; top:28px; width:122px; height:68px; overflow:hidden;][div=position:relative; overflow-y:scroll; width:244px; height:68px; font-family:var(--repfont); font-size:var(--repsize); line-height:var(--replineheight); color:var(--textcolor); text-align:justify; padding:0 0px 0 0;][div=width:50%;]"him? there's not a single thing that i wouldn't recommend him for. sure, he's a bit of a handful, and really quite loud at times, but give him enough time and he'll get the job done without a shadow of doubt."[/div][/div][/div]
  629.  
  630. [comment]---- reputation end ----[/comment]
  631.  
  632. [comment]---- rship ids ----[/comment]
  633. [comment]-- container --[/comment][div=position:absolute; overflow:hidden; left:0px; top:0px; width:440px; height:100%;]
  634. [comment]-- scroll box --[/comment][div=position:relative; overflow-y:scroll; overflow-x:hidden; width:440px; height:100%; padding:0 30px 0 0; text-align:justify; line-height:12px; font-size:12px;]
  635.  
  636.  
  637. [comment]---- RELATIONSHIP START: copy this whole section to add another relationship, including the comments! ----[/comment]
  638. [div=position:relative; margin:var(--rmargin); width:440px; height:220px; background:var(--accent02); border:var(--border0); box-sizing:border-box; border-radius:40px 40px 0 40px;]
  639.  
  640. [comment]-- pic --[/comment][div=position:absolute; left:280px; top:9px; width:150px; height:200px; background:var(--rship1); background-size:cover; background-position:50% 50%; border:var(--border0); box-sizing:border-box; border-radius:30px 30px 0 30px; opacity:1;][/div]
  641.  
  642. [comment]-- deco --[/comment][div=position:absolute; right:0px; top:0px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent12); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  643.  
  644. [comment]-- name --[/comment][div=position:absolute; left:25px; top:20px; width:240px; height:25px; font-family:var(--rtitlefont); font-size:var(--rtitlesize); line-height:var(--rtitlelineheight); color:var(--accent00); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--blackbold); letter-spacing:1.5px;]hwang, yeji.[/div]
  645.  
  646. [comment]-- description --[/comment][div=position:absolute; left:25px; top:45px; width:240px; height:25px; font-family:var(--rdescfont); font-size:var(--rdescsize); line-height:var(--rdesclineheight); color:var(--rcolor); text-align:left; text-transform:uppercase;][div=display:inline;-webkit-text-stroke:var(--rbold); letter-spacing:1.5px;]24[/div] // [I]best friend.[/I][/div]
  647.  
  648. [comment]-- body --[/comment][div=position:absolute; left:25px; top:70px; width:245px; height:65px; overflow:hidden;][div=position:relative; overflow-y:scroll; width:490px; height:65px; font-family:var(--rbodyfont); font-size:var(--rbodysize); line-height:var(--rbodylineheight); color:var(--textcolor); text-align:justify; padding:0 0px 0 0;][div=width:50%;]admired by all and gifted in every way that matters, yeji is sunwoo’s go-to partner for all sorts of spontaneous shenanigans, whether that be filming viral dances on tiktok, cooking up a plot to entertain her weverse chat, or slashing a lying man’s tires...[/div][/div][/div]
  649.  
  650. [comment]-- metrics --[/comment]
  651. [div=position:absolute; left:25px; top:155px; width:240px; height:45px;]
  652.  
  653. [comment]---- METER 1: trust ----[/comment]
  654. [comment]-- label --[/comment][div=position:absolute; left:0px; top:0px; width:110px; height:8px; font-family:var(--tagfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--accent00); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--lilbold); letter-spacing:1px;][comment]
  655.  
  656. ---- METER NAME HERE ----
  657. [/comment]trust.[/div]
  658.  
  659. [comment]-- bar --[/comment][div=position:absolute; left:0px; top:10px; width:110px; height:8px; background:var(--accent10); border-radius:10px; border:var(--border1); box-sizing:border-box; overflow:hidden;][div=width:var(--r1meter1level); height:6px; background:var(--accent01); border-radius:0 5px 5px 0;][/div][/div]
  660. [comment]-- METER END --[/comment]
  661.  
  662.  
  663. [comment]---- METER 2: platonic affection ----[/comment]
  664. [comment]-- label --[/comment][div=position:absolute; right:0px; top:0px; width:110px; height:8px; font-family:var(--tagfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--accent00); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--lilbold); letter-spacing:1px;][comment]
  665.  
  666. ---- METER NAME HERE ----
  667. [/comment]platonic affection.[/div]
  668.  
  669. [comment]-- bar --[/comment][div=position:absolute; right:0px; top:10px; width:110px; height:8px; background:var(--accent10); border-radius:10px; border:var(--border1); box-sizing:border-box; overflow:hidden;][div=width:var(--r1meter2level); height:6px; background:var(--accent01); border-radius:0 5px 5px 0;][/div][/div]
  670. [comment]-- METER END --[/comment]
  671.  
  672.  
  673. [comment]---- METER 3: romantic affection ----[/comment]
  674. [comment]-- label --[/comment][div=position:absolute; left:0px; bottom:10px; width:110px; height:8px; font-family:var(--tagfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--accent00); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--lilbold); letter-spacing:1px;][comment]
  675.  
  676. ---- METER NAME HERE ----
  677. [/comment]romantic affection.[/div]
  678.  
  679. [comment]-- bar --[/comment][div=position:absolute; left:0px; bottom:0px; width:110px; height:8px; background:var(--accent10); border-radius:10px; border:var(--border1); box-sizing:border-box; overflow:hidden;][div=width:var(--r1meter3level); height:6px; background:var(--accent01); border-radius:0 5px 5px 0;][/div][/div]
  680. [comment]-- METER END --[/comment]
  681.  
  682.  
  683. [comment]---- METER 4: communication ----[/comment]
  684. [comment]-- label --[/comment][div=position:absolute; right:0px; bottom:10px; width:110px; height:8px; font-family:var(--tagfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--accent00); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--lilbold); letter-spacing:1px;][comment]
  685.  
  686. ---- METER NAME HERE ----
  687. [/comment]communication.[/div]
  688.  
  689. [comment]-- bar --[/comment][div=position:absolute; right:0px; bottom:0px; width:110px; height:8px; background:var(--accent10); border-radius:10px; border:var(--border1); box-sizing:border-box; overflow:hidden;][div=width:var(--r1meter4level); height:6px; background:var(--accent01); border-radius:0 5px 5px 0;][/div][/div]
  690. [comment]-- METER END --[/comment]
  691.  
  692. [/div]
  693. [/div][comment]---- RELATIONSHIP END----[/comment]
  694.  
  695.  
  696.  
  697. [comment]---- RELATIONSHIP START: copy this whole section to add another relationship, including the comments! ----[/comment]
  698. [div=position:relative; margin:var(--rmargin); width:440px; height:220px; background:var(--accent02); border:var(--border0); box-sizing:border-box; border-radius:40px 40px 0 40px;]
  699.  
  700. [comment]-- pic --[/comment][div=position:absolute; left:280px; top:9px; width:150px; height:200px; background:var(--rship2); background-size:cover; background-position:50% 50%; border:var(--border0); box-sizing:border-box; border-radius:30px 30px 0 30px; opacity:1;][/div]
  701.  
  702. [comment]-- deco --[/comment][div=position:absolute; right:0px; top:0px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent12); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  703.  
  704. [comment]-- name --[/comment][div=position:absolute; left:25px; top:20px; width:240px; height:25px; font-family:var(--rtitlefont); font-size:var(--rtitlesize); line-height:var(--rtitlelineheight); color:var(--accent00); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--blackbold); letter-spacing:1.5px;]lee, yongbok.[/div]
  705.  
  706. [comment]-- description --[/comment][div=position:absolute; left:25px; top:45px; width:240px; height:25px; font-family:var(--rdescfont); font-size:var(--rdescsize); line-height:var(--rdesclineheight); color:var(--rcolor); text-align:left; text-transform:uppercase;][div=display:inline;-webkit-text-stroke:var(--rbold); letter-spacing:1.5px;]24[/div] // [I]friend... so he says.[/I][/div]
  707.  
  708. [comment]-- body --[/comment][div=position:absolute; left:25px; top:70px; width:245px; height:65px; overflow:hidden;][div=position:relative; overflow-y:scroll; width:490px; height:65px; font-family:var(--rbodyfont); font-size:var(--rbodysize); line-height:var(--rbodylineheight); color:var(--textcolor); text-align:justify; padding:0 0px 0 0;][div=width:50%;]prim and perfect from head to toe, and endearingly sweet as a brownie, yongbok becomes the apple of sunwoo’s eye the moment he enters the same vicinity. truly, there’s no one he adores quite as unconditionally as him.[/div][/div][/div]
  709.  
  710. [comment]-- metrics --[/comment]
  711. [div=position:absolute; left:25px; top:155px; width:240px; height:45px;]
  712.  
  713. [comment]---- METER 1: trust ----[/comment]
  714. [comment]-- label --[/comment][div=position:absolute; left:0px; top:0px; width:110px; height:8px; font-family:var(--tagfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--accent00); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--lilbold); letter-spacing:1px;][comment]
  715.  
  716. ---- METER NAME HERE ----
  717. [/comment]trust.[/div]
  718.  
  719. [comment]-- bar --[/comment][div=position:absolute; left:0px; top:10px; width:110px; height:8px; background:var(--accent10); border-radius:10px; border:var(--border1); box-sizing:border-box; overflow:hidden;][div=width:var(--r2meter1level); height:6px; background:var(--accent01); border-radius:0 5px 5px 0;][/div][/div]
  720. [comment]-- METER END --[/comment]
  721.  
  722.  
  723. [comment]---- METER 2: platonic affection ----[/comment]
  724. [comment]-- label --[/comment][div=position:absolute; right:0px; top:0px; width:110px; height:8px; font-family:var(--tagfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--accent00); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--lilbold); letter-spacing:1px;][comment]
  725.  
  726. ---- METER NAME HERE ----
  727. [/comment]platonic affection.[/div]
  728.  
  729. [comment]-- bar --[/comment][div=position:absolute; right:0px; top:10px; width:110px; height:8px; background:var(--accent10); border-radius:10px; border:var(--border1); box-sizing:border-box; overflow:hidden;][div=width:var(--r2meter2level); height:6px; background:var(--accent01); border-radius:0 5px 5px 0;][/div][/div]
  730. [comment]-- METER END --[/comment]
  731.  
  732.  
  733. [comment]---- METER 3: romantic affection ----[/comment]
  734. [comment]-- label --[/comment][div=position:absolute; left:0px; bottom:10px; width:110px; height:8px; font-family:var(--tagfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--accent00); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--lilbold); letter-spacing:1px;][comment]
  735.  
  736. ---- METER NAME HERE ----
  737. [/comment]romantic affection.[/div]
  738.  
  739. [comment]-- bar --[/comment][div=position:absolute; left:0px; bottom:0px; width:110px; height:8px; background:var(--accent10); border-radius:10px; border:var(--border1); box-sizing:border-box; overflow:hidden;][div=width:var(--r2meter3level); height:6px; background:var(--accent01); border-radius:0 5px 5px 0;][/div][/div]
  740. [comment]-- METER END --[/comment]
  741.  
  742.  
  743. [comment]---- METER 4: communication ----[/comment]
  744. [comment]-- label --[/comment][div=position:absolute; right:0px; bottom:10px; width:110px; height:8px; font-family:var(--tagfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--accent00); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--lilbold); letter-spacing:1px;][comment]
  745.  
  746. ---- METER NAME HERE ----
  747. [/comment]communication.[/div]
  748.  
  749. [comment]-- bar --[/comment][div=position:absolute; right:0px; bottom:0px; width:110px; height:8px; background:var(--accent10); border-radius:10px; border:var(--border1); box-sizing:border-box; overflow:hidden;][div=width:var(--r2meter4level); height:6px; background:var(--accent01); border-radius:0 5px 5px 0;][/div][/div]
  750. [comment]-- METER END --[/comment]
  751.  
  752. [/div]
  753. [/div][comment]---- RELATIONSHIP END----[/comment]
  754.  
  755.  
  756.  
  757.  
  758. [comment]---- RELATIONSHIP START: copy this whole section to add another relationship, including the comments! ----[/comment]
  759. [div=position:relative; margin:var(--rmargin); width:440px; height:220px; background:var(--accent02); border:var(--border0); box-sizing:border-box; border-radius:40px 40px 0 40px;]
  760.  
  761. [comment]-- pic --[/comment][div=position:absolute; left:280px; top:9px; width:150px; height:200px; background:var(--rship3); background-size:cover; background-position:50% 50%; border:var(--border0); box-sizing:border-box; border-radius:30px 30px 0 30px; opacity:1;][/div]
  762.  
  763. [comment]-- deco --[/comment][div=position:absolute; right:0px; top:0px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent12); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  764.  
  765. [comment]-- name --[/comment][div=position:absolute; left:25px; top:20px; width:240px; height:25px; font-family:var(--rtitlefont); font-size:var(--rtitlesize); line-height:var(--rtitlelineheight); color:var(--accent00); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--blackbold); letter-spacing:1.5px;]lee, haechan.[/div]
  766.  
  767. [comment]-- description --[/comment][div=position:absolute; left:25px; top:45px; width:240px; height:25px; font-family:var(--rdescfont); font-size:var(--rdescsize); line-height:var(--rdesclineheight); color:var(--rcolor); text-align:left; text-transform:uppercase;][div=display:inline;-webkit-text-stroke:var(--rbold); letter-spacing:1.5px;]24[/div] // [I]frenemy?[/I][/div]
  768.  
  769. [comment]-- body --[/comment][div=position:absolute; left:25px; top:70px; width:245px; height:65px; overflow:hidden;][div=position:relative; overflow-y:scroll; width:490px; height:65px; font-family:var(--rbodyfont); font-size:var(--rbodysize); line-height:var(--rbodylineheight); color:var(--textcolor); text-align:justify; padding:0 0px 0 0;][div=width:50%;]when it comes to dealing with someone with an unpredictable temperament like haechan, no one is better equipped than the equally combative sunwoo. between their cutting banter and cacophonic bickering, they'd much rather continue to tear each other's hair out than address whatever is brewing underneath the surface.[/div][/div][/div]
  770.  
  771. [comment]-- metrics --[/comment]
  772. [div=position:absolute; left:25px; top:155px; width:240px; height:45px;]
  773.  
  774. [comment]---- METER 1: trust ----[/comment]
  775. [comment]-- label --[/comment][div=position:absolute; left:0px; top:0px; width:110px; height:8px; font-family:var(--tagfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--accent00); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--lilbold); letter-spacing:1px;][comment]
  776.  
  777. ---- METER NAME HERE ----
  778. [/comment]trust.[/div]
  779.  
  780. [comment]-- bar --[/comment][div=position:absolute; left:0px; top:10px; width:110px; height:8px; background:var(--accent10); border-radius:10px; border:var(--border1); box-sizing:border-box; overflow:hidden;][div=width:var(--r3meter1level); height:6px; background:var(--accent01); border-radius:0 5px 5px 0;][/div][/div]
  781. [comment]-- METER END --[/comment]
  782.  
  783.  
  784. [comment]---- METER 2: platonic affection ----[/comment]
  785. [comment]-- label --[/comment][div=position:absolute; right:0px; top:0px; width:110px; height:8px; font-family:var(--tagfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--accent00); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--lilbold); letter-spacing:1px;][comment]
  786.  
  787. ---- METER NAME HERE ----
  788. [/comment]platonic affection.[/div]
  789.  
  790. [comment]-- bar --[/comment][div=position:absolute; right:0px; top:10px; width:110px; height:8px; background:var(--accent10); border-radius:10px; border:var(--border1); box-sizing:border-box; overflow:hidden;][div=width:var(--r3meter2level); height:6px; background:var(--accent01); border-radius:0 5px 5px 0;][/div][/div]
  791. [comment]-- METER END --[/comment]
  792.  
  793.  
  794. [comment]---- METER 3: romantic affection ----[/comment]
  795. [comment]-- label --[/comment][div=position:absolute; left:0px; bottom:10px; width:110px; height:8px; font-family:var(--tagfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--accent00); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--lilbold); letter-spacing:1px;][comment]
  796.  
  797. ---- METER NAME HERE ----
  798. [/comment]romantic affection.[/div]
  799.  
  800. [comment]-- bar --[/comment][div=position:absolute; left:0px; bottom:0px; width:110px; height:8px; background:var(--accent10); border-radius:10px; border:var(--border1); box-sizing:border-box; overflow:hidden;][div=width:var(--r3meter3level); height:6px; background:var(--accent01); border-radius:0 5px 5px 0;][/div][/div]
  801. [comment]-- METER END --[/comment]
  802.  
  803.  
  804. [comment]---- METER 4: communication ----[/comment]
  805. [comment]-- label --[/comment][div=position:absolute; right:0px; bottom:10px; width:110px; height:8px; font-family:var(--tagfont); font-size:var(--labelsize); line-height:var(--labellineheight); color:var(--accent00); text-align:left; text-transform:uppercase;-webkit-text-stroke:var(--lilbold); letter-spacing:1px;][comment]
  806.  
  807. ---- METER NAME HERE ----
  808. [/comment]communication.[/div]
  809.  
  810. [comment]-- bar --[/comment][div=position:absolute; right:0px; bottom:0px; width:110px; height:8px; background:var(--accent10); border-radius:10px; border:var(--border1); box-sizing:border-box; overflow:hidden;][div=width:var(--r3meter4level); height:6px; background:var(--accent01); border-radius:0 5px 5px 0;][/div][/div]
  811. [comment]-- METER END --[/comment]
  812.  
  813. [/div]
  814. [/div][comment]---- RELATIONSHIP END----[/comment]
  815.  
  816. [/div][/div][comment]---- rship ids end ----[/comment]
  817.  
  818.  
  819.  
  820. [comment]---- plots start ----[/comment]
  821. [comment]-- container --[/comment][div=position:absolute; overflow:hidden; right:0px; bottom:0px; width:var(--plotwidth); height:240px;]
  822. [comment]-- scroll box --[/comment][div=position:relative; overflow-y:scroll; overflow-x:hidden; width:var(--plotwidth); height:240px; padding:0 30px 0 0; text-align:justify; line-height:12px; font-size:12px;]
  823.  
  824.  
  825. [comment]---- PLOT START: copy this whole section (including comments) to make another! ----[/comment]
  826. [div=position:relative; width:var(--plotwidth); height:auto; margin-bottom:10px; border-radius:20px; box-sizing:border-box; background:var(--accent10); padding:20px;]
  827. [comment]-- title --[/comment][div=position:relative; margin:auto; width:var(--plotcontent); font-family:var(--font1); font-size:var(--plottitlesize); line-height: var(--plottitlelineheight); color:var(--plotcolor); text-align:right; text-transform:uppercase; -webkit-text-stroke:var(--plotbold); letter-spacing:1.2px;][comment]
  828.  
  829. ---- PLOT NAME HERE ----
  830. [/comment]"you, me, and..."[/div]
  831. [comment]-- status --[/comment][div=position:relative; margin:auto; width:var(--plotcontent); height:auto; font-family:var(--font1); font-size:12px; line-height:12px; color:var(--accent11); text-align:right; text-transform:uppercase;]// open.[/div]
  832.  
  833. [comment]-- body --[/comment][div=position:relative; margin:auto; margin-top:5px; width:var(--plotcontent); font-family:var(--repfont); font-size:var(--repsize); line-height:var(--replineheight); color:var(--accent01); text-align:justify;][comment]
  834.  
  835. ---- PLOT DESCRIPTION HERE ----
  836. [/comment]lobortis cras torquent montes litora magnis rutrum tortor. iaculis tempus suspendisse aptent cubilia adipiscing. eleifend lacinia vitae lacus justo fames. nisi ligula sed luctus viverra phasellus luctus ipsum.[/div]
  837. [/div][comment]---- PLOT END: copy me too! ----[/comment]
  838.  
  839.  
  840. [comment]---- PLOT START: copy this whole section (including comments) to make another! ----[/comment]
  841. [div=position:relative; width:var(--plotwidth); height:auto; margin-bottom:10px; border-radius:20px; box-sizing:border-box; background:var(--accent10); padding:20px;]
  842. [comment]-- title --[/comment][div=position:relative; margin:auto; width:var(--plotcontent); font-family:var(--font1); font-size:var(--plottitlesize); line-height: var(--plottitlelineheight); color:var(--plotcolor); text-align:right; text-transform:uppercase; -webkit-text-stroke:var(--plotbold); letter-spacing:1.2px;][comment]
  843.  
  844. ---- PLOT NAME HERE ----
  845. [/comment]"sucks to suck."[/div]
  846. [comment]-- status --[/comment][div=position:relative; margin:auto; width:var(--plotcontent); height:auto; font-family:var(--font1); font-size:12px; line-height:12px; color:var(--accent11); text-align:right; text-transform:uppercase;]// open.[/div]
  847.  
  848. [comment]-- body --[/comment][div=position:relative; margin:auto; margin-top:5px; width:var(--plotcontent); font-family:var(--repfont); font-size:var(--repsize); line-height:var(--replineheight); color:var(--accent01); text-align:justify;][comment]
  849.  
  850. ---- PLOT DESCRIPTION HERE ----
  851. [/comment]nam lacinia porta auctor eleifend efficitur mauris quam commodo. iaculis tempus suspendisse aptent cubilia adipiscing sit primis. sapien ultricies purus fringilla massa lectus. posuere feugiat porta hendrerit dui non vestibulum commodo. eleifend lacinia vitae lacus justo fames. nisi ligula sed luctus viverra phasellus luctus ipsum.[/div]
  852. [/div][comment]---- PLOT END: copy me too! ----[/comment]
  853.  
  854.  
  855. [comment]---- PLOT START: copy this whole section (including comments) to make another! ----[/comment]
  856. [div=position:relative; width:var(--plotwidth); height:auto; margin-bottom:10px; border-radius:20px; box-sizing:border-box; background:var(--accent10); padding:20px;]
  857. [comment]-- title --[/comment][div=position:relative; margin:auto; width:var(--plotcontent); font-family:var(--font1); font-size:var(--plottitlesize); line-height: var(--plottitlelineheight); color:var(--plotcolor); text-align:right; text-transform:uppercase; -webkit-text-stroke:var(--plotbold); letter-spacing:1.2px;][comment]
  858.  
  859. ---- PLOT NAME HERE ----
  860. [/comment]"please stay..."[/div]
  861. [comment]-- status --[/comment][div=position:relative; margin:auto; width:var(--plotcontent); height:auto; font-family:var(--font1); font-size:12px; line-height:12px; color:var(--accent11); text-align:right; text-transform:uppercase;]// open.[/div]
  862.  
  863. [comment]-- body --[/comment][div=position:relative; margin:auto; margin-top:5px; width:var(--plotcontent); font-family:var(--repfont); font-size:var(--repsize); line-height:var(--replineheight); color:var(--accent01); text-align:justify;][comment]
  864.  
  865. ---- PLOT DESCRIPTION HERE ----
  866. [/comment]tempus suspendisse aptent cubilia adipiscing sit primis. sapien ultricies purus fringilla massa lectus. posuere feugiat porta hendrerit dui non vestibulum commodo. eleifend lacinia vitae lacus justo fames. nisi ligula sed luctus viverra phasellus luctus ipsum.[/div]
  867. [/div][comment]---- PLOT END: copy me too! ----[/comment]
  868.  
  869. [/div][/div]
  870.  
  871. [comment]---- plots end ----[/comment]
  872.  
  873. [div=display:none;]connections[/div]
  874. [/div][/tab]
  875.  
  876.  
  877.  
  878.  
  879.  
  880.  
  881. [comment]---- TAB FIVE: GALLERY ----[/comment][tab=xx][div=transparent; position:absolute; height:var(--innerheight); width:100%; padding:10px 0 0 0; bottom:0px; right:0px; background:var(--tabbkgd); letter-spacing:0;]
  882.  
  883. [comment]-- pic --[/comment]
  884. [div=position:absolute; left:0px; top:0px; width:200px; height:100%; background:var(--tab5a); background-size:cover; background-position:50% 50%; border:var(--border0); box-sizing:border-box; border-radius:40px 0 0 40px; opacity:1;][/div]
  885.  
  886. [comment] ---- picture grid section ---- [/comment]
  887. [div=position:absolute; right:0px; top:0px; width:500px; height:100%; padding:0px 0 0 0; box-sizing:border-box; display:grid; grid-template-rows: repeat(2, minmax(40px, 1fr)); grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "a b c" "d e f"; grid-gap: 10px; scroll-snap-align:start;]
  888.  
  889. [comment]----pic 1----[/comment]
  890. [div=grid-area:a; border-radius:0 40px 0 0; border:var(--border0); box-shadow: 1px 1px 3px var(--galshadow); box-sizing:border-box; background:var(--gal1); background-size:cover; background-position:50% 50%;;][/div]
  891.  
  892. [comment]----pic 2----[/comment]
  893. [div=grid-area:b; border-radius:40px 0 0 0; border:var(--border0); box-shadow: 1px 1px 3px var(--galshadow); box-sizing:border-box; background:var(--gal2); background-size:cover; background-position:50% 50%;][/div]
  894.  
  895. [comment]----pic 3----[/comment]
  896. [div=grid-area:c; border-radius:0 40px 0 0; border:var(--border0); box-shadow: 1px 1px 3px var(--galshadow); box-sizing:border-box; background:var(--gal3); background-size:cover; background-position:50% 50%;][/div]
  897.  
  898. [comment]----pic 4----[/comment]
  899. [div=grid-area:d; border-radius:0 0 40px 0; border:var(--border0); box-shadow: 1px 1px 3px var(--galshadow); box-sizing:border-box; background:var(--gal4); background-size:cover; background-position:50% 50%;][/div]
  900.  
  901. [comment]----pic 5----[/comment]
  902. [div=grid-area:e; border-radius:0 0 0 40px; border:var(--border0); box-shadow: 1px 1px 3px var(--galshadow); box-sizing:border-box; background:var(--gal5); background-size:cover; background-position:50% 50%;][/div]
  903.  
  904. [comment]----pic 6----[/comment]
  905. [div=grid-area:f; border-radius:0 0 40px 0; border:var(--border0); box-shadow: 1px 1px 3px var(--galshadow); box-sizing:border-box; background:var(--gal6); background-size:cover; background-position:50% 50%;][/div]
  906. [/div]
  907. [comment] ---- picture section end ---- [/comment]
  908.  
  909.  
  910. [comment]-- dot --[/comment][div=position:absolute; right:0px; top:0px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent21); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  911.  
  912. [comment]-- dot --[/comment][div=position:absolute; left:362.5px; top:162px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent22); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  913.  
  914. [comment]-- dot --[/comment][div=position:absolute; left:0px; bottom:0px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent21); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  915.  
  916.  
  917. [div=display:none;]gallery[/div]
  918. [/div][/tab]
  919.  
  920. [comment]---- TAB SIX: STYLEBOOK ----[/comment][tab=xx][div=transparent; position:absolute; height:var(--innerheight); width:100%; padding:10px 0 0 0; bottom:0px; right:0px; background:var(--tabbkgd); letter-spacing:0;]
  921.  
  922. [comment]-- diagram --[/comment][div=position:absolute; left:255px; top:0px; width:205px; height:100%; background:var(--tab6diagram); background-size:cover; background-position:50% 50%; background-color:var(--windowbkgd);][/div]
  923. [comment]-- color overlay --[/comment][div=position:absolute; left:255px; top:0px; width:205px; height:100%; background:var(--diagram6color); mix-blend-mode:lighten; opacity:1;][/div]
  924.  
  925.  
  926. [comment]---- STYLE/ATTIRE START ----[/comment]
  927. [comment]-- header --[/comment][div=position:absolute; left:0px; top:0px; width:230px; height:25px; font-family:var(--playfont); font-size:20px; line-height:25px; color:var(--accent11); text-align:left; text-transform:uppercase;][div=display:inline; -webkit-text-stroke:var(--traitbold); letter-spacing:1.5px; font-size:19px;]casual[/div] // [I]formal[/I][/div]
  928. [comment]-- underline --[/comment][div=position:absolute; left:0px; top:21px; width:240px; height:1px; background:var(--accent20);][/div]
  929. [comment]-- dot --[/comment][div=position:absolute; left:230px; top:15px; width:var(--tinydotwidth); height:var(--tinydotwidth); background:var(--accent10); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  930.  
  931. [comment]-- body --[/comment][div=position:absolute; left:10px; top:30px; width:225px; height:150px; overflow:hidden;][div=position:relative; overflow-y:scroll; width:450px; height:150px; font-family:var(--repfont); font-size:var(--repsize); line-height:var(--replineheight); color:var(--textcolor); text-align:justify; text-align-last:left; padding:0px 0px 0 0;][div=width:50%;][comment]
  932.  
  933. ---- STYLE/ATTIRE TEXT START: use [br][/br] for line breaks---- [/comment]
  934.  
  935. [comment]-- first tag --[/comment][div=text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]daily attire.[/div]elementum hac sapien malesuada posuere molestie pellentesque. luctus inceptos finibus vulputate vel dictumst platea ante enim. eleifend efficitur mauris quam commodo. congue senectus amet felis lobortis elit ridiculus iaculis. dapibus suspendisse rhoncus fermentum lacus tincidunt.
  936.  
  937. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]evening wear.[/div]mollis nec ad class nibh molestie volutpat quisque magnis. urna a dui posuere fames ex posuere. ultrices potenti himenaeos vehicula habitasse congue ad elementum.
  938.  
  939. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:3px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]accessories.[/div]et viverra semper est; finibus per mauris euismod. fermentum sem neque mi sem rutrum dui mauris dignissim. nostra phasellus natoque semper natoque nisi. cubilia lorem tincidunt velit litora nisi dictum praesent ultricies. nam lacinia porta auctor eleifend efficitur mauris quam commodo. iaculis tempus suspendisse aptent cubilia adipiscing sit primis.
  940. [/div][/div][/div]
  941.  
  942. [comment]-- pic1 --[/comment]
  943. [div=position:absolute; left:0px; bottom:0px; width:115px; height:150px; background:var(--tab6a); background-size:cover; background-position:50% 50%; border:var(--border0); box-sizing:border-box; border-radius:30px; opacity:1;][/div]
  944.  
  945. [comment]-- pic2 --[/comment]
  946. [div=position:absolute; left:125px; bottom:0px; width:115px; height:150px; background:var(--tab6b); background-size:cover; background-position:50% 50%; border:var(--border0); box-sizing:border-box; border-radius:30px; opacity:1;][/div]
  947. [comment]---- STYLE/ATTIRE END ----[/comment]
  948.  
  949.  
  950. [comment]---- MODS/ASSETS START ----[/comment]
  951. [comment]-- header --[/comment][div=position:absolute; right:0px; bottom:157px; width:230px; height:25px; font-family:var(--playfont); font-size:20px; line-height:25px; color:var(--accent11); text-align:right; text-transform:uppercase;][div=display:inline; -webkit-text-stroke:var(--traitbold); letter-spacing:1.5px; font-size:19px;]mods[/div] // [I]assets[/I][/div]
  952. [comment]-- underline --[/comment][div=position:absolute; right:0px; bottom:160px; width:240px; height:1px; background:var(--accent20);][/div]
  953. [comment]-- dot --[/comment][div=position:absolute; right:230px; bottom:155px; width:var(--tinydotwidth); height:var(--tinydotwidth); background:var(--accent10); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  954.  
  955. [comment]-- body --[/comment][div=position:absolute; right:0px; bottom:0px; width:230px; height:150px; overflow:hidden;][div=position:relative; overflow-y:scroll; width:460px; height:150px; font-family:var(--repfont); font-size:var(--repsize); line-height:var(--replineheight); color:var(--textcolor); text-align:justify; text-align-last:right; padding:0px 0px 0 0;][div=width:50%;][comment]
  956.  
  957. ---- MODS/ASSETS TEXT START: use [br][/br] for line breaks---- [/comment]
  958.  
  959. [comment]-- first tag --[/comment][div=text-transform:uppercase; margin-right:0px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]tattoos.[/div]elementum hac sapien malesuada posuere molestie pellentesque. luctus inceptos finibus vulputate vel dictumst platea ante enim. eleifend efficitur mauris quam commodo. congue senectus amet felis lobortis elit ridiculus iaculis. dapibus suspendisse rhoncus fermentum lacus tincidunt.
  960.  
  961. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:0px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]piercings.[/div]mollis nec ad class nibh molestie volutpat quisque magnis. urna a dui posuere fames ex posuere. ultrices potenti himenaeos vehicula habitasse congue ad elementum.
  962.  
  963. [comment]-- tag --[/comment][div=margin-top:var(--tagspace); text-transform:uppercase; margin-right:0px; -webkit-text-stroke:var(--morebold); letter-spacing:1px;]inventory.[/div]et viverra semper est; finibus per mauris euismod. fermentum sem neque mi sem rutrum dui mauris dignissim. nostra phasellus natoque semper natoque nisi. cubilia lorem tincidunt velit litora nisi dictum praesent ultricies. nam lacinia porta auctor eleifend efficitur mauris quam commodo. iaculis tempus suspendisse aptent cubilia adipiscing sit primis.
  964. [/div][/div][/div]
  965.  
  966. [comment]-- pic1 --[/comment]
  967. [div=position:absolute; right:125px; top:0px; width:115px; height:150px; background:var(--tab6c); background-size:cover; background-position:50% 50%; border:var(--border0); box-sizing:border-box; border-radius:30px; opacity:1;][/div]
  968.  
  969. [comment]-- pic2 --[/comment]
  970. [div=position:absolute; right:0px; top:0px; width:115px; height:150px; background:var(--tab6d); background-size:cover; background-position:50% 50%; border:var(--border0); box-sizing:border-box; border-radius:30px; opacity:1;][/div]
  971. [comment]---- MODS/ASSETS END ----[/comment]
  972.  
  973.  
  974. [div=display:none;]stylebook[/div]
  975. [/div][/tab]
  976.  
  977. [comment]---- TAB SEVEN: PLAYLIST ----[/comment][tab=xx][div=transparent; position:absolute; height:var(--innerheight); width:100%; padding:10px 0 0 0; bottom:0px; right:0px; background:var(--tabbkgd); letter-spacing:0;]
  978.  
  979. [comment]-- pic --[/comment]
  980. [div=position:absolute; right:0px; top:0px; width:245px; height:100%; background:var(--tab7a); background-size:cover; background-position:50% 50%; border:var(--border0); box-sizing:border-box; border-radius:40px 40px 40px 0; opacity:1;][/div]
  981.  
  982. [comment]-- playlist deco --[/comment][div=position:absolute; right:225px; top:0px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent21); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  983.  
  984.  
  985. [comment]---- playlist start ----[/comment]
  986. [div=position:absolute; left:0px; top:0px; width:450px; height:100%; background:var(--accent02); border:var(--border0); box-sizing:border-box; border-radius:30px 30px 0 30px; opacity:1; overflow:hidden;]
  987.  
  988.  
  989. [comment]-- current song start --[/comment]
  990. [div=position:absolute; left:0px; top:0px; width:450px; height:55px; border-bottom:var(--border0); box-sizing:border-box;]
  991.  
  992. [comment]---- link play button
  993.  
  994. ---- PLAYLIST URL HERE ----
  995. [/comment]
  996.  
  997. [URL='https://open.spotify.com/playlist/3z27CXPdHJ5n4YmcU3r00J?si=f80c33a3517f454c'][comment]-- play button --[/comment][div=position:absolute; left:0px; top:0px; width:50px; height:55px; background:radial-gradient(var(--accent02), var(--accent22)); border-bottom:var(--border0); font-size:calc(var(--playsize) + 5px); line-height:65px; text-align:center; color:var(--accent10); padding-left:2px;][fa]farl fa-circle-play[/fa][/div][/URL]
  998.  
  999. [comment]-- now playing box --[/comment]
  1000. [div=position:absolute; right:0px; top:0px; height:55px; width:400px; background:var(--accent10); border-left:var(--border0); border-bottom:var(--border0); box-sizing:border-box;]
  1001. [div=position:absolute; top:0px; left:0px; text-align:left; text-transform:uppercase; color:var(--songcolor); padding:5px 0 0 10px; font-size:20px; line-height:35px; -webkit-text-stroke:var(--songbold); letter-spacing:1px;]now playing:[/div]
  1002. [div=position:absolute; top:30px; left:0px; text-align:left; text-transform:uppercase; color:var(--currentcolor); padding:5px 0 0 10px; font-size:12px; line-height:12px][div=display:inline; -webkit-text-stroke:var(--currentbold); letter-spacing:1px;]— kim sunwoo //[/div] [I]berry.[/I][/div]
  1003. [/div]
  1004.  
  1005. [/div][comment]-- current song end--[/comment]
  1006.  
  1007.  
  1008. [comment]-- QUEUE START --[/comment]
  1009. [div=position:absolute; top:55px; width:450px; height:300px; overflow:hidden; background:var(--accent02); color:var(--accent00); border-top:var(--border0);]
  1010.  
  1011. [comment]-- scroll --[/comment][div=position:absolute; top:0px; width:920px; height:300px; overflow-y:scroll;][div=width:50%; font-size:14px; line-height:25px; text-align:left; font-family:var(--font1);]
  1012.  
  1013. [comment]-- song start (color 1): copy me too! --[/comment]
  1014. [div=position:relative; border-bottom:var(--border0); box-sizing:border-box; text-transform:uppercase;][div=display:inline-block; height:26px; background:var(--accent11); border-left:var(--queue1); border-right:var(--border0); box-sizing:border-box; text-align:right; padding:1px 5px 0 5px; margin-right:5px; font-size:var(--artistsize); -webkit-text-stroke:var(--artistbold); letter-spacing:1px; color:var(--artistcolor);][comment]
  1015. ---- ARTIST NAME ----
  1016. [/comment]rich brian
  1017. // [/div][I][comment]
  1018.  
  1019. ---- SONG NAME ----
  1020. [/comment]100 degrees.[/I]
  1021. [/div][comment]-- song end: copy me too! --[/comment]
  1022.  
  1023.  
  1024. [comment]-- song start (color 2): copy me too! --[/comment]
  1025. [div=position:relative; border-bottom:var(--border0); box-sizing:border-box; background:var(--bkgd); text-transform:uppercase;][div=display:inline-block; height:26px; background:var(--accent20); border-left:var(--queue2); border-right:var(--border0); box-sizing:border-box; text-align:right; padding:1px 5px 0 5px; margin-right:5px; font-size:var(--artistsize); -webkit-text-stroke:var(--artistbold); letter-spacing:1px; color:var(--artistcolor);][comment]
  1026. ---- ARTIST NAME ----
  1027. [/comment]post malone, swae lee
  1028. // [/div][I][comment]
  1029.  
  1030. ---- SONG NAME ----
  1031. [/comment]sunflower.[/I]
  1032. [/div][comment]-- song end: copy me too! --[/comment]
  1033.  
  1034.  
  1035. [comment]-- song start (color 1): copy me too! --[/comment]
  1036. [div=position:relative; border-bottom:var(--border0); box-sizing:border-box; text-transform:uppercase;][div=display:inline-block; height:26px; background:var(--accent11); border-right:var(--border0); border-left:var(--queue1); box-sizing:border-box; text-align:right; padding:1px 5px 0 5px; margin-right:5px; font-size:var(--artistsize); -webkit-text-stroke:var(--artistbold); letter-spacing:1px; color:var(--artistcolor);][comment]
  1037. ---- ARTIST NAME ----
  1038. [/comment]baekhyun
  1039. // [/div][I][comment]
  1040.  
  1041. ---- SONG NAME ----
  1042. [/comment]love again.[/I]
  1043. [/div][comment]-- song end: copy me too! --[/comment]
  1044.  
  1045.  
  1046. [comment]-- song start (color 2): copy me too! --[/comment]
  1047. [div=position:relative; border-bottom:var(--border0); box-sizing:border-box; background:var(--bkgd); text-transform:uppercase;][div=display:inline-block; height:26px; background:var(--accent20); border-left:var(--queue2); border-right:var(--border0); box-sizing:border-box; text-align:right; padding:1px 5px 0 5px; margin-right:5px; font-size:var(--artistsize); -webkit-text-stroke:var(--artistbold); letter-spacing:1px; color:var(--artistcolor);][comment]
  1048. ---- ARTIST NAME ----
  1049. [/comment]finding hope
  1050. // [/div][I][comment]
  1051.  
  1052. ---- SONG NAME ----
  1053. [/comment]friends.[/I]
  1054. [/div][comment]-- song end: copy me too! --[/comment]
  1055.  
  1056.  
  1057. [comment]-- song start (color 1): copy me too! --[/comment]
  1058. [div=position:relative; border-bottom:var(--border0); box-sizing:border-box; text-transform:uppercase;][div=display:inline-block; height:26px; background:var(--accent11); border-right:var(--border0); border-left:var(--queue1); box-sizing:border-box; text-align:right; padding:1px 5px 0 5px; margin-right:5px; font-size:var(--artistsize); -webkit-text-stroke:var(--artistbold); letter-spacing:1px; color:var(--artistcolor);][comment]
  1059. ---- ARTIST NAME ----
  1060. [/comment]cosmic boy, youra, meego
  1061. // [/div][I][comment]
  1062.  
  1063. ---- SONG NAME ----
  1064. [/comment]can i love?[/I]
  1065. [/div][comment]-- song end: copy me too! --[/comment]
  1066.  
  1067.  
  1068. [comment]-- song start (color 2): copy me too! --[/comment]
  1069. [div=position:relative; border-bottom:var(--border0); box-sizing:border-box; background:var(--bkgd); text-transform:uppercase;][div=display:inline-block; height:26px; background:var(--accent20); border-left:var(--queue2); border-right:var(--border0); box-sizing:border-box; text-align:right; padding:1px 5px 0 5px; margin-right:5px; font-size:var(--artistsize); -webkit-text-stroke:var(--artistbold); letter-spacing:1px; color:var(--artistcolor);][comment]
  1070. ---- ARTIST NAME ----
  1071. [/comment]sody
  1072. // [/div][I][comment]
  1073.  
  1074. ---- SONG NAME ----
  1075. [/comment]i don't know you anymore.[/I]
  1076. [/div][comment]-- song end: copy me too! --[/comment]
  1077.  
  1078.  
  1079. [comment]-- song start (color 1): copy me too! --[/comment]
  1080. [div=position:relative; border-bottom:var(--border0); box-sizing:border-box; text-transform:uppercase;][div=display:inline-block; height:26px; background:var(--accent11); border-right:var(--border0); border-left:var(--queue1); box-sizing:border-box; text-align:right; padding:1px 5px 0 5px; margin-right:5px; font-size:var(--artistsize); -webkit-text-stroke:var(--artistbold); letter-spacing:1px; color:var(--artistcolor);][comment]
  1081. ---- ARTIST NAME ----
  1082. [/comment]jiwoo
  1083. // [/div][I][comment]
  1084.  
  1085. ---- SONG NAME ----
  1086. [/comment]greed.[/I]
  1087. [/div][comment]-- song end: copy me too! --[/comment]
  1088.  
  1089.  
  1090. [comment]-- song start (color 2): copy me too! --[/comment]
  1091. [div=position:relative; border-bottom:var(--border0); box-sizing:border-box; background:var(--bkgd); text-transform:uppercase;][div=display:inline-block; height:26px; background:var(--accent20); border-left:var(--queue2); border-right:var(--border0); box-sizing:border-box; text-align:right; padding:1px 5px 0 5px; margin-right:5px; font-size:var(--artistsize); -webkit-text-stroke:var(--artistbold); letter-spacing:1px; color:var(--artistcolor);][comment]
  1092. ---- ARTIST NAME ----
  1093. [/comment]tekqoi, aiko
  1094. // [/div][I][comment]
  1095.  
  1096. ---- SONG NAME ----
  1097. [/comment]you broke my heart again.[/I]
  1098. [/div][comment]-- song end: copy me too! --[/comment]
  1099.  
  1100.  
  1101. [comment]-- song start (color 1): copy me too! --[/comment]
  1102. [div=position:relative; border-bottom:var(--border0); box-sizing:border-box; text-transform:uppercase;][div=display:inline-block; height:26px; background:var(--accent11); border-right:var(--border0); border-left:var(--queue1); box-sizing:border-box; text-align:right; padding:1px 5px 0 5px; margin-right:5px; font-size:var(--artistsize); -webkit-text-stroke:var(--artistbold); letter-spacing:1px; color:var(--artistcolor);][comment]
  1103. ---- ARTIST NAME ----
  1104. [/comment]une
  1105. // [/div][I][comment]
  1106.  
  1107. ---- SONG NAME ----
  1108. [/comment]aussie boy.[/I]
  1109. [/div][comment]-- song end: copy me too! --[/comment]
  1110.  
  1111.  
  1112. [comment]-- song start (color 2): copy me too! --[/comment]
  1113. [div=position:relative; border-bottom:var(--border0); box-sizing:border-box; background:var(--bkgd); text-transform:uppercase;][div=display:inline-block; height:26px; background:var(--accent20); border-left:var(--queue2); border-right:var(--border0); box-sizing:border-box; text-align:right; padding:1px 5px 0 5px; margin-right:5px; font-size:var(--artistsize); -webkit-text-stroke:var(--artistbold); letter-spacing:1px; color:var(--artistcolor);][comment]
  1114. ---- ARTIST NAME ----
  1115. [/comment]marshmello, khalid
  1116. // [/div][I][comment]
  1117.  
  1118. ---- SONG NAME ----
  1119. [/comment]silence.[/I]
  1120. [/div][comment]-- song end: copy me too! --[/comment]
  1121.  
  1122.  
  1123. [comment]-- song start (color 1): copy me too! --[/comment]
  1124. [div=position:relative; border-bottom:var(--border0); box-sizing:border-box; text-transform:uppercase;][div=display:inline-block; height:26px; background:var(--accent11); border-right:var(--border0); border-left:var(--queue1); box-sizing:border-box; text-align:right; padding:1px 5px 0 5px; margin-right:5px; font-size:var(--artistsize); -webkit-text-stroke:var(--artistbold); letter-spacing:1px; color:var(--artistcolor);][comment]
  1125. ---- ARTIST NAME ----
  1126. [/comment]the boyz
  1127. // [/div][I][comment]
  1128.  
  1129. ---- SONG NAME ----
  1130. [/comment]nectar.[/I]
  1131. [/div][comment]-- song end: copy me too! --[/comment]
  1132.  
  1133.  
  1134. [comment]-- song start (color 2): copy me too! --[/comment]
  1135. [div=position:relative; border-bottom:var(--border0); box-sizing:border-box; background:var(--bkgd); text-transform:uppercase;][div=display:inline-block; height:26px; background:var(--accent20); border-left:var(--queue2); border-right:var(--border0); box-sizing:border-box; text-align:right; padding:1px 5px 0 5px; margin-right:5px; font-size:var(--artistsize); -webkit-text-stroke:var(--artistbold); letter-spacing:1px; color:var(--artistcolor);][comment]
  1136. ---- ARTIST NAME ----
  1137. [/comment]third last
  1138. // [/div][I][comment]
  1139.  
  1140. ---- SONG NAME ----
  1141. [/comment]third last.[/I]
  1142. [/div][comment]-- song end: copy me too! --[/comment]
  1143.  
  1144.  
  1145. [comment]-- song start (color 1): copy me too! --[/comment]
  1146. [div=position:relative; border-bottom:var(--border0); box-sizing:border-box; text-transform:uppercase;][div=display:inline-block; height:26px; background:var(--accent11); border-right:var(--border0); border-left:var(--queue1); box-sizing:border-box; text-align:right; padding:1px 5px 0 5px; margin-right:5px; font-size:var(--artistsize); -webkit-text-stroke:var(--artistbold); letter-spacing:1px; color:var(--artistcolor);][comment]
  1147. ---- ARTIST NAME ----
  1148. [/comment]second to last
  1149. // [/div][I][comment]
  1150.  
  1151. ---- SONG NAME ----
  1152. [/comment]second to last.[/I]
  1153. [/div][comment]-- song end: copy me too! --[/comment]
  1154.  
  1155.  
  1156. [comment]-- song start (color 2): copy me too! --[/comment]
  1157. [div=position:relative; border-bottom:var(--border0); box-sizing:border-box; background:var(--bkgd); text-transform:uppercase;][div=display:inline-block; height:26px; background:var(--accent20); border-left:var(--queue2); border-right:var(--border0); box-sizing:border-box; text-align:right; padding:1px 5px 0 5px; margin-right:5px; font-size:var(--artistsize); -webkit-text-stroke:var(--artistbold); letter-spacing:1px; color:var(--artistcolor);][comment]
  1158. ---- ARTIST NAME ----
  1159. [/comment]last artist
  1160. // [/div][I][comment]
  1161.  
  1162. ---- SONG NAME ----
  1163. [/comment]last song name.[/I]
  1164. [/div][comment]-- song end: copy me too! --[/comment]
  1165.  
  1166.  
  1167. [div=position:relative; margin:auto; margin-top:20px; margin-bottom:30px; width:90%; font-family:var(--font2); font-size:12px; line-height:13px; text-align:justify; text-align-last:center;][div=display:inline; -webkit-text-stroke:var(--morebold); letter-spacing:1px; color:var(--accent00); text-transform:uppercase;]sunwoo's music tastes[/div] tend to align with soft r&b and modern pop, albeit with sadder undertones, especially posuere fames ex posuere ultrices potenti himenaeos vehicula habitasse congue elementum ad. eros tempus facilisi ac tellus conubia faucibus primis rhoncus. sagittis morbi quis egestas scelerisque auctor venenatis.[/div]
  1168. [/div]
  1169. [/div][/div][comment]-- QUEUE END --[/comment]
  1170.  
  1171. [/div][comment]---- playlist end ----[/comment]
  1172.  
  1173. [div=display:none;]playlist[/div]
  1174. [/div][/tab]
  1175. [/tabs]
  1176.  
  1177. [/div][/div][/div]
  1178.  
  1179.  
  1180. [comment]---- tabs cover start ----[/comment]
  1181. [comment]-- new cover --[/comment][div=position:absolute; left:0px; top:var(--ytabcover); width:100%; height:var(--tabcoverheight); background:var(--windowbkgd); pointer-events:none; opacity:1;][/div]
  1182.  
  1183. [comment]-- button container --[/comment][div=position:absolute; left:var(--leftmargin); top:var(--ytabcover); width:calc(var(--contentwidth)); height:var(--buttonheight); pointer-events:none; opacity:1; display: flex;]
  1184.  
  1185. [comment]-- basics --[/comment][div=position:relative; display:inline-block; margin-top:0px; margin-right:var(--buttonspace); width:var(--buttonwidth); height:var(--buttonheight); padding:0 0px 0 0px; background:var(--accent20); color:var(--tabcolor1); font-size:var(--buttonfontsize); line-height:var(--buttonlineheight); text-align:center; border:var(--border0); box-sizing:border-box; border-radius:50px;]pro[div=display:inline; -webkit-text-stroke:var(--tabbold1); letter-spacing:0.5px;]file.[/div][/div]
  1186.  
  1187. [comment]-- persona --[/comment][div=position:relative; display:inline-block; margin-top:0px; margin-right:var(--buttonspace); width:var(--buttonwidth); height:var(--buttonheight); padding:0 0px 0 0px; background:var(--accent01); color:var(--tabcolor2); font-size:var(--buttonfontsize); line-height:var(--buttonlineheight); text-align:center; border:var(--border0); box-sizing:border-box; border-radius:50px;]psy[div=display:inline; -webkit-text-stroke:var(--tabbold2); letter-spacing:0.5px;]che.[/div][/div]
  1188.  
  1189. [comment]-- history--[/comment][div=position:relative; display:inline-block; margin-top:0px; margin-right:var(--buttonspace); width:var(--buttonwidth); height:var(--buttonheight); padding:0 0px 0 0px; background:var(--accent21); color:var(--tabcolor1); font-size:var(--buttonfontsize); line-height:var(--buttonlineheight); text-align:center; border:var(--border0); box-sizing:border-box; border-radius:50px;]back[div=display:inline; -webkit-text-stroke:var(--tabbold1); letter-spacing:0.5px;]story.[/div][/div]
  1190.  
  1191. [comment]-- rships --[/comment][div=position:relative; display:inline-block; margin-top:0px; margin-right:var(--buttonspace); width:var(--buttonwidth); height:var(--buttonheight); padding:0 0px 0 0px; background:var(--accent12); color:var(--tabcolor2); font-size:var(--buttonfontsize); line-height:var(--buttonlineheight); text-align:center; border:var(--border0); box-sizing:border-box; border-radius:50px;]rela[div=display:inline; -webkit-text-stroke:var(--tabbold2); letter-spacing:0.5px;]tions.[/div][/div]
  1192.  
  1193. [comment]-- gallery --[/comment][div=position:relative; display:inline-block; margin-top:0px; margin-right:var(--buttonspace); width:var(--buttonwidth); height:var(--buttonheight); padding:0 0px 0 0px; background:var(--accent10); color:var(--tabcolor1); font-size:var(--buttonfontsize); line-height:var(--buttonlineheight); text-align:center; border:var(--border0); box-sizing:border-box; border-radius:50px;]gall[div=display:inline; -webkit-text-stroke:var(--tabbold1); letter-spacing:0.5px;]ery.[/div][/div]
  1194.  
  1195. [comment]-- fashion --[/comment][div=position:relative; display:inline-block; margin-top:0px; margin-right:var(--buttonspace); width:var(--buttonwidth); height:var(--buttonheight); padding:0 0px 0 0px; background:var(--accent22); color:var(--tabcolor2); font-size:var(--buttonfontsize); line-height:var(--buttonlineheight); text-align:center; border:var(--border0); box-sizing:border-box; border-radius:50px;]style[div=display:inline; -webkit-text-stroke:var(--tabbold2); letter-spacing:0.5px;]book.[/div][/div]
  1196.  
  1197. [comment]-- playlist --[/comment][div=position:relative; display:inline-block; margin-top:0px; margin-right:var(--buttonspace); width:var(--buttonwidth); height:var(--buttonheight); padding:0 0px 0 0px; background:var(--accent11); color:var(--tabcolor1); font-size:var(--buttonfontsize); line-height:var(--buttonlineheight); text-align:center; border:var(--border0); box-sizing:border-box; border-radius:50px;]play[div=display:inline; -webkit-text-stroke:var(--tabbold1); letter-spacing:0.5px;]list.[/div][/div]
  1198.  
  1199. [comment]-- search bar --[/comment][div=position:relative; display:inline-block; margin-top:0px; width:var(--lastbuttonwidth); height:var(--buttonheight); padding:0 0px 0 0px; background:var(--accent02); color:var(--tabcolor2); font-size:var(--buttonfontsize); line-height:var(--buttonlineheight); text-align:left; border:var(--border0); box-sizing:border-box; border-radius:50px;]
  1200. [div=position:absolute; left:15px; font-size:var(--buttonfontsize); line-height:var(--buttonlineheight); color:var(--accent11);]|[/div]
  1201. [div=position:absolute; right:10px;-webkit-text-stroke:var(--tabbold2); letter-spacing:0.5px;][fa]far fa-magnifying-glass[/fa][/div]
  1202. [div=margin-left:5px; margin-top:4px; width:115px; height:15px; border-radius:10px; background:var(--bkgd);][/div]
  1203. [/div]
  1204.  
  1205. [/div]
  1206.  
  1207.  
  1208.  
  1209. [div=position:absolute; left:var(--xtabs); top:var(--ytabcover); width:var(--tabswidth); height:var(--tabcoverheight); background:var(--windowbkgd); pointer-events:none; opacity:0.0;]
  1210.  
  1211. [comment]-- connector line --[/comment][div=position:absolute; left:20px; top:15px; width:var(--contentwidth); height:1px; background:var(--accent00);][/div]
  1212.  
  1213. [/div][comment]---- TABS END ----[/comment]
  1214.  
  1215. [comment]---- tab covers start ----[/comment]
  1216. [div=position:absolute; left:5px; bottom:30px; width:30px; height:350px; background:var(--accent02); opacity:0.0;][/div]
  1217. [div=position:absolute; right:8px; bottom:30px; width:30px; height:350px; background:var(--accent02); opacity:0.0;][/div]
  1218. [comment]---- tab covers end ----[/comment]
  1219.  
  1220. [/div][comment]---- PAGE BODY END ----[/comment]
  1221.  
  1222. [comment]---- right window dots ----[/comment]
  1223. [div=position:absolute; right:18px; bottom:155px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent10); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  1224. [div=position:absolute; right:18px; bottom:200px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent11); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  1225. [div=position:absolute; right:18px; bottom:245px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent12); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  1226.  
  1227. [/nobr][/div][/div]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!