1. [border=0; padding: 0; margin: 0 auto;
2.  
3.      // base character image;
4.    --character: url('https://i.imgur.com/5wkMY7A.png');
5.  
6.      // FEATURE COMING SOON!!;
7.    --mech: url('https://i.imgur.com/lY22F8G.jpg');
8.  
9. overflow: hidden; width: clamp(250px, 100%, 1300px);
10. display: flex; flex-flow: wrap
11.  
12. ][border=1px solid #2d2d2d; border-radius: 8px; padding: 18px 18px 18px 18px; width: clamp(250px, 100%, 360px); background: #0d0d0d; position: relative; height: 576px][border=0; padding: 0; box-sizing: border-box; width: 100%; height: 520px; background-image: var(--character); background-size: cover; border-radius: 8px; background-position: center center][/border][border=0; position: absolute; margin: 0 auto; left: 0; right: 0; border-radius: 8px; background: rgba(0,0,0,0.5); box-sizing: border-box; padding: 0; width: clamp(250px, 100%, 380px)][border=0; margin: 0 0 6px; padding: 12px 0 0 0; font: calc(18px - 0.25vw) Raleway; color: #a6a6a6; text-align: center; letter-spacing: 0.12em]ISCARIOTS OF SOLARION[/border][border=0; padding: 0 0 10px 0; font: calc(25px - 0.25vw) Josefin Sans; color: #8c0d26; text-align: center; line-height: 100%; letter-spacing: 0.15em]???[/border][/border][/border][comment]
13.  
14.  
15. [/comment][border=0; padding: 0 10px; flex: 1 1 auto; width: clamp(250px, 100%, 780px)][border=0; margin-top: 20px; padding: 0 0 6px 0; font: 38px Jura; line-height: 100%; letter-spacing: 0.1em; border-bottom: 2px solid #d7d7f1]INSERT NAME HERE[/border][border=0; border-bottom: 2px solid #d7d7f1; margin-top: 5px; padding: 0 10px 0 10px; display: flex; flex-flow: row wrap][comment]
16.  
17. // Full Name
18.  
19. [/comment][border=0; padding: 0; margin-top: 15px; width: clamp(250px, 100%, 250px)][border=0; padding: 0; font: 12px Jost; text-transform: uppercase; letter-spacing: 0.08em]LEGAL NAME[/border][border=0; margin-top: 6px; padding: 0; font: 15px Roboto; text-indent: 8px]. . .[/border][/border][comment]
20.  
21. // Age & Birth
22.  
23. [/comment][border=0; padding: 0; margin-top: 15px; width: clamp(250px, 100%, 250px)][border=0; padding: 0; font: 12px Jost; text-transform: uppercase; letter-spacing: 0.08em]AGE & BIRTH[/border][border=0; margin-top: 6px; padding: 0; font: 15px Roboto; text-indent: 8px]. . .[/border][/border][comment]
24.  
25. // Race
26.  
27. [/comment][border=0; padding: 0; margin-top: 15px; width: clamp(250px, 100%, 250px)][border=0; padding: 0; font: 12px Jost; text-transform: uppercase; letter-spacing: 0.08em]RACE[/border][border=0; margin-top: 6px; padding: 0; font: 15px Roboto; text-indent: 8px]. . .[/border][/border][comment]
28.  
29. // Gender
30.  
31. [/comment][border=0; padding: 0; margin-top: 15px; width: clamp(250px, 100%, 250px)][border=0; padding: 0; font: 12px Jost; text-transform: uppercase; letter-spacing: 0.08em]GENDER[/border][border=0; margin-top: 6px; padding: 0; font: 15px Roboto; text-indent: 8px]. . .[/border][/border][comment]
32.  
33.  
34. // Height
35.  
36. [/comment][border=0; padding: 0; margin-top: 15px; width: clamp(250px, 100%, 250px)][border=0; padding: 0; font: 12px Jost; text-transform: uppercase; letter-spacing: 0.08em]HEIGHT[/border][border=0; margin-top: 6px; padding: 0; font: 15px Roboto; text-indent: 8px]. . .[/border][/border][comment]
37.  
38.  
39. // Weight
40.  
41. [/comment][border=0; padding: 0; margin-top: 15px; width: clamp(250px, 100%, 250px)][border=0; padding: 0; font: 12px Jost; text-transform: uppercase; letter-spacing: 0.08em]WEIGHT[/border][border=0; margin-top: 6px; padding: 0; font: 15px Roboto; text-indent: 8px]. . .[/border][/border][comment]
42.  
43. // Ascalon Unit
44.  
45. [/comment][border=0; padding: 0; margin-top: 15px; width: clamp(250px, 100%, 250px)][border=0; padding: 0; font: 12px Jost; text-transform: uppercase; letter-spacing: 0.08em]ASCALON UNIT[/border][border=0; margin-top: 6px; padding: 0; font: 15px Roboto; text-indent: 8px]. . .[/border][/border][comment]
46.  
47. // Generation Model
48.  
49. [/comment][border=0; padding: 0; margin-top: 15px; width: clamp(250px, 100%, 250px)][border=0; padding: 0; font: 12px Jost; text-transform: uppercase; letter-spacing: 0.08em]GEN MODEL[/border][border=0; margin-top: 6px; padding: 0; font: 15px Roboto; text-indent: 8px]. . .[/border][/border][comment]
50.  
51. // TACTICAL POSITION
52.  
53. [/comment][border=0; padding: 0; margin-top: 15px; margin-bottom: 18px; width: clamp(250px, 100%, 250px)][border=0; padding: 0; font: 12px Jost; text-transform: uppercase; letter-spacing: 0.08em]TACTICAL POSITION[/border][border=0; margin-top: 6px; padding: 0; font: 15px Roboto; text-indent: 8px]. . .[/border][/border][/border][comment]
54.  
55. // General Description
56.  
57. [/comment][border=0; padding: 0; margin-top: 15px; overflow: hidden; font-family: 'Jost'; font-size: 15px; text-align: justify][border=1px solid rgba(90,90,90,0.42); padding: 13px 10px 10px 10px; font: 14px Josefin Sans; text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.2em; line-height: 100%; background: rgba(0,0,0,0.72); border-radius: 6px]I. GENERAL DESCRIPTION[/border][border=0; padding: 0 3px 15px 4px]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis nunc nec neque faucibus, at congue turpis luctus. Donec venenatis aliquet odio sed euismod. Praesent dignissim nibh sed tortor tristique, nec placerat quam eleifend. Nunc euismod odio sit amet leo cursus, at pharetra felis sagittis. Vivamus odio nisi, facilisis a sem eu, venenatis molestie massa. Cras non magna lorem.
58.  
59. Donec ultrices ex a dolor rhoncus, sit amet imperdiet metus aliquet. Nam volutpat eleifend suscipit. Ut porttitor arcu quis massa dapibus, quis fermentum est mattis. Vivamus pretium metus ac cursus semper. Donec ipsum lacus, pellentesque sit amet magna ut, ullamcorper varius mi. Pellentesque id sapien vitae eros laoreet molestie.[/border][comment]
60.  
61. // Personality
62.  
63. [/comment][border=1px solid rgba(90,90,90,0.42); padding: 13px 10px 10px 10px; font: 14px Josefin Sans; text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.2em; line-height: 100%; background: rgba(0,0,0,0.72); border-radius: 6px]II. PERSONALITY[/border][border=0; padding: 0 3px 15px 4px]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis nunc nec neque faucibus, at congue turpis luctus. Donec venenatis aliquet odio sed euismod. Praesent dignissim nibh sed tortor tristique, nec placerat quam eleifend. Nunc euismod odio sit amet leo cursus, at pharetra felis sagittis. Vivamus odio nisi, facilisis a sem eu, venenatis molestie massa. Cras non magna lorem. Nunc eu ante pulvinar, efficitur quam et, hendrerit orci. Ut in accumsan nisl. Nullam vel ante posuere, faucibus nibh eu, consequat dui.[/border][comment]
64.  
65. // Historical Biography
66.  
67. [/comment][border=1px solid rgba(90,90,90,0.42); padding: 13px 10px 10px 10px; font: 14px Josefin Sans; text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.2em; line-height: 100%; background: rgba(0,0,0,0.72); border-radius: 6px]III. HISTORICAL BIOGRAPHY[/border][border=0; padding: 0 3px 15px 4px]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis nunc nec neque faucibus, at congue turpis luctus. Donec venenatis aliquet odio sed euismod. Praesent dignissim nibh sed tortor tristique, nec placerat quam eleifend. Nunc euismod odio sit amet leo cursus, at pharetra felis sagittis. Vivamus odio nisi, facilisis a sem eu, venenatis molestie massa. Cras non magna lorem. Nunc eu ante pulvinar, efficitur quam et, hendrerit orci. Ut in accumsan nisl. Nullam vel ante posuere, faucibus nibh eu, consequat dui.
68.  
69. Donec ultrices ex a dolor rhoncus, sit amet imperdiet metus aliquet. Nam volutpat eleifend suscipit. Ut porttitor arcu quis massa dapibus, quis fermentum est mattis. Vivamus pretium metus ac cursus semper. Donec ipsum lacus, pellentesque sit amet magna ut, ullamcorper varius mi. Pellentesque id sapien vitae eros laoreet molestie. Suspendisse lobortis mi et nibh vulputate interdum.
70.  
71. Nullam tincidunt metus elit, congue condimentum elit pharetra in. Cras finibus scelerisque fermentum. Duis nec augue lobortis justo sollicitudin tempus quis id justo. Fusce dictum nibh quis quam convallis ullamcorper. Integer eu tincidunt justo. Mauris quam est, rutrum eu nibh vitae, bibendum convallis erat. Fusce faucibus lorem vel turpis maximus, at rhoncus lacus egestas. Mauris laoreet purus et purus maximus efficitur. Vestibulum massa sem, fermentum et orci sit amet, iaculis vehicula dui.
72. [/border][/border][/border][/border][comment][font=Raleway][font=Josefin Sans][font=Roboto][font=Jost][font=Jura].[/font][/font][/font][/font][/font][/comment]