01: Velterius Lost

gistfile1.txt

[comment][font=Jost][font=Iceland][font=Montserrat Subrayada][font=Blinker]

Code by Serobliss

[/font][/font][/font][/font][/comment][border=0;

          // Miscellaneous;
                  --cur: url('https://web.hycdn.cn/arknights/official/static/cursor-inner.1d69419cb78ed4579ad9.png');
                  --bg_symbol: url('https://i.imgur.com/5Cs5rOh.png');
                  --tab_covers: url('https://i.imgur.com/8pElyw3.jpg');
                  --bg_first: url('https://i.imgur.com/X5eOTbx.png');
                  --bg_second: url('https://i.imgur.com/tExjDED.jpg');
                  --bg_third: url('https://i.imgur.com/6caOq2E.jpg');

          // Control Panel (Header);
                  --intro01: url('https://i.imgur.com/bkCIOum.png');
                  --intro02: url('https://i.imgur.com/bMM5yFP.jpg');
                  --intro03: url('https://static.zerochan.net/Bethlehem.full.3357969.jpg');
                  --intro04: url('https://i.imgur.com/DRSPKq7.jpg');

          // Control Panel (Interest Check);
                  --intche01: url('https://i.imgur.com/P9QOMY4.jpg');
                  --intche02: url('https://i.imgur.com/Syf7IXO.jpg');
                  --intche03: url('https://i.imgur.com/RUDpsuq.jpg');
                  --intche04: url('https://i.imgur.com/CStvXVr.jpg');
                  --intche05: url('https://i.imgur.com/yLIoaix.jpg');
                  --intche06: url('https://i.imgur.com/BeKlP81.jpg');
                  --intche07: url('https://i.imgur.com/4iMYc3T.jpg');

          // Control Panel (Characters List);
                  --charli01: url('https://i.imgur.com/iwEn695.jpg');
                  --charli02: url('https://i.imgur.com/nBDigLj.jpg');
                  --charli03: url('https://static.zerochan.net/Bethlehem.full.3359201.jpg');
                  --charli04: url('https://i.imgur.com/B3xQWyq.png');
                  --charli05: url('https://i.imgur.com/TEYrtSp.jpg');
                  --charli06: url('https://i.imgur.com/ksEiYuL.jpg');

padding: 0; box-sizing: border-box; width: 100%; cursor: var(--cur), pointer; pointer-events: auto][comment]

// Header --- (Setup)
[/comment][border=0; padding: 35px 0; background-image: var(--bg_first); background-size: cover][border=0; padding: 0; margin: auto; display: flex; flex-flow: row wrap; justify-content: space-around; box-sizing: border-box; width: clamp(250px, 100%, 1300px)][comment]

// Header --- (Left Side)
[/comment][border=0; padding: 40px 0 0; box-sizing: border-box; width: clamp(250px, 100%, 600px); position: relative][border=0; padding: 0; position: absolute; top: 15px; left: 0; right: 0; margin: 0 auto; width: 170px; height: 170px; background-image: var(--bg_symbol); background-size: cover; background-position: center center; z-index: 2][/border][border=0; padding: 0; font-family: 'Iceland'; font-size: 6vh; color: rgba(230,235,245); text-align: center; line-height: 94%; position: relative; z-index: 3]VELTERIUS LOST[border=0; padding: 0; margin: auto; font-family: 'Montserrat Subrayada'; font-size: 18px; color: crimson; line-height: 100%; position: relative; z-index: 3]ABSOLUTE DEMONIC FRONT[border=0; padding: 0; box-sizing: border-box; width: clamp(250px, 100%, 500px); margin: 8px auto 0; flex-flow: row wrap; display: flex; justify-content: center][border=0; padding: 2px 5px 1px; border-radius: 4px; background: crimson; text-align: center; color: black; font: normal 700 12px Jost; margin: 0 2px]SCIENCE FANTASY[/border][border=0; padding: 2px 5px 1px; border-radius: 4px; background: crimson; text-align: center; color: black; font: normal 700 12px Jost; margin: 0 2px]MMORPG[/border][border=0; padding: 2px 5px 1px; border-radius: 4px; background: crimson; text-align: center; color: black; font: normal 700 12px Jost; margin: 0 2px]GAME MECHANICS[/border][/border][/border][/border][border=0; padding: 0; margin-top: 8px; color: #d9d9d9; text-transform: uppercase; text-align: center; position: relative; z-index: 150; font: normal 300 9px Jost; letter-spacing: 0.2em]Code by Serobliss[/border][/border][comment]

// Header --- (Right Side)
[/comment][border=0; padding: 0; box-sizing: border-box; position: relative; width: fit-content; width: -moz-fit-content; display: flex; flex-flow: row wrap; justify-content: center][border=0; padding: 0; width: 10px; transform: skew(-13deg); background: maroon; margin-right: -7px; box-sizing: border-box][/border][border=0; padding: 0; box-sizing: border-box; width: 220px; height: 150px; background-image: var(--intro01); background-size: cover; background-position: center 46%; clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%); margin: 5px 0; z-index: 3][/border][border=0; padding: 0; box-sizing: border-box; width: 220px; height: 150px; background-image: var(--intro02); background-size: cover; background-position: left 60%; clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%); margin: 5px 0 5px -20px][/border][border=0; padding: 0; box-sizing: border-box; width: 220px; height: 150px; background-image: var(--intro03); background-size: cover; background-position: center 90%; clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%); margin: 5px 0 5px -20px][/border][border=0; padding: 0; width: 10px; transform: skew(-13deg); background: maroon; margin-left: -7px; box-sizing: border-box][/border][/border][/border][/border][comment]

