gistfile1.txt

[border="0; padding: 0 0 65px;

//. Character Assets;
     --character: url('https://i.imgur.com/K9Ej0Uy.jpg') no-repeat 35% 15%/cover;
     --banner: url('https://i.imgur.com/K9Ej0Uy.jpg') no-repeat 50% 20%/cover;

     --symbol: url('https://i.imgur.com/lDfBNDf.png') no-repeat 50% 50%/cover;
     --symbol2: url('https://i.imgur.com/KHqIshV.png') no-repeat 50% 50%/cover;
     --bg-gr: linear-gradient(0deg, rgba(225,225,225,1) 0%, rgba(255,255,255,1) 100%);
     --bg-gr3: linear-gradient(-90deg, rgba(255 190 190 / 100%) 0%, rgba(255,255,255,0) 45%);
     --gradient-01: linear-gradient(90deg, rgba(195 195 195 / 100%) 80%, rgba(195 195 195 / 0%) 100%);
     --gradient-02: linear-gradient(270deg, rgba(195 195 195 / 100%) 80%, rgba(195 195 195 / 0%) 100%);
     --divider: url('https://i.imgur.com/k6Q9Y5b.png') no-repeat 50% 50%/cover;
     --cr-bg: url('https://i.imgur.com/kRvjYGy.jpg') no-repeat 50% 20%/cover;

display: flex; justify-content: center; flex-flow: column; align-items: center; background: white"][border=0; padding: 6px 12px; font-size: 10px; color: black; text-transform: uppercase][font=Jost]Design & Code by Serobliss[/font][/border][border=0; padding: 45px 0; box-sizing: border-box; width: 100%; margin-bottom: 15px; display: flex; justify-content: center; flex-flow: column; align-items: center; background: var(--banner); position: relative][border=0; padding: 0; height: 100%; position: absolute; left: 0; right: 0; top: 0; botton: 0; background: rgba(255 255 255 / 85%); z-index: 2][/border][border=0; box-sizing: border-box; width: 190px; height: 150px; background: var(--symbol); margin-bottom: 10px; z-index: 2][/border][border=0; padding: 0; color: black; font: 20px Cinzel, sans-serif; text-transform: lowercase; text-align: center; letter-spacing: 0.19em; line-height: 1; z-index: 2; text-shadow: 0 0 3px rgba(0 0 0 / 29%)]Axelis Fantasia[/border][comment]


――――――――――――― //. Your RPN Username (No @)
[/comment][border=0; padding: 0; color: black; font: 13px Cinzel, sans-serif; text-transform: lowercase; text-align: center; letter-spacing: 0.1em; line-height: 1; z-index: 2; margin-top: 4px; text-shadow: 0 0 1px rgba(0 0 0 / 85%)]Character by Untitled[/border][comment]

[/comment][/border][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: 0 auto 20px; box-sizing: border-box; width: 90%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 10px 0 10px; text-align: center; font: 32px Cinzel, sans-serif; line-height: 1; color: rgba(75 75 75); text-transform: lowercase]Chapter I. Introduction[/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][border=0; padding: 0; box-sizing: border-box; width: clamp(250px, 100%, 920px); display: flex; flex-flow: row wrap; justify-content: space-between; margin-top: 22px][comment]


――――――――――――― //. Music Player

• This music player only supports google drive.
• To change the music, please download the music and upload it on your google drive, copy the link, and place it under the appropriate section.
• If you need help, send me the YouTube link and I'll make the link for you.
• The link won't work if it's restricted to owner!

• If the link is:
[MEDIA=googledrive]1VaadN4A_rP0YB9aXHuzFPWjr4g4gYEVT[/MEDIA]

Then between the gdocs tag, place:
1VaadN4A_rP0YB9aXHuzFPWjr4g4gYEVT

[/comment][border=1px solid rgba(234 234 234); padding: 0; display: flex; flex-flow: row nowrap; pointer-events: none; box-sizing: border-box; width: clamp(250px, 100%, 920px); overflow: hidden; margin: 0 auto 15px; height: 32px][border=0; padding: 6px 2px; background: #3a3a3a; pointer-events: initial; box-sizing: border-box; width: clamp(250px, 100%, 325px)][border=0; padding: 0; box-sizing: border-box; width: clamp(250px, 100%, 325px); height: 20px; overflow: hidden][comment]

― Music (Your character's theme/flavor music)
[/comment][border=0; padding: 0; margin: -340px 0 0 -240px][gdoc]1VaadN4A_rP0YB9aXHuzFPWjr4g4gYEVT[/gdoc][/border][/border][/border][border=0; padding: 0 15px; flex: 1; box-sizing: border-box; min-width: 250px; background: rgba(244 244 244); color: rgba(45 45 45); text-transform: uppercase; display: flex; align-items: center][comment]

― Theme Title
[/comment][border=0; padding: 0; font-size: 14px; -webkit-font-smoothing: antialiased; text-shadow: 0 0 2px rgba(0 0 0 / 40%); pointer-events: initial][font=Oswald]Untitled Character - Main Theme[/font][/border][/border][/border][border=1px solid rgba(234 234 234); padding: 0; box-sizing: border-box; width: clamp(250px, 100%, 450px); background: var(--bg-gr); display: flex; flex-flow: column][border=0; padding: 30px; box-sizing: border-box; width: 100%; margin: auto; background: var(--character); height: 700px][border=1px solid #76757a; padding: 0; width: 100%; position: relative; box-sizing: border-box; height: 100%; border-bottom: 0; position: relative][border=0; padding: 0; position: absolute; bottom: 0; left: 0; box-sizing: border-box; width: 34%; height: 1px; background: #76757a][/border][border=0; padding: 0; position: absolute; bottom: 0; right: 0; box-sizing: border-box; width: 34%; height: 1px; background: #76757a][/border][comment]


――――――――――――― //. Character's Alias & Chaos Root Class (Hyreus or Archon)
[/comment][border=0; padding: 0; position: absolute; margin: auto; bottom: -14px; left: 0; right: 0; text-align: center; text-transform: uppercase; font-size: 14px; color: rgba(210 210 210); text-shadow: 0 0 2px rgba(215 215 215); line-height: 1][font=Cinzel]Khelarys[/font][border=0; padding: 0; font: 10px Cinzel]Chaos Root: Hyreus[/border][/border][/border][comment]


――――――――――――― //. Name
[/comment][/border][border=0; padding: 8px 12px 10px; box-sizing: border-box; width: 100%; background: #313131; font: 20px Cinzel; text-transform: lowercase; text-align: center; line-height: 1; color: white]Untitled Character[/border][/border][comment]

[/comment][border=1px solid rgba(234 234 234); padding: 40px 0; box-sizing: border-box; width: clamp(250px, 100%, 450px); margin-left: auto][border=0; padding: 0; margin: auto; box-sizing: border-box; width: clamp(250px, 100%, 390px)][border=0; padding: 0; box-sizing: border-box; position: relative; width: 100%; height: 660px][border=0; padding: 0; box-sizing: border-box; display: flex; flex-flow: column nowrap; overflow: hidden; width: 100%; height: 100%][border=0; padding: 0; width: 200%; height: 100%; overflow-y: scroll][border="0; padding: 0 8px 0 16px; box-sizing: border-box; width: 50%; height: auto; font-family: 'Source Sans Pro', sans-serif; font-size: 13px; color: rgba(45 45 45); text-align: justify"][border=0; padding: 4px 12px 5px; background: #313131; font: 20px Cinzel; text-transform: lowercase; text-align: center; line-height: 1; color: white; margin-bottom: 10px]Profile[/border][border=0; padding: 0; text-align: center; font: 20px Cinzel; color: #313131]General Information[/border][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: -2px auto 6px; box-sizing: border-box; width: 100%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 7px 0; background: var(--divider); box-sizing: border-box; width: 22px; height: 22px][/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][comment]


――――――――――――― //. Race
[/comment][border=0; padding: 0; display: flex; flex-flow: row nowrap; overflow-x: auto; overflow-y: hidden; line-height: 1][border=0; padding: 4px 0 0; box-sizing: border-box; width: 40px; color: #111][font=Bebas Neue]Race[/font][/border][border=0; padding: 2px 8px 0; flex: 1; color: #595959; background: #f5f5f5; font: 14px Bebas Neue]Untitled[/border][/border][comment]


――――――――――――― //. Gender
[/comment][border=0; padding: 0; display: flex; flex-flow: row nowrap; overflow-x: auto; overflow-y: hidden; line-height: 1; margin-top: 5px][border=0; padding: 4px 0 0; box-sizing: border-box; width: 40px; color: #111][font=Bebas Neue]Gender[/font][/border][border=0; padding: 2px 8px 0; flex: 1; color: #595959; background: #f5f5f5; font: 14px Bebas Neue]Untitled[/border][/border][comment]


――――――――――――― //. Age
[/comment][border=0; padding: 0; display: flex; flex-flow: row nowrap; overflow-x: auto; overflow-y: hidden; line-height: 1; margin-top: 5px][border=0; padding: 4px 0 0; box-sizing: border-box; width: 40px; color: #111][font=Bebas Neue]Age[/font][/border][border=0; padding: 2px 8px 0; flex: 1; color: #595959; background: #f5f5f5; font: 14px Bebas Neue]Untitled[/border][/border][comment]


――――――――――――― //. Height (Use Metrics)
[/comment][border=0; padding: 0; display: flex; flex-flow: row nowrap; overflow-x: auto; overflow-y: hidden; line-height: 1; margin-top: 5px][border=0; padding: 4px 0 0; box-sizing: border-box; width: 40px; color: #111][font=Bebas Neue]Height[/font][/border][border=0; padding: 2px 8px 0; flex: 1; color: #595959; background: #f5f5f5; font: 14px Bebas Neue]Untitled[/border][/border][comment]


――――――――――――― //. Class (Hyreus or Archon)
[/comment][border=0; padding: 0; display: flex; flex-flow: row nowrap; overflow-x: auto; overflow-y: hidden; line-height: 1; margin-top: 5px][border=0; padding: 4px 0 0; box-sizing: border-box; width: 40px; color: #111][font=Bebas Neue]Class[/font][/border][border=0; padding: 2px 8px 0; flex: 1; color: #595959; background: #f5f5f5; font: 14px Bebas Neue]Untitled[/border][/border][comment]


――――――――――――― //. Origin (Birthplace)
[/comment][border=0; padding: 0; display: flex; flex-flow: row nowrap; overflow-x: auto; overflow-y: hidden; line-height: 1; margin-top: 5px][border=0; padding: 4px 0 0; box-sizing: border-box; width: 40px; color: #111][font=Bebas Neue]Origin[/font][/border][border=0; padding: 2px 8px 0; flex: 1; color: #595959; background: #f5f5f5; font: 14px Bebas Neue]Untitled[/border][/border][comment]


――――――――――――― //. General Description
[/comment][border=0; padding: 4px 12px 5px; background: #313131; font: 20px Cinzel; text-transform: lowercase; text-align: center; line-height: 1; color: white; margin: 35px 0 10px]Description[/border][border=0; padding: 0; text-align: center; font: 20px Cinzel; color: #313131]Scorching Inflorescence[/border][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: -2px auto 6px; box-sizing: border-box; width: 100%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 7px 0; background: var(--divider); box-sizing: border-box; width: 22px; height: 22px][/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][comment]

― Text Input 
[/comment][font=Source Sans Pro]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/font][comment]


――――――――――――― //. Ambitions
[/comment][border=0; padding: 4px 12px 5px; background: #313131; font: 20px Cinzel; text-transform: lowercase; text-align: center; line-height: 1; color: white; margin: 35px 0 10px]Ambitions[/border][border=0; padding: 0; text-align: center; font: 18px Cinzel; color: #313131]Inner Aspirations[/border][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: -2px auto 6px; box-sizing: border-box; width: 100%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 7px 0; background: var(--divider); box-sizing: border-box; width: 22px; height: 22px][/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][comment]

― Text Input 
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[comment]


――――――――――――― //. Ambitions
[/comment][border=0; padding: 4px 12px 5px; background: #313131; font: 20px Cinzel; text-transform: lowercase; text-align: center; line-height: 1; color: white; margin: 35px 0 10px]Regrets[/border][border=0; padding: 0; text-align: center; font: 20px Cinzel; color: #313131]Past Failures[/border][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: -2px auto 6px; box-sizing: border-box; width: 100%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 7px 0; background: var(--divider); box-sizing: border-box; width: 22px; height: 22px][/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][comment]

― Text Input 
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/border][/border][/border][/border][/border][/border][/border][comment]

[/comment][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: 45px auto 20px; box-sizing: border-box; width: 90%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 10px 0 10px; text-align: center; font: 32px Cinzel, sans-serif; line-height: 1; color: rgba(75 75 75); text-transform: lowercase]Chapter II. Combat Statistic[/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][border=1px solid rgba(234 234 234); padding: 60px 0; box-sizing: border-box; width: clamp(250px, 100%, 920px); margin-top: 22px][border="0; padding: 0 12px; box-sizing: border-box; width: clamp(250px, 100%, 780px); margin: auto; font-family: 'Source Sans Pro', sans-serif; font-size: 13px; color: rgba(45 45 45); text-align: justify"][border=0; padding: 45px 0; background: var(--cr-bg); position: relative; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; box-sizing: border-box; height: 250px][border=0; padding: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0 0 0 / 25%)][/border][/border][comment]


――――――――――――― //. Ambitions
[/comment][border=0; padding: 4px 12px 5px; background: #313131; font: 20px Cinzel; text-transform: lowercase; text-align: center; line-height: 1; color: white; margin: 15px 0 10px]Chaos Root: Archon[/border][border=0; padding: 0; text-align: center; font: 20px Cinzel; color: #313131]Awakening History & Experiences[/border][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: -2px auto 6px; box-sizing: border-box; width: 100%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 7px 0; background: var(--divider); box-sizing: border-box; width: 22px; height: 22px][/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][comment]

― Text Input 
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus, purus at accumsan viverra, orci lacus varius massa, sit amet volutpat ligula mauris ut orci. Vestibulum in lacus volutpat, mattis mauris nec, laoreet ipsum. Vivamus nec purus tincidunt, eleifend ex sit amet, tincidunt diam. Nunc non auctor mauris. Donec sollicitudin tempor risus viverra rutrum. Etiam interdum ipsum leo, a luctus nibh placerat in. Sed quis fermentum felis. Aliquam porttitor urna sit amet eros viverra eleifend. Nullam non enim dolor.[comment]

[/comment][border=0; padding: 4px 12px 5px; background: #313131; font: 20px Cinzel; text-transform: lowercase; text-align: center; line-height: 1; color: white; margin: 35px 0 10px]Physical Examination[/border][border=0; padding: 0; text-align: center; font: 20px Cinzel; color: #313131]Strength Measurement[/border][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: -2px auto 6px; box-sizing: border-box; width: 100%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 7px 0; background: var(--divider); box-sizing: border-box; width: 22px; height: 22px][/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][comment]


――――――――――――― //. Physical Examination

Before you get into this, please read this!

• To change the stat bar, modify the width percentage of the last border for each section.

• The stat system will not be utilized too heavily in the roleplay, but they must be accurate according to your character.
• For starters, the standard stat of the average civilian, regardless of their race, will be 10% on all stats.
• Meaning, you must at least have 10% on every stat.
• The average footsoldier (not Imperial Knights) have around 15-20% on each stat.
• The average Imperial Knight has around 40-50% on their best stats, but not all.

• Lesser and Greater Vile Beasts do not fall on this category.
• Most antagonist characters will not fall on this category.
• Do not go above 70%. The 70-100% has an enormous power gap, reserved only for NPCs and other important major characters.

[/comment][comment]

― Strength
[/comment][border=0; padding: 0; display: flex; flex-flow: row nowrap; overflow-x: auto; overflow-y: hidden; line-height: 1][border=0; padding: 4px 0 0; box-sizing: border-box; width: 60px; color: #111; font-size: 15px][font=Bebas Neue]Strength[/font][/border][border=1px solid #d9d9d9; padding: 4px; flex: 1; background: var(--bg-gr3); box-sizing: border-box; height: 22px][border=0; padding: 0; box-sizing: border-box; background: #a30f2d; width: 14%; height: 100%][/border][/border][/border][comment]

― Mobility
[/comment][border=0; padding: 0; display: flex; flex-flow: row nowrap; overflow-x: auto; overflow-y: hidden; line-height: 1; margin-top: 4px][border=0; padding: 4px 0 0; box-sizing: border-box; width: 60px; color: #111; font-size: 15px][font=Bebas Neue]Mobility[/font][/border][border=1px solid #d9d9d9; padding: 4px; flex: 1; background: var(--bg-gr3); box-sizing: border-box; height: 22px][border=0; padding: 0; box-sizing: border-box; background: #a30f2d; width: 31%; height: 100%][/border][/border][/border][comment]

― Endurance
[/comment][border=0; padding: 0; display: flex; flex-flow: row nowrap; overflow-x: auto; overflow-y: hidden; line-height: 1; margin-top: 4px][border=0; padding: 4px 0 0; box-sizing: border-box; width: 60px; color: #111; font-size: 15px][font=Bebas Neue]Endurance[/font][/border][border=1px solid #d9d9d9; padding: 4px; flex: 1; background: var(--bg-gr3); box-sizing: border-box; height: 22px][border=0; padding: 0; box-sizing: border-box; background: #a30f2d; width: 12%; height: 100%][/border][/border][/border][comment]

― Arts (Your character's efficiency rating with their Chaos Root)
[/comment][border=0; padding: 0; display: flex; flex-flow: row nowrap; overflow-x: auto; overflow-y: hidden; line-height: 1; margin-top: 4px][border=0; padding: 4px 0 0; box-sizing: border-box; width: 60px; color: #111; font-size: 15px][font=Bebas Neue]Arts[/font][/border][border=1px solid #d9d9d9; padding: 4px; flex: 1; background: var(--bg-gr3); box-sizing: border-box; height: 22px][border=0; padding: 0; box-sizing: border-box; background: #a30f2d; width: 39%; height: 100%][/border][/border][/border][comment]

― Control (How well they can manage their mana)
[/comment][border=0; padding: 0; display: flex; flex-flow: row nowrap; overflow-x: auto; overflow-y: hidden; line-height: 1; margin-top: 4px][border=0; padding: 4px 0 0; box-sizing: border-box; width: 60px; color: #111; font-size: 15px][font=Bebas Neue]Control[/font][/border][border=1px solid #d9d9d9; padding: 4px; flex: 1; background: var(--bg-gr3); box-sizing: border-box; height: 22px][border=0; padding: 0; box-sizing: border-box; background: #a30f2d; width: 61%; height: 100%][/border][/border][/border][comment]


――――――――――――― //. Inventory

• You cannot have more than 5 active items.
• Chaos Root-powered accessories, pets, and tamed Vile Beasts go under this category.

[/comment][border=0; padding: 4px 12px 5px; background: #313131; font: 20px Cinzel; text-transform: lowercase; text-align: center; line-height: 1; color: white; margin: 35px 0 10px]Inventory[/border][comment]

――――――――――――― //. Item 1
[/comment][border=0; padding: 0; text-align: center; font: 20px Cinzel; color: #313131]Item One[/border][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: -2px auto 6px; box-sizing: border-box; width: 100%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 7px 0; background: var(--divider); box-sizing: border-box; width: 22px; height: 22px][/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][comment]

― Text Input
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus, purus at accumsan viverra, orci lacus varius massa, sit amet volutpat ligula mauris ut orci. Vestibulum in lacus volutpat, mattis mauris nec, laoreet ipsum. Vivamus nec purus tincidunt, eleifend ex sit amet, tincidunt diam. Nunc non auctor mauris. Donec sollicitudin tempor risus viverra rutrum. Etiam interdum ipsum leo, a luctus nibh placerat in. Sed quis fermentum felis. Aliquam porttitor urna sit amet eros viverra eleifend. Nullam non enim dolor.[comment]

――――――――――――― //. Item 2
[/comment][border=0; padding: 0; text-align: center; font: 20px Cinzel; color: #313131; margin-top: 35px]Item Two[/border][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: -2px auto 6px; box-sizing: border-box; width: 100%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 7px 0; background: var(--divider); box-sizing: border-box; width: 22px; height: 22px][/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][comment]

― Text Input
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus, purus at accumsan viverra, orci lacus varius massa, sit amet volutpat ligula mauris ut orci. Vestibulum in lacus volutpat, mattis mauris nec, laoreet ipsum. Vivamus nec purus tincidunt, eleifend ex sit amet, tincidunt diam. Nunc non auctor mauris. Donec sollicitudin tempor risus viverra rutrum. Etiam interdum ipsum leo, a luctus nibh placerat in. Sed quis fermentum felis. Aliquam porttitor urna sit amet eros viverra eleifend. Nullam non enim dolor.[comment]

――――――――――――― //. Item 3
[/comment][border=0; padding: 0; text-align: center; font: 20px Cinzel; color: #313131; margin-top: 35px]Item Three[/border][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: -2px auto 6px; box-sizing: border-box; width: 100%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 7px 0; background: var(--divider); box-sizing: border-box; width: 22px; height: 22px][/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][comment]

― Text Input
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus, purus at accumsan viverra, orci lacus varius massa, sit amet volutpat ligula mauris ut orci. Vestibulum in lacus volutpat, mattis mauris nec, laoreet ipsum. Vivamus nec purus tincidunt, eleifend ex sit amet, tincidunt diam. Nunc non auctor mauris. Donec sollicitudin tempor risus viverra rutrum. Etiam interdum ipsum leo, a luctus nibh placerat in. Sed quis fermentum felis. Aliquam porttitor urna sit amet eros viverra eleifend. Nullam non enim dolor.[/border][/border][comment]

[/comment][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: 45px auto 20px; box-sizing: border-box; width: 90%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 10px 0 10px; text-align: center; font: 32px Cinzel, sans-serif; line-height: 1; color: rgba(75 75 75); text-transform: lowercase]Chapter III. Background[/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][border=1px solid rgba(234 234 234); padding: 40px 0; box-sizing: border-box; width: clamp(250px, 100%, 920px); margin-top: 22px][border="0; padding: 0 12px; box-sizing: border-box; width: clamp(250px, 100%, 780px); margin: auto; font-family: 'Source Sans Pro', sans-serif; font-size: 13px; color: rgba(45 45 45); text-align: justify"][comment]

――――――――――――― //. Backstory Title
[/comment][border=0; padding: 4px 12px 5px; background: #313131; font: 20px Cinzel; text-transform: lowercase; text-align: center; line-height: 1; color: white; margin: 15px 0 10px]Backstory Title[/border][comment]

――――――――――――― //. Act 1. Childhood (You may change)
[/comment][border=0; padding: 0; text-align: center; font: 20px Cinzel; color: #313131]Act I. Childhood[/border][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: -2px auto 6px; box-sizing: border-box; width: 100%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 7px 0; background: var(--divider); box-sizing: border-box; width: 22px; height: 22px][/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][comment]

― Text Input
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus, purus at accumsan viverra, orci lacus varius massa, sit amet volutpat ligula mauris ut orci. Vestibulum in lacus volutpat, mattis mauris nec, laoreet ipsum. Vivamus nec purus tincidunt, eleifend ex sit amet, tincidunt diam. Nunc non auctor mauris. Donec sollicitudin tempor risus viverra rutrum. Etiam interdum ipsum leo, a luctus nibh placerat in. Sed quis fermentum felis. Aliquam porttitor urna sit amet eros viverra eleifend. Nullam non enim dolor.

Vivamus eu laoreet quam, eget varius augue. Aliquam rhoncus mauris et aliquet porta. Duis est sapien, ultrices sollicitudin risus id, suscipit semper felis. Maecenas malesuada volutpat vehicula. Fusce semper eleifend orci sit amet accumsan. In volutpat velit a felis aliquam, nec hendrerit erat volutpat. Vestibulum eleifend dictum neque, non dictum nibh dictum in. Maecenas quis justo vulputate, blandit tortor at, lobortis mi. Donec tincidunt nulla eget mi tempor, vel aliquet sapien cursus. Cras rutrum elit sit amet mi elementum lobortis.[comment]



//. Act 2. Early Life
[/comment][border=0; padding: 0; text-align: center; font: 20px Cinzel; color: #313131; margin-top: 40px]Act II. Early Life[/border][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: -2px auto 6px; box-sizing: border-box; width: 100%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 7px 0; background: var(--divider); box-sizing: border-box; width: 22px; height: 22px][/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][comment]

― Text Input
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus, purus at accumsan viverra, orci lacus varius massa, sit amet volutpat ligula mauris ut orci. Vestibulum in lacus volutpat, mattis mauris nec, laoreet ipsum. Vivamus nec purus tincidunt, eleifend ex sit amet, tincidunt diam. Nunc non auctor mauris. Donec sollicitudin tempor risus viverra rutrum. Etiam interdum ipsum leo, a luctus nibh placerat in. Sed quis fermentum felis. Aliquam porttitor urna sit amet eros viverra eleifend. Nullam non enim dolor.

Vivamus eu laoreet quam, eget varius augue. Aliquam rhoncus mauris et aliquet porta. Duis est sapien, ultrices sollicitudin risus id, suscipit semper felis. Maecenas malesuada volutpat vehicula. Fusce semper eleifend orci sit amet accumsan. In volutpat velit a felis aliquam, nec hendrerit erat volutpat. Vestibulum eleifend dictum neque, non dictum nibh dictum in. Maecenas quis justo vulputate, blandit tortor at, lobortis mi. Donec tincidunt nulla eget mi tempor, vel aliquet sapien cursus. Cras rutrum elit sit amet mi elementum lobortis.[comment]



//. Act 3. Adulthood
[/comment][border=0; padding: 0; text-align: center; font: 20px Cinzel; color: #313131; margin-top: 40px]Act III. Adulthood[/border][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: -2px auto 6px; box-sizing: border-box; width: 100%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 7px 0; background: var(--divider); box-sizing: border-box; width: 22px; height: 22px][/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][comment]

― Text Input
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus, purus at accumsan viverra, orci lacus varius massa, sit amet volutpat ligula mauris ut orci. Vestibulum in lacus volutpat, mattis mauris nec, laoreet ipsum. Vivamus nec purus tincidunt, eleifend ex sit amet, tincidunt diam. Nunc non auctor mauris. Donec sollicitudin tempor risus viverra rutrum. Etiam interdum ipsum leo, a luctus nibh placerat in. Sed quis fermentum felis. Aliquam porttitor urna sit amet eros viverra eleifend. Nullam non enim dolor.

Vivamus eu laoreet quam, eget varius augue. Aliquam rhoncus mauris et aliquet porta. Duis est sapien, ultrices sollicitudin risus id, suscipit semper felis. Maecenas malesuada volutpat vehicula. Fusce semper eleifend orci sit amet accumsan. In volutpat velit a felis aliquam, nec hendrerit erat volutpat. Vestibulum eleifend dictum neque, non dictum nibh dictum in. Maecenas quis justo vulputate, blandit tortor at, lobortis mi. Donec tincidunt nulla eget mi tempor, vel aliquet sapien cursus. Cras rutrum elit sit amet mi elementum lobortis.[comment]



//. Act 4. Extras
[/comment][border=0; padding: 0; text-align: center; font: 20px Cinzel; color: #313131; margin-top: 40px]Act IV. Extra Chapter[/border][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: -2px auto 6px; box-sizing: border-box; width: 100%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 7px 0; background: var(--divider); box-sizing: border-box; width: 22px; height: 22px][/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][comment]

― Text Input
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus, purus at accumsan viverra, orci lacus varius massa, sit amet volutpat ligula mauris ut orci. Vestibulum in lacus volutpat, mattis mauris nec, laoreet ipsum. Vivamus nec purus tincidunt, eleifend ex sit amet, tincidunt diam. Nunc non auctor mauris. Donec sollicitudin tempor risus viverra rutrum. Etiam interdum ipsum leo, a luctus nibh placerat in. Sed quis fermentum felis. Aliquam porttitor urna sit amet eros viverra eleifend. Nullam non enim dolor.

Vivamus eu laoreet quam, eget varius augue. Aliquam rhoncus mauris et aliquet porta. Duis est sapien, ultrices sollicitudin risus id, suscipit semper felis. Maecenas malesuada volutpat vehicula. Fusce semper eleifend orci sit amet accumsan. In volutpat velit a felis aliquam, nec hendrerit erat volutpat. Vestibulum eleifend dictum neque, non dictum nibh dictum in. Maecenas quis justo vulputate, blandit tortor at, lobortis mi. Donec tincidunt nulla eget mi tempor, vel aliquet sapien cursus. Cras rutrum elit sit amet mi elementum lobortis.[comment]



//. Act 5. Extras
[/comment][border=0; padding: 0; text-align: center; font: 20px Cinzel; color: #313131; margin-top: 40px]Act V. Extra Chapter[/border][border=0; padding: 3px 20px; display: flex; flex-flow: row nowrap; align-items: center; margin: -2px auto 6px; box-sizing: border-box; width: 100%][border=0; padding: 0; flex: 5; background: var(--gradient-01); box-sizing: border-box; height: 1px][/border][border=0; padding: 0; margin: 0 7px 0; background: var(--divider); box-sizing: border-box; width: 22px; height: 22px][/border][border=0; padding: 0; flex: 5; background: var(--gradient-02); box-sizing: border-box; height: 1px][/border][/border][comment]

― Text Input
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus, purus at accumsan viverra, orci lacus varius massa, sit amet volutpat ligula mauris ut orci. Vestibulum in lacus volutpat, mattis mauris nec, laoreet ipsum. Vivamus nec purus tincidunt, eleifend ex sit amet, tincidunt diam. Nunc non auctor mauris. Donec sollicitudin tempor risus viverra rutrum. Etiam interdum ipsum leo, a luctus nibh placerat in. Sed quis fermentum felis. Aliquam porttitor urna sit amet eros viverra eleifend. Nullam non enim dolor.

Vivamus eu laoreet quam, eget varius augue. Aliquam rhoncus mauris et aliquet porta. Duis est sapien, ultrices sollicitudin risus id, suscipit semper felis. Maecenas malesuada volutpat vehicula. Fusce semper eleifend orci sit amet accumsan. In volutpat velit a felis aliquam, nec hendrerit erat volutpat. Vestibulum eleifend dictum neque, non dictum nibh dictum in. Maecenas quis justo vulputate, blandit tortor at, lobortis mi. Donec tincidunt nulla eget mi tempor, vel aliquet sapien cursus. Cras rutrum elit sit amet mi elementum lobortis.[/border][/border][/border]