API tools faq
paste
Advertisement
mochiroll

As_You_Like_It.Code

mochiroll
Sep 14th, 2022 (edited)
161
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 124.46 KB | None | 0 0
raw download clone embed print report
  1. [comment]
  2. Designed and coded by [USER=20950]@Nano[/USER].
  3. Please do not remove the credits or claim the code as your own work.
  4.  
  5. [font=Shippori Mincho B1]serif[/font]
  6. [font=Exo 2]sans-serif[/font]
  7.  
  8. [/comment][comment]
  9.  
  10. // accents //
  11.  
  12. [/comment][border=0; padding: 0;
  13.  
  14. /* <--------------------------------- general accents ---------------------------------> */
  15.  
  16. /* colors */
  17. --bgcolor: #fefefe;
  18. --whitetext: #fefefe;
  19. --blacktext: #777777;
  20. --quotecolor: #777777;
  21.  
  22. /* fonts */
  23. --JPNfont: 'Shippori Mincho B1', serif;
  24. --ENGfont: 'Exo 2', sans-serif;
  25.  
  26. /* images */
  27. --WIP: url('https://i.imgur.com/vu6NzDQ.jpg') center/cover no-repeat;
  28.  
  29.  
  30.  
  31. /* <--------------------------------- accents for charA ---------------------------------> */
  32.  
  33. /* colors */
  34. --charAaccent01: #f5bec6;
  35. --charAaccent02: #beeffb;
  36.  
  37. /* images */
  38. --charAmain: url('https://i.imgur.com/HCd7jOr.jpg') top left/cover no-repeat;
  39. --charAproficon: url('https://i.imgur.com/RhhuxKU.jpg') top center/cover no-repeat;
  40.  
  41. --charAhistory01: url('https://i.imgur.com/GsPQMr2.jpg') top right/cover no-repeat;
  42. --charAhistory02: url('https://i.imgur.com/TnfB6rZ.jpg') center/cover no-repeat;
  43. --charAhistory03: url('https://i.imgur.com/i9kmBdJ.jpg') top center/cover no-repeat;
  44.  
  45. --charAability: url('https://i.imgur.com/zmSIduT.jpg') top center/cover no-repeat;
  46.  
  47. --charARS01: url('https://i.imgur.com/Vc04X6m.jpg') top center/cover no-repeat;
  48. --charARS02: url('https://i.imgur.com/MefM4mN.jpg') center/cover no-repeat;
  49. --charARScomment: url('https://i.imgur.com/DzBMA5B.jpg') center/cover no-repeat;
  50.  
  51. --charAgallery01: url('https://i.imgur.com/bVVd9l5.jpg') center right/cover no-repeat;
  52. --charAgallery02: url('https://i.imgur.com/ziw4ztH.jpg') top center/cover no-repeat;
  53. --charAgallery03: url('https://i.imgur.com/5NFqL9G.jpg') top center/cover no-repeat;
  54.  
  55.  
  56.  
  57. /* <--------------------------------- accents for charB ---------------------------------> */
  58.  
  59. /* colors */
  60. --charBaccent01: #e9c0ff;
  61. --charBaccent02: #fcffba;
  62.  
  63. /* images */
  64. --charBmain: url('https://i.imgur.com/dufL9yi.jpg') center/cover no-repeat;
  65. --charBproficon: url('https://i.imgur.com/CWhOybw.jpg') top center/cover no-repeat;
  66.  
  67. --charBhistory01: url('https://i.imgur.com/qA5fpAT.jpg') center/cover no-repeat;
  68.  
  69. --charBability: url('https://i.imgur.com/isQqwGx.gif') center/cover no-repeat;
  70.  
  71. --charBRS01: url('https://i.imgur.com/MefM4mN.jpg') center/cover no-repeat;
  72. --charBRS02: url('https://i.imgur.com/MefM4mN.jpg') center/cover no-repeat;
  73. --charBRScomment: url('https://i.imgur.com/kLqZBzg.jpg') center/cover no-repeat;
  74.  
  75. --charBgallery01: url('https://i.imgur.com/MreBitL.jpg') center right/cover no-repeat;
  76. --charBgallery02: url('https://i.imgur.com/i1rXIFp.jpg') top center/cover no-repeat;
  77. --charBgallery03: url('https://i.imgur.com/FFbt5MY.jpg') top center/cover no-repeat;
  78.  
  79.  
  80. margin: 0 auto;
  81. padding: 50px 0;
  82. width: 100%;
  83. min-width: 300px;
  84. background: var(--bgcolor);
  85. font-size: initial;
  86. overflow: hidden;
  87. position: relative;][comment]
  88.  
  89. ---------- WIP Warning start ---------->
  90.  
  91. [/comment][border=0; padding: 0; margin: 0 auto; width: 90%; max-width: 550px;][border=0; padding: 0; margin-left: -20px; display: flex; flex-flow: row nowrap; align-items: center; width: calc(100% + 20px);][comment]
  92.  
  93. -------------------- quotebox start -------------------->
  94.  
  95. [/comment][border=0; padding: 0; margin-left: 20px; flex: 3; width: calc(100% - 56px); display: flex; align-items: center;][border=3px solid var(--quotecolor); border-radius: 10px; padding: 25px; width: calc(100% - 53px); font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: center; position: relative;]This CS is still a WIP! Please proceed with caution. Hard hats on until I finish this in 4 years.
  96. I'm working on it...gradually...[comment]
  97.  
  98. ------------------------------ border quotations start ------------------------------>
  99.  
  100. [/comment][border=0; padding: 10px; font-size: 25px; background: var(--bgcolor); position: absolute; top: 10px; left: -22px;][fa]fas fa-quote-left[/fa][/border][border=0; padding: 10px; font-size: 25px; background: var(--bgcolor); position: absolute; bottom: 10px; right: -22px;][fa]fas fa-quote-right[/fa][/border][comment]
  101.  
  102. <------------------------------ border quotations end ------------------------------
  103.  
  104. [/comment][/border][/border][comment]
  105.  
  106. <-------------------- quotebox end --------------------
  107.  
  108. [/comment][comment]
  109.  
  110. -------------------- WIP image start -------------------->
  111.  
  112. [/comment][border=0; padding: 0; margin-left: 20px; flex: 1; max-width: 125px; width: 100%;][border=0; padding: 0; padding-top: 100%; width: 100%; background: var(--WIP);][/border][/border][comment]
  113.  
  114. <-------------------- WIP image end --------------------
  115.  
  116. [/comment][/border][/border][comment]
  117.  
  118. <---------- WIP Warning end ----------
  119.  
  120. [/comment][comment]
  121.  
  122. ---------- Character Select Tabs Start ---------->
  123.  
  124. [/comment][border=0; padding: 0; margin: 0 auto; max-width: 1000px; width: 100%; position: relative; overflow: hidden; line-height: 27px;][border=0; padding: 0; margin-top: 100px; position: relative;][comment]
  125.  
  126. -------------------- Character Select Tab Covers Start -------------------->
  127.  
  128. [/comment][comment]
  129.  
  130. // character one tab label start //
  131.  
  132. [/comment][border=0; border-radius: 3px; padding: 0; width: 100px; height: 25px; background: var(--charAaccent01); font-family: var(--ENGfont); font-size: 14px; line-height: 25px; color: var(--whitetext); text-align: center; text-transform: uppercase; position: absolute; left: 20px; z-index: 4; overflow: hidden; pointer-events: none;]Alice[/border][comment]
  133.  
  134. // character one tab label end //
  135.  
  136. [/comment][comment]
  137.  
  138. // character two tab label start //
  139.  
  140. [/comment][border=0; border-radius: 3px; padding: 0; width: 100px; height: 25px; background: var(--charBaccent01); font-family: var(--ENGfont); font-size: 14px; line-height: 25px; color: var(--whitetext); text-align: center; text-transform: uppercase; position: absolute; top: 32px; left: 20px; z-index: 4; overflow: hidden; pointer-events: none;]Rikka[/border][comment]
  141.  
  142. // character two tab label end //
  143.  
  144. [/comment][comment]
  145.  
  146. <-------------------- Character Select Tab Covers End --------------------
  147.  
  148. [/comment][tabs]
  149.  
  150.  
  151.  
  152.  
  153.  
  154.  
  155.  
  156.  
  157.  
  158. [tab=CHARACTER ONE 010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101][border=0; padding: 0; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px); position: absolute; top: -75px; left: 0; pointer-events: none; line-height: initial;][comment]
  159.  
  160. -------------------- CharA LEFT SIDE Start -------------------->
  161.  
  162. [/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][comment]
  163.  
  164. ------------------------------ Triangles Start ------------------------------>
  165.  
  166. [/comment][border=0; padding: 0; width: 225px; height: 195px; background: var(--charAaccent01); clip-path: polygon(50% 0, 0% 100%, 100% 100%); position: absolute; top: 0; left: 0;][/border][border=0; padding: 0; width: 225px; height: 195px; background: var(--charAaccent01); clip-path: polygon(50% 100%, 0 0, 100% 0); position: absolute; bottom: 0; right: 0;][/border][comment]
  167.  
  168. <------------------------------ Triangles End ------------------------------
  169.  
  170. [/comment][comment]
  171.  
  172. ------------------------------ Main Image Start ------------------------------>
  173.  
  174. [/comment][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; background: var(--charAaccent02); position: relative;][border=0; border-radius: 20px; padding: 0; width: 100%; height: 100%; background: var(--charAmain); display: flex; justify-content: center; align-items: center;][comment]
  175.  
  176. ---------------------------------------- JPN Name Start ---------------------------------------->
  177.  
  178. [/comment][border=0; padding: 0; font-family: var(--JPNfont); font-size: 60px; font-weight: 700; color: transparent; -webkit-text-stroke: 1px var(--whitetext); text-align: center;]名前[/border][comment]
  179.  
  180. <---------------------------------------- JPN Name End ----------------------------------------
  181.  
  182. [/comment][/border][comment]
  183.  
  184. ---------------------------------------- CharA Content Tab Covers Start ---------------------------------------->
  185.  
  186. [/comment][border=0; padding: 0; width: calc(100% - 42px); height: 200px; position: absolute; bottom: 30px; pointer-events: initial;][/border][border=0; padding: 0; width: 600px; height: 200px; position: absolute; bottom: 30px; left: calc(100% + 13px); pointer-events: initial;][/border][border=0; border-radius: 7px; padding: 7px 0; width: 40px; background: var(--bgcolor); font-size: 18px; line-height: 100%; color: var(--charAaccent01); text-align: center; position: absolute; bottom: 50px; right: -13px; z-index: 3;][comment]
  187.  
  188. // font awesome icons start //
  189.  
  190. [/comment][border=0; padding: 7px 0;][fa]fas fa-house[/fa][/border][border=0; padding: 7px 0;][fa]fas fa-book[/fa][/border][border=0; padding: 7px 0;][fa]fa fa-superpowers[/fa][/border][border=0; padding: 7px 0;][fa]fas fa-heart[/fa][/border][border=0; padding: 7px 0;][fa]fas fa-star[/fa][/border][comment]
  191.  
  192. // font awesome icons end //
  193.  
  194. [/comment][/border][comment]
  195.  
  196. <---------------------------------------- CharA Content Tab Covers End ----------------------------------------
  197.  
  198. [/comment][/border][comment]
  199.  
  200. <------------------------------ Main Image End ------------------------------
  201.  
  202. [/comment][/border][comment]
  203.  
  204. <-------------------- CharA LEFT SIDE End --------------------
  205.  
  206. [/comment][comment]
  207.  
  208. -------------------- CharA RIGHT SIDE Filler Start -------------------->
  209.  
  210. [/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; opacity: 0;][/border][comment]
  211.  
  212. <-------------------- CharA RIGHT SIDE Filler End --------------------
  213.  
  214. [/comment][comment]
  215.  
  216. -------------------- CharA Content Tabs Start -------------------->
  217.  
  218. [/comment][border=0; padding: 0; width: 100%; position: absolute; top: 305px; line-height: 27px; pointer-events: initial;][comment]
  219.  
  220. // tab cover junk start //
  221.  
  222. [/comment][border=0; padding: 0; position: absolute; top: -30px; width: 100%; height: 300px; background: var(--bgcolor); pointer-events: none;][/border][comment]
  223.  
  224. // tab cover junk end //
  225.  
  226. [/comment][tabs]
  227.  
  228.  
  229.  
  230.  
  231.  
  232.  
  233.  
  234.  
  235.  
  236.  
  237.  
  238. [tab=BASIC INFO 010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101][border=0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; width: 100%; position: absolute; top: -306px; left: 0; pointer-events: none; font-size: initial; line-height: initial; z-index: 6;][comment]
  239.  
  240. -------------------- CharA Tab 01 Selected Tab Cover Start -------------------->
  241.  
  242. [/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; position: relative;][border=0; border-radius: 5px; padding: 5px 10px 5px 5px; background: var(--charAaccent01); font-size: 18px; line-height: 100%; color: var(--whitetext); position: absolute; bottom: 184px; right: -61px; z-index: 4; overflow: hidden; pointer-events: initial;][fa]fas fa-house[/fa][border=0; padding: 0; margin-left: 10px; display: inline; font-family: var(--ENGfont); font-size: 12px; text-transform: uppercase;]Basics[/border][/border][/border][/border][comment]
  243.  
  244. <-------------------- CharA Tab 01 Selected Tab Cover End --------------------
  245.  
  246. [/comment][comment]
  247.  
  248. -------------------- CharA Tab 01 Content Box Start -------------------->
  249.  
  250. [/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; overflow: hidden; pointer-events: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; text-align: justify;][comment]
  251.  
  252. ------------------------------ nameplate start ------------------------------>
  253.  
  254. [/comment][border=0; padding: 0; font-family: var(--ENGfont); font-size: .7em; line-height: 100%; color: var(--blacktext); text-align: right; text-transform: uppercase;]Surname☆First[/border][border=0; padding: 0; margin-top: 10px; font-family: var(--JPNfont); font-size: 2.5em; line-height: 100%; color: var(--charAaccent02); text-align: right; text-transform: uppercase;]姓姓[border=0; padding: 0; display: inline; color: var(--charAaccent01);]名前[/border][/border][comment]
  255.  
  256. <------------------------------ nameplate end ------------------------------
  257.  
  258. [/comment][comment]
  259.  
  260. ------------------------------ basic profile start ------------------------------>
  261.  
  262. [/comment][border=0; padding: 0; margin-top: 15px; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px);][comment]
  263.  
  264. ---------------------------------------- proficon start ---------------------------------------->
  265.  
  266. [/comment][border=0; padding: 0; margin-left: 20px; flex: 1; max-width: 300px; width: 100%; min-width: 150px; position: relative;][border=0; padding: 0; padding-top: 100%; width: 100%; background: var(--charAaccent02); position: absolute; top: 10px; left: 10px;][/border][border=0; padding: 0; padding-top: 100%; width: 100%; background: var(--charAproficon); position: relative;][/border][comment]
  267.  
  268. // faceclaim credit start //
  269.  
  270. [/comment][border=0; padding: 0; margin-top: 15px; margin-left: 10px; font-family: var(--ENGfont); font-size: .7em; line-height: 100%; color: var(--blacktext); text-transform: uppercase;]FC: リリコ (永远的7日之都)[/border][comment]
  271.  
  272. // faceclaim credit end //
  273.  
  274. [/comment][/border][comment]
  275.  
  276. <---------------------------------------- proficon end ----------------------------------------
  277.  
  278. [/comment][comment]
  279.  
  280. ---------------------------------------- basic info start ---------------------------------------->
  281.  
  282. [/comment][border=0; padding: 0; margin-top: 20px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px;][comment]
  283.  
  284. // Q&A 01 start //
  285.  
  286. [/comment][border=0; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Codename[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]ABC-##[/border][/border][comment]
  287.  
  288. // Q&A 01 end //
  289.  
  290. [/comment][comment]
  291.  
  292. // Q&A 02 start //
  293.  
  294. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Age[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Number (##)[/border][/border][comment]
  295.  
  296. // Q&A 02 end //
  297.  
  298. [/comment][comment]
  299.  
  300. // Q&A 03 start //
  301.  
  302. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Birthday[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Day Month Year[/border][/border][comment]
  303.  
  304. // Q&A 03 end //
  305.  
  306. [/comment][comment]
  307.  
  308. // Q&A 04 start //
  309.  
  310. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Gender[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Gender (Pronouns)[/border][/border][comment]
  311.  
  312. // Q&A 04 end //
  313.  
  314. [/comment][comment]
  315.  
  316. // Q&A 05 start //
  317.  
  318. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Ethnicity[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]--[/border][/border][comment]
  319.  
  320. // Q&A 05 end //
  321.  
  322. [/comment][comment]
  323.  
  324. // Q&A 06 start //
  325.  
  326. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Rank[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Union Rank[/border][/border][comment]
  327.  
  328. // Q&A 06 end //
  329.  
  330. [/comment][comment]
  331.  
  332. // Q&A 07 start //
  333.  
  334. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Division[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Union Division[/border][/border][comment]
  335.  
  336. // Q&A 07 end //
  337.  
  338. [/comment][/border][comment]
  339.  
  340. <---------------------------------------- basic info end ----------------------------------------
  341.  
  342. [/comment][/border][comment]
  343.  
  344. <------------------------------ basic profile end ------------------------------
  345.  
  346. [/comment][comment]
  347.  
  348. // section spacer start //
  349.  
  350. [/comment][border=0; padding: 0; height: 35px;][/border][comment]
  351.  
  352. // section spacer end //
  353.  
  354. [/comment][comment]
  355.  
  356. ------------------------------ appearance start ------------------------------>
  357.  
  358. [/comment][comment]
  359.  
  360. // header start //
  361.  
  362. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Appearance[/border][/border][comment]
  363.  
  364. // header end //
  365.  
  366. [/comment][comment]
  367.  
  368. // Q&A 01 start //
  369.  
  370. [/comment][border=0; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Height[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]#'#' (###cm)[/border][/border][comment]
  371.  
  372. // Q&A 01 end //
  373.  
  374. [/comment][comment]
  375.  
  376. // Q&A 02 start //
  377.  
  378. [/comment][border=0; padding: 8px; margin-top: 7px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Weight[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]#lbs (#kg)[/border][/border][comment]
  379.  
  380. // Q&A 02 end //
  381.  
  382. [/comment][comment]
  383.  
  384. // text start //
  385.  
  386. [/comment][border=0; padding: 0; margin-top: 5px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
  387.  
  388. // text end //
  389.  
  390. [/comment][comment]
  391.  
  392. <------------------------------ appearance end ------------------------------
  393.  
  394. [/comment][comment]
  395.  
  396. ------------------------------ personality start ------------------------------>
  397.  
  398. [/comment][border=0; padding: 0; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px);][comment]
  399.  
  400. ---------------------------------------- personality LEFT start ---------------------------------------->
  401.  
  402. [/comment][border=0; padding: 0; margin-left: 20px; flex: 3; width: 100%; min-width: 200px;][comment]
  403.  
  404. // header start //
  405.  
  406. [/comment][border=0; padding: 0; margin: 20px 0 15px; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Personality[/border][/border][comment]
  407.  
  408. // header end //
  409.  
  410. [/comment][comment]
  411.  
  412. // text start //
  413.  
  414. [/comment][border=0; padding: 0; margin-top: 5px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.
  415.  
  416. Nullam consequat ornare euismod. Aenean elementum purus eu massa consectetur, vitae pretium sapien fringilla. Quisque sodales massa quis iaculis dictum. Curabitur sit amet neque tortor. Cras blandit ex id nisi convallis accumsan. Maecenas arcu nisl, tristique vitae ullamcorper eu, convallis vel dui. Quisque ullamcorper massa elit, a dignissim dolor scelerisque ac. Praesent consequat purus sit amet cursus finibus. Etiam varius tellus a varius placerat. Nullam sed turpis viverra, laoreet orci eget, scelerisque arcu. Etiam lacus libero, varius eu fringilla tincidunt, feugiat sed augue. Aenean vestibulum nunc finibus augue porttitor, vehicula congue erat sollicitudin. Nam rutrum sem efficitur odio venenatis ullamcorper. Morbi ligula quam, tincidunt in rutrum sed, tincidunt volutpat sem. Nulla et suscipit leo.[/border][comment]
  417.  
  418. // text end //
  419.  
  420. [/comment][/border][comment]
  421.  
  422. <---------------------------------------- personality LEFT end ----------------------------------------
  423.  
  424. [/comment][comment]
  425.  
  426. ---------------------------------------- personality RIGHT start ---------------------------------------->
  427.  
  428. [/comment][border=0; padding: 0; margin-left: 20px; flex: 1; width: 100%; min-width: 200px;][comment]
  429.  
  430. // likes start //
  431.  
  432. [/comment][border=0; padding: 0; margin-top: 10px; margin-left: 5px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase;][border=0; padding: 0; display: inline; color: var(--charAaccent02);]+[/border] Likes[/border][border=0; padding: 0; margin-top: 15px; margin-left: 10px; width: calc(100% - 10px); background: var(--charAaccent02); position: relative;][border=0; padding: 10px; width: calc(100% - 20px); font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--whitetext); text-align: left; background: var(--charAaccent01); position: relative; top: -10px; left: -10px;]Item 1, Item 2, Item 3, Item 4, Item 5, Item 6, Item 7, Item 8, Item 9, Item 10, Item 11[/border][/border][comment]
  433.  
  434. // likes end //
  435.  
  436. [/comment][comment]
  437.  
  438. // dislikes start //
  439.  
  440. [/comment][border=0; padding: 0; margin-top: 10px; margin-left: 5px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase;][border=0; padding: 0; display: inline; color: var(--charAaccent02);]-[/border] Dislikes[/border][border=0; padding: 0; margin-top: 15px; margin-left: 10px; width: calc(100% - 10px); background: var(--charAaccent02); position: relative;][border=0; padding: 10px; width: calc(100% - 20px); font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--whitetext); text-align: left; background: var(--charAaccent01); position: relative; top: -10px; left: -10px;]Item 1, Item 2, Item 3, Item 4, Item 5, Item 6, Item 7, Item 8[/border][/border][comment]
  441.  
  442. // dislikes end //
  443.  
  444. [/comment][/border][comment]
  445.  
  446. <---------------------------------------- personality RIGHT end ----------------------------------------
  447.  
  448. [/comment][/border][comment]
  449.  
  450. <------------------------------ personality end ------------------------------
  451.  
  452. [/comment][/border][/border][comment]
  453.  
  454. <-------------------- CharA Tab 01 Content Box End --------------------
  455.  
  456. [/comment][/border][/tab]
  457.  
  458.  
  459.  
  460.  
  461.  
  462.  
  463. [tab=HISTORY 02020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202][border=0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; width: 100%; position: absolute; top: -306px; left: 0; pointer-events: none; font-size: initial; line-height: initial; z-index: 6;][comment]
  464.  
  465. -------------------- CharA Tab 02 Selected Tab Cover Start -------------------->
  466.  
  467. [/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; position: relative;][border=0; border-radius: 5px; padding: 5px 10px 5px 5px; background: var(--charAaccent01); font-size: 18px; line-height: 100%; color: var(--whitetext); position: absolute; bottom: 152px; right: -67px; z-index: 4; overflow: hidden; pointer-events: initial;][fa]fas fa-book[/fa][border=0; padding: 0; margin-left: 10px; display: inline; font-family: var(--ENGfont); font-size: 12px; text-transform: uppercase;]HISTORY[/border][/border][/border][/border][comment]
  468.  
  469. <-------------------- CharA Tab 02 Selected Tab Cover End --------------------
  470.  
  471. [/comment][comment]
  472.  
  473. -------------------- CharA Tab 02 Content Box Start -------------------->
  474.  
  475. [/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; overflow: hidden; pointer-events: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; text-align: justify;][comment]
  476.  
  477. ------------------------------ history pt.i start ------------------------------>
  478.  
  479. [/comment][comment]
  480.  
  481. // header start //
  482.  
  483. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Chapter 01[/border][/border][comment]
  484.  
  485. // header end //
  486.  
  487. [/comment][comment]
  488.  
  489. // image start //
  490.  
  491. [/comment][border=0; padding: 0; position: relative;][border=0; padding: 0; margin-top: 10px; margin-left: 10px; width: calc(100% - 10px); height: 200px; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 200px; background: var(--charAhistory01); position: relative;][/border][/border][comment]
  492.  
  493. // image end //
  494.  
  495. [/comment][comment]
  496.  
  497. // text start //
  498.  
  499. [/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
  500.  
  501. // text end //
  502.  
  503. [/comment][comment]
  504.  
  505. <------------------------------ history pt.i end ------------------------------
  506.  
  507. [/comment][comment]
  508.  
  509. ------------------------------ history pt.ii start ------------------------------>
  510.  
  511. [/comment][comment]
  512.  
  513. // header start //
  514.  
  515. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Chapter 02[/border][/border][comment]
  516.  
  517. // header end //
  518.  
  519. [/comment][comment]
  520.  
  521. // image start //
  522.  
  523. [/comment][border=0; padding: 0; position: relative;][border=0; padding: 0; margin-top: 10px; margin-left: 10px; width: calc(100% - 10px); height: 200px; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 200px; background: var(--charAhistory02); position: relative;][/border][/border][comment]
  524.  
  525. // image end //
  526.  
  527. [/comment][comment]
  528.  
  529. // text start //
  530.  
  531. [/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
  532.  
  533. // text end //
  534.  
  535. [/comment][comment]
  536.  
  537. <------------------------------ history pt.ii end ------------------------------
  538.  
  539. [/comment][comment]
  540.  
  541. ------------------------------ history pt.iii start ------------------------------>
  542.  
  543. [/comment][comment]
  544.  
  545. // header start //
  546.  
  547. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Chapter 03[/border][/border][comment]
  548.  
  549. // header end //
  550.  
  551. [/comment][comment]
  552.  
  553. // image start //
  554.  
  555. [/comment][border=0; padding: 0; position: relative;][border=0; padding: 0; margin-top: 10px; margin-left: 10px; width: calc(100% - 10px); height: 200px; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 200px; background: var(--charAhistory03); position: relative;][/border][/border][comment]
  556.  
  557. // image end //
  558.  
  559. [/comment][comment]
  560.  
  561. // text start //
  562.  
  563. [/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
  564.  
  565. // text end //
  566.  
  567. [/comment][comment]
  568.  
  569. <------------------------------ history pt.iii end ------------------------------
  570.  
  571. [/comment][/border][/border][comment]
  572.  
  573. <-------------------- CharA Tab 02 Content Box End --------------------
  574.  
  575. [/comment][/border][/tab]
  576.  
  577.  
  578.  
  579.  
  580.  
  581.  
  582. [tab=POWERS 03030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303][border=0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; width: 100%; position: absolute; top: -306px; left: 0; pointer-events: none; font-size: initial; line-height: initial; z-index: 6;][comment]
  583.  
  584. -------------------- CharA Tab 03 Selected Tab Cover Start -------------------->
  585.  
  586. [/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; position: relative;][border=0; border-radius: 5px; padding: 5px 10px 5px 5px; background: var(--charAaccent01); font-size: 18px; line-height: 100%; color: var(--whitetext); position: absolute; bottom: 120px; right: -67px; z-index: 4; overflow: hidden; pointer-events: initial;][fa]fa fa-superpowers[/fa][border=0; padding: 0; margin-left: 10px; display: inline; font-family: var(--ENGfont); font-size: 12px; text-transform: uppercase;]Combat[/border][/border][/border][/border][comment]
  587.  
  588. <-------------------- CharA Tab 03 Selected Tab Cover End --------------------
  589.  
  590. [/comment][comment]
  591.  
  592. -------------------- CharA Tab 03 Content Box Start -------------------->
  593.  
  594. [/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; overflow: hidden; pointer-events: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; text-align: justify;][comment]
  595.  
  596. ------------------------------ ability profile start ------------------------------>
  597.  
  598. [/comment][border=0; padding: 0; margin-top: 15px; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px);][comment]
  599.  
  600. ---------------------------------------- ability icon start ---------------------------------------->
  601.  
  602. [/comment][border=0; padding: 0; margin-left: 20px; flex: 1; width: 100%; min-width: 200px; position: relative;][border=0; padding: 0; margin-left: 10px; margin-top: 10px; width: calc(100% - 10px); height: 175px; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 175px; background: var(--charAability); position: relative;][/border][/border][comment]
  603.  
  604. <---------------------------------------- ability icon end ----------------------------------------
  605.  
  606. [/comment][comment]
  607.  
  608. ---------------------------------------- ability basic info start ---------------------------------------->
  609.  
  610. [/comment][border=0; padding: 0; margin-top: 20px; margin-left: 20px; flex: 1; width: 100%; min-width: 300px;][comment]
  611.  
  612. // Q&A 01 start //
  613.  
  614. [/comment][border=0; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Ability Name[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Name[/border][/border][comment]
  615.  
  616. // Q&A 01 end //
  617.  
  618. [/comment][comment]
  619.  
  620. // Q&A 02 start //
  621.  
  622. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Scientific Name[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Name[/border][/border][comment]
  623.  
  624. // Q&A 02 end //
  625.  
  626. [/comment][comment]
  627.  
  628. // Q&A 03 start //
  629.  
  630. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Variant[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Type[/border][/border][comment]
  631.  
  632. // Q&A 03 end //
  633.  
  634. [/comment][/border][comment]
  635.  
  636. <---------------------------------------- ability basic info end ----------------------------------------
  637.  
  638. [/comment][/border][comment]
  639.  
  640. <------------------------------ ability profile end ------------------------------
  641.  
  642. [/comment][comment]
  643.  
  644. ------------------------------ ability description start ------------------------------>
  645.  
  646. [/comment][comment]
  647.  
  648. // header start //
  649.  
  650. [/comment][border=0; padding: 0; margin: 30px 0 15px; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Description[/border][/border][comment]
  651.  
  652. // header end //
  653.  
  654. [/comment][comment]
  655.  
  656. // text start //
  657.  
  658. [/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
  659.  
  660. // text end //
  661.  
  662. [/comment][comment]
  663.  
  664. <------------------------------ ability description end ------------------------------
  665.  
  666. [/comment][comment]
  667.  
  668. ------------------------------ ability strengths start ------------------------------>
  669.  
  670. [/comment][comment]
  671.  
  672. // header start //
  673.  
  674. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Strengths[/border][/border][comment]
  675.  
  676. // header end //
  677.  
  678. [/comment][comment]
  679.  
  680. // text start //
  681.  
  682. [/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
  683.  
  684. // text end //
  685.  
  686. [/comment][comment]
  687.  
  688. <------------------------------ ability strengths end ------------------------------
  689.  
  690. [/comment][comment]
  691.  
  692. ------------------------------ ability weakness start ------------------------------>
  693.  
  694. [/comment][comment]
  695.  
  696. // header start //
  697.  
  698. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Weaknesses[/border][/border][comment]
  699.  
  700. // header end //
  701.  
  702. [/comment][comment]
  703.  
  704. // text start //
  705.  
  706. [/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
  707.  
  708. // text end //
  709.  
  710. [/comment][comment]
  711.  
  712. <------------------------------ ability weakness end ------------------------------
  713.  
  714. [/comment][comment]
  715.  
  716. ------------------------------ combat info start ------------------------------>
  717.  
  718. [/comment][comment]
  719.  
  720. // header start //
  721.  
  722. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Combat Info[/border][/border][comment]
  723.  
  724. // header end //
  725.  
  726. [/comment][comment]
  727.  
  728. // text start //
  729.  
  730. [/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;][b]Equipment:[/b]
  731. [b]Weapons:[/b]
  732. [b]Combat Type:[/b]
  733. [b]Other Skills:[/b] [/border][comment]
  734.  
  735. // text end //
  736.  
  737. [/comment][comment]
  738.  
  739. <------------------------------ combat info end ------------------------------
  740.  
  741. [/comment][/border][/border][comment]
  742.  
  743. <-------------------- CharA Tab 03 Content Box End --------------------
  744.  
  745. [/comment][/border][/tab]
  746.  
  747.  
  748.  
  749.  
  750.  
  751.  
  752. [tab=RELATIONSHIPS 040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404][border=0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; width: 100%; position: absolute; top: -306px; left: 0; pointer-events: none; font-size: initial; line-height: initial; z-index: 6;][comment]
  753.  
  754. -------------------- CharA Tab 04 Selected Tab Cover Start -------------------->
  755.  
  756. [/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; position: relative;][border=0; border-radius: 5px; padding: 5px 10px 5px 5px; background: var(--charAaccent01); font-size: 18px; line-height: 100%; color: var(--whitetext); position: absolute; bottom: 88px; right: -107px; z-index: 4; overflow: hidden; pointer-events: initial;][fa]fas fa-heart[/fa][border=0; padding: 0; margin-left: 10px; display: inline; font-family: var(--ENGfont); font-size: 12px; text-transform: uppercase;]Relationships[/border][/border][/border][/border][comment]
  757.  
  758. <-------------------- CharA Tab 04 Selected Tab Cover End --------------------
  759.  
  760. [/comment][comment]
  761.  
  762. -------------------- CharA Tab 04 Content Box Start -------------------->
  763.  
  764. [/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; overflow: hidden; pointer-events: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; text-align: justify;][comment]
  765.  
  766. ------------------------------ rs 01 start ------------------------------>
  767.  
  768. [/comment][border=0; padding: 0; margin-top: 15px; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px);][comment]
  769.  
  770. ---------------------------------------- rs 01 icon + basics start ---------------------------------------->
  771.  
  772. [/comment][border=0; padding: 0; margin-left: 20px; margin-bottom: 15px; flex: 1; width: 100%; min-width: 200px; position: relative;][border=0; padding: 0; margin-left: 10px; margin-top: 10px; width: calc(100% - 10px); height: 275px; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 275px; background: var(--charARS01); position: relative;][/border][comment]
  773.  
  774. // Q&A 01 start //
  775.  
  776. [/comment][border=0; margin-top: 15px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Name[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]--[/border][/border][comment]
  777.  
  778. // Q&A 01 end //
  779.  
  780. [/comment][comment]
  781.  
  782. // Q&A 02 start //
  783.  
  784. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Relation[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Relationship[/border][/border][comment]
  785.  
  786. // Q&A 02 end //
  787.  
  788. [/comment][comment]
  789.  
  790. // Q&A 03 start //
  791.  
  792. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Appellation[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Nickname[/border][/border][comment]
  793.  
  794. // Q&A 03 end //
  795.  
  796. [/comment][/border][comment]
  797.  
  798. <---------------------------------------- rs 01 icon + basics end ----------------------------------------
  799.  
  800. [/comment][comment]
  801.  
  802. ---------------------------------------- rs 01 description start ---------------------------------------->
  803.  
  804. [/comment][border=0; padding: 0; margin-top: -5pxpx; margin-left: 20px; flex: 2; width: 100%; min-width: 300px;][comment]
  805.  
  806. // text start //
  807.  
  808. [/comment][border=0; padding: 0; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.
  809.  
  810. Nullam consequat ornare euismod. Aenean elementum purus eu massa consectetur, vitae pretium sapien fringilla. Quisque sodales massa quis iaculis dictum. Curabitur sit amet neque tortor. Cras blandit ex id nisi convallis accumsan. Maecenas arcu nisl, tristique vitae ullamcorper eu, convallis vel dui.[/border][comment]
  811.  
  812. // text end //
  813.  
  814. [/comment][/border][comment]
  815.  
  816. <---------------------------------------- rs 01 description end ----------------------------------------
  817.  
  818. [/comment][/border][comment]
  819.  
  820. -------------------------------------------------- quotebox start -------------------------------------------------->
  821.  
  822. [/comment][border=3px solid var(--quotecolor); border-radius: 10px; padding: 25px; margin: 25px auto; width: calc(100% - 76px); font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: center; position: relative;][border=0; padding: 0; position: relative; z-index: 7;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh.[/border][comment]
  823.  
  824. ------------------------------------------------------------ border quotations start ------------------------------------------------------------>
  825.  
  826. [/comment][border=0; padding: 10px; font-size: 25px; background: var(--bgcolor); position: absolute; top: 10px; left: -22px;][fa]fas fa-quote-left[/fa][/border][border=0; padding: 10px; font-family: var(--ENGfont); font-size: 11px; line-height: 100%; text-transform: uppercase; background: var(--bgcolor); position: absolute; bottom: -15px; right: 75px;]About [Name][/border][border=10px solid var(--bgcolor); padding: 0; width: 40px; height: 40px; background: var(--charARScomment); position: absolute; bottom: -30px; right: 22px;][/border][comment]
  827.  
  828. <------------------------------------------------------------ border quotations end ------------------------------------------------------------
  829.  
  830. [/comment][/border][comment]
  831.  
  832. <-------------------------------------------------- quotebox end --------------------------------------------------
  833.  
  834. [/comment][comment]
  835.  
  836. <------------------------------ rs 01 end ------------------------------
  837.  
  838. [/comment][comment]
  839.  
  840. ------------------------------ rs 02 start ------------------------------>
  841.  
  842. [/comment][border=0; padding: 0; margin-top: 50px; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px);][comment]
  843.  
  844. ---------------------------------------- rs 02 icon + basics start ---------------------------------------->
  845.  
  846. [/comment][border=0; padding: 0; margin-left: 20px; margin-bottom: 15px; flex: 1; width: 100%; min-width: 200px; position: relative;][border=0; padding: 0; margin-left: 10px; margin-top: 10px; width: calc(100% - 10px); height: 275px; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 275px; background: var(--charARS02); position: relative;][/border][comment]
  847.  
  848. // Q&A 01 start //
  849.  
  850. [/comment][border=0; margin-top: 15px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Name[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]--[/border][/border][comment]
  851.  
  852. // Q&A 01 end //
  853.  
  854. [/comment][comment]
  855.  
  856. // Q&A 02 start //
  857.  
  858. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Relation[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Relationship[/border][/border][comment]
  859.  
  860. // Q&A 02 end //
  861.  
  862. [/comment][comment]
  863.  
  864. // Q&A 03 start //
  865.  
  866. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Appellation[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Nickname[/border][/border][comment]
  867.  
  868. // Q&A 03 end //
  869.  
  870. [/comment][/border][comment]
  871.  
  872. <---------------------------------------- rs 02 icon + basics end ----------------------------------------
  873.  
  874. [/comment][comment]
  875.  
  876. ---------------------------------------- rs 02 description start ---------------------------------------->
  877.  
  878. [/comment][border=0; padding: 0; margin-top: -5px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px;][comment]
  879.  
  880. // text start //
  881.  
  882. [/comment][border=0; padding: 0; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.
  883.  
  884. Nullam consequat ornare euismod. Aenean elementum purus eu massa consectetur, vitae pretium sapien fringilla. Quisque sodales massa quis iaculis dictum. Curabitur sit amet neque tortor. Cras blandit ex id nisi convallis accumsan. Maecenas arcu nisl, tristique vitae ullamcorper eu, convallis vel dui.[/border][comment]
  885.  
  886. // text end //
  887.  
  888. [/comment][/border][comment]
  889.  
  890. <---------------------------------------- rs 02 description end ----------------------------------------
  891.  
  892. [/comment][/border][comment]
  893.  
  894. -------------------------------------------------- quotebox start -------------------------------------------------->
  895.  
  896. [/comment][border=3px solid var(--quotecolor); border-radius: 10px; padding: 25px; margin: 25px auto; width: calc(100% - 76px); font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: center; position: relative;][border=0; padding: 0; position: relative; z-index: 7;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh.[/border][comment]
  897.  
  898. ------------------------------------------------------------ border quotations start ------------------------------------------------------------>
  899.  
  900. [/comment][border=0; padding: 10px; font-size: 25px; background: var(--bgcolor); position: absolute; top: 10px; left: -22px;][fa]fas fa-quote-left[/fa][/border][border=0; padding: 10px; font-family: var(--ENGfont); font-size: 11px; line-height: 100%; text-transform: uppercase; background: var(--bgcolor); position: absolute; bottom: -15px; right: 75px;]About [Name][/border][border=10px solid var(--bgcolor); padding: 0; width: 40px; height: 40px; background: var(--charARScomment); position: absolute; bottom: -30px; right: 22px;][/border][comment]
  901.  
  902. <------------------------------------------------------------ border quotations end ------------------------------------------------------------
  903.  
  904. [/comment][/border][comment]
  905.  
  906. <-------------------------------------------------- quotebox end --------------------------------------------------
  907.  
  908. [/comment][comment]
  909.  
  910. <------------------------------ rs 02 end ------------------------------
  911.  
  912. [/comment][/border][/border][comment]
  913.  
  914. <-------------------- CharA Tab 04 Content Box End --------------------
  915.  
  916. [/comment][/border][/tab]
  917.  
  918.  
  919.  
  920.  
  921.  
  922.  
  923. [tab=EXTRAS 050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505][border=0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; width: 100%; position: absolute; top: -306px; left: 0; pointer-events: none; font-size: initial; line-height: initial; z-index: 6;][comment]
  924.  
  925. -------------------- CharA Tab 05 Selected Tab Cover Start -------------------->
  926.  
  927. [/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; position: relative;][border=0; border-radius: 5px; padding: 5px 10px 5px 5px; background: var(--charAaccent01); font-size: 18px; line-height: 100%; color: var(--whitetext); position: absolute; bottom: 56px; right: -59px; z-index: 4; overflow: hidden; pointer-events: initial;][fa]fas fa-star[/fa][border=0; padding: 0; margin-left: 10px; display: inline; font-family: var(--ENGfont); font-size: 12px; text-transform: uppercase;]Extra[/border][/border][/border][/border][comment]
  928.  
  929. <-------------------- CharA Tab 05 Selected Tab Cover End --------------------
  930.  
  931. [/comment][comment]
  932.  
  933. -------------------- CharA Tab 05 Content Box Start -------------------->
  934.  
  935. [/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; overflow: hidden; pointer-events: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; text-align: justify;][comment]
  936.  
  937. ------------------------------ art credit start ------------------------------>
  938.  
  939. [/comment][comment]
  940.  
  941. // header start //
  942.  
  943. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Credit Links[/border][/border][comment]
  944.  
  945. // header end //
  946.  
  947. [/comment][comment]
  948.  
  949. // text start //
  950.  
  951. [/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;][LIST=1]
  952.  
  953. [*] [URL="https://f7d.huijiwiki.com/wiki/%E7%92%83%E7%92%83%E5%AD%90"]璃璃子 - 永远的7日之都维基|永远的7日之都WIKI|永远的7日之都资料站|Forever 7 Days - 灰机wiki[/URL]
  954.  
  955. [*] [URL="https://f7d.huijiwiki.com/wiki/%E6%98%9F%E5%B1%91%E3%83%BB%E7%92%83%E7%92%83%E5%AD%90"]星屑・璃璃子 - 永远的7日之都维基|永远的7日之都WIKI|永远的7日之都资料站|Forever 7 Days - 灰机wiki[/URL]
  956.  
  957. [*] [URL="https://f7d.huijiwiki.com/wiki/%E7%9B%B8%E5%86%8C/51%2B"]相册/51+ - 永远的7日之都维基|永远的7日之都WIKI|永远的7日之都资料站|Forever 7 Days - 灰机wiki[/URL] (#98)
  958.  
  959. [*] [URL="https://f7d.huijiwiki.com/wiki/%E7%9B%B8%E5%86%8C/101%2B"]相册/101+ - 永远的7日之都维基|永远的7日之都WIKI|永远的7日之都资料站|Forever 7 Days - 灰机wiki[/URL] (#104)
  960.  
  961. [*] [URL="https://f7d.huijiwiki.com/wiki/%E7%9B%B8%E5%86%8C/301%2B"]相册/301+ - 永远的7日之都维基|永远的7日之都WIKI|永远的7日之都资料站|Forever 7 Days - 灰机wiki[/URL] (#343, #344)
  962.  
  963. [*] [URL="https://f7d.huijiwiki.com/wiki/%E7%9B%B8%E5%86%8C/201%2B"]相册/201+ - 永远的7日之都维基|永远的7日之都WIKI|永远的7日之都资料站|Forever 7 Days - 灰机wiki[/URL] (#214)
  964.  
  965. [*] [URL="https://f7d.huijiwiki.com/wiki/%E7%9B%B8%E5%86%8C/401%2B"]相册/401+ - 永远的7日之都维基|永远的7日之都WIKI|永远的7日之都资料站|Forever 7 Days - 灰机wiki[/URL] (#406)
  966.  
  967. [*] ability section's image is Columbina by Ideolo
  968.  
  969. [/LIST][/border][comment]
  970.  
  971. // text end //
  972.  
  973. [/comment][comment]
  974.  
  975. <------------------------------ art credit end ------------------------------
  976.  
  977. [/comment][comment]
  978.  
  979. ------------------------------ extras start ------------------------------>
  980.  
  981. [/comment][comment]
  982.  
  983. // header start //
  984.  
  985. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Extras[/border][/border][comment]
  986.  
  987. // header end //
  988.  
  989. [/comment][comment]
  990.  
  991. // text start //
  992.  
  993. [/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;][LIST=1]
  994.  
  995. [*] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio.
  996.  
  997. [*] Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam.
  998.  
  999. [*] Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis.
  1000.  
  1001. [*] Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.
  1002.  
  1003. [/LIST][/border][comment]
  1004.  
  1005. // text end //
  1006.  
  1007. [/comment][comment]
  1008.  
  1009. <------------------------------ extras end ------------------------------
  1010.  
  1011. [/comment][comment]
  1012.  
  1013. ------------------------------ gallery start ------------------------------>
  1014.  
  1015. [/comment][comment]
  1016.  
  1017. // header start //
  1018.  
  1019. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Gallery[/border][/border][comment]
  1020.  
  1021. // header end //
  1022.  
  1023. [/comment][comment]
  1024.  
  1025. // images start //
  1026.  
  1027. [/comment][border=0; padding: 0; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width calc(100% + 20px);][border=0; padding: 0; margin-left: 20px; flex: 2; width: 100%; min-width: 200px;][comment]
  1028.  
  1029. // image 01 start //
  1030.  
  1031. [/comment][border=0; padding: 0; position: relative;][border=0; padding: 0; margin-top: 10px; margin-left: 10px; width: calc(100% - 10px); height: 200px; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 200px; background: var(--charAgallery01); position: relative;][/border][/border][comment]
  1032.  
  1033. // image 01 end //
  1034.  
  1035. [/comment][comment]
  1036.  
  1037. // image 02 start //
  1038.  
  1039. [/comment][border=0; margin-top: 30px; padding: 0; position: relative;][border=0; padding: 0; margin-top: 10px; margin-left: 10px; width: calc(100% - 10px); height: 200px; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 200px; background: var(--charAgallery02); position: relative;][/border][/border][comment]
  1040.  
  1041. // image 02 end //
  1042.  
  1043. [/comment][/border][comment]
  1044.  
  1045. // image 03 start //
  1046.  
  1047. [/comment][border=0; padding: 0; margin-left: 20px; flex: 1; width: 100%; min-width: 200px; min-height: 200px; position: relative;][border=0; padding: 0; margin-top: 10px; margin-left: 10px; width: calc(100% - 10px); height: 100%; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 100%; background: var(--charAgallery03); position: relative;][/border][/border][comment]
  1048.  
  1049. // image 03 end //
  1050.  
  1051. [/comment][/border][comment]
  1052.  
  1053. // images end //
  1054.  
  1055. [/comment][comment]
  1056.  
  1057. <------------------------------ gallery end ------------------------------
  1058.  
  1059. [/comment][/border][/border][comment]
  1060.  
  1061. <-------------------- CharA Tab 05 Content Box End --------------------
  1062.  
  1063. [/comment][/border][/tab]
  1064.  
  1065.  
  1066.  
  1067.  
  1068.  
  1069.  
  1070.  
  1071.  
  1072.  
  1073.  
  1074.  
  1075. [/tabs][/border][comment]
  1076.  
  1077. <-------------------- CharA Content Tabs End --------------------
  1078.  
  1079. [/comment][/border][/tab]
  1080.  
  1081.  
  1082.  
  1083.  
  1084.  
  1085. [tab=CHARACTER TWO 020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202][border=0; padding: 0; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px); position: absolute; top: -75px; left: 0; pointer-events: none; line-height: initial;][comment]
  1086.  
  1087. -------------------- CharB LEFT SIDE Start -------------------->
  1088.  
  1089. [/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][comment]
  1090.  
  1091. ------------------------------ Triangles Start ------------------------------>
  1092.  
  1093. [/comment][border=0; padding: 0; width: 225px; height: 195px; background: var(--charBaccent01); clip-path: polygon(50% 0, 0% 100%, 100% 100%); position: absolute; top: 0; left: 0;][/border][border=0; padding: 0; width: 225px; height: 195px; background: var(--charBaccent01); clip-path: polygon(50% 100%, 0 0, 100% 0); position: absolute; bottom: 0; right: 0;][/border][comment]
  1094.  
  1095. <------------------------------ Triangles End ------------------------------
  1096.  
  1097. [/comment][comment]
  1098.  
  1099. ------------------------------ Main Image Start ------------------------------>
  1100.  
  1101. [/comment][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; background: var(--charBaccent02); position: relative;][border=0; border-radius: 20px; padding: 0; width: 100%; height: 100%; background: var(--charBmain); display: flex; justify-content: center; align-items: center;][comment]
  1102.  
  1103. ---------------------------------------- JPN Name Start ---------------------------------------->
  1104.  
  1105. [/comment][border=0; padding: 0; font-family: var(--JPNfont); font-size: 60px; font-weight: 700; color: transparent; -webkit-text-stroke: 1px var(--whitetext); text-align: center;]名前[/border][comment]
  1106.  
  1107. <---------------------------------------- JPN Name End ----------------------------------------
  1108.  
  1109. [/comment][/border][comment]
  1110.  
  1111. ---------------------------------------- CharB Content Tab Covers Start ---------------------------------------->
  1112.  
  1113. [/comment][border=0; padding: 0; width: calc(100% - 42px); height: 200px; position: absolute; bottom: 30px; pointer-events: initial;][/border][border=0; padding: 0; width: 600px; height: 200px; position: absolute; bottom: 30px; left: calc(100% + 13px); pointer-events: initial;][/border][border=0; border-radius: 7px; padding: 7px 0; width: 40px; background: var(--bgcolor); font-size: 18px; line-height: 100%; color: var(--charBaccent01); text-align: center; position: absolute; bottom: 50px; right: -13px; z-index: 3;][comment]
  1114.  
  1115. // font awesome icons start //
  1116.  
  1117. [/comment][border=0; padding: 7px 0;][fa]fas fa-house[/fa][/border][border=0; padding: 7px 0;][fa]fas fa-book[/fa][/border][border=0; padding: 7px 0;][fa]fa fa-superpowers[/fa][/border][border=0; padding: 7px 0;][fa]fas fa-heart[/fa][/border][border=0; padding: 7px 0;][fa]fas fa-star[/fa][/border][comment]
  1118.  
  1119. // font awesome icons end //
  1120.  
  1121. [/comment][/border][comment]
  1122.  
  1123. <---------------------------------------- CharB Content Tab Covers End ----------------------------------------
  1124.  
  1125. [/comment][/border][comment]
  1126.  
  1127. <------------------------------ Main Image End ------------------------------
  1128.  
  1129. [/comment][/border][comment]
  1130.  
  1131. <-------------------- CharB LEFT SIDE End --------------------
  1132.  
  1133. [/comment][comment]
  1134.  
  1135. -------------------- CharB RIGHT SIDE Filler Start -------------------->
  1136.  
  1137. [/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; opacity: 0;][/border][comment]
  1138.  
  1139. <-------------------- CharB RIGHT SIDE Filler End --------------------
  1140.  
  1141. [/comment][comment]
  1142.  
  1143. -------------------- CharB Content Tabs Start -------------------->
  1144.  
  1145. [/comment][border=0; padding: 0; width: 100%; position: absolute; top: 305px; line-height: 27px; pointer-events: initial;][comment]
  1146.  
  1147. // tab cover junk start //
  1148.  
  1149. [/comment][border=0; padding: 0; position: absolute; top: -30px; width: 100%; height: 300px; background: var(--bgcolor); pointer-events: none;][/border][comment]
  1150.  
  1151. // tab cover junk end //
  1152.  
  1153. [/comment][tabs]
  1154.  
  1155.  
  1156.  
  1157.  
  1158.  
  1159.  
  1160.  
  1161.  
  1162.  
  1163.  
  1164.  
  1165. [tab=BASIC INFO 010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101][border=0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; width: 100%; position: absolute; top: -306px; left: 0; pointer-events: none; font-size: initial; line-height: initial; z-index: 6;][comment]
  1166.  
  1167. -------------------- CharB Tab 01 Selected Tab Cover Start -------------------->
  1168.  
  1169. [/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; position: relative;][border=0; border-radius: 5px; padding: 5px 10px 5px 5px; background: var(--charBaccent01); font-size: 18px; line-height: 100%; color: var(--whitetext); position: absolute; bottom: 184px; right: -61px; z-index: 4; overflow: hidden; pointer-events: initial;][fa]fas fa-house[/fa][border=0; padding: 0; margin-left: 10px; display: inline; font-family: var(--ENGfont); font-size: 12px; text-transform: uppercase;]Basics[/border][/border][/border][/border][comment]
  1170.  
  1171. <-------------------- CharB Tab 01 Selected Tab Cover End --------------------
  1172.  
  1173. [/comment][comment]
  1174.  
  1175. -------------------- CharB Tab 01 Content Box Start -------------------->
  1176.  
  1177. [/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; overflow: hidden; pointer-events: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; text-align: justify;][comment]
  1178.  
  1179. ------------------------------ nameplate start ------------------------------>
  1180.  
  1181. [/comment][border=0; padding: 0; font-family: var(--ENGfont); font-size: .7em; line-height: 100%; color: var(--blacktext); text-align: right; text-transform: uppercase;]Surname☆First[/border][border=0; padding: 0; margin-top: 10px; font-family: var(--JPNfont); font-size: 2.5em; line-height: 100%; color: var(--charBaccent02); text-align: right; text-transform: uppercase;]姓姓[border=0; padding: 0; display: inline; color: var(--charBaccent01);]名前[/border][/border][comment]
  1182.  
  1183. <------------------------------ nameplate end ------------------------------
  1184.  
  1185. [/comment][comment]
  1186.  
  1187. ------------------------------ basic profile start ------------------------------>
  1188.  
  1189. [/comment][border=0; padding: 0; margin-top: 15px; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px);][comment]
  1190.  
  1191. ---------------------------------------- proficon start ---------------------------------------->
  1192.  
  1193. [/comment][border=0; padding: 0; margin-left: 20px; flex: 1; max-width: 300px; width: 100%; min-width: 150px; position: relative;][border=0; padding: 0; padding-top: 100%; width: 100%; background: var(--charBaccent02); position: absolute; top: 10px; left: 10px;][/border][border=0; padding: 0; padding-top: 100%; width: 100%; background: var(--charBproficon); position: relative;][/border][comment]
  1194.  
  1195. // faceclaim credit start //
  1196.  
  1197. [/comment][border=0; padding: 0; margin-top: 15px; margin-left: 10px; font-family: var(--ENGfont); font-size: .7em; line-height: 100%; color: var(--blacktext); text-transform: uppercase;]FC: Kamishiro Rui (Project SEKAI)[/border][comment]
  1198.  
  1199. // faceclaim credit end //
  1200.  
  1201. [/comment][/border][comment]
  1202.  
  1203. <---------------------------------------- proficon end ----------------------------------------
  1204.  
  1205. [/comment][comment]
  1206.  
  1207. ---------------------------------------- basic info start ---------------------------------------->
  1208.  
  1209. [/comment][border=0; padding: 0; margin-top: 20px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px;][comment]
  1210.  
  1211. // Q&A 01 start //
  1212.  
  1213. [/comment][border=0; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Pseudonym[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Name[/border][/border][comment]
  1214.  
  1215. // Q&A 01 end //
  1216.  
  1217. [/comment][comment]
  1218.  
  1219. // Q&A 02 start //
  1220.  
  1221. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Age[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Number (##)[/border][/border][comment]
  1222.  
  1223. // Q&A 02 end //
  1224.  
  1225. [/comment][comment]
  1226.  
  1227. // Q&A 03 start //
  1228.  
  1229. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Birthday[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Day Month Year[/border][/border][comment]
  1230.  
  1231. // Q&A 03 end //
  1232.  
  1233. [/comment][comment]
  1234.  
  1235. // Q&A 04 start //
  1236.  
  1237. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Gender[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Gender (Pronouns)[/border][/border][comment]
  1238.  
  1239. // Q&A 04 end //
  1240.  
  1241. [/comment][comment]
  1242.  
  1243. // Q&A 05 start //
  1244.  
  1245. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Ethnicity[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]--[/border][/border][comment]
  1246.  
  1247. // Q&A 05 end //
  1248.  
  1249. [/comment][comment]
  1250.  
  1251. // Q&A 06 start //
  1252.  
  1253. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Flower[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Ibara Rank[/border][/border][comment]
  1254.  
  1255. // Q&A 06 end //
  1256.  
  1257. [/comment][/border][comment]
  1258.  
  1259. <---------------------------------------- basic info end ----------------------------------------
  1260.  
  1261. [/comment][/border][comment]
  1262.  
  1263. <------------------------------ basic profile end ------------------------------
  1264.  
  1265. [/comment][comment]
  1266.  
  1267. // section spacer start //
  1268.  
  1269. [/comment][border=0; padding: 0; height: 35px;][/border][comment]
  1270.  
  1271. // section spacer end //
  1272.  
  1273. [/comment][comment]
  1274.  
  1275. ------------------------------ appearance start ------------------------------>
  1276.  
  1277. [/comment][comment]
  1278.  
  1279. // header start //
  1280.  
  1281. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charBaccent01);][border=0; padding: 0; width: 10px; height: 10px; background: var(--charBaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Appearance[/border][/border][comment]
  1282.  
  1283. // header end //
  1284.  
  1285. [/comment][comment]
  1286.  
  1287. // Q&A 01 start //
  1288.  
  1289. [/comment][border=0; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Height[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]#'#' (###cm)[/border][/border][comment]
  1290.  
  1291. // Q&A 01 end //
  1292.  
  1293. [/comment][comment]
  1294.  
  1295. // Q&A 02 start //
  1296.  
  1297. [/comment][border=0; padding: 8px; margin-top: 7px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Weight[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]#lbs (#kg)[/border][/border][comment]
  1298.  
  1299. // Q&A 02 end //
  1300.  
  1301. [/comment][comment]
  1302.  
  1303. // text start //
  1304.  
  1305. [/comment][border=0; padding: 0; margin-top: 5px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
  1306.  
  1307. // text end //
  1308.  
  1309. [/comment][comment]
  1310.  
  1311. <------------------------------ appearance end ------------------------------
  1312.  
  1313. [/comment][comment]
  1314.  
  1315. ------------------------------ personality start ------------------------------>
  1316.  
  1317. [/comment][border=0; padding: 0; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px);][comment]
  1318.  
  1319. ---------------------------------------- personality LEFT start ---------------------------------------->
  1320.  
  1321. [/comment][border=0; padding: 0; margin-left: 20px; flex: 3; width: 100%; min-width: 200px;][comment]
  1322.  
  1323. // header start //
  1324.  
  1325. [/comment][border=0; padding: 0; margin: 20px 0 15px; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charBaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charBaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Personality[/border][/border][comment]
  1326.  
  1327. // header end //
  1328.  
  1329. [/comment][comment]
  1330.  
  1331. // text start //
  1332.  
  1333. [/comment][border=0; padding: 0; margin-top: 5px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.
  1334.  
  1335. Nullam consequat ornare euismod. Aenean elementum purus eu massa consectetur, vitae pretium sapien fringilla. Quisque sodales massa quis iaculis dictum. Curabitur sit amet neque tortor. Cras blandit ex id nisi convallis accumsan. Maecenas arcu nisl, tristique vitae ullamcorper eu, convallis vel dui. Quisque ullamcorper massa elit, a dignissim dolor scelerisque ac. Praesent consequat purus sit amet cursus finibus. Etiam varius tellus a varius placerat. Nullam sed turpis viverra, laoreet orci eget, scelerisque arcu. Etiam lacus libero, varius eu fringilla tincidunt, feugiat sed augue. Aenean vestibulum nunc finibus augue porttitor, vehicula congue erat sollicitudin. Nam rutrum sem efficitur odio venenatis ullamcorper. Morbi ligula quam, tincidunt in rutrum sed, tincidunt volutpat sem. Nulla et suscipit leo.[/border][comment]
  1336.  
  1337. // text end //
  1338.  
  1339. [/comment][/border][comment]
  1340.  
  1341. <---------------------------------------- personality LEFT end ----------------------------------------
  1342.  
  1343. [/comment][comment]
  1344.  
  1345. ---------------------------------------- personality RIGHT start ---------------------------------------->
  1346.  
  1347. [/comment][border=0; padding: 0; margin-left: 20px; flex: 1; width: 100%; min-width: 200px;][comment]
  1348.  
  1349. // likes start //
  1350.  
  1351. [/comment][border=0; padding: 0; margin-top: 10px; margin-left: 5px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase;][border=0; padding: 0; display: inline; color: var(--charBaccent02);]+[/border] Likes[/border][border=0; padding: 0; margin-top: 15px; margin-left: 10px; width: calc(100% - 10px); background: var(--charBaccent02); position: relative;][border=0; padding: 10px; width: calc(100% - 20px); font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--whitetext); text-align: left; background: var(--charBaccent01); position: relative; top: -10px; left: -10px;]Item 1, Item 2, Item 3, Item 4, Item 5, Item 6, Item 7, Item 8, Item 9, Item 10, Item 11[/border][/border][comment]
  1352.  
  1353. // likes end //
  1354.  
  1355. [/comment][comment]
  1356.  
  1357. // dislikes start //
  1358.  
  1359. [/comment][border=0; padding: 0; margin-top: 10px; margin-left: 5px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase;][border=0; padding: 0; display: inline; color: var(--charBaccent02);]-[/border] Dislikes[/border][border=0; padding: 0; margin-top: 15px; margin-left: 10px; width: calc(100% - 10px); background: var(--charBaccent02); position: relative;][border=0; padding: 10px; width: calc(100% - 20px); font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--whitetext); text-align: left; background: var(--charBaccent01); position: relative; top: -10px; left: -10px;]Item 1, Item 2, Item 3, Item 4, Item 5, Item 6, Item 7, Item 8[/border][/border][comment]
  1360.  
  1361. // dislikes end //
  1362.  
  1363. [/comment][/border][comment]
  1364.  
  1365. <---------------------------------------- personality RIGHT end ----------------------------------------
  1366.  
  1367. [/comment][/border][comment]
  1368.  
  1369. <------------------------------ personality end ------------------------------
  1370.  
  1371. [/comment][/border][/border][comment]
  1372.  
  1373. <-------------------- CharB Tab 01 Content Box End --------------------
  1374.  
  1375. [/comment][/border][/tab]
  1376.  
  1377.  
  1378.  
  1379.  
  1380.  
  1381.  
  1382. [tab=HISTORY 02020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202][border=0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; width: 100%; position: absolute; top: -306px; left: 0; pointer-events: none; font-size: initial; line-height: initial; z-index: 6;][comment]
  1383.  
  1384. -------------------- CharB Tab 02 Selected Tab Cover Start -------------------->
  1385.  
  1386. [/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; position: relative;][border=0; border-radius: 5px; padding: 5px 10px 5px 5px; background: var(--charBaccent01); font-size: 18px; line-height: 100%; color: var(--whitetext); position: absolute; bottom: 152px; right: -67px; z-index: 4; overflow: hidden; pointer-events: initial;][fa]fas fa-book[/fa][border=0; padding: 0; margin-left: 10px; display: inline; font-family: var(--ENGfont); font-size: 12px; text-transform: uppercase;]HISTORY[/border][/border][/border][/border][comment]
  1387.  
  1388. <-------------------- CharB Tab 02 Selected Tab Cover End --------------------
  1389.  
  1390. [/comment][comment]
  1391.  
  1392. -------------------- CharB Tab 02 Content Box Start -------------------->
  1393.  
  1394. [/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; overflow: hidden; pointer-events: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; text-align: justify;][comment]
  1395.  
  1396. ------------------------------ history pt.i start ------------------------------>
  1397.  
  1398. [/comment][comment]
  1399.  
  1400. // header start //
  1401.  
  1402. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charBaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charBaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]History[/border][/border][comment]
  1403.  
  1404. // header end //
  1405.  
  1406. [/comment][comment]
  1407.  
  1408. // image start //
  1409.  
  1410. [/comment][border=0; padding: 0; position: relative;][border=0; padding: 0; margin-top: 10px; margin-left: 10px; width: calc(100% - 10px); height: 200px; background: var(--charBaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 200px; background: var(--charBhistory01); position: relative;][/border][/border][comment]
  1411.  
  1412. // image end //
  1413.  
  1414. [/comment][comment]
  1415.  
  1416. // text start //
  1417.  
  1418. [/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
  1419.  
  1420. // text end //
  1421.  
  1422. [/comment][comment]
  1423.  
  1424. <------------------------------ history pt.i end ------------------------------
  1425.  
  1426. [/comment][/border][/border][comment]
  1427.  
  1428. <-------------------- CharB Tab 02 Content Box End --------------------
  1429.  
  1430. [/comment][/border][/tab]
  1431.  
  1432.  
  1433.  
  1434.  
  1435.  
  1436.  
  1437. [tab=POWERS 03030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303][border=0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; width: 100%; position: absolute; top: -306px; left: 0; pointer-events: none; font-size: initial; line-height: initial; z-index: 6;][comment]
  1438.  
  1439. -------------------- CharB Tab 03 Selected Tab Cover Start -------------------->
  1440.  
  1441. [/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; position: relative;][border=0; border-radius: 5px; padding: 5px 10px 5px 5px; background: var(--charBaccent01); font-size: 18px; line-height: 100%; color: var(--whitetext); position: absolute; bottom: 120px; right: -67px; z-index: 4; overflow: hidden; pointer-events: initial;][fa]fa fa-superpowers[/fa][border=0; padding: 0; margin-left: 10px; display: inline; font-family: var(--ENGfont); font-size: 12px; text-transform: uppercase;]Combat[/border][/border][/border][/border][comment]
  1442.  
  1443. <-------------------- CharB Tab 03 Selected Tab Cover End --------------------
  1444.  
  1445. [/comment][comment]
  1446.  
  1447. -------------------- CharB Tab 03 Content Box Start -------------------->
  1448.  
  1449. [/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; overflow: hidden; pointer-events: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; text-align: justify;][comment]
  1450.  
  1451. ------------------------------ ability profile start ------------------------------>
  1452.  
  1453. [/comment][border=0; padding: 0; margin-top: 15px; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px);][comment]
  1454.  
  1455. ---------------------------------------- ability icon start ---------------------------------------->
  1456.  
  1457. [/comment][border=0; padding: 0; margin-left: 20px; flex: 1; width: 100%; min-width: 200px; position: relative;][border=0; padding: 0; margin-left: 10px; margin-top: 10px; width: calc(100% - 10px); height: 175px; background: var(--charBaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 175px; background: var(--charBability); position: relative;][/border][/border][comment]
  1458.  
  1459. <---------------------------------------- ability icon end ----------------------------------------
  1460.  
  1461. [/comment][comment]
  1462.  
  1463. ---------------------------------------- ability basic info start ---------------------------------------->
  1464.  
  1465. [/comment][border=0; padding: 0; margin-top: 20px; margin-left: 20px; flex: 1; width: 100%; min-width: 300px;][comment]
  1466.  
  1467. // Q&A 01 start //
  1468.  
  1469. [/comment][border=0; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Ability Name[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Name[/border][/border][comment]
  1470.  
  1471. // Q&A 01 end //
  1472.  
  1473. [/comment][comment]
  1474.  
  1475. // Q&A 02 start //
  1476.  
  1477. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Scientific Name[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Name[/border][/border][comment]
  1478.  
  1479. // Q&A 02 end //
  1480.  
  1481. [/comment][comment]
  1482.  
  1483. // Q&A 03 start //
  1484.  
  1485. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Variant[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Type[/border][/border][comment]
  1486.  
  1487. // Q&A 03 end //
  1488.  
  1489. [/comment][/border][comment]
  1490.  
  1491. <---------------------------------------- ability basic info end ----------------------------------------
  1492.  
  1493. [/comment][/border][comment]
  1494.  
  1495. <------------------------------ ability profile end ------------------------------
  1496.  
  1497. [/comment][comment]
  1498.  
  1499. ------------------------------ ability description start ------------------------------>
  1500.  
  1501. [/comment][comment]
  1502.  
  1503. // header start //
  1504.  
  1505. [/comment][border=0; padding: 0; margin: 30px 0 15px; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charBaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charBaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Description[/border][/border][comment]
  1506.  
  1507. // header end //
  1508.  
  1509. [/comment][comment]
  1510.  
  1511. // text start //
  1512.  
  1513. [/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
  1514.  
  1515. // text end //
  1516.  
  1517. [/comment][comment]
  1518.  
  1519. <------------------------------ ability description end ------------------------------
  1520.  
  1521. [/comment][comment]
  1522.  
  1523. ------------------------------ ability strengths start ------------------------------>
  1524.  
  1525. [/comment][comment]
  1526.  
  1527. // header start //
  1528.  
  1529. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charBaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charBaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Strengths[/border][/border][comment]
  1530.  
  1531. // header end //
  1532.  
  1533. [/comment][comment]
  1534.  
  1535. // text start //
  1536.  
  1537. [/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
  1538.  
  1539. // text end //
  1540.  
  1541. [/comment][comment]
  1542.  
  1543. <------------------------------ ability strengths end ------------------------------
  1544.  
  1545. [/comment][comment]
  1546.  
  1547. ------------------------------ ability weakness start ------------------------------>
  1548.  
  1549. [/comment][comment]
  1550.  
  1551. // header start //
  1552.  
  1553. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charBaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charBaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Weaknesses[/border][/border][comment]
  1554.  
  1555. // header end //
  1556.  
  1557. [/comment][comment]
  1558.  
  1559. // text start //
  1560.  
  1561. [/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
  1562.  
  1563. // text end //
  1564.  
  1565. [/comment][comment]
  1566.  
  1567. <------------------------------ ability weakness end ------------------------------
  1568.  
  1569. [/comment][comment]
  1570.  
  1571. ------------------------------ combat info start ------------------------------>
  1572.  
  1573. [/comment][comment]
  1574.  
  1575. // header start //
  1576.  
  1577. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charBaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charBaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Combat Info[/border][/border][comment]
  1578.  
  1579. // header end //
  1580.  
  1581. [/comment][comment]
  1582.  
  1583. // text start //
  1584.  
  1585. [/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;][b]Equipment:[/b]
  1586. [b]Weapons:[/b]
  1587. [b]Combat Type:[/b]
  1588. [b]Other Skills:[/b] [/border][comment]
  1589.  
  1590. // text end //
  1591.  
  1592. [/comment][comment]
  1593.  
  1594. <------------------------------ combat info end ------------------------------
  1595.  
  1596. [/comment][/border][/border][comment]
  1597.  
  1598. <-------------------- CharB Tab 03 Content Box End --------------------
  1599.  
  1600. [/comment][/border][/tab]
  1601.  
  1602.  
  1603.  
  1604.  
  1605.  
  1606.  
  1607. [tab=RELATIONSHIPS 040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404][border=0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; width: 100%; position: absolute; top: -306px; left: 0; pointer-events: none; font-size: initial; line-height: initial; z-index: 6;][comment]
  1608.  
  1609. -------------------- CharB Tab 04 Selected Tab Cover Start -------------------->
  1610.  
  1611. [/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; position: relative;][border=0; border-radius: 5px; padding: 5px 10px 5px 5px; background: var(--charBaccent01); font-size: 18px; line-height: 100%; color: var(--whitetext); position: absolute; bottom: 88px; right: -107px; z-index: 4; overflow: hidden; pointer-events: initial;][fa]fas fa-heart[/fa][border=0; padding: 0; margin-left: 10px; display: inline; font-family: var(--ENGfont); font-size: 12px; text-transform: uppercase;]Relationships[/border][/border][/border][/border][comment]
  1612.  
  1613. <-------------------- CharB Tab 04 Selected Tab Cover End --------------------
  1614.  
  1615. [/comment][comment]
  1616.  
  1617. -------------------- CharB Tab 04 Content Box Start -------------------->
  1618.  
  1619. [/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; overflow: hidden; pointer-events: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; text-align: justify;][comment]
  1620.  
  1621. ------------------------------ rs 01 start ------------------------------>
  1622.  
  1623. [/comment][border=0; padding: 0; margin-top: 15px; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px);][comment]
  1624.  
  1625. ---------------------------------------- rs 01 icon + basics start ---------------------------------------->
  1626.  
  1627. [/comment][border=0; padding: 0; margin-left: 20px; margin-bottom: 15px; flex: 1; width: 100%; min-width: 200px; position: relative;][border=0; padding: 0; margin-left: 10px; margin-top: 10px; width: calc(100% - 10px); height: 275px; background: var(--charBaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 275px; background: var(--charBRS01); position: relative;][/border][comment]
  1628.  
  1629. // Q&A 01 start //
  1630.  
  1631. [/comment][border=0; margin-top: 15px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Name[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]--[/border][/border][comment]
  1632.  
  1633. // Q&A 01 end //
  1634.  
  1635. [/comment][comment]
  1636.  
  1637. // Q&A 02 start //
  1638.  
  1639. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Relation[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Partner[/border][/border][comment]
  1640.  
  1641. // Q&A 02 end //
  1642.  
  1643. [/comment][comment]
  1644.  
  1645. // Q&A 03 start //
  1646.  
  1647. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Appellation[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Nickname[/border][/border][comment]
  1648.  
  1649. // Q&A 03 end //
  1650.  
  1651. [/comment][/border][comment]
  1652.  
  1653. <---------------------------------------- rs 01 icon + basics end ----------------------------------------
  1654.  
  1655. [/comment][comment]
  1656.  
  1657. ---------------------------------------- rs 01 description start ---------------------------------------->
  1658.  
  1659. [/comment][border=0; padding: 0; margin-top: -5pxpx; margin-left: 20px; flex: 2; width: 100%; min-width: 300px;][comment]
  1660.  
  1661. // text start //
  1662.  
  1663. [/comment][border=0; padding: 0; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.
  1664.  
  1665. Nullam consequat ornare euismod. Aenean elementum purus eu massa consectetur, vitae pretium sapien fringilla. Quisque sodales massa quis iaculis dictum. Curabitur sit amet neque tortor. Cras blandit ex id nisi convallis accumsan. Maecenas arcu nisl, tristique vitae ullamcorper eu, convallis vel dui.[/border][comment]
  1666.  
  1667. // text end //
  1668.  
  1669. [/comment][/border][comment]
  1670.  
  1671. <---------------------------------------- rs 01 description end ----------------------------------------
  1672.  
  1673. [/comment][/border][comment]
  1674.  
  1675. -------------------------------------------------- quotebox start -------------------------------------------------->
  1676.  
  1677. [/comment][border=3px solid var(--quotecolor); border-radius: 10px; padding: 25px; margin: 25px auto; width: calc(100% - 76px); font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: center; position: relative;][border=0; padding: 0; position: relative; z-index: 7;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh.[/border][comment]
  1678.  
  1679. ------------------------------------------------------------ border quotations start ------------------------------------------------------------>
  1680.  
  1681. [/comment][border=0; padding: 10px; font-size: 25px; background: var(--bgcolor); position: absolute; top: 10px; left: -22px;][fa]fas fa-quote-left[/fa][/border][border=0; padding: 10px; font-family: var(--ENGfont); font-size: 11px; line-height: 100%; text-transform: uppercase; background: var(--bgcolor); position: absolute; bottom: -15px; right: 75px;]About [Name][/border][border=10px solid var(--bgcolor); padding: 0; width: 40px; height: 40px; background: var(--charBRScomment); position: absolute; bottom: -30px; right: 22px;][/border][comment]
  1682.  
  1683. <------------------------------------------------------------ border quotations end ------------------------------------------------------------
  1684.  
  1685. [/comment][/border][comment]
  1686.  
  1687. <-------------------------------------------------- quotebox end --------------------------------------------------
  1688.  
  1689. [/comment][comment]
  1690.  
  1691. <------------------------------ rs 01 end ------------------------------
  1692.  
  1693. [/comment][comment]
  1694.  
  1695. ------------------------------ rs 02 start ------------------------------>
  1696.  
  1697. [/comment][border=0; padding: 0; margin-top: 50px; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px);][comment]
  1698.  
  1699. ---------------------------------------- rs 02 icon + basics start ---------------------------------------->
  1700.  
  1701. [/comment][border=0; padding: 0; margin-left: 20px; margin-bottom: 15px; flex: 1; width: 100%; min-width: 200px; position: relative;][border=0; padding: 0; margin-left: 10px; margin-top: 10px; width: calc(100% - 10px); height: 275px; background: var(--charBaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 275px; background: var(--charBRS02); position: relative;][/border][comment]
  1702.  
  1703. // Q&A 01 start //
  1704.  
  1705. [/comment][border=0; margin-top: 15px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Name[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]--[/border][/border][comment]
  1706.  
  1707. // Q&A 01 end //
  1708.  
  1709. [/comment][comment]
  1710.  
  1711. // Q&A 02 start //
  1712.  
  1713. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Relation[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Former Partner[/border][/border][comment]
  1714.  
  1715. // Q&A 02 end //
  1716.  
  1717. [/comment][comment]
  1718.  
  1719. // Q&A 03 start //
  1720.  
  1721. [/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charBaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Appellation[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Nickname[/border][/border][comment]
  1722.  
  1723. // Q&A 03 end //
  1724.  
  1725. [/comment][/border][comment]
  1726.  
  1727. <---------------------------------------- rs 02 icon + basics end ----------------------------------------
  1728.  
  1729. [/comment][comment]
  1730.  
  1731. ---------------------------------------- rs 02 description start ---------------------------------------->
  1732.  
  1733. [/comment][border=0; padding: 0; margin-top: -5px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px;][comment]
  1734.  
  1735. // text start //
  1736.  
  1737. [/comment][border=0; padding: 0; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.
  1738.  
  1739. Nullam consequat ornare euismod. Aenean elementum purus eu massa consectetur, vitae pretium sapien fringilla. Quisque sodales massa quis iaculis dictum. Curabitur sit amet neque tortor. Cras blandit ex id nisi convallis accumsan. Maecenas arcu nisl, tristique vitae ullamcorper eu, convallis vel dui.[/border][comment]
  1740.  
  1741. // text end //
  1742.  
  1743. [/comment][/border][comment]
  1744.  
  1745. <---------------------------------------- rs 02 description end ----------------------------------------
  1746.  
  1747. [/comment][/border][comment]
  1748.  
  1749. -------------------------------------------------- quotebox start -------------------------------------------------->
  1750.  
  1751. [/comment][border=3px solid var(--quotecolor); border-radius: 10px; padding: 25px; margin: 25px auto; width: calc(100% - 76px); font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: center; position: relative;][border=0; padding: 0; position: relative; z-index: 7;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh.[/border][comment]
  1752.  
  1753. ------------------------------------------------------------ border quotations start ------------------------------------------------------------>
  1754.  
  1755. [/comment][border=0; padding: 10px; font-size: 25px; background: var(--bgcolor); position: absolute; top: 10px; left: -22px;][fa]fas fa-quote-left[/fa][/border][border=0; padding: 10px; font-family: var(--ENGfont); font-size: 11px; line-height: 100%; text-transform: uppercase; background: var(--bgcolor); position: absolute; bottom: -15px; right: 75px;]About [Name][/border][border=10px solid var(--bgcolor); padding: 0; width: 40px; height: 40px; background: var(--charBRScomment); position: absolute; bottom: -30px; right: 22px;][/border][comment]
  1756.  
  1757. <------------------------------------------------------------ border quotations end ------------------------------------------------------------
  1758.  
  1759. [/comment][/border][comment]
  1760.  
  1761. <-------------------------------------------------- quotebox end --------------------------------------------------
  1762.  
  1763. [/comment][comment]
  1764.  
  1765. <------------------------------ rs 02 end ------------------------------
  1766.  
  1767. [/comment][/border][/border][comment]
  1768.  
  1769. <-------------------- CharB Tab 04 Content Box End --------------------
  1770.  
  1771. [/comment][/border][/tab]
  1772.  
  1773.  
  1774.  
  1775.  
  1776.  
  1777.  
  1778. [tab=EXTRAS 050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505][border=0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; width: 100%; position: absolute; top: -306px; left: 0; pointer-events: none; font-size: initial; line-height: initial; z-index: 6;][comment]
  1779.  
  1780. -------------------- CharB Tab 05 Selected Tab Cover Start -------------------->
  1781.  
  1782. [/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; position: relative;][border=0; border-radius: 5px; padding: 5px 10px 5px 5px; background: var(--charBaccent01); font-size: 18px; line-height: 100%; color: var(--whitetext); position: absolute; bottom: 56px; right: -59px; z-index: 4; overflow: hidden; pointer-events: initial;][fa]fas fa-star[/fa][border=0; padding: 0; margin-left: 10px; display: inline; font-family: var(--ENGfont); font-size: 12px; text-transform: uppercase;]Extra[/border][/border][/border][/border][comment]
  1783.  
  1784. <-------------------- CharB Tab 05 Selected Tab Cover End --------------------
  1785.  
  1786. [/comment][comment]
  1787.  
  1788. -------------------- CharB Tab 05 Content Box Start -------------------->
  1789.  
  1790. [/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; overflow: hidden; pointer-events: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; text-align: justify;][comment]
  1791.  
  1792. ------------------------------ art credit start ------------------------------>
  1793.  
  1794. [/comment][comment]
  1795.  
  1796. // header start //
  1797.  
  1798. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charBaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charBaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Credit Links[/border][/border][comment]
  1799.  
  1800. // header end //
  1801.  
  1802. [/comment][comment]
  1803.  
  1804. // text start //
  1805.  
  1806. [/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;][LIST=1]
  1807.  
  1808. [*] [URL="https://mobile.twitter.com/bababa_ee/status/1534498859317350401"]Main Image[/URL]
  1809.  
  1810. [*] [URL="https://mobile.twitter.com/pj_sekai/status/1539986641070301184"]Profile Icon[/URL]
  1811.  
  1812. [*] [URL="https://twitter.com/KeeUUU_/status/1568187597033467905"]Backstory[/URL]
  1813.  
  1814. [*] [URL="https://animesher.com/entry/water-ripple-blue-1744771/"]Ability[/URL]
  1815.  
  1816. [*] [URL="https://mobile.twitter.com/altrahydro/status/1478658885300883457"]Gallery Image 01[/URL]
  1817.  
  1818. [*] [URL="https://mobile.twitter.com/fujishiro74/status/1472169036960395270"]Gallery Image 02[/URL]
  1819.  
  1820. [*] [URL="https://www.pinterest.com/pin/175710822952938561/?nic_v3=1anKWycLY"]Gallery Image 03[/URL] (artist deactivated but their name is AB味噌)
  1821.  
  1822. [/LIST][/border][comment]
  1823.  
  1824. // text end //
  1825.  
  1826. [/comment][comment]
  1827.  
  1828. <------------------------------ art credit end ------------------------------
  1829.  
  1830. [/comment][comment]
  1831.  
  1832. ------------------------------ extras start ------------------------------>
  1833.  
  1834. [/comment][comment]
  1835.  
  1836. // header start //
  1837.  
  1838. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charBaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charBaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Extras[/border][/border][comment]
  1839.  
  1840. // header end //
  1841.  
  1842. [/comment][comment]
  1843.  
  1844. // text start //
  1845.  
  1846. [/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;][LIST=1]
  1847.  
  1848. [*] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio.
  1849.  
  1850. [*] Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam.
  1851.  
  1852. [*] Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis.
  1853.  
  1854. [*] Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.
  1855.  
  1856. [/LIST][/border][comment]
  1857.  
  1858. // text end //
  1859.  
  1860. [/comment][comment]
  1861.  
  1862. <------------------------------ extras end ------------------------------
  1863.  
  1864. [/comment][comment]
  1865.  
  1866. ------------------------------ gallery start ------------------------------>
  1867.  
  1868. [/comment][comment]
  1869.  
  1870. // header start //
  1871.  
  1872. [/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charBaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charBaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Gallery[/border][/border][comment]
  1873.  
  1874. // header end //
  1875.  
  1876. [/comment][comment]
  1877.  
  1878. // images start //
  1879.  
  1880. [/comment][border=0; padding: 0; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width calc(100% + 20px);][border=0; padding: 0; margin-left: 20px; flex: 2; width: 100%; min-width: 200px;][comment]
  1881.  
  1882. // image 01 start //
  1883.  
  1884. [/comment][border=0; padding: 0; position: relative;][border=0; padding: 0; margin-top: 10px; margin-left: 10px; width: calc(100% - 10px); height: 200px; background: var(--charBaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 200px; background: var(--charBgallery01); position: relative;][/border][/border][comment]
  1885.  
  1886. // image 01 end //
  1887.  
  1888. [/comment][comment]
  1889.  
  1890. // image 02 start //
  1891.  
  1892. [/comment][border=0; margin-top: 30px; padding: 0; position: relative;][border=0; padding: 0; margin-top: 10px; margin-left: 10px; width: calc(100% - 10px); height: 200px; background: var(--charBaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 200px; background: var(--charBgallery02); position: relative;][/border][/border][comment]
  1893.  
  1894. // image 02 end //
  1895.  
  1896. [/comment][/border][comment]
  1897.  
  1898. // image 03 start //
  1899.  
  1900. [/comment][border=0; padding: 0; margin-left: 20px; flex: 1; width: 100%; min-width: 200px; min-height: 200px; position: relative;][border=0; padding: 0; margin-top: 10px; margin-left: 10px; width: calc(100% - 10px); height: 100%; background: var(--charBaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 100%; background: var(--charBgallery03); position: relative;][/border][/border][comment]
  1901.  
  1902. // image 03 end //
  1903.  
  1904. [/comment][/border][comment]
  1905.  
  1906. // images end //
  1907.  
  1908. [/comment][comment]
  1909.  
  1910. <------------------------------ gallery end ------------------------------
  1911.  
  1912. [/comment][/border][/border][comment]
  1913.  
  1914. <-------------------- CharB Tab 05 Content Box End --------------------
  1915.  
  1916. [/comment][/border][/tab]
  1917.  
  1918.  
  1919.  
  1920.  
  1921.  
  1922.  
  1923.  
  1924.  
  1925.  
  1926.  
  1927.  
  1928. [/tabs][/border][comment]
  1929.  
  1930. <-------------------- CharB Content Tabs End --------------------
  1931.  
  1932. [/comment][/border][/tab]
  1933.  
  1934.  
  1935.  
  1936.  
  1937.  
  1938. [/tabs][comment]
  1939.  
  1940. // tab spacing junk start //
  1941.  
  1942. [/comment][border=0; padding: 0; margin-top: -176px; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px); position: relative; pointer-events: none; opacity: 0;][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative;][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px;][/border][/border][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative;][/border][/border][border=0; padding: 0; width: 100%; height: 200px; background: var(--bgcolor); position: absolute; top: -25px; pointer-events: none;][/border][border=0; padding: 0; width: 20px; height: 200px; position: absolute; top: -25px; left: 0;][/border][border=0; padding: 0; width: calc(100% - 110px); height: 200px; position: absolute; top: -25px; right: -10px;][/border][comment]
  1943.  
  1944. // tab spacing junk end //
  1945.  
  1946. [/comment][/border][/border][comment]
  1947.  
  1948. <---------- Character Select Tabs End ----------
  1949.  
  1950. [/comment][comment]
  1951.  
  1952. ---------- start of credits ---------->
  1953.  
  1954. [/comment][border=0; padding: 0; margin-top: 5px; width: 100%; font-family: var(--ENGfont); font-size: .6em; color: var(--blacktext); line-height: 100%; text-align: center; text-transform: uppercase;]Code by Nano[comment][USER=20950]@Nano[/USER][/comment][/border][comment]
  1955.  
  1956. <---------- end of credits ----------
  1957.  
  1958. [/comment][/border]
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!