// Second Page, Interest Check --- (Setup)
[/comment][border=0; padding: 60px 0; border-top: 1px solid rgba(65,65,65); background-image: var(--bg_second); background-size: cover; background-position: center top][border=0; padding: 0; box-sizing: border-box; width: clamp(250px, 100%, 1340px); display: flex; flex-flow: row wrap; margin: 0 auto; justify-content: space-evenly][comment]

// Second Page, Interest Check --- (Image)
[/comment][border=1px solid #997a00; box-shadow: 0 0 15px rgba(0,0,0,0.5); padding: 12px; box-sizing: border-box; width: clamp(250px, 100%, 450px); height: 580px; background: rgba(20,20,20,0.5)][border=0; padding: 0; height: 100%; background-image: var(--intro04); background-size: 130% auto; background-position: 70% 10%; position: relative; overflow: hidden][comment]

// Second Page, Interest Check --- (Text)
[/comment][border=0; padding: 6px 15px; position: absolute; box-sizing: border-box; width: calc(100% + 1px); height: 188px; top: 70%; right: -1px; background: rgba(0,0,0,0.75); clip-path: polygon(0 0, 40% 0, 50% 20%, 100% 20%, 100% 100%, 0 100%); font: normal 300 3.7vh Iceland; line-height: 100%; color: rgba(248,248,255)]CERBERUS[border=0; padding: 4px 0 0; background: #cca300; width: 50px; margin: 3px 0 7px 2px][/border][border=0; padding: 0 0 0 3px; font-family: 'Blinker', sans-serif; font-size: 14px; line-height: 140%]Welcome to the tutorial, Handler.[border=0; padding: 0; height: 9px][/border]Let's get started with the basics, shall we? It'll be important for your future endeavors. Tap onto the buttons above to get started.[/border][/border][/border][/border][comment]

// Second Page, Interest Check --- (Right Side)
[/comment][border=0; padding: 0; box-sizing: border-box; width: clamp(250px, 100%, 780px); height: 580px; display: flex; flex-flow: column nowrap][border=0; padding: 0; height: 50px][border=0; padding: 0; height: 100%; width: 100%; margin-bottom: 10px; font-family: 'Roboto Mono', monospace; line-height: 350%; z-index: 5][comment]

// Second Page, Interest Check --- (Tab 1)
[/comment][tabs][tab=XXXXXX1][border=0; padding: 0; width: 121px; height: 50px; position: absolute; margin-top: -80px; margin-left: -20px; pointer-events: none; background-image: var(--tab_covers); background-size: 220% auto; background-position: center center; z-index: 100][border=1px solid #997a00; padding: 0; height: 100%; text-align: center; font: normal 300 15px Jost; color: rgba(75,75,75); line-height: 330%; letter-spacing: 0.1em; border-bottom: 4px solid #910000]「 INTRO 」[/border][/border][border=0; padding: 0 200px 0 0; box-sizing: content-box; width: clamp(250px, 100%, 960px); position: relative; font-family: 'Blinker', sans-serif; font-size: 13px; color: rgba(225,225,225); text-align: left; line-height: 180%; height: 470px; overflow-x: hidden; overflow-y: scroll][comment]

// Second Page, Interest Check -- (Tab 1 Text Area)
[/comment][border=1px solid rgba(50,50,50,0.8); padding: 8px; box-sizing: border-box; width: clamp(250px, 100%, 600px); height: 120px; margin: 5px 0 8px 16px][border=0; padding: 0; height: 100%; background-image: var(--intche01); background-size: cover; background-position: center center; clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%, 35% 85%, 0 85%); position: relative][border=0; padding: 0; position: absolute; bottom: 19px; left: 12px; color: #eb2d53; text-transform: uppercase; font: 18px Montserrat Subrayada; z-index: 15]VELTERIUS LOST[/border][/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue purus sed tellus lobortis, eu tempus magna posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat, orci a fringilla aliquet, libero lectus porttitor magna, non consequat sem nisi sed erat. Nam euismod et leo sed egestas. Ut maximus varius malesuada. In hac habitasse platea dictumst. Suspendisse quis laoreet ex. Fusce hendrerit ante ac urna placerat scelerisque. Morbi et rutrum arcu. Praesent quis massa vitae dolor feugiat fermentum. Pellentesque dignissim odio ac sem consequat posuere. Aliquam vel orci euismod, ornare ex a, sodales est. Quisque dignissim ultricies fringilla.

Etiam sollicitudin lorem justo, eu tempus erat rutrum et. Proin quis tortor vel augue luctus mollis eget eu nulla. Mauris erat orci, lacinia in dolor non, fringilla suscipit purus. In nec porta nibh. Etiam id augue suscipit, porta sem a, bibendum velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer bibendum eget ligula non faucibus. Nunc id metus urna. Etiam fermentum iaculis lacinia. Nunc malesuada pellentesque turpis, ornare vestibulum magna tempor nec. In a purus elit.

Nam ac nibh lobortis, condimentum magna sit amet, dignissim ligula. In dui tellus, gravida commodo ipsum sit amet, venenatis euismod mauris. Nam sollicitudin, sapien et porttitor congue, orci arcu tristique mauris, id vestibulum tortor neque quis odio. Proin commodo, leo sit amet varius convallis, ligula quam faucibus libero, ut convallis neque dui sit amet dolor. Sed eget ipsum rhoncus, mollis orci ac, vehicula nibh. Aliquam a vestibulum felis. Proin scelerisque eu libero eget ullamcorper.

[border=1px solid rgba(50,50,50,0.8); padding: 8px; box-sizing: border-box; width: clamp(250px, 100%, 600px); height: 120px; margin: 5px 0 8px 16px][border=0; padding: 0; height: 100%; background-image: var(--intche02); background-size: cover; background-position: center 30%; clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%, 35% 85%, 0 85%); position: relative][border=0; padding: 0; position: absolute; bottom: 19px; left: 12px; color: #eb2d53; text-transform: uppercase; font: 18px Montserrat Subrayada; z-index: 15]WORLD INFO[/border][/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue purus sed tellus lobortis, eu tempus magna posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat, orci a fringilla aliquet, libero lectus porttitor magna, non consequat sem nisi sed erat. Nam euismod et leo sed egestas. Ut maximus varius malesuada. In hac habitasse platea dictumst. Suspendisse quis laoreet ex. Fusce hendrerit ante ac urna placerat scelerisque. Morbi et rutrum arcu.

Etiam sollicitudin lorem justo, eu tempus erat rutrum et. Proin quis tortor vel augue luctus mollis eget eu nulla. Mauris erat orci, lacinia in dolor non, fringilla suscipit purus. In nec porta nibh. Etiam id augue suscipit, porta sem a, bibendum velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer bibendum eget ligula non faucibus. Nunc id metus urna. Etiam fermentum iaculis lacinia. Nunc malesuada pellentesque turpis, ornare vestibulum magna tempor nec. In a purus elit.

Nam ac nibh lobortis, condimentum magna sit amet, dignissim ligula. In dui tellus, gravida commodo ipsum sit amet, venenatis euismod mauris. Nam sollicitudin, sapien et porttitor congue, orci arcu tristique mauris, id vestibulum tortor neque quis odio. Proin commodo, leo sit amet varius convallis, ligula quam faucibus libero, ut convallis neque dui sit amet dolor. Sed eget ipsum rhoncus, mollis orci ac, vehicula nibh. Aliquam a vestibulum felis. Proin scelerisque eu libero eget ullamcorper.

[border=1px solid rgba(50,50,50,0.8); padding: 8px; box-sizing: border-box; width: clamp(250px, 100%, 600px); height: 120px; margin: 5px 0 8px 16px][border=0; padding: 0; width: 100%; height: 100%; background-image: var(--intche03); background-size: cover; background-position: center 54%; box-sizing: border-box; clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%, 35% 85%, 0 85%); position: relative][border=0; padding: 0; position: absolute; bottom: 19px; left: 12px; color: #eb2d53; text-transform: uppercase; font: 18px Montserrat Subrayada; z-index: 15]COMBAT SYSTEM[/border][/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue purus sed tellus lobortis, eu tempus magna posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat, orci a fringilla aliquet, libero lectus porttitor magna, non consequat sem nisi sed erat. Nam euismod et leo sed egestas. Ut maximus varius malesuada. In hac habitasse platea dictumst. Suspendisse quis laoreet ex. Fusce hendrerit ante ac urna placerat scelerisque. Morbi et rutrum arcu.

Etiam sollicitudin lorem justo, eu tempus erat rutrum et. Proin quis tortor vel augue luctus mollis eget eu nulla. Mauris erat orci, lacinia in dolor non, fringilla suscipit purus. In nec porta nibh. Etiam id augue suscipit, porta sem a, bibendum velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer bibendum eget ligula non faucibus. Nunc id metus urna. Etiam fermentum iaculis lacinia. Nunc malesuada pellentesque turpis, ornare vestibulum magna tempor nec. In a purus elit.

Nam ac nibh lobortis, condimentum magna sit amet, dignissim ligula. In dui tellus, gravida commodo ipsum sit amet, venenatis euismod mauris. Nam sollicitudin, sapien et porttitor congue, orci arcu tristique mauris, id vestibulum tortor neque quis odio. Proin commodo, leo sit amet varius convallis, ligula quam faucibus libero, ut convallis neque dui sit amet dolor. Sed eget ipsum rhoncus, mollis orci ac, vehicula nibh. Aliquam a vestibulum felis. Proin scelerisque eu libero eget ullamcorper.
[/border][comment]

// Second Page, Interest Check --- (Tab 2)
[/comment][/tab][tab=XXXXXXXX2][border=0; padding: 0; width: 121px; height: 50px; position: absolute; margin-top: -80px; margin-left: 100px; pointer-events: none; background-image: var(--tab_covers); background-size: 220% auto; background-position: center center; z-index: 100][border=1px solid #997a00; padding: 0; box-sizing: border-box; width: 100%; height: 100%; text-align: center; font: normal 300 15px Jost; color: rgba(75,75,75); line-height: 330%; letter-spacing: 0.1em; border-bottom: 4px solid #910000]「 ABOUT 」[/border][/border][border=0; padding: 0 200px 0 0; box-sizing: content-box; width: clamp(250px, 100%, 960px); position: relative; font-family: 'Blinker', sans-serif; font-size: 13px; color: rgba(225,225,225); text-align: left; line-height: 180%; height: 470px; overflow-x: hidden; overflow-y: scroll][comment]

// Second Page, Interest Check -- (Tab 2 Text Area)
[/comment][border=1px solid rgba(50,50,50,0.8); padding: 8px; box-sizing: border-box; width: clamp(250px, 100%, 600px); height: 120px; margin: 5px 0 8px 16px][border=0; padding: 0; width: 100%; height: 100%; background-image: var(--intche04); background-size: cover; background-position: center 33%; box-sizing: border-box; clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%, 35% 85%, 0 85%); position: relative][border=0; padding: 0; position: absolute; bottom: 19px; left: 12px; color: #eb2d53; text-transform: uppercase; font: 18px Montserrat Subrayada; z-index: 15]GM INTRO[/border][/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue purus sed tellus lobortis, eu tempus magna posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat, orci a fringilla aliquet, libero lectus porttitor magna, non consequat sem nisi sed erat. Nam euismod et leo sed egestas. Ut maximus varius malesuada. In hac habitasse platea dictumst. Suspendisse quis laoreet ex. Fusce hendrerit ante ac urna placerat scelerisque. Morbi et rutrum arcu.

Etiam sollicitudin lorem justo, eu tempus erat rutrum et. Proin quis tortor vel augue luctus mollis eget eu nulla. Mauris erat orci, lacinia in dolor non, fringilla suscipit purus. In nec porta nibh. Etiam id augue suscipit, porta sem a, bibendum velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer bibendum eget ligula non faucibus. Nunc id metus urna. Etiam fermentum iaculis lacinia. Nunc malesuada pellentesque turpis, ornare vestibulum magna tempor nec. In a purus elit.

Nam ac nibh lobortis, condimentum magna sit amet, dignissim ligula. In dui tellus, gravida commodo ipsum sit amet, venenatis euismod mauris. Nam sollicitudin, sapien et porttitor congue, orci arcu tristique mauris, id vestibulum tortor neque quis odio. Proin commodo, leo sit amet varius convallis, ligula quam faucibus libero, ut convallis neque dui sit amet dolor. Sed eget ipsum rhoncus, mollis orci ac, vehicula nibh. Aliquam a vestibulum felis. Proin scelerisque eu libero eget ullamcorper.

[border=1px solid rgba(50,50,50,0.8); padding: 8px; box-sizing: border-box; width: clamp(250px, 100%, 600px); height: 120px; margin: 5px 0 8px 16px][border=0; padding: 0; width: 100%; height: 100%; background-image: var(--intche05); background-size: cover; background-position: center 41.8%; box-sizing: border-box; clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%, 35% 85%, 0 85%); position: relative][border=0; padding: 0; position: absolute; bottom: 19px; left: 12px; color: #eb2d53; text-transform: uppercase; font: 18px Montserrat Subrayada; z-index: 15]PLAYER LIST[/border][/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue purus sed tellus lobortis, eu tempus magna posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat, orci a fringilla aliquet, libero lectus porttitor magna, non consequat sem nisi sed erat. Nam euismod et leo sed egestas. Ut maximus varius malesuada. In hac habitasse platea dictumst. Suspendisse quis laoreet ex. Fusce hendrerit ante ac urna placerat scelerisque. Morbi et rutrum arcu.

Etiam sollicitudin lorem justo, eu tempus erat rutrum et. Proin quis tortor vel augue luctus mollis eget eu nulla. Mauris erat orci, lacinia in dolor non, fringilla suscipit purus. In nec porta nibh. Etiam id augue suscipit, porta sem a, bibendum velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer bibendum eget ligula non faucibus. Nunc id metus urna. Etiam fermentum iaculis lacinia. Nunc malesuada pellentesque turpis, ornare vestibulum magna tempor nec. In a purus elit.

Nam ac nibh lobortis, condimentum magna sit amet, dignissim ligula. In dui tellus, gravida commodo ipsum sit amet, venenatis euismod mauris. Nam sollicitudin, sapien et porttitor congue, orci arcu tristique mauris, id vestibulum tortor neque quis odio. Proin commodo, leo sit amet varius convallis, ligula quam faucibus libero, ut convallis neque dui sit amet dolor. Sed eget ipsum rhoncus, mollis orci ac, vehicula nibh. Aliquam a vestibulum felis. Proin scelerisque eu libero eget ullamcorper.
[/border][comment]

// Second Page, Interest Check -- (Tab 3)
[/comment][/tab][tab=XXXXXX1][border=0; padding: 0; width: 121px; height: 50px; position: absolute; margin-top: -80px; margin-left: 220px; pointer-events: none; background-image: var(--tab_covers); background-size: 220% auto; background-position: center center; z-index: 100][border=1px solid #997a00; padding: 0; box-sizing: border-box; width: 100%; height: 100%; text-align: center; font: normal 300 15px Jost; color: rgba(75,75,75); line-height: 330%; letter-spacing: 0.1em; border-bottom: 4px solid #910000]「 RULES 」[/border][/border][border=0; padding: 0 200px 0 0; box-sizing: content-box; width: clamp(250px, 100%, 960px); position: relative; font-family: 'Blinker', sans-serif; font-size: 13px; color: rgba(225,225,225); text-align: left; line-height: 180%; height: 470px; overflow-x: hidden; overflow-y: scroll][comment]

// Second Page, Interest Check -- (Tab 3 Text Area)
[/comment][border=1px solid rgba(50,50,50,0.8); padding: 8px; box-sizing: border-box; width: clamp(250px, 100%, 600px); height: 120px; margin: 5px 0 8px 16px][border=0; padding: 0; width: 100%; height: 100%; background-image: var(--intche06); background-size: cover; background-position: center 70%; box-sizing: border-box; clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%, 35% 85%, 0 85%); position: relative][border=0; padding: 0; position: absolute; bottom: 19px; left: 12px; color: #eb2d53; text-transform: uppercase; font: 18px Montserrat Subrayada; z-index: 15]GUIDELINE[/border][/border][/border][B]1. Etiam sollicitudin lorem justo, eu tempus erat rutrum et.[/B]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue purus sed tellus lobortis, eu tempus magna posuere.

[B]2. Etiam sollicitudin lorem justo, eu tempus erat rutrum et.[/B]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue purus sed tellus lobortis, eu tempus magna posuere.

[B]3. Etiam sollicitudin lorem justo, eu tempus erat rutrum et.[/B]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue purus sed tellus lobortis, eu tempus magna posuere.

[B]4. Etiam sollicitudin lorem justo, eu tempus erat rutrum et.[/B]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue purus sed tellus lobortis, eu tempus magna posuere.

[B]5. Etiam sollicitudin lorem justo, eu tempus erat rutrum et.[/B]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue purus sed tellus lobortis, eu tempus magna posuere.

[border=1px solid rgba(50,50,50,0.8); padding: 8px; box-sizing: border-box; width: clamp(250px, 100%, 600px); height: 120px; margin: 5px 0 8px 16px][border=0; padding: 0; width: 100%; height: 100%; background-image: var(--intche07); background-size: cover; background-position: center 10%; box-sizing: border-box; clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%, 35% 85%, 0 85%); position: relative][border=0; padding: 0; position: absolute; bottom: 19px; left: 12px; color: #eb2d53; text-transform: uppercase; font: 18px Montserrat Subrayada; z-index: 15]ROLEPLAY RULES[/border][/border][/border]Nam ac nibh lobortis, condimentum magna sit amet, dignissim ligula. In dui tellus, gravida commodo ipsum sit amet, venenatis euismod mauris. Nam sollicitudin, sapien et porttitor congue, orci arcu tristique mauris, id vestibulum tortor neque quis odio. Proin commodo, leo sit amet varius convallis, ligula quam faucibus libero, ut convallis neque dui sit amet dolor. Sed eget ipsum rhoncus, mollis orci ac, vehicula nibh. Aliquam a vestibulum felis. Proin scelerisque eu libero eget ullamcorper.
[/border][/tab][/tabs][comment]

// tab covers, end
[/comment][/border][border=0; padding: 0; width: 121px; height: 50px; position: absolute; margin: -60px 0 0; pointer-events: none; background-image: var(--tab_covers); background-size: cover; z-index: 30][border=1px solid #997a00; padding: 0; box-sizing: border-box; width: 100%; height: 100%; background: rgba(0,0,0,0.5); text-align: center; font: normal 300 15px Jost; color: rgba(235,235,235); line-height: 330%; letter-spacing: 0.1em]「 INTRO 」[/border][/border][border=0; padding: 0; width: 121px; height: 50px; position: absolute; margin: -60px 120px 0; pointer-events: none; background-image: var(--tab_covers); background-size: cover][border=1px solid #997a00; padding: 0; box-sizing: border-box; width: 100%; height: 100%; background: rgba(0,0,0,0.5); text-align: center; font: normal 300 15px Jost; color: rgba(235,235,235); line-height: 330%; letter-spacing: 0.1em]「 ABOUT 」[/border][/border][border=0; padding: 0; width: 121px; height: 50px; position: absolute; margin: -60px 240px 0; pointer-events: none; background-image: var(--tab_covers); background-size: cover][border=1px solid #997a00; padding: 0; box-sizing: border-box; width: 100%; height: 100%; background: rgba(0,0,0,0.5); text-align: center; font: normal 300 15px Jost; color: rgba(235,235,235); line-height: 330%; letter-spacing: 0.1em]「 RULES 」[/border][/border][comment]

// Music player
[/comment][border=0; padding: 0; width: 121px; height: 50px; position: absolute; margin: -60px 370px 0; pointer-events: none][border=0; padding: 0; box-sizing: border-box; width: 100%; height: 100%; text-align: center; font: normal 300 15px Jost; color: rgba(235,235,235); line-height: 330%; letter-spacing: 0.1em][border=0; margin: 0 auto; padding: 7px 10px 0 5px; box-sizing: border-box; width: 100%; max-width: 298px; min-width: 250px; height: auto; display: flex; flex-flow: row wrap; align-items: top; overflow: hidden; position: absolute; left: 0; right: 0][border=0; padding: 8px 0 0 0; box-sizing: border-box; width: 100%; text-align: left; font: 13px Jost; color: rgba(40,40,40); text-transform: uppercase; letter-spacing: 0.1em][size=14px][fa]fas fa-play-circle [/fa][/size] OST 1 — MAIN THEME[/border][border=0; box-sizing: border-box; padding: 0px; width: 5%; height: 100%; position: absolute; left: -20px; top: 0; text-align: center; pointer-events: auto][border=0; width: 100px; height: 80px; margin-left: -15px; margin-top: -20px; opacity: 0.0005%; display: inline-block][MEDIA=soundcloud]https://soundcloud.com/user-827964389/ep-keep-the-torch[/MEDIA][/border][/border][/border][/border][/border][border=1px solid #997a00; padding: 0; box-sizing: border-box; height: 520px; box-shadow: 0 0 15px rgba(0,0,0,0.5); background: rgba(0,0,0,0.83); z-index: 10; width: 100%][/border][/border][/border][/border][/border][comment]

// Third Page, Character/NPC List (Setup)
[/comment][border=0; padding: 250px 0 35px; box-sizing: border-box; width: 100%; background-image: var(--bg_third); background-size: cover][border=0; height: 470px; padding: 0 1000px 0 0; margin: auto; box-sizing: content-box; width: clamp(250px, 100%, calc(1200px + 1000px)); display: flex; flex-flow: row wrap; justify-content: space-evenly; overflow-x: hidden; overflow-y: scroll][comment]

// Third Page, Character/NPC List --- (Char 1)
[/comment][border=1px solid #997a00; box-shadow: 0 0 15px rgba(0,0,0,0.5); padding: 12px; box-sizing: border-box; width: clamp(250px, 100%, 380px); height: 450px; background: rgba(20,20,20,0.5); margin-top: 20px][border=0; padding: 0; box-sizing: border-box; width: 100%; height: 100%; background-image: var(--charli01); background-size: 180% auto; background-position: 27% 60%; position: relative; overflow: hidden][comment]

// Third Page, Character/NPC List --- (Char 1 Text)
[/comment][border=0; padding: 6px 15px; position: absolute; box-sizing: border-box; width: calc(100% + 1px); height: 140px; top: 70%; right: -1px; background: rgba(0,0,0,0.75); font: normal 300 3.7vh Iceland; line-height: 100%; color: rgba(248,248,255)]AEGYR[border=0; padding: 4px 0 0; background: #cca300; width: 50px; margin: 3px 0 7px 2px][/border][border=0; padding: 0 30px 0 3px; font-family: 'Blinker', sans-serif; font-size: 14px; line-height: 140%; overflow-x: hidden; overflow-y: scroll; height: 70px; box-sizing: content-box; width: 100%]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.[/border][/border][/border][/border][comment]

// Third Page, Character/NPC--- (Char 2)
[/comment][border=1px solid #997a00; box-shadow: 0 0 15px rgba(0,0,0,0.5); padding: 12px; box-sizing: border-box; width: clamp(250px, 100%, 380px); height: 450px; background: rgba(20,20,20,0.5); margin-top: 20px][border=0; padding: 0; box-sizing: border-box; width: 100%; height: 100%; background-image: var(--charli02); background-size: 400% auto; background-position: 47% 28%; position: relative; overflow: hidden][comment]

// Third Page, Character/NPC List --- (Char 2 Text)
[/comment][border=0; padding: 6px 15px; position: absolute; box-sizing: border-box; width: calc(100% + 1px); height: 140px; top: 70%; right: -1px; background: rgba(0,0,0,0.75); font: normal 300 3.7vh Iceland; line-height: 100%; color: rgba(248,248,255)]SAURIS[border=0; padding: 4px 0 0; background: #cca300; width: 50px; margin: 3px 0 7px 2px][/border][border=0; padding: 0 30px 0 3px; font-family: 'Blinker', sans-serif; font-size: 14px; line-height: 140%; overflow-x: hidden; overflow-y: scroll; height: 70px; box-sizing: content-box; width: 100%]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.[/border][/border][/border][/border][comment]

// Third Page, Character/NPC--- (Char 3)
[/comment][border=1px solid #997a00; box-shadow: 0 0 15px rgba(0,0,0,0.5); padding: 12px; box-sizing: border-box; width: clamp(250px, 100%, 380px); height: 450px; background: rgba(20,20,20,0.5); margin-top: 20px][border=0; padding: 0; box-sizing: border-box; width: 100%; height: 100%; background-image: var(--charli03); background-size: 570% auto; background-position: 37% 10%; position: relative; overflow: hidden][comment]

// Third Page, Character/NPC List --- (Char 3 Text)
[/comment][border=0; padding: 6px 15px; position: absolute; box-sizing: border-box; width: calc(100% + 1px); height: 140px; top: 70%; right: -1px; background: rgba(0,0,0,0.75); font: normal 300 3.7vh Iceland; line-height: 100%; color: rgba(248,248,255)]VENERIA[border=0; padding: 4px 0 0; background: #cca300; width: 50px; margin: 3px 0 7px 2px][/border][border=0; padding: 0 30px 0 3px; font-family: 'Blinker', sans-serif; font-size: 14px; line-height: 140%; overflow-x: hidden; overflow-y: scroll; height: 70px; box-sizing: content-box; width: 100%]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.[/border][/border][/border][/border][comment]

// Third Page, Character/NPC--- (Char 4)
[/comment][border=1px solid #997a00; box-shadow: 0 0 15px rgba(0,0,0,0.5); padding: 12px; box-sizing: border-box; width: clamp(250px, 100%, 380px); height: 450px; background: rgba(20,20,20,0.5); margin-top: 20px][border=0; padding: 0; box-sizing: border-box; width: 100%; height: 100%; background-image: var(--charli04); background-size: 200% auto; background-position: center 15%; position: relative; overflow: hidden][comment]

// Third Page, Character/NPC List --- (Char 4 Text)
[/comment][border=0; padding: 6px 15px; position: absolute; box-sizing: border-box; width: calc(100% + 1px); height: 140px; top: 70%; right: -1px; background: rgba(0,0,0,0.75); font: normal 300 3.7vh Iceland; line-height: 100%; color: rgba(248,248,255)]SEKIRYU[border=0; padding: 4px 0 0; background: #cca300; width: 50px; margin: 3px 0 7px 2px][/border][border=0; padding: 0 30px 0 3px; font-family: 'Blinker', sans-serif; font-size: 14px; line-height: 140%; overflow-x: hidden; overflow-y: scroll; height: 70px; box-sizing: content-box; width: 100%]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.[/border][/border][/border][/border][comment]

// Third Page, Character/NPC--- (Char 5)
[/comment][border=1px solid #997a00; box-shadow: 0 0 15px rgba(0,0,0,0.5); padding: 12px; box-sizing: border-box; width: clamp(250px, 100%, 380px); height: 450px; background: rgba(20,20,20,0.5); margin-top: 20px][border=0; padding: 0; box-sizing: border-box; width: 100%; height: 100%; background-image: var(--charli05); background-size: 130% auto; background-position: center 15%; position: relative; overflow: hidden][comment]

// Third Page, Character/NPC List --- (Char 5 Text)
[/comment][border=0; padding: 6px 15px; position: absolute; box-sizing: border-box; width: calc(100% + 1px); height: 140px; top: 70%; right: -1px; background: rgba(0,0,0,0.75); font: normal 300 3.7vh Iceland; line-height: 100%; color: rgba(248,248,255)]SELLZEN[border=0; padding: 4px 0 0; background: #cca300; width: 50px; margin: 3px 0 7px 2px][/border][border=0; padding: 0 30px 0 3px; font-family: 'Blinker', sans-serif; font-size: 14px; line-height: 140%; overflow-x: hidden; overflow-y: scroll; height: 70px; box-sizing: content-box; width: 100%]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.[/border][/border][/border][/border][comment]

// Third Page, Character/NPC--- (Char 6)
[/comment][border=1px solid #997a00; box-shadow: 0 0 15px rgba(0,0,0,0.5); padding: 12px; box-sizing: border-box; width: clamp(250px, 100%, 380px); height: 450px; background: rgba(20,20,20,0.5); margin-top: 20px][border=0; padding: 0; box-sizing: border-box; width: 100%; height: 100%; background-image: var(--charli06); background-size: 200% auto; background-position: 63% 35%; position: relative; overflow: hidden][comment]

// Third Page, Character/NPC List --- (Char 6 Text)
[/comment][border=0; padding: 6px 15px; position: absolute; box-sizing: border-box; width: calc(100% + 1px); height: 140px; top: 70%; right: -1px; background: rgba(0,0,0,0.75); font: normal 300 3.7vh Iceland; line-height: 100%; color: rgba(248,248,255)]VULKEN[border=0; padding: 4px 0 0; background: #cca300; width: 50px; margin: 3px 0 7px 2px][/border][border=0; padding: 0 30px 0 3px; font-family: 'Blinker', sans-serif; font-size: 14px; line-height: 140%; overflow-x: hidden; overflow-y: scroll; height: 70px; box-sizing: content-box; width: 100%]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.[/border][/border][/border][/border][/border][/border][/border]