• This section is for roleplays only.
    ALL interest checks/recruiting threads must go in the Recruit Here section.

    Please remember to credit artists when using works not your own.

Futuristic The Astra Veda - Character Sheet

S
Created at
Index progress
Incomplete

Index of the various Setpoints in the game, taking place at different times and places.
Main
Here
Characters
Here
Lore
Here

Lexielai

Cal Bear
[class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileInfoFlexContainer] display: flex; height: auto; width: 100%; justify-content: center; align-content: space-between; align-items: center; flex-flow: row wrap; box-sizing: border-box; border: 5px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; flex: 1 0 auto; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 25%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 25%; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 1 auto; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://i.imgur.com/nzqQd7Q.jpg); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class] [div class="variables"] [div style="background: rgba(0, 0, 0, 0.9);"] [div class=mainHeader] Instructions [/div] [div class=mainText style="padding-right: 20px;"] All characters must be approved by the majority of the GMs. We will let you know by private message. Note that this character sheet is also our way of gaining insight into you, the player. This may be our first impression of you.

We are more likely to approve flawed, three-dimensional characters with room to grow. But we aren't looking for edgelords for the sake of being "edgy" either; the point is that flaws and redeeming qualities balance each other out.

You gain access to ONE Astra Power, for now. Make it as creative as you want, but remember that it should have limits.

The lore post prototype is available here The Codex v.2 (Astra Veda Lore). For more detailed information, please look into the outdated version: (Outdated) The Codex v.1. Please ignore the following sections, which are no longer canon: The Astras, The Ashvamedha, The Wild, and NPCs.

The following tabs may be more useful: Summaries (Ignore The Astras), Trinity, The One Empire (It is now called "The Government"), The Races, and The Faith.

I have created a character sheet generator in the post directly below this one, but feel free to make your own character sheet however you like; so long as you have all the same content, it doesn't matter if it looks fancy for now. For those of you who want to manually edit the code instead of using the generator, I am enclosing it in the spoiler below.
Code:
[nobr]
    [comment]
    Author: [USER=7055]@Lexielai[/USER]
    [/comment]

    [comment][font=Roboto]font reference[/font][font="Source Sans Pro"]font reference[/font][font="Roboto Condensed"]font reference[/font][font=Share]font reference[/font][font="Anton"]font reference[/font][font=Open Sans]font reference[/font][/comment]

    [comment]setup divs[/comment]

    [comment]maintains width and height ratio through different resolutions[/comment]
    [class name=aspectRatio]
        display: block;
        position: relative;
        width: 100%;
        padding-top: 60%;
    [/class]

    [class name=aspectRatio maxWidth=1200px]
        display: block;
        width: 100%;
        padding-top: 0px;
    [/class]

    [comment]establishes design space and primary background[/comment]
    [class name=root]
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        margin: auto;
        overflow: hidden;
        font-smoothing: antialiased;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom 0px;
    [/class]

    [class name=root maxWidth=1200px]
        display: block;
        position: relative;
        height: auto;
        min-height: 100%;
    [/class]


    [comment]layout divs[/comment]

    [comment]contains all primary flex objects[/comment]
    [class name=mainFlexContainer]
        display: flex;
        position: relative;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 2;
    [/class]

    [comment]establishes space for the information you want this design to show[/comment]
    [class name=primaryBox]
        display: block;
        position: relative;
        height: 85%;
        width: 80%;
        box-sizing: border-box;
        margin: 30px;
        background-color: var(--primaryBoxColor);
        box-shadow: var(--primaryBoxShadow);
        overflow: hidden;
        flex: 1 0 auto;
        z-index: 3;
    [/class]

    [class name=primaryBox maxWidth=1200px]
        display: block;
        width: 90%;
        height: auto;
        margin: 5%;
    [/class]

    [class name=diagonal]
        position: absolute;
        height: 100%;
        width: 180%;
        background-color: var(--diagonalColor);
        color: var(--transparent);
        transform: rotate(-5deg);
        transform-origin: 100% 150%;
        overflow: hidden;
        z-index: 4;
    [/class]

    [class name=hexRender]
        position: absolute;
        height: 125%;
        width: 125%;
        background-image: var(--bgHexImage);
        background-position: var(--bgHexPosition);
        background-size: var(--bgHexSize);
        background-repeat: var(--bgHexRepeat);
        z-index: 4;
    [/class]

    [class name=characterName]
        position: relative;
        width: 80%;
        height: var(--characterNameHeight);
        box-sizing: border-box;
        padding: 20px 0px 0px 40px;
        z-index: 5;
    [/class]

    [class name=characterName maxWidth=1200px]
        width: 100%;
    [/class]

    [comment]large info box divs[/comment]

    [class name=infoFlexContainer]
        display: flex;
        position: relative;
        height: 80%;
        width: 100%;
        box-sizing: border-box;
        flex-flow: column wrap;
        justify-content: space-around;
        align-items: center;
        align-content: center;
        flex: 1 1 auto;
        overflow: hidden;
        z-index: 6;
    [/class]

    [class name=infoFlexContainer maxWidth=1200px]
        width: 100%;
    [/class]

    [class name=infoContainer]
        position: relative;
        width: var(--columnTwoWidth);
        height: 60%;
        box-sizing: border-box;
        padding: 20px;
        border-right: var(--infoBoxBorderStyle);
        border-bottom: var(--infoBoxBorderStyle);
        border-left: var(--infoBoxBorderStyle);
        background: var(--infoBoxColor);
        flex: 1 1 auto;
    [/class]

    [class name=infoContainer maxWidth=1200px]
        width: 100%;
    [/class]

    [class name=menuContainer]
        width: var(--columnTwoWidth);
        height: 10%;
        box-sizing: border-box;
        border-top: var(--infoBoxBorderStyle);
        border-right: var(--infoBoxBorderStyle);
        border-left: var(--infoBoxBorderStyle);
        background: var(--infoBoxColor);
    [/class]

    [class name=menuContainer maxWidth=1200px]
        width: 100%;
    [/class]

    [class name=menuFlexContainer]
        display: flex;
        width: 100%;
        height: 100%;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
    [/class]

    [class name=menuFlexContainer maxWidth=1200px]
        flex-flow: column wrap;
    [/class]

    [class name=menuButton]
        position: relative;
        width: var(--menuButtonWidth);
        height: 90%;
        box-sizing: border-box;
        padding: 5px;
        flex: 1 1 auto;
        background: var(--menuButtonBgColor);
        transition: background var(--transitionFunction), color var(--transitionFunction);
        cursor: pointer;
        color: var(--menuButtonColor);
    [/class]

    [class name=menuButton maxWidth=1200px]
        width: 100%;
    [/class]

    [class name=menuButton state=hover]
        background-color: var(--menuButtonHoverBgColor);
        color: var(--menuButtonHoverColor);
        transition: background var(--transitionFunction), color var(--transitionFunction);
    [/class]

    [class name=tabName]
        display: none;
    [/class]

    [comment]gradient divider between menu buttons and text[/comment]
    [class name=menuDivider]
        width: 90%;
        min-height: 3px;
        margin: auto;
        background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent));
        flex: 3 0 auto;
        color: var(--transparent);
    [/class]


    [comment]profile box[/comment]

    [class name=profileContainer]
        position: relative;
        width: var(--columnOneWidth);
        height: 96%;
        box-sizing: border-box;
        padding: 0px;
        margin-right: 1%;
        border: var(--infoBoxBorderStyle);
        background: var(--infoBoxColor);
        flex: 1 0 auto;
    [/class]

    [class name=profileContainer maxWidth=1200px]
        width: 100%;
        margin: 0%;
    [/class]

    [class name=profileImageContainer]
        display: block;
        position: relative;
        max-width: 95%;
        height: 50%;
        box-sizing: border-box;
        margin: 10px;
        background-image: var(--profileImage);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        overflow: hidden;
    [/class]

    [class name=profileInfoFlexContainer]
        display: flex;
        height: 45%;
        width: auto;
        justify-content: space-between;
        align-content: space-between;
        align-items: center;
        flex-flow: row wrap;
        border: 1px sold white;
    [/class]

    [class name=profileInfoBox]
        display: flex;
        justify-content: space-around;
        align-content: center;
        align-items: center;
        position: relative;
        width: 100%;
        max-height: 15%;
        box-sizing: border-box;
        padding: 2px;
        margin: 4px;
        overflow: hidden;
    [/class]

    [class name=standardInfoBox]
        display: flex;
        justify-content: space-around;
        align-content: center;
        align-items: center;
        position: relative;
        width: 48%;
        max-height: 10%;
        box-sizing: border-box;
        padding: 2px;
        margin: 4px;
        overflow: hidden;
    [/class]

    [class name=profileLabelBox]
        position: relative;
        max-width: 20%;
        box-sizing: border-box;
        padding: 2px;
        margin: 3px;
        flex: 1 0 auto;
        background-color: var(--diagonalColor);
    [/class]

    [class name=standardLabelBox]
        position: relative;
        width: 30%;
        max-width: 30%;
        box-sizing: border-box;
        padding: 2px;
        margin: 3px;
        flex: 1 0 auto;
        background-color: var(--diagonalColor);
    [/class]

    [class name=profileInfo]
        display: block;
        position: relative;
        max-width: auto;
        box-sizing: border-box;
        padding: 2px;
        margin: 3px;
        flex: 3 0 auto;
    [/class]


    [comment]text formatting[/comment]
    [class name=mainText]
        display: block;
        position: relative;
        box-sizing: border-box;
        padding-left: 20px;
        padding-bottom: 10px;
        text-align: justify;
        font-family: var(--mainFont);
        font-size: var(--mainTextSize);
        letter-spacing: 1px;
        color: var(--mainTextColor);
    [/class]

    [class name=mainHeader]
        display: block;
        position: relative;
        box-sizing: border-box;
        padding: 3px;
        margin-bottom: 10px;
        background: var(--diagonalColor);
        font-family: var(--headerFont);
        font-size: 3em;
        letter-spacing: 0px;
        text-transform: uppercase;
        color: var(--infoBoxColor);
    [/class]

    [class name=mainSubheader]
        display: block;
        position: relative;
        width: 50%;
        box-sizing: border-box;
        margin-left: 10px;
        margin-bottom: 10px;
        border-bottom: 2px solid var(--mainAccent);
        font-family: var(--mainFont);
        font-size: 1.1em;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--mainTextColor);
    [/class]

    [class name=indent]
        text-indent: 40px;
    [/class]

    [class name=characterNameText]
        font-family: var(--nameFont);
        font-size: 4em;
        text-transform: uppercase;
        text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
        letter-spacing: 5px;
        color: var(--nameColor);
    [/class]

    [class name=profileInfoText]
        font-family: var(--profileFont);
        font-size: var(--profileTextSize);
        text-transform: uppercase;
        letter-spacing: 0px;
    [/class]

    [class name=profileLabelText]
        text-align: center;
        color: var(--infoBoxColor);
        letter-spacing: 1px;
    [/class]

    [class name=profileText]
        text-align: left;
        color: var(--mainAccent);
        letter-spacing: 2px;
    [/class]

    [comment]text settings for menu buttons. the color of the text changes with hovering so color parameters have been moved to menuButton[/comment]
    [class name=menuText]
        text-align: center;
        font-family: var(--menuFont);
        font-size: var(--menuTextSize);
        text-transform: uppercase;
        letter-spacing: 2px;
    [/class]

    [comment]invisible scrollbox[/comment]
    [class name=scrollBox]
        display: block;
        position: relative;
        height: 90%;
        width: 100%;
        max-height: 500vh;
        padding-right: 100px;
        padding-left: 5px;
        overflow-x: hidden;
        overflow-y: scroll;
    [/class]

    [class name=scrollBox maxWidth=1200px]
        width: 100%;
        height: auto;
        max-height: 150vmax;
        overflow-x: hidden;
        overflow-y: auto;
    [/class]


    [comment]scripts[/comment]

    [comment]initial state hides everything except the center button[/comment]
    [script class="menuButton" version=2]
        (= currentTab "one")
        (hide "two")
        (hide "three")
        (hide "four")
    [/script]

    [comment]changes tabs by finding the tabName of the button clicked[/comment]
    [script class="menuButton" on=click version=2]
        (fadeOut 500 currentTab)
        (= currentTab (trim (index (split (getText) "TAB") 0)))
        (setTimeout 0.5 (fadeIn 100 currentTab))
    [/script]


    [comment]variables[/comment]

    [class=variables]
        --mainFont: 'Open Sans', sansserif;
        --mainTextSize: 0.85em;
        --mainTextColor: rgb(210, 210, 210);
        --headerFont: 'Share', sansserif;

        --menuFont: 'Roboto Condensed', sansserif;
        --menuTextSize: 1em;
        --menuTextColor: #c2c2ca;
        --menuTextHoverColor: #d6d6db;
        --menuButtonWidth: 25%;
        --menuButtonColor: rgba(210, 210, 210, 1);
        --menuButtonBgColor: rgba(20, 20, 20, 0.7);
        --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9);
        --menuButtonHoverColor: rgba(210, 210, 210, 0.9);
        --menuBorder: rgba(210, 210, 210, 0.5);

        --nameFont: 'Anton', 'sansserif';
        --nameColor: rgb(240, 240, 240);

        --profileFont: 'Roboto', sansserif;
        --profileTextSize: 0.8em;
        --profileImage: url(https://i.imgur.com/nzqQd7Q.jpg);

        --infoBoxColor: rgba(20, 20, 20, 0.8);
        --infoBoxBorderColor: rgba(120, 120, 120, 0.5);
        --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor);

        --mainAccent: rgb(210, 210, 210);
        --transparent: rgba(0, 0, 0, 0);
        --primaryBoxColor: rgb(130, 20, 40);
        --diagonalColor: rgba(220, 220, 220, 1);
        --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6);
        --transitionFunction: 0.3s ease-in-out 0s;
        --textTransitionFunction: 0.8s ease-in-out 0s;

        --columnOneWidth: 30%;
        --columnTwoWidth: 65%;
        --profileHeight: 90%;
        --nameHeight: 10%;

        --bgHexImage: url(https://i.imgur.com/N0uts0y.png);
        --bgHexPosition: center center;
        --bgHexSize: auto;
        --bgHexRepeat: repeat;
    [/class]

    [div class="variables"]
    [div class="aspectRatio"]
    [div class="root"]
    [div class="mainFlexContainer"]
    [div class="primaryBox"]
    [div class="diagonal"]
        Lexielai
    [/div]
    [div class=hexRender][/div]
    [div class="characterName characterNameText"]
        The Character Sheet
    [/div]
    [div class=infoFlexContainer]
    [div class=profileContainer]
        [div class=profileImageContainer]
        [/div] [comment]*Keep this div empty. Image will be here. Check the VARIABLES section and look for "profileImage" to insert link*[/comment]
    [div class=scrollBox]
    [div class=profileInfoFlexContainer]
        [div class="profileInfoBox"]
            [div class="profileLabelBox profileInfoText profileLabelText"]
                Name
            [/div]
            [div class="profileInfo profileInfoText profileText"]
                Full Name
            [/div]
        [/div] [comment]*profileInfoBox*[/comment]
        [div class="profileInfoBox"]
            [div class="profileLabelBox profileInfoText profileLabelText"]
                Aliases
            [/div]
            [div class="profileInfo profileInfoText profileText"]
                Titles or Pseudonyms
            [/div]
        [/div] [comment]*profileInfoBox*[/comment]
        [div class="profileInfoBox"]
            [div class="profileLabelBox profileInfoText profileLabelText"]
                Age
            [/div]
            [div class="profileInfo profileInfoText profileText"]
                16+
            [/div]
        [/div] [comment]*profileInfoBox*[/comment]
        [div class="profileInfoBox"]
            [div class="profileLabelBox profileInfoText profileLabelText"]
                Gender
            [/div]
            [div class="profileInfo profileInfoText profileText"]
                Any
            [/div]
        [/div] [comment]*profileInfoBox*[/comment]
        [div class="profileInfoBox"]
            [div class="profileLabelBox profileInfoText profileLabelText"]
                Race
            [/div]
            [div class="profileInfo profileInfoText profileText"]
                Manu, Deva, Asura, Hybrid, Cyborg
            [/div]
        [/div] [comment]*profileInfoBox*[/comment]
        [div class="profileInfoBox"]
            [div class="profileLabelBox profileInfoText profileLabelText"]
                District
            [/div]
            [div class="profileInfo profileInfoText profileText"]
                Your Home District
            [/div]
        [/div] [comment]*profileInfoBox*[/comment]
    [/div][/div][/div] [comment]*profileInfoFlexContainer, scrollBox, profileContainer*[/comment]
    [div class=menuContainer]
    [div class=menuFlexContainer]
        [div class="menuButton menuText"]
            [div class="tabName"]oneTAB[/div]
            Dossier
        [/div]
        [div class="menuButton menuText"]
            [div class="tabName"]twoTAB[/div]
            Psych Eval
        [/div]
        [div class="menuButton menuText"]
            [div class="tabName"]threeTAB[/div]
            Capabilities
        [/div]
        [div class="menuButton menuText"]
            [div class="tabName"]fourTAB[/div]
            Associates
        [/div]
        [div class=menuDivider]
        [/div]
    [/div][/div][comment]*menuFlexContainer, menuContainer*[/comment]
    [div class="infoContainer"]
    [div class="scrollBox one"]
        [div class=mainHeader]
            Background
        [/div]
        [div class=mainSubheader]
            Pre-Awakening
        [/div]
        [div class=mainText]
            Introduce us to your life before your Awakening.
        [/div]
        [div class=mainSubheader]
            Post-Awakening
        [/div]
        [div class=mainText]
            Explain how your Awakening has changed your life.
        [/div]
        [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"]
            Appearance
        [/div]
        [div class=mainText]
            Describe your appearance.
        [/div]
    [/div]
    [div class="scrollBox two"]
        [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"]
            Characteristics
        [/div]
        [div class=mainSubheader]
            Personality
        [/div]
        [div class=mainText]
            Give us a brief description of your personality.
        [/div]
        [div class=mainSubheader]
            Fatal Flaws
        [/div]
        [div class=mainText]
            What do you struggle with? What parts of your personality are less than ideal? What personal qualities are you not satisfied with?
        [/div]
        [div class=mainSubheader]
            Motivations and Values
        [/div]
        [div class=mainText]
            What is your dream/motivation? What is important to you? Why?
        [/div]
        [div class=mainSubheader]
            Fears and Taboos
        [/div]
        [div class=mainText]
            You may be eight feet tall and shoot fireballs, but everyone is afraid of something. What frightens you? What line will you never cross?
        [/div]
    [/div] [comment]*scrollBox*[/comment]
    [div class="scrollBox three"]
        [div class=mainHeader]
            Astra Abilities
        [/div]
        [div class=mainSubheader]
            Power
        [/div]
        [div class=mainText]
            What is your special power? What does it do? You may have ONE for now.
        [/div]
        [div class=mainSubheader]
            Limitations
        [/div]
        [div class=mainText]
            What are the limits of your ability? Choose THREE ways in which it is not very effective.
        [/div]
        [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"]
            Skills
        [/div]
        [div class=mainText]
            Outside of your Astra Powers, what else can you do? What other qualifications, skills, or abilities do you have?
        [/div]
    [/div] [comment]*scrollBox*[/comment]
    [div class="scrollBox four"]
        [div class=mainHeader]
            Outside Opinions
        [/div]
        [div class=mainSubheader]
            Quotes (Optional)
        [/div]
        [div class=mainText]
            Quotes about you from other people's perspectives.
        [/div]
        [div class=mainSubheader]
            Reputation (Optional)
        [/div]
        [div class=mainText]
            What are you known for? How well known are you?
        [/div]
        [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"]
            Relationships
        [/div]
        [div class=mainSubheader]
            Allies (Optional)
        [/div]
        [div class=mainText]
            Who are your allies? Your friends, your family, or your mentors? What is your relationship like with them?
        [/div]
        [div class=mainSubheader]
            Enemies (Optional)
        [/div]
        [div class=mainText]
            Who do you not get along with? Why?
        [/div]
        [div class=mainSubheader]
            Organizations (Optional)
        [/div]
        [div class=mainText]
            What organizations are you a part of, or have ties to?
        [/div]
    [/div] [comment]*scrollBox*[/comment]
    [/div][/div] [comment]*infoContainer, infoFlexContainer*[/comment]
    [/div][/div][comment]*primaryBox, mainFlexContainer*[/comment]
    [/div][/div][/div] [comment]*root, aspectRatio, variables*[/comment]
    [/nobr]
[/div] [div class=mainSubheader] Character Roster [/div] [div class=mainText] [div class="profileInfoFlexContainer"] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Clarissa "Rissa" Imperia [/div] [div class="profileInfo profileInfoText profileText"] The Shadow Princess ( Lexielai Lexielai ) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Jayla Dawnstrider [/div] [div class="profileInfo profileInfoText profileText"] Seven ( Lexielai Lexielai ) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Valta Zeiphim [/div] [div class="profileInfo profileInfoText profileText"] Kalinychta ( Seraph Darkfire Seraph Darkfire ) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Astika Rimbaud [/div] [div class="profileInfo profileInfoText profileText"] The Serpent ( Graystone713 Graystone713 ) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Akshath [/div] [div class="profileInfo profileInfoText profileText"] The Untouchable ( Lucem Lucem ) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aretta Ward [/div] [div class="profileInfo profileInfoText profileText"] Historia ( Damafaud Damafaud ) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Remi Konaté Hassad [/div] [div class="profileInfo profileInfoText profileText"] Recon ( _Line 213 _Line 213 ) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] JAKOB BRÖTZMANN [/div] [div class="profileInfo profileInfoText profileText"] Night Light ( dwif dwif ) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Maxwell Cross [/div] [div class="profileInfo profileInfoText profileText"] The Drunken Master ( ChazGhost ChazGhost ) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Maia Asim [/div] [div class="profileInfo profileInfoText profileText"] Ayodhya 1 [A1] ( Epiphany Epiphany ) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Taisiya K. Praskoviya [/div] [div class="profileInfo profileInfoText profileText"] Pluto ( WishlessSatellite WishlessSatellite ) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Francis Evren [/div] [div class="profileInfo profileInfoText profileText"] The Hunger ( BlightGiver BlightGiver ) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Rosalie O. Laterra [/div] [div class="profileInfo profileInfoText profileText"] The Roots of Hope ( Dreawin Dreawin ) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Judith Clair [/div] [div class="profileInfo profileInfoText profileText"] Deadly Nightshade ( Goonfire Goonfire ) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Hsu Thiri Mya [/div] [div class="profileInfo profileInfoText profileText"] Starchild ( Princess Roomba Princess Roomba ) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Xavius Lonestar [/div] [div class="profileInfo profileInfoText profileText"] Mastermind ( Skylord Nexus Skylord Nexus ) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Mao Gatinding Galit [/div] [div class="profileInfo profileInfoText profileText"] Pariah ( Nastika Nastika ) [/div] [/div] [/div][/div][/div] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"] Lexielai [/div] [div class=hexRender][/div] [div class="characterName characterNameText"] The Character Sheet [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Full Name [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] Titles or Pseudonyms [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 16+ [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Any [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Manu, Deva, Asura, Hybrid, Cyborg [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Your Home District [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class=mainText] Introduce us to your life before your Awakening. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class=mainText] Explain how your Awakening has changed your life. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class=mainText] Describe your appearance. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class=mainText] Give us a brief description of your personality. [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class=mainText] What do you struggle with? What parts of your personality are less than ideal? What personal qualities are you not satisfied with? [/div] [div class=mainSubheader] Motivations and Values [/div] [div class=mainText] What is your dream/motivation? What is important to you? Why? [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class=mainText] You may be eight feet tall and shoot fireballs, but everyone is afraid of something. What frightens you? What line will you never cross? [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class=mainText] What is your special power? What does it do? You may have ONE for now. [/div] [div class=mainSubheader] Limitations [/div] [div class=mainText] What are the limits of your ability? Choose THREE ways in which it is not very effective. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class=mainText] Outside of your Astra Powers, what else can you do? What other qualifications, skills, or abilities do you have? [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes (Optional) [/div] [div class=mainText] Quotes about you from other people's perspectives. [/div] [div class=mainSubheader] Reputation (Optional) [/div] [div class=mainText] What are you known for? How well known are you? [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies (Optional) [/div] [div class=mainText] Who are your allies? Your friends, your family, or your mentors? What is your relationship like with them? [/div] [div class=mainSubheader] Enemies (Optional) [/div] [div class=mainText] Who do you not get along with? Why? [/div] [div class=mainSubheader] Organizations (Optional) [/div] [div class=mainText] What organizations are you a part of, or have ties to? [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [/div][div class="variables"][/div]
 
Last edited:
[div class="variables"] [div class="infoBox"] [div class="mainHeader"] Character Sheet Generator [/div] [div class="mainText"] Prototype v.4. Sometimes, copy-pasting removes spaces. If you are affected by this issue, try copying and pasting the code to another program, like notepad, then select all with CTRL+A, copy again, and then paste it to RPNation. [/div] [div class="mainDivider"][/div] [div class="inputContainer"] [div class="mainHeader"]Profile[/div] [div class="mainSubheader"]Title Text[/div][input class="inputBox smallBox charNameBox" type=text placeholder="What title do you want to be known by?"][/input] [div class="mainSubheader"]Profile Image[/div][input class="inputBox smallBox imageBox" type=text placeholder="The URL of the image you would like to use for your profile."][/input] [div class="mainSubheader"]Name[/div][input class="inputBox smallBox nameBox" type=text placeholder="Your full name"][/input] [div class="mainSubheader"]Aliases[/div][input class="inputBox smallBox aliasBox" type=text placeholder="Nicknames or Aliases"][/input] [div class="mainSubheader"]Age[/div][input class="inputBox smallBox ageBox" type=text placeholder="16+" maxlength=3][/input] [div class="mainSubheader"]Gender[/div][input class="inputBox smallBox genderBox" type=text placeholder="Any"][/input] [div class="mainSubheader"]Race[/div][input class="inputBox smallBox raceBox" type=text placeholder="Manu (Human), Deva, Asura, Hybrid (Half-Asura, Half-Deva), Cyborg"][/input] [div class="mainSubheader"]District[/div][input class="inputBox smallBox districtBox" type=text placeholder="Ayodhya (West), Kumbh (East), Arcadia (South), Kailasa (North), Central (Central)"][/input] [div class="mainHeader" style="margin-top: 20px;"]Dossier[/div] [div class="mainSubheader"]Pre-Awakening[/div][input class="inputBox largeBox preAwakeningBox" type=textarea placeholder="Introduce us to your life before your Awakening."][/input] [div class="mainSubheader"]Post-Awakening[/div][input class="inputBox largeBox postAwakeningBox" type=textarea placeholder="Explain how your Awakening has changed your life."][/input] [div class="mainSubheader"]Appearance[/div][input class="inputBox medBox appearanceBox" type=textarea placeholder="Describe your appearance."][/input] [div class="mainHeader" style="margin-top: 20px;"]Psych Eval[/div] [div class="mainSubheader"]Personality[/div][input class="inputBox largeBox personalityBox" type=textarea placeholder="Give us a brief description of your personality."][/input] [div class="mainSubheader"]Fatal Flaws[/div][input class="inputBox medBox flawsBox" type=textarea placeholder="What do you struggle with? What parts of your personality are less than ideal? What personal qualities are you not satisfied with?"][/input] [div class="mainSubheader"]Motivation[/div][input class="inputBox medBox motivationBox" type=textarea placeholder="What is your dream/motivation? What is important to you? Why?"][/input] [div class="mainSubheader"]Fears and Taboos[/div][input class="inputBox medBox fearsBox" type=textarea placeholder="You may be eight feet tall and shoot fireballs, but everyone is afraid of something. What frightens you? What line will you never cross?"][/input] [div class="mainHeader" style="margin-top: 20px;"]Capabilities[/div] [div class="mainSubheader"]Astra Power[/div][input class="inputBox largeBox powerBox" type=textarea placeholder="What is your special power? What does it do? You may have ONE for now."][/input] [div class="mainSubheader"]Limitations[/div][input class="inputBox largeBox limitsBox" type=textarea placeholder="What are the limits of your ability? Choose THREE ways in which it is not very effective."][/input] [div class="mainSubheader"]Skills[/div][input class="inputBox largeBox skillsBox" type=textarea placeholder="Outside of your Astra Powers, what else can you do? What other qualifications, skills, or abilities do you have?"][/input] [div class="mainHeader" style="margin-top: 20px;"]Associates[/div] [div class="mainSubheader"]Quotes[/div][input class="inputBox largeBox quotesBox" type=textarea placeholder="Quotes about you from other people's perspectives."][/input] [div class="mainSubheader"]Reputation[/div][input class="inputBox medBox reputationBox" type=textarea placeholder="How well known are you? What are you known for?"][/input] [div class="mainSubheader"]Allies[/div][input class="inputBox medBox alliesBox" type=textarea placeholder="Who are your allies? Your friends, your family, or your mentors? What is your relationship like with them?"][/input] [div class="mainSubheader"]Enemies[/div][input class="inputBox medBox enemiesBox" type=textarea placeholder="Who do you not get along with? Why?"][/input] [div class="mainSubheader"]Organizations[/div][input class="inputBox medBox organizationsBox" type=textarea placeholder="What organizations are you a part of, or have ties to?"][/input] [/div] [div class="mainDivider"][/div] [div class="generateContainer"] [div class="generate"]Generate Code[/div] [/div] [div class="codeSheet"] [nobr][div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"] [div class="inputValue charNameValue"][/div] [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [comment]*Keep this div empty. Image will be here. Check the VARIABLES section and look for "profileImage" to insert link*[/comment] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] [div class="inputValue nameValue"][/div] [/div] [/div] [comment]*profileInfoBox*[/comment] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] [div class="inputValue aliasValue"][/div] [/div] [/div] [comment]*profileInfoBox*[/comment] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] [div class="inputValue ageValue"][/div] [/div] [/div] [comment]*profileInfoBox*[/comment] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] [div class="inputValue genderValue"][/div] [/div] [/div] [comment]*profileInfoBox*[/comment] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] [div class="inputValue raceValue"][/div] [/div] [/div] [comment]*profileInfoBox*[/comment] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] [div class="inputValue districtValue"][/div] [/div] [/div] [comment]*profileInfoBox*[/comment] [/div][/div][/div] [comment]*profileInfoFlexContainer, scrollBox, profileContainer*[/comment] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div][comment]*menuFlexContainer, menuContainer*[/comment] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class="mainText preserve"] [div class="inputValue preAwakeningValue"][/div] [/div] [div class=mainSubheader] Post-Awakening [/div] [div class="mainText preserve"] [div class="inputValue postAwakeningValue"][/div] [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class="mainText preserve"] [div class="inputValue appearanceValue"][/div] [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class="mainText preserve"] [div class="inputValue personalityValue"][/div] [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class="mainText preserve"] [div class="inputValue flawsValue"][/div] [/div] [div class=mainSubheader] Motivations and Values [/div] [div class="mainText preserve"] [div class="inputValue motivationValue"][/div] [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class="mainText preserve"] [div class="inputValue fearsValue"][/div] [/div] [/div] [comment]*scrollBox*[/comment] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class="mainText preserve"] [div class="inputValue powerValue"][/div] [/div] [div class=mainSubheader] Limitations [/div] [div class="mainText preserve"] [div class="inputValue limitsValue"][/div] [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class="mainText preserve"] [div class="inputValue skillsValue"][/div] [/div] [/div] [comment]*scrollBox*[/comment] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class="mainText preserve"] [div class="inputValue quotesValue"][/div] [/div] [div class=mainSubheader] Reputation [/div] [div class="mainText preserve"] [div class="inputValue reputationValue"][/div] [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class="mainText preserve"] [div class="inputValue alliesValue"][/div] [/div] [div class=mainSubheader] Enemies [/div] [div class="mainText preserve"] [div class="inputValue enemiesValue"][/div] [/div] [div class=mainSubheader] Organizations [/div] [div class="mainText preserve"] [div class="inputValue organizationsValue"][/div] [/div] [/div] [comment]*scrollBox*[/comment] [/div][/div] [comment]*infoContainer, infoFlexContainer*[/comment] [/div][/div][comment]*primaryBox, mainFlexContainer*[/comment] [/div][/div][/div] [comment]*root, aspectRatio, variables*[/comment] [comment][font=Roboto]font reference[/font][font="Source Sans Pro"]font reference[/font][font="Roboto Condensed"]font reference[/font][font=Share]font reference[/font][font="Anton"]font reference[/font][font=Open Sans]font reference[/font][/comment] [comment]setup divs[/comment] [comment]maintains width and height ratio through different resolutions[/comment] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [comment]establishes design space and primary background[/comment] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [comment]layout divs[/comment] [comment]contains all primary flex objects[/comment] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [comment]establishes space for the information you want this design to show[/comment] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [comment]large info box divs[/comment] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [comment]gradient divider between menu buttons and text[/comment] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [comment]profile box[/comment] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [comment]text formatting[/comment] [class name=preserve]white-space: pre-wrap;[/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [comment]text settings for menu buttons. the color of the text changes with hovering so color parameters have been moved to menuButton[/comment] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [comment]invisible scrollbox[/comment] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [comment]scripts[/comment] [comment]initial state hides everything except the center button[/comment] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [comment]changes tabs by finding the tabName of the button clicked[/comment] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [comment]variables[/comment] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url([div class="inputValue imageValue"][/div]); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class][/nobr] [/div] [/div][/div] [class name=variables] --mainAccent: rgba(230, 230, 230, 1); --codeSheetBgColor: rgba(230, 230, 230, 1); --codeSheetFont: 'Courier New', sansserif; --codeSheetColor: rgba(20, 20, 20, 1); --codeSheetBorderColor: rgba(80, 80, 80, 1); --inputFont: 'Roboto', sansserif; --inputColor: rgba(180, 180, 180, 1); --inputHoverColor: rgba(255, 255, 255, 1); --infoBoxBgColor: rgba(0, 0, 0, 0.9); --infoBoxColor: rgba(100, 100, 100, 1); --mainTextFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; [/class] [script class="generate" on=click] // Hide the current code if it was displayed hide codeSheet addClass preserve codeSheet // Get the values and store them in variables set charName (getVal charNameBox) set name (getVal nameBox) set image (getVal imageBox) set alias (getVal aliasBox) set age (getVal ageBox) set gender (getVal genderBox) set race (getVal raceBox) set district (getVal districtBox) set preAwakening (getVal preAwakeningBox) set postAwakening (getVal postAwakeningBox) set appearance (getVal appearanceBox) set personality (getVal personalityBox) set flaws (getVal flawsBox) set motivation (getVal motivationBox) set fears (getVal fearsBox) set power (getVal powerBox) set limits (getVal limitsBox) set skills (getVal skillsBox) set quotes (getVal quotesBox) set reputation (getVal reputationBox) set allies (getVal alliesBox) set enemies (getVal enemiesBox) set organizations (getVal organizationsBox) // Fill in the user values setText ${charName} charNameValue setText ${name} nameValue setText ${image} imageValue setText ${alias} aliasValue setText ${age} ageValue setText ${gender} genderValue setText ${race} raceValue setText ${district} districtValue setText ${preAwakening} preAwakeningValue setText ${postAwakening} postAwakeningValue setText ${appearance} appearanceValue setText ${personality} personalityValue setText ${flaws} flawsValue setText ${motivation} motivationValue setText ${fears} fearsValue setText ${power} powerValue setText ${limits} limitsValue setText ${skills} skillsValue setText ${quotes} quotesValue setText ${reputation} reputationValue setText ${allies} alliesValue setText ${enemies} enemiesValue setText ${organizations} organizationsValue // Show the generated BBCode slideDown 1000 codeSheet [/script] [class name=infoBox] width: 100%; height: auto; background-color: var(--infoBoxBgColor); [/class] [class name=scrollContainer] position: relative; width: 100%; box-sizing: border-box; padding-right: 100px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=inputContainer] positive:relative; width: 100%; box-sizing: border-box; padding: 20px; [/class] [class name=inputBox] display: block; position: relative; box-sizing: border-box; margin: 4px; padding: 4px; border-bottom: 1px solid var(--mainAccent); background-color: var(--inputColor); color: rgba(0, 0, 0, 1); [/class] [class name=smallBox] height: 1.8em; width: 50%; [/class] [class name=medBox] height: 4em; width: 100%; [/class] [class name=largeBox] height: 8em; width: 100%; [/class] [class name=inputBox state=focus] background-color: var(--inputHoverColor); [/class] [class name=codeSheet] display: none; position: relative; width: auto; height: 50vh; background-color: var(--codeSheetBgColor); box-sizing: border-box; border: 1px solid var(--codeSheetBorderColor); padding: 20px; margin: 20px; font-family: var(--codeSheetFont); color: var(--codeSheetColor); overflow-y: scroll; [/class] [class name=collapse] white-space: normal; [/class] [class name=preserve] white-space: pre-wrap; [/class] [class name=inputValue] display: inline; [/class] [class name=mainDivider] width: 90%; min-height: 2px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); color: var(--transparent); [/class] [class name=generateContainer] width: 100%; height: 150px; box-sizing: border-box; padding: 10px; [/class] [class name=generate] width: 50%; box-sizing: border-box; padding: 10px; margin: auto; border: 1px solid var(--mainAccent); border-radius: 2px; background-color: rgba(150, 150, 150, 1); font-family: var(--headerFont); font-size: 3em; text-align: center; [/class] [class name=generate state=hover] background-color: rgba(230, 230, 230, 1); [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainAccent); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--mainAccent); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; max-width: 50%; box-sizing: border-box; margin-top: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=mainSubheader maxWidth=1000px] max-width: 100%; [/class]
 
Last edited:
[class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profile] display: block; position: relative; width: 95%; max-height: 50%; box-sizing: border-box; margin: 10px; border: 2px solid var(--mainAccent); background: var(--mainAccent); [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"] Lexielai [/div] [div class=hexRender][/div] [div class="characterName characterNameText"] The Shadow Princess [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profile]
2gc0SPx.jpg
[/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Clarissa "Rissa" Imperia [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] Rissa, the Shadow Princess [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 22 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Female [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Manu (Human) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Central [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class=mainText] Rissa’s first memories were of playing in the Golden Palace while her mother, Empress Imperia, watched nearby. Rissa eventually grew into a princess, and later understood that while her adoptive mother was not her parent by birth, she was still her mother nonetheless

As the sole heir to the throne, even as an adoptive one, Rissa was treated with the utmost care and respect. By Empress Imperia’s order, she was to be cared for as if she were the Empress herself; and, more so, she was to be kept secret from the Empress' many enemies. A quiet nickname soon caught on among those privy to the secret of Trinity's Shadow Princess.

Being the daughter to the Empress, Rissa was also subjected to many years of training to befit her status. Her tutors educated her in political theory, law, mathematics, engineering, science, economics, religion, and military strategy; her combat instructors trained her in the rigorous traditions of a dozen styles. Rissa hated the endless education. She much rather preferred to spend her time playing in the palace, seeing new sights, and pranking the guards. But she endured it nonetheless, as it was her mother's wish.

As she grew older, Rissa continued to reject the status quo, despite the constant admonishment of her guardians. In time Rissa became a teenager, and consequently developed the typical angst and self-righteousness that naturally accompanied it. She grew to resent the ever-present teachings attempting to prepare her for the future she never decided, but had inherited. They were like prophecies of a imminent, terrible destiny that would trap her forever.

Rissa then began to rebel more drastically. She would sneak out of the royal palace to attend festivals and parties, or spend time indulging in any variety of forbidden activities. Whatever it was, Rissa was determined to be doing something her mother had not decided for her; better yet if it was something the Empress would rather she not do. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class=mainText] Then, at sixteen years old, Rissa's life was turned upside down. She became an Astra. A woman with supernatural abilities. A superhero, or so she liked to think of it. Rissa became swept up in the excitement that crowded the Royal Court, who were ecstatic that the heir was even more worthy than expected. Immediately her new status became a top level secret, and soon the Shadow Princess was scheduled to proceed with intensive training to develop her abilities.

It went well. Without a hitch. As if they could predict her every need, which was usually no surprise when you were the royal heir. But Rissa's gut gave her an uneasy feeling nonetheless, because there was something almost too prompt in their response. It was too much like business as usual...as if they were ready for it.

Her mother dismissed her concerns with an enigmatic smile, but Rissa noticed that the Empress didn't seem so surprised either. Then again, it might have been her imagination. Her mother had always been hard to read. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class=mainText] Rissa is a fit young woman with vibrant skin and a shapely form conditioned by years of training. Her heart-shaped face, framed by the bangs of her deep red hair, hardly captures the ferocity hidden behind her bright golden eyes. While her gorgeous features are in some ways natural, they are also the result of subtle genetic modifications made by royal artists. Although she is unhappy that the modifications were made while she was still too young to decide for herself, Rissa continues to reap the benefits of her engineered beauty.

She mainly likes to dress in black outfits, and tends to carry a shortsword under her also black cloak when she travels in disguise. While Rissa sometimes imitates the enigmatic, shadowy-cloak style of her mother, she adamantly denies the resemblance being intentional. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class=mainText] Clarissa, or Rissa as she prefers, is a fiercely independent woman. She hates it when people make decisions for her; it not only feels patronizing, but also leaves her feeling helpless, as if she has lost control. This contributes to her continual rejection of the status quo and defiance against authority.

When caught in casual conversation, she often acts carefree and playfully as a way to distance herself from her heritage. What's more, she even uses humor and sass as a barrier, walling her inner feelings off from the outside world.

Nonetheless, she is a compassionate and loyal person who is not completely opposed to performing her duties for the sake of her people. Rissa is merely frustrated, trapped by the burdens she inherited and yearning to decide her own fate. [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class=mainText] Rissa is used to faking sincerity, and putting on a sociable mask to keep people at arms length. She also avoids dealing with strong emotions and loss by using humor and pretending to be carefree. On top of that, she also has a rebellious streak that can quickly get her into trouble. [/div] [div class=mainSubheader] Motivations and Values [/div] [div class=mainText] Rissa dreams of one day becoming independent of her mother's influence, but doesn't see how that is possible. She also values compassion, self-empowerment, and freedom. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class=mainText] Rissa fears being chained down forever by her royal burden. She also fears loneliness, but ironically is afraid of opening herself up and becoming closer to people. As for taboos, Rissa wants to believe that she would never be a coward. But, well, it's debatable whether that's really true. [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class=mainText] True Strike. Rissa has the power to imbue any object she touches with incredible striking power, including herself. With her training, she is able to focus the force her object applies into an incredibly small point, simulating both increased mass and amplified force. [/div] [div class=mainSubheader] Limitations [/div] [div class=mainText] Rissa's ability is purely offensive, and has no real defensive components. Additionally her power works in short bursts but cannot be sustained for long periods of time. And Rissa currently has a limit to how small a point she can focus her power on, which sets an upper bound on how powerful she can make her attack. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class=mainText] Rissa is highly educated in both academic and practical fields. She is competent at most forms of science and mathmatics, is a capable writer, an excellent military tactician, and also well-versed in several forms of hand-to-hand combat as well as weapons handling.

She is also a fantastic dancer. But don't tell anyone that, or she'll kill you. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class=mainText] “My daughter...the day I took you in, all of Trinity stood still. The harsh winds of Kailasa turned soft; the lively forests of Arcadia hushed silent; the bustling, roaring hubs of Ayodhya became tranquil; the ancient temples of Kumbh suspended their prayers; and the grand statues of Central stood in quiet rapture. It was as if all of Trinity whispered your name...Clarissa.” - Empress Imperia. [/div] [div class=mainSubheader] Reputation (Optional) [/div] [div class=mainText] Rissa is the Shadow Princess, the secret heir to the immortal empress. She is completely unknown except among very, very well connected circles. But among friends she is known for her sass and playfulness. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class=mainText] The Empress, and the entirety of the Royal Court, count among Rissa's supporters. She has some very powerful allies to call upon if she so desires. [/div] [div class=mainSubheader] Enemies [/div] [div class=mainText] The Royal Court includes several individuals that would like to bound Rissa to service to Trinity, which puts them distinctly on Rissa's "Go to hell" list. [/div] [div class=mainSubheader] Organizations [/div] [div class=mainText] Rissa has significant influence in the very upper echelons of Trinity, but because of her anonymity, she does not have a huge amount of standing in most other areas. [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div]
 
Last edited:
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"]
Seven [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Jayla Dawnstrider [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] Seven [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 27 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Female [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Half-Deva [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Central [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class=mainText] Jayla was a Grounder. Deep in the lowest depths of Kumbh, she lived out the first half of her childhood in a poorly funded, decrepit orphanage. Few people came to adopt, and those that did selected other children. Pure children; not the half-breed, like her.

It didn’t help that she was always shy. And so when the orphanage ran out of funds and shut down, the little white wallflower sat, lonely, in the streets.

She learned to survive; learned to know her place, keep her head down, and only speak when spoken to. For a time, she became a petty thief, pickpocketing and scamming on the behalf of adults.

Then someone came looking for her. A mysterious woman, in a dark cloak, with long shadows across her features. Jayla froze, entranced, as the woman crouched by her.

Jayla looked down, afraid. The woman touched her wrist, gently. “I’m not here to hurt you,” she said.

There was something in her words that felt real. Genuine; as if, in this black world of lies, the truth shone like a bright light. Jayla looked up into her dark hood, searching for eyes that hid from her. But the delicate, enigmatic smile did not. “Would you like to get away from here?” the woman asked.

“Yes,” Jayla squeaked.

And so she joined the Royal Family, and became Seven. The Seventh Royal Guard. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class=mainText] When Seven arrived, she was immediately introduced to her charge for life. A small, excitable little girl with bright red hair, a few years younger than her, who only ever wanted to play. And play. Then nap. And play again.

Seven took some time to adjust to her role, but she was good at listening and following orders. She became an eternal shadow, always watching out for her charge. Her princess; a girl she grew to love. Despite her age and origin, the Empress’ personal order guaranteed that Seven receive the same education as the princess herself and then some. It was hard, but with her princess in mind, Seven had no issue with burning the midnight oil long after the palace had quieted to study, and make up for her lacking background.

It was at some unknown point in time during her tenure as a Royal Guard that Seven awakened her powers. The ability to summon weapons, which the Empress instructed during a private audience, was not merely to attack. But also to protect with many arms, reminiscent of the fierce goddess Durga. Seven swelled with pride, and resolved once more to protect her princess with her life. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class=mainText] Seven is often dressed in formal attire that radiates elegance, and hides the passionate deadliness underneath. To most she would simply appear as an attractive handmaiden or servant, almost human except for her exotic white hair and glowing blue eyes. She often keeps a placid, polite, and borderline cold expression, and her eyes are always observing. Always searching, ever vigilant. Only when in the presence of her princess, Clarissa Imperia, does she ever smile. And a beautiful, happy smile it is.
[/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class=mainText] Seven often comes across as a shining example of formality and “proper” behavior. She is polite, and respectful, and rarely ever oversteps her bounds or commits faux pas. Sometimes, of course, she forgets not everyone has perfected the art of navigating the upper echelons of society as well as she has. Yet despite first appearances, Seven knows very well the pains of the less fortunate, so she occasionally goes out of her way to do what kindness she can.

But this is ultimately superceded by her intense feelings of loyalty and duty to the her princess, the Empress, and then the Royal Court in that order. There have been many occasions where Seven has awoken and felt grateful for the opportunity given to her, and motivated to do her job perfectly thereafter. Because she is an absolute perfectionist, and an obsessive one at that. [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class=mainText] Seven is, much of the time, overly obsessive and loyal. She often spends little time thinking for herself and more so on the behalf of others, which both impacts her self care and her relationship with those she has sworn loyalty to. Her morals are even set aside when her duty is on the line, which can lead to some questionable decisions even with good intent. Unsurprisingly, Seven is also rather stiff and proper, and rarely relaxes. This can make her difficult to interact with outside of a formal setting. [/div] [div class=mainSubheader] Motivations and Values [/div] [div class=mainText] When all Seven could see what darkness, there was one light she clung onto. Her princess, Rissa, who she has sworn her life to and will do anything for. While Seven does believe in compassion, equality, open-mindedness, reflectiveness, and hard work, ultimately these are all conditional that they do not interfere with her duty. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class=mainText] Seven is deeply afraid of losing her princess, and of becoming a failure to her in general. She judges her own self worth based on how well she is able to serve Princess Clarissa, and so tends to fall into a depression when she feels she did poorly. [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class=mainText] The Blessing of Durga, the Invincible. In the tenets of the Faith, Durga is the warrior goddess, and the fierce form of the mother goddess. She is said to have many arms, each carrying a different weapon.

Unlike Durga, Seven only has two arms. But she does have many weapons. The Blessing of Durga allows her to store weapons in a small pocket dimension and summon them at will. Consequently turning her into a veritable armory, and always packing enough firepower to outfit a small army. [/div] [div class=mainSubheader] Limitations [/div] [div class=mainText] Seven may instantly summon or dismiss a weapon, but she may only have one out at a time. This limits her flexibility somewhat. Additionally only Seven may use the weapon she has summoned; attempting to pass the weapon on to someone else will cause it to instantly de-summon.

There are also limitations based on the weapons themselves. Seven does not create the weapons, but rather stores an existing one in her Weapon Space. And only certain types of equipment that the power considers “weapons” may be stored within the Weapon Space. The exact definition tends to be vague. The power usually follows common sense but occasionally it, frustratingly, defies logic. Almost as if it is at the whim of the gods. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class=mainText] As a Royal Guard, Seven is educated in both acting the part of a member of the Royal Court and ruthlessly annihilating all threats to the throne. Her skillset is wide and varying, ranging from hosting formal events to sharpshooting to entertaining precocious, energetic princesses. As a combatant and bodyguard, she is both relentlessly efficient and deadly, and as a Royal Guard has naturally been trained rigorously enough to rank among the elite warriors within Trinity’s ranks. That is not to say, however, that her other skills are not up to snuff either; as a constant companion to the princess, Seven is also highly educated in the sciences, mathematics, and the arts, among the less savory topics she has also picked up along the way. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class=mainText] “Seven? Don’t mind her. She’s just a servant girl. She can’t be that important; I mean, her name is a number!” - Minor Official in the Royal Court

“Who?” - Most people. [/div] [div class=mainSubheader] Reputation [/div] [div class=mainText] Seven, as a member of the Royal Guard, is kept anonymous for security purposes. One of her most useful assets is the ability to hide in plain sight, and so her status and identity are kept secret outside the confines of the Royal Court. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class=mainText] Seven considers Princess Clarissa to be her best friend, and the Empress to be like a distant mother figure. She has not had the opportunity or desire to befriend anyone outside the circles of the Royal Court, and even then tends to shadow behind the princess instead. While Seven is acquainted with the other members of the Royal Guard, there has always been a subtle rift between them that she could never resolve. They remain more like distant coworkers. [/div] [div class=mainSubheader] Enemies [/div] [div class=mainText] All enemies to the crown, and to the princess especially, are Seven’s enemies. Whether they know it or not. [/div] [div class=mainSubheader] Organizations [/div] [div class=mainText] Seven belongs to the Royal Guard as well as the Royal Court, although her relative anonymity means she is unknown outside these circles. [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; overflow-y: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; height: 1.6em; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] max-width: 100%; height: 50vh; margin: 0px; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); whi[/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); line-height: 0.4; white-space: normal;[/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100vh; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://i.imgur.com/JBOh7yO.jpg); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --characterNameHeight: 15%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
Last edited:
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"]
Accelerator
[/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"]
Kalix Caspian Grey
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"]
Grey || Kal || Cas || X1
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"]
20
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"]
Male
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"]
Manu || Cyborg
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"]
Central District
[/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class=mainText] Throughout Kalix's life he had never once experienced poverty nor lacked in anything money could buy; rather he endured hardships through those who he 'owed' his comfortable existence; family.

From the beginning his birth was the product of an arranged marriage between the son of a Royal Court official and the Direct Administrator of Rapture, the City's leading innovative force in Advanced Bio-engineering and DNA modification. The union was purely for political gain but the importance of 'keeping appearances' was not lost between both parties. Kalix was the result of their effort to appease the many scrutinizing eyes upon them.

As expected most if not all of his genetic makeup had been engineered and altered. It was nearly inevitable that he was used as the leading poster child of Rapture genetics. Perfection was expected of him; anything less was met with his mother's cold, disapproving eyes. The only one who seemed to truly treat him as a child was his father. The man was powerless against his wife and own parents but he always found a way to protect his son.

The was until Kalix's 15th birthday. The official reports had stated that they had been caught in the crossfire of the infamous radical terrorist group, Valkyrie. A series of calculated explosions had destroyed not only the streets but most of the surrounding buildings within a 2 block radius. There were over 105 injured, 82 in critical condition, and 13 dead. The latter including his father and the four guards who had been assigned as their entourage. It was considered a miracle that Kalix had survived.

It had however left him nearly brain dead. Fortunately, his mother had the entirety of Rapture at her expense. It didn't take long before a solution was found. A mix of bio-synthetic material and progressive machinery was used to create X1, an experimental prototype made to replace a large portion of his damaged brain matter. It not only acted as an improved conduit but also came with a series of 'upgrades'. As his brain was now essentially part machine he could not only process an exceptional amount of data near instantaneously but also store and recall memories in perfect clarity. His missing right eye had also been replaced with an artificial optic sensor to better suit the new additions.

With his position, his survival and recovery had been a widely publicized story. It had raised some controversy over race as a few outspoken individuals argued that X1 made him a cyborg. The general conses however was that as long as he didn't adopt any unfavorable prosthetics then he was still largely human. Out of sight out of mind. With the sudden development of his abilities this debate was largely pushed aside and forgotten except for all but the persistent few.
[/div] [div class=mainSubheader] Post-Awakening [/div] [div class=mainText] The discovery that he was an Astra had caused an uproar that shook the foundations of Kalix's life. Everyone had their own opinion, their own agenda to use and discard him. Unexpectedly it was his mother that shielded him away from the unwanted attention. Ever since the incident she became a constant in his life whether that meant through a carefully crafted itinerary or the rare gifts he received upon meeting her expectations. If he ever disobeyed her wishes however the cold and distant women would return with full force.

Upon the recommendation of his grandparents Kalix was sent to Kumbh to attend one of it's most prestigious boarding school, Trinity Military Academy. There he was set the task of honing and refining his abilities to prevent endangering himself and those around him.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class=mainText]
52576767_p20_master1200.png
As per requirement of his parents arranged marriage his grandparents were able to 'request' a very specific list of genetic qualifications the future Grey heir would possess. The first being a pair of prominent silver irises that the family was well-known for. They would naturally surface once every few generations but with modern technology all familial members possessed the striking pale eyes. The second were refined, aristocratic features that would tell of his wealthy upbringing and status. There were quite a few specifications listed under this category including an exact height of 6 feet, no less, no more. Everything else was up to his mother and fathers choosing. The only natural aspect of the 'final product' was perhaps his dark, unruly hair.
[/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class=mainText]
Trans_2.png
As a child Kalix was expected to be nothing less than formal, polite, and precise. Expressing too much emotion, according to his etiquette teacher, was counter-productive and ill-advised. It was of paramount significance to keep such feelings at bay in order to remain level-headed and composed at all times. On the other hand his father begged to differ. What was really important was knowing when to speak and when to wait and be silent. At the end of the day he had taken more after his father both in his teachings and mannerisms much to the chagrin of his grandfather. After the incident and transplant however it was noted that his emotional output had become muted. While he was still fully capable of 'feeling' it very rarely rises above that of a subdued state.
[/div] [div class=mainSubheader] Fatal Flaws [/div] [div class=mainText] Many researchers had stipulated Kalix's lack of emotional response was due to X1's unique bio-synthetic nerve cells prioritizing memory and attention within the limbic system rather than the amygdala. Overtime he realized he could choose to completely shut off the connection to it, not only muting his emotions but completely rendering them obsolete. On more than one occasion he has found himself being tempted to do so but he knew, if anyone, his father wouldn't have wanted that. Rather he continues to struggle to express what others do so easily.
[/div] [div class=mainSubheader] Motivations and Values [/div] [div class=mainText] A significant portion of Kalix's personal principles and beliefs had been nurtured by the teachings and examples of his father. The man had been a great teacher, patient but firm and had never once raised his voice. When others comment on how much he takes after his father it's by no means an exaggeration.

That is perhaps why no one suspects his ulterior motives to use his family's political connections to track down his father's murderers and finally put his memory to rest.
[/div] [div class=mainSubheader] Fears and Taboos [/div] [div class=mainText] Giving in and shutting off his emotions as he isn't so sure if he'll be able to come back from it.
[/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class=mainText]
Trans_1.png
Vector Manipulation deals with the ability to control the vectors of matter and energy. The user can change the magnitude and direction (vector) of an object to maneuver it in the desired way, regardless of preexisting vectors. This also applies to static or non-moving objects, technically speaking, the object still has momentum as it is moving through space. Since nearly everything in existence has vectors, manipulation of them can essentially grant the user an "Absolute Defense" that prevents the user from harm, among many other possibilities.
[/div] [div class=mainSubheader] Limitations [/div] [div class=mainText]
  • This ability relies heavily on complex calculations to function properly and safely. A single variation would be detrimental not only to those around him but also to himself. Although with the addition of X1 he can easily compute the required applications to keep his powers in check whether consciously or unconsciously.
  • [UNKNOWN] A normal human brain, even that of an Astra's, cannot withstand this ability at it's full force and will cause severe damage until the user is dead.
  • The more complicated the manipulation or 'calculation' is the more conscious use it needs to work. Basically, he would need full concentration and would be vulnerable if someone decided to attack him unexpectedly. This goes for something like controlling vectors he's never experienced before (ie. every supernatural or bending laws of physics power). The more concentration he needs on the action the weaker the effects of his other abilities get (ex. focusing on someone with spacial rift abilities when out of nowhere another person comes in with a bat. Full concentration = bat hits him full force; Most = Impact is largely absorbed but it's like hitting jelly and if he doesn't respond in time the second hit would meet its mark; Partial = Similar to the second except there will be significant pushback on the attacker ie. half the force of their attack would be redirected back towards them; Barely = Attacker will receive the full force of the attack power they used.)
    • The more he's focusing on one ability the more power it has but if he's doing all sorts of stuff the weaker the results would be. A group of people could use this to their advantage by having someone pull all of his concentration before simultaneously attacking him.
  • Attacks that are built upon laws or vectors unknown to him can penetrate his defense. While he can eventually adapt quickly to it if used fast and hard enough during the first combat it could completely shut him down.
  • Someone with fast enough reflexes can by-pass the redirection vector by applying a full force attack and then pull back at the last minute, therefore causing Kalix's own ability to backfire and redirect the hit to come towards him. The barrier for his redirection is not an absolute defense since it only reverses the vectors that are coming towards him, any vector that comes towards his barrier and pulls away at the exact moment before hitting its field will go towards him.
    • This can only be used so many times in prolonged combat before he adapts to it.
    • It is, however, an easy way to get the first hit in with his ability.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class=mainText]
  • The upgrades of X1 has essentially gifted Kalix with the brain power of a supercomputer. He can calculate large volumes of data near instantaneously and can recollect memories without a single aberration. He is also able to reconstruct and pre-construct a sequence of events in order to gain an accurate representation of past or future actions.
  • 10 years worth of etiquette, violin, horse-back riding, and figure skating lessons has rendered him adept in all fields although he isn't quiet sure if he can still play the violin by ear as he used to.
  • More recently during his time in Trinity Academy he has made remarkable progress with combat proficiency and weapon management. He has also developed muscle memory, increasing his aptitude in motor skills.
  • As per required by his mother he has been taking private studies on bio-engineering and applied science.
  • He's also volunteered as a tutor at the academy for the last three years before graduating and has acquired some skills in teaching and training others.
[/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class=mainText] "Follows instructions, ideal attendance, and passes exams. He was an...acceptable student."
-Lieutenant Leeyung

"Oh! Grey? He was a great tutor! I would have never gotten through half my classes without his help, same goes for my friends. It's a shame that he's already graduating, I never had the chance to ask him to winter formal...wait, this interview isn't being publicly published rig-?" -Random Student

"A cyborg through and through. Just cause you can't see it doesn't mean the impurity doesn't exist. When it shows its true colors you all better hope we can still send it to the scrap yard." -Anon Online User

"A curiosity, a marvel? Yes. A danger? Unfortunately, yes. While Kalix Grey is a rarity among us his power has exhibited instabilities with catastrophic consequences. It all hangs in the balance of a never-before tested prototype implant. Yes, Rapture is an undeniably reputable source but it must know that the cons greatly out way the benefits." -Established Biochemist & Bio-technologist, M.T. Quantum

"..." -Natasha Catalina Grey, Mother, Head Administrator of Rapture

W.I.P -Second Character
[/div] [div class=mainSubheader] Reputation [/div] [div class=mainText] In general Kalix is considered as a celebrity of sorts among the citizens of Trinity City with his connection to the 'Incident' and status as an Astra. While the more politically-minded crowd are drawn to his position as a Grey and heir to the Rapture enterprise. Within Trinity Academy however he was simply well-known by the staff and students as an avid tutor and exceptional student. Finally, the science community of course is intrigued by his powers and have expressed a number of mixed opinions over the topic.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class=mainText]
  • Despite his apparent indifference Lieutenant Leeyung considers Kalix as an exceptional soldier as well as an individual. He would be ready to stake his reputation and safety to stand up for him. Was a past 'acquaintance' of his fathers.
  • His mother has spent the past 5 years battering down press and negative public opinion. She has been and still is the sole wall standing against him and those foolish enough to try and publicly attack her son.
  • While he and his grandfather has never seen eye to eye the man will do anything to keep the Grey name untainted and will therefore reluctantly come to his grandchild's aid.
[/div] [div class=mainSubheader] Enemies [/div] [div class=mainText]
  • A small group of purist elites that aim to constantly remind the general public of his less than human additions and verbally attack him at every turn. They've yet to carry out their supposed threats but with these kinds of people no one would put it past them to be crazy enough to try eventually.
  • The Valkyrie, while largely inactive since the 'Incident' will forever remain as an antagonistic figure in his life.
[/div] [div class=mainSubheader] Organizations [/div] [div class=mainText]
Trans_3.png
The Grey family, having been a part of the Royal Court for many generations have many connections and significant influence in the political world. With the recent merger of Rapture Enterprise they are now the top influencers of DNA modifications, bio-engineering, and research. At his time in Trinity Academy he met many current and future military figures, gaining some traction in that area.
[/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; overflow-y: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; height: 1.6em; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] max-width: 100%; height: 50vh; margin: 0px; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); whi[/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); line-height: 0.4; white-space: normal;[/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100vh; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url(
https://s20.postimg.cc/apdqrj4sd/Shokudaikiri.Mitsutada.full.2269357.jpg
); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --characterNameHeight: 15%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
Last edited by a moderator:
[class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profile] display: block; position: relative; width: 95%; max-height: 50%; box-sizing: border-box; margin: 10px; border: 2px solid var(--mainAccent); background: var(--mainAccent); [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"] Lexielai [/div] [div class=hexRender][/div] [div class="characterName characterNameText"] Kalinychta [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profile]
chow_213_black_mage_by_theoriginale-d34yx1w.jpg
[/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Valta Zeiphim [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] Kalinychta [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 25 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Male [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Hybrid (Asura) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Ayodhya [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class=mainText] Valta was a coward. Being half Asura didn't help as he grew up and even worse was where he'd grown up. Living in the lower levels of Ayodhya, he was exposed to his fair share of discrimination for his parentage. His fear of the world was only further exacerbated by the idea that he could be attacked at any given moment, whether he was in his own home or not. It was only his intelligence that had kept him safe. He knew the right places to go, the right places to hide, and the right people to avoid. Fear kept him alive.

Things were not always bad though. His family life was very good, his parents worked hard to ensure that he got a good education and didn't fall into a life of crime or squalor. This generally meant that he was pushed harder than other kids his age. Fear of people pushed him to isolate himself, completely dedicate himself to learning and getting away from everything he was afraid of. He did.

His struggles weren't in vain. Despite his place of birth or his lineage, he was accepted into a rather prestigious school on the higher level. He'd finally gotten away from the crime and prejudice of the lower levels and he found one thing to be true. He was terrified! He was alone. His parents couldn't live with him at the school. He lost the one bit of comfort he'd always enjoyed. Even worse, he hadn't really gotten away from anything. Just because it looked nice and bright didn't mean that the top levels were any better. They just hid it better behind their lights, blinding everyone.

In the end, all he wanted to do was disappear, to vanish into the darkness. So he did. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class=mainText] It happened when he turned twenty years old. He'd been sitting in his room, curled up and holding the present his mother had mailed him, a small cupcake resting on the bed, watching as the candle slowly burned. He'd wanted to go home, to disappear from this scary place with false smiles and happiness. No matter how intelligent someone was, they always held prejudice against those they were raised to hate. He wanted to vanish and he made a wish. When he blew out his candle, his room was shrouded in darkness. For the first time though, he was unafraid. Of the darkness, of the people, it was comforting to sit in the darkness of his room.

There was no big boom, no flashy spectacle signifying his change. It was actually several minutes before he realized that he could see perfectly fine. Everything was tinged in a grayish color, but he could make out everything perfectly well. He felt good. He walked over to the door and opened it. As soon as the light hit him, he felt all of his fear return en masse. Immediately he slammed the door and sunk to the floor. After a few seconds, he was fine again. The darkness helped calm him.

The first use of his abilities came later when he finally got up the courage to open the door. His fear of the light, of the fear it brought caused the darkness of the room to stretch out, blocking the light coming from the hallway. He knew he couldn't keep blocking the light out all the time though. So he wrapped himself up in various cloths and took his present, a large, unusual hat and placed it upon his head. At first he'd thought it a bit weird but now he thanked his mother for making it. It shrouded his head in darkness, keeping him safe.

Life became easier after that. Looks and mockery didn't faze him as it used to, he could whole-heartedly focus on learning and making a living, to give his family a better life. He was still wary of people and the world in generally, but it wasn't the crippling fear he'd had before. He even took a self defense class to learn how to defend himself with a staff. It was fun. With his education, he even designed better clothing for himself, designed to match his hat, every ounce of his clothing acts like lightweight armor and self cools because wearing layers of clothing can be hot. After school, he moved into learning how to make better technology for those on the lower level. If the upper level could look nice, so could the lower level.

Valta also learned a strange side effect of his abilities as he practiced with them. Years of keeping darkness pulled around his body had indeed strengthened his control, but it had given him a high sensitivity to light. Being exposed to it cause him to feel like he was burning. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class=mainText] Underneath his iconic clothing, Valta looks relatively normal for his lineage. Black hair is neatly trimmed short. (He can see through darkness, not hair.) His skin is ash gray, though even before his awakening, this had been his skin color thanks to his father's Asura blood. His eyes are quite striking and almost an oxymoron given his aversion to the light. They glow softly with a yellowish light, generally the only thing people see through the veil of darkness around his face.

While mildly toned from exercise, he is more on the skinny side. Lack of funds and a perpetual fear of everything had stunted his growth bodily wise. At five foot six, he is already taller than what he was proposed to reach. Years of eating well, in both school and work have made sure that he doesn't look malnourished though.

He is never seen in any other clothing other than his normal garb. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class=mainText] Even with his clothes, he isn't exactly the most confident of people. Just because he uses it to overcome his fears doesn't mean that he's suddenly become exceptionally gifted at speaking to people. However, he also understands that he can't get things done without conversing. He'll offer insights and thoughts but don't expect him to go out partying. If anything, he prefers a dark room and intelligent conversation.

Naturally, without his clothes he is completely useless. Even removing his hat is enough to cause him to pale in fear. Without the comfort of darkness, he becomes that fear ridden child all over again, incapable most conversation aside from one word answers.

Outside of interactions with people, his real passion is studying new things and putting them to practical use. [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class=mainText] Fear is one of his greatest flaws. It has kept him alive in the past but using his shadows as a crutch has only made his fear worse, to the point where he is paralyzed without the protection his clothes and shadows provide. He'd love to find a way to deal with it but the very idea that he'd have to stop using his shadows to deal with his fears, fills him with fear. Aside from his fear, he also doesn't deal with strong willed people well and will accede control to them in favor of a support role. [/div] [div class=mainSubheader] Motivations and Values [/div] [div class=mainText] Originally, his only goal was finding somewhere safe. After finding out that no where was particularly more safe than anywhere else, he decided to improve the lives of those like him, too afraid to deal with the world around them. He is also very filial, hoping to repay his family for all the hard work they did to get him into a high end school. The things he studies, the things he makes, he strives to use them to make everyone happier and less afraid. He is commonly referred to as Kalinychta. Despite his mysterious appearance, his kind nature often has people referring to him with this name, meaning Good Knight. (Kalinychta is Greek for Goodnight. I'm using this as a play on words and to reference his abilities.) [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class=mainText] Everything, without his clothes. Fear is a pervasive thing in his life. Irrational fears aside, even with his abilities, he is afraid that he isn't good enough to do what he set out to do, that his goals of improving the lives of those less fortunate will never come to fruition because of some inadequacy he failed to notice. One of the promises he made to himself was that he'd never make something that was designed to intentionally harm someone. [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class=mainText] Conceptual Darkness Manipulation The power to control conceptual darkness. Valta can wrap himself or others in darkness as well as drain away the light from the surrounding areas to further hide himself. He can even create things out of shadows though they have no substance. [/div] [div class=mainSubheader] Limitations [/div] [div class=mainText] No combat effectiveness. Valta is the best at hiding but none of his abilities allow him to harm another being. A shadow blade made by him would be less effective than a foam knife. Bright light is actually capable of harming him. Giving himself fully over to his dark abilities has made it painful to stand within the light without proper covering, hence the outfit he wears. He has an effective range of twenty feet for absolute darkness, beyond that range light is dimmed but not completely snuffed out. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class=mainText] Valta is skilled at using his hands and is often seen tinkering on some device or another. Many would consider him an engineer given his proclivity for manipulating the various devices around the city. In close quarters combat, he is alright, more along the level of "I can defend myself" than a full blown combatant. After all, he'd prefer to avoid a fight if he could. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes (Optional) [/div] [div class=mainText] "He looks a little creepy" "He's intelligent though, did you hear about that..." "What's with the clothes?" "With his skills, he could make so much money, but he only charges enough to cover the resources" - Various sources

"There are many people and many things in this world, all of them are going to be scary or dangerous in some capacity. You'll have to deal with it eventually but know that no matter what, you can always come home. You'll always be safe here" - Almea Zeiphim

"People are always going to hate what they fear. You are better than most in that regard, you fear everything! Haha! Yet look at you. Struggling to improve the lives of people who wouldn't give two thoughts about you. Now in my opinion, that takes some guts" - Loq'eil Zeiphim [/div] [div class=mainSubheader] Reputation (Optional) [/div] [div class=mainText] Valta is actually well known in the scientific community as well as the lower class community. While his inventions haven't been exceptionally world changing, they've made all the difference to those who couldn't afford the more expensive devices. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies (Optional) [/div] [div class=mainText] Almea and Loq'eil Zeiphim, his mother and father are those he'd be closest to. Most other people are kept at a distance. He has acquaintances in the scientific community but no one he'd call close friends. [/div] [div class=mainSubheader] Enemies (Optional) [/div] [div class=mainText] There are quite a few people that aren't happy about his choice in investments and quite a few more interested in why he covers his body so often. No one directly confrontational though. [/div] [div class=mainSubheader] Organizations (Optional) [/div] [div class=mainText] Valta is tied to several places, mainly those who use his skill for repairing devices or to consult on less secret experimental technology. Of course, he has his own reasons for getting involved with so many groups. He wants to eventually get to study the more mysterious technologies of civilizations long passed. He also hopes to get the support of the Empress to improve the quality of life for all districts. [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div]

There is my character. I hope that everything is satisfactory. Please tell me if there is anything you want me to change and if you want me to add some connection to other characters.
 
Last edited:
[class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://i.pinimg.com/564x/4a/5b/09/4a5b094aa0813367e5d8821ffb835a0a.jpg); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"] Lexielai [/div] [div class=hexRender][/div] [div class="characterName characterNameText"] The Serpent [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Astika Rimbaud [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] The Serpent [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 21 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Male [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Asura-Manu Hybrid [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Arcadia [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class=mainText] Son of a Manu from Ayodha, and an Asura from Arcadia, his childhood was controversial, to say the least. The eldest child of the household, he's had to live a life feeling pressure from all sides. His youth was spent learning fungiculture and the family business, with his spare hours split between studying the things middle level kids would in their schools, and reading his father's extensive poetry collection. As a young adult, he's done more hands-on work with the farm, but has found that now, since he's become a master of Fungiculture, his time spent learning it could now be put elsewhere. He studied more of poetry. He exercised his freedom. He began socializing with other hybrids. All seemed to be well, for a time... A young man with as bright a future as one born so low could hope to get. But we know how this goes. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class=mainText] Astika's awakening was not gentle. He and his friends were returning from a local coffee shop, having been part of a poetry recital with them. He was particularly proud of his own piece, and it was received well. But they ran into a local gang. All Asura. They disapproved of the 'filthy halfbreeds quarterbreeding' and began a fight. One of them died, and the other four were admitted to the hospital for serious bite wounds, concussions, and severe poisoning with an unidentified form of viper venom. Astika hid his involvement at first, but once the authorities asked him, he admitted fault and revealed his Astra status. Though ruled as self-defense, many at the time called for his head, and Astika took up self-defense courses, hoping to gain finer control of both his powers and himself. His control has improved significantly in the time since he began, but he's begun to feel lonely. More alone than ever. His friends are nervous around him at times. Strangers avoid him. Acquaintances are scared, and even his family seem to stand at a distance. Maybe amongst other Astras, he can find his place in the world once more. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class=mainText] His serpentine heritage shows, doesn't it? Green eyes with slit pupils, large scales on his skin, even small fangs and a forked tongue mark him as a Lamia's son. But he's part Manu, as well. Dark hair, a youthful face, and a wiry, tailless body are all inherited from his father. His naturally dark nails are something of a mystery, but he doesn't care much. He tends to dress warmly, preferring long sleeves, thick fabrics, and things like knit caps, scarves, and gloves. The underground is rather cold, after all. However, oftentimes he can be caught wearing overalls, boots, and a synthetic jacket, his standard work clothes for working with the various mushrooms and fungi his family cultivates. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class=mainText] Everyone says he's kind-hearted. A friendly boy. He was. Now he's on edge. Stressed, untrusting, even paranoid at times. It's clear he wants to be happy, to experience life with his friends and family as a normal person would. Some of that happy farming boy shine through, though. He still reads poetry, and would gladly recite any that he knows. He still shows a deep interest in fungiculture. He still has passions, feelings, and even confessed to longing for someone to share those feelings with. But these things rarely show now... [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class=mainText] His circumstances have brought him near the breaking point. He's become prone to fits of anger, and though he doesn't get violent, it's clear that his restraint is only just keeping him in line. He doesn't want to break, but he's falling apart and everyone he used to know isn't helping him put himself back together... And he doesn't trust anyone new to pick up the pieces, either. He dearly hopes that the other Astras can help him through this, and might open himself up to them, but... Should he? Can he trust someone more powerful than himself? [/div] [div class=mainSubheader] Motivations and Values [/div] [div class=mainText] He values family, hard work, and the creative mind. Though some part of him hoped he could someday earn his family a place in the sunlight, becoming an Astra has changed things. He might have more opportunity to do so. But he might also just become a slave of the society that forced his family into the shadows to begin with. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class=mainText] In Astika's childhood, a great fire raged across his neighborhood. Though he was uninjured, his mother's face was badly burnt, and her right eye had to be surgically removed. Though a mechanical one took its place, and she made a full recovery, the incident left Astika with a permanent fear of fire. As for Taboos, he has mixed feelings over the gang member he killed on the night of his awakening. He has since swore never to kill again, and only summons his serpents to practice, learn more, and... In case of the most dire emergency. [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class=mainText] Serpents as weapons: Astika can summon serpents formed of a mysterious, magical-seeming energy at will, and utilize them in combat as weapons. Thus far, he has only discovered the Vipers. However, he believes there may be other snakes available to him...

Vipers: A pair of vipers with unnaturally long fangs. In combat, they can bite and strike opponents, but Astika prefers to use them as one might use a Kyoketsu-shoge, cutting at foes from a safe distance. Their fangs also carry an intense venom, capable of causing extreme pain, swelling, blistering, and in severe cases, Necrosis. However, this toxin is only fatal in extremely high doses. You're more likely to die from the cuts than the venom. [/div] [div class=mainSubheader] Limitations [/div] [div class=mainText] Firstly, and most obviously, the snakes have a limited range. If they ever stop touching him, they begin to vanish. This means they can only reach as far as their bodies stretch, which may be longer than most spears, but are still shorter than the distance at which a ranged weapon could be used. Secondly, is that while his snakes are quite durable, and easily replaced, they can be 'killed'. Incredibly sharp weapons, Astra powers, and a few other means can actually destroy these serpents, leaving Astika unarmed for a brief moment. But that moment is normally more than enough to make a serious opening. Thirdly, and finally, his snakes seem to share his fear of fire. If brought too close to an open fire, the serpents flee from it, leaving Astika's hands as they do so and vanishing as a consequence. Fire's not hard to find or make, after all... [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class=mainText] Fungiculture: The art of farming Mushrooms and Fungi. Astika's family has been practicing Fungiculture for quite a while, and he's something of an expert. That's not to say he's a genius, a revolutionary figure, or anything special. He just knows a lot about shrooms and how to farm them.

Poetry: Astika has written a few small pieces of poetry, and enjoys reading it. However, he's far from a master, and he rarely expresses himself in this way. As of late, he's thought about writing more centered around the intense pressure he faces.

Self-defense: Recently, Astika has been taking self-defense courses, learning about how best to use his serpents in combat. However, he's also received some knowledge of hand-to-hand martial arts from the same instructor. While he's far better with his serpents than he is with his hands, he's more than a beginner at this point. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes (Optional) [/div] [div class=mainText] "Did you hear about him? I heard he killed a bunch of people in some big fight! He's trying to be all normal, like it didn't happen, but you can see it in his eyes! He's a killer!"
-A resident of Arcadia.

"He's always been the mushroom boy. His dad used to carry them out here, but he's been delivering them for years now. I know he's a nice kid, but... It's hard to look at him the same way, knowing what he did... I know it's self-defense, I know that. But to go so far as kill someone?... It's hard to believe."
-Restaurant owner in Arcadia, frequent customer of Deep Garden Mushrooms.

"I was on the scene. When I saw him, his eyes were wild, like a cornered animal. He started coming down after I showed up, and he looked... Shocked. Like he couldn't believe what he did. He had to have been running on instinct when they got started, but it's pretty clear he lost control of himself. Given that this is an awakening event, he couldn't have known about his powers, and the state of both him and his... 'friends', I think he was acting in self-defense. You say he went too far, but I don't think at that time, he had the control or understanding to realize what 'too far' meant. His goal wasn't to kill those people. He just wanted to live."
-Testimony given by the first officer on the scene of Astika's self-defense incident. [/div] [div class=mainSubheader] Reputation (Optional) [/div] [div class=mainText] Mostly known as 'the mushroom boy' locally, having been the primary delivery boy for Deep Garden Mushrooms for years. However, his self-defense incident has flared up controversy, and many refer to him as 'serpent' behind closed doors. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies (Optional) [/div] [div class=mainText] [/div] [div class=mainSubheader] Enemies (Optional) [/div] [div class=mainText] Who do you not get along with? Why? [/div] [div class=mainSubheader] Organizations (Optional) [/div] [div class=mainText] What organizations are you a part of, or have ties to? [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div]
 
Last edited:
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"]
Frozen Eyes
[/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"]
Taisiya K. Praskoviya
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"]
Pluto, Blind Grandmaster
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"]
18
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"]
Female
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"]
Manu
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"]
Kailasa
[/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class=mainText]
Taisiya Praskoviya was born to Boleslav and Zlata Praskoviya, in one of the poorest areas of Kailasa. The two had intended to put her to work as early as possible to earn them money for drugs, but their plan was disrupted as a fact they wished to avoid became more and more apparent: She was blind. She wasn't going to be of any use to them like this, and they made sure she knew it. The following years were filled with getting barely enough food to stay alive, beatings, and repeatedly being told she would never amount to anything. It wasn't until she was 10 that she ran away, taking the gamble that she could survive on her own.

With the combined tasks of avoiding her parents and making enough money to survive, Taisiya had found quite the challenge. Originally she could only make money by begging, resulting in a food situation rather similar to what she had before. Over time, she had picked up slight of hand and, even through her blindness, had been able to steal just enough to go to sleep with a full stomach for the first time in years. Stealing became second nature to her. Whenever she met a new person, she had a habit of asking about stories they've heard. She loves stories. One time a kind individual taught her how to play chess, and left her with a cheap board. After experimenting with herself, she had learned in a week to play better than most average people and hardly had to steal because she could get away with simply betting with people over a game. These two talents combined ensured that, while she still lived under a metal sheet, she could at least live. She started to realize at this point that life was all about numbers: Probability of winning, the probability of successful steal, the price for food, how much stealing the person would notice, these ideas gradually solidified.
[/div] [div class=mainSubheader] Post-Awakening [/div] [div class=mainText]
On her thirteenth birthday, Taisiya became one of the first to awaken. After a nightmare of being buried under an avalanche, she awoke in the middle of the night to find that her perception of things was... Different. She could feel the objects around her without touching them. She'd never heard of awakenings and was confused as, when she grabbed an object mentally, it started to get colder. She was hot, so she reached around her and the air gradually grew colder. She smiled until her eyes started to sting. As they froze over, she wanted to scream, but the shock made her unable. She grabbed a nearby cloth and tied it over them, the blindfold seeming to be the only thing that would take away the stinging.

With the newfound abilities that she quickly learned to use effectively, she had gotten better at stealing and was able to defend herself against those who threw insults at her. This carelessness had earned her the attention of the members of Ebony Brotherhood, a gang that had a reputation for vigilante justice. She agreed after being told that she would be given compensation in the form of lodging and meals. Her first task was to steal from a seemingly polite gentleman's home, which she refused to do until they explained his crime against them. It went well. The members had learned how to manipulate her into doing whatever they needed, and she became a great thief. It wasn't until she was caught by a nice old lady that she had realized it, being negotiated out of the crime. She left the target, running as fast as she could from her life of stealing and the brotherhood.

This was where she found and was accepted into an organization known as Kailasa Rehabilitation for Delinquent Children or KRDC. There she was able to help out with tasks like organizing, making frozen treats, and comforting others. It was there that she met Kalix, who stopped by on holidays and read stories to her. She gradually grew to consider him her best friend, and every week looked forward to his arrival. As she grew for those three years, the time eventually came where she had to depart. She was turning 18 in a week, and so she left to try and find a cheap house to set up for her moving in. It was during that walk that she encountered those from her past, the members of the brotherhood. They offered a choice: They'd leave her alone if she killed a certain man, who they said killed one of their own, or they'd kill her. She reluctantly took the job, and on the night before her 18th birthday, she departed from KRDC and went to finish the task.

It would be simple, she thought. She would lure him into an alleyway, freeze his heart, nerves, and then it would be over. If she was quick enough, he wouldn't feel a thing and that's exactly what happened. She got away, arriving at her new flat thankfully without much trouble. The next day was spent celebrating a birthday alone with Kalix, playing chess and trying to bottle up her emotions regarding what happened. It was going well until the police showed up, having received an anonymous tip stacking evidence against her. She made up an alabi, and Kalix solidified it, causing them to leave but marking her as a suspect. Kalix helped to clear up the evidence stacked against her, and gave her a new set of clothes to attend the Astra conference with.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class=mainText]
Taisiya has a slim but bold build, with a diamond-shaped face and a sharp, confident voice to go with it. These features are what paint her as a force not to be reckoned with. Had you asked someone who knew her as a beggar what she looked like before her awakening, they would say almost like an average girl: short black hair, amber eyes, tanned skin, and that usual smile. Nowadays, only the latter is true. When she awoke, her hair turned white with the tips fading to blue, her eyes turned an icy blue, and her skin became a bright pale. Even so, she could be recognized by the numerous scars on her body from her parent's treatment of her. When she first used her power, she froze the moisture in her eyes, permanently giving them a broken and glassy look which she wears a brown blindfold to hide. Over time she's grown out her hair to her mid-back and started wearing long sleeves to hide the scars. Her normal wardrobe is brown alongside it, with brown jeans, a t-shirt, and her usual old brown jacket. Often times, she carries a kitchen knife sheathed by the back of her waist, completing the ensemble.
[/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class=mainText]
Taisiya thinks in numbers. Everything is quantifiable to her, from how a food tastes to how good a person is, even to the value of an individual's life. She keeps tabs on where certain people on a scale of judgment, letting her sort people into good people and bad people based solely on how the numbers add up. If someone could see the numbers in her head, they would be fairly close to being able to read her mind. Depending on how someone seems to her, she can be a great friend or a relentless enemy.

This balance scale of her mind is what dictates her behavior. Towards people who are good in her mind she'll act kindly, and towards people who aren't she'll act much more rudely. This very setup gives her a split personality and often gets her into fights, but often times she can be calmed down simply by being told she's seeing red.
[/div] [div class=mainSubheader] Fatal Flaws [/div] [div class=mainText]
Naturally, Taisiya's mentality makes her a very judgemental person. A bad first impression with her can destroy a friendship before it even began. She thinks that every situation has a correct answer, so when she can't find an action she deems to be correct, she may just make no action at all. While overthinking can be a problem in this way, she also can have problems with underthinking: If she deems someone to be good and lets her guard down around them, she can be easily tricked. Furthermore, she's a bit hypocritical, only having a good scale for herself because she knew the justifications for her actions, where she may punish someone else for a similar situation.
[/div] [div class=mainSubheader] Motivations and Values [/div] [div class=mainText]
Taisiya's goal is simple and straightforward: Be the person she needed when she was growing up. Her ambition is to leave something behind that can help people. Maybe this will be a book, an organization, she just wants to be remembered with her scale as far to the good side as possible, and for helping others put their scale in a similar situation. While unrealistic, she dreams to make it so everyone's scale, in her mind, leans towards the good side.
[/div] [div class=mainSubheader] Fears and Taboos [/div] [div class=mainText]
Taisiya hates heat and avoids fire as much as possible. Even something as small as a candle can make her nervous, and the smell of smoke will really stress her out. She also is scared of bugs because she's never seen them, only heard them and sometimes had one crawling on her with the constant fear of it being poisonous. She's also deeply afraid of both making a bad situation worse, and reaching a point where she can no longer be useful, either by aging, injury or otherwise. The one line she'll never cross is hurting someone more than they can recover from unless she has significant reason to believe that the world would be better off if that were the case. This happened when she was convinced to assassinate someone.
[/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class=mainText]
Temperature Averaging. Simply put, Taisiya can move the temperature of objects towards exactly 44 Kelvin, with an effectiveness that works as an inverse square of the distance. There are three important things to note: The first is that to use it, she "senses" the object she's trying to manipulate. Using this effectively, she can very vaguely see things around her: Nothing specific like blades of grass or raindrops, but anything larger than a dice she can at least tell it's there. Secondly, her body can comfortably withstand temperatures from 30 Kelvin to 290 Kelvin. Third, while often this will act as a chilling ability because no everyday objects are below 44 Kelvin, in rare situations where an object is colder it will heat up. (44 Kelvin is -229.15 degrees Celsius or -380.47 degrees Fahrenheit.)
[/div] [div class=mainSubheader] Limitations [/div] [div class=mainText]
First, Taisiya's comfortable temperature is from 30 to 290 Kelvin, but outside of this, her comfort drops rapidly. This is especially important in summer because the heat easily gets to her, so she will often use her ability to chill a small area around her. Second, while she can vaguely sense objects around her, this has an error margin and "fuzziness" of about 5 centimeters, and so her ability to precisely react to attacks is sub-par. On the topic of reaction, third, there's a sensing delay, meaning that if her opponent acts quickly she won't be able to respond for a split second, which can make all the difference. Finally, while she can move temperatures towards 44 K, she can't move them away. If she accidentally changes something too much, there's no way for her to go back.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class=mainText]
There are two skills that Taisiya is proud of, and two skills she wishes she didn't need. The first is her memory, she can quickly and easily store and recall vast amounts of information, mainly as sound. This very ability to memorize goes into her next skill, Chess. She's always loved the game ever since she first learned, and being able to memorize the position has made it so not seeing the board isn't even something she notices. She's extremely talented and can currently defeat any average player, but she has never had a formal education so any more seasoned player could easily defeat her. She also makes some pretty mean frozen treats, but she doesn't think they're as good as people say they are.

The next two are her hand-to-hand combat and stealing. The former she knows both by using the snippets of sight she gets from her ability, and just generally reactive fighting. Again, she can't beat anybody with formal training, but when it comes to someone looking for an easy fight, she can be surprisingly violent. Stealing she also uses hints of her Astra sight, but it's much more slight of hand. She never steals much, only enough to buy food the next day should it be needed.
[/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class=mainText]
"Y'know, if I had to describe her with one word, it'd be 'forced'. She started with bad genes in a bad home, but she managed to work with that. Then she got involved with the wrong people, but she still managed to get back up again. Even with all of that, she smiles often, even though you know that she's not alright. It's like when you get out of bed and your leg is asleep, but you keep walking because you know everything will correct itself. That same lopsided walking is just like her smile: forced." - Raga, one of the staff at KRDC.

"I admire, upon other traits, Taisiya's sense of practicality and ability to rationalize any given situation. I honestly find her company a welcome reprieve and am glad I've gotten the chance to meet her." - Kalix
[/div] [div class=mainSubheader] Reputation [/div] [div class=mainText]
Except to some specific groups, "Pluto" is known on the streets as a very polite person who got the short end of many sticks. She never got caught stealing and never stole enough to be fully noticed, so she never received a bad word for that. Very few people would ignore her when she had a smile on her face, and she's known to have a fascination for stories and games. She even made a lesser name for herself as 'the blind grandmaster' for her genius skill at chess despite not being able to see the pieces. Of course, this was all before she became a criminal. People knew her, but they never knew her well. Now there is a general feeling of betrayal when they hear the name, Pluto: the polite street girl with a kill to her name.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class=mainText]
There's one individual who came and told Taisiya some stories at KRDC, who is currently her best friend in her mind. Aside from that, she's made a fair bit of minor friends on the streets from her time as a beggar.
[/div] [div class=mainSubheader] Enemies [/div] [div class=mainText]
Alongside her parents which still are passively searching for her, she has plenty of enemies in the Ebony Brotherhood who still want revenge after she left. They won't actively hunt her, but they certainly won't do her any favors. She's also not on a good side with law enforcement.
[/div] [div class=mainSubheader] Organizations [/div] [div class=mainText]
She's an ex-member of the medium-sized gang Ebony Brotherhood, and after leaving she has kept very few friends and made a lot of enemies. She also spent three years under the care of Kailasa Rehabilitation for Delinquent Children, before growing out of it, and has a lot of friends there.
[/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; overflow-y: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; height: 1.6em; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] max-width: 100%; height: 50vh; margin: 0px; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); whi[/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); line-height: 0.4; white-space: normal;[/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100vh; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url(
https://i.imgur.com/acP8RM3.png
); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --characterNameHeight: 15%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
Last edited:
[class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage:url(https://i.imgur.com/GCNghdd.jpg); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"] Lexielai [/div] [div class=hexRender][/div] [div class="characterName characterNameText"] The Untouchable [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Akshath [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] The Untouchable [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 18 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Male [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Asura Hybrid [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Ayodhya [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class=mainText] In the lowest levels of Naraka, there lived a boy deprived of many things. Aside from material objects such as money, he lacked a family to call his own. He had no memory of his mother or father, left with only their physical traits in the form of his piercing red eyes and sharp teeth. Without anyone to care for him, he struggled through the early years of his life, having nothing to his nonexistent name.

With no means of aquiring food or shelter on his own, he followed in the footsteps of the many criminals that surrounded him. With no other way to survive, he made his living as a pickpocket, taking from others and taking refuge anywhere he could. In the beginning, he struggled greatly, only able to do so much at his age. It was an accomplishment to have stayed alive as long as he did, but the threat of starvation and hostile residents were too difficult for a young boy to overcome on his own. However, while faced with death, he awakened to mysterious powers like several others. That became the turning point in his life, reinvigorating his desperate need to survive. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class=mainText] After discovering his unique abilities, he put them to use with what little experience he had. While it was something he didn't fully understand, he knew how beneficial the changes could be for his thievery. While a boy of his age would normally lack the finesse required to be a thief, the ability to turn his body incorporeal granted him easy access to a variety of goods. Whether it was slipping his hands into places where they shouldn't have been, or sneaking into buildings while looking for a place to sleep for the night, he used this gift of his as best as he could. While still not a lavish lifestyle, he managed to survive, and he was intent on continuing with these activities for as long as he could. Although, there would eventually come a time when the small crook was caught.

He could only remember fear and surprise when the person he tried to take from took hold of his wrist with their pale blue arm. Never before had someone caught him in the act, leaving him stunned and unsure of himself. However, when he realized the gravity of the situation, he quickly grew scared, causing him to slip through the stranger's grasp and run off into the stormy night. Unfortunately, his state of panic left him injured and unconscious after a painful fall.

When he awoke, the boy was being tended to by the same hand that had grabbed him. Feeling the warmth of a blanket around his body, he got his first look at the stranger's appearance. What he found was a comforting smile stretched across a face with a shade of blue so light that it was practically white. Despite the friendly appearance, the boy remained wary, backing away as far as he could with a look in his eye that resembled a cornered animal ferociously baring its teeth and claws. Still, he was only a boy, so dazed from the fall, and confused by the unexpected turn of events, that he forgot that he possessed the ability to run away. From the moment that the man looked at him with a gentle expression and asked if he was alright, he had been dragged into his pace. That was the first time he met Modak.

Modak was a kind man, possibly the nicest soul he had ever met in his lifetime. He fed him, cleaned him, and provided him with warm clothes. When he asked about his living situation, as well as the strange powers from their earlier encounter, there was something about his presence that demanded an answer, as if it sucking forcibly sucked the truth from a person's soul. The boy told him everything.

Modak gave a variety of reasons for making his important decision, such as not wanting to see a young child lead a life of crime. He not only gave the boy food and clothes, but a home as well. After much convincing, the younger of the two relented to the elder that seemed impossible to defy. It was then that Modak offered his greatest gift. From then onward, the boy would be known as Akshath, finally given a name that his new guardian found fitting.

Living with Modak caused many changes in Akshath's life. He had been forced to give up his thieving ways, something that took a great deal of time to adjust to. However, it was quickly replaced by another activity. Modak saw that his new ward needed an outlet for his more volatile emotions, so the Deva began acting out the plans he had made from the first time he laid eyes on the young hybrid.

Akshath was not only treated as a son, but a student as well. He was made to learn proper control over his ability so that his gifts could help him later in life and be used for much more than just criminal acts. Modak provided him with knowledge on the strange forces that confused him, teaching with a surprisingly large intellect. He was as smart as he was kind, proving to know many subjects as he tried to help Akshath learn about the world, as well as himself. However, while Modak may have been a gentle spirit, the man was firm and intimidating during his lessons over martial arts. Akshath was never given lessons that his instructor didn't believe he could handle, but it wasn't as if any punches were ever pulled. It made him wonder if that divine personality was only a facade.

Years went by as the two lived together, repeating the same routine as they somehow managed to make a life for themselves in a harsh environment. While Akshath's rough personality still left much to be desired, he had shown tremendous improvement in both martial and scholastic studies, even uncovering a surprising talent for penmanship. While he didn't excel at expressing the gentler side of his emotions, he was truly grateful to Modak and came to see the man as a true father. That's why it was especially painful for him when said father figure kicked him out of the house without justification, only stating that it was time for him to leave.

Akshath grew bitter and the impact that the separation left on his heart caused him to quickly return to his previous lifestyle, as if trying to spite the person who had tried to steer him away from it. He stole whatever he felt like and got into far more serious fights than the tiny conflicts he had as a child. It served as a way to cope with a situation he didn't want to accept, unable to properly understand what had led him to such a point. He wondered if the last several years were just a mistake.

Eventually, Akshath did get the answers he had been craving, but the truth was far more unpleasant than the lie Modak had fed him when he was kicked out of the home they used to share. The man who had raised him was gravely ill. His soft, light blue skin had cracked and lost most of its color, resembling a damaged white wall. His once powerful body was now frail, afflicted with pain that only grew worse with time. It wasn't as if the disease couldn't be cured, but the treatment would cost a lot of money. That was something people in the lower levels didn't have much of. There was no way to make that sort of payment, sealing Modak's fate. For that reason, he had separated himself from Akshath, not wanting him to bear the sadness or inconvenience that came from his impending death.

Akshath couldn't accept the reality of the situation. He denied every aspect of this fate. However, he wouldn't simply pretend it didn't exist, instead choosing to carve out a new path on his own. He was older now, stronger and wiser too. No amount of stolen goods would be able to pay for the expenses, but those new skills of his would provide him with opportunity. To gather enough money, he would do anything. He would definitely save his father's life. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class=mainText] Standing at 6'5", Akshath is a tall, muscular young man with dark hair and tan skin. While his appearance takes more from his Manu heritage, signs of his Asura blood are still evident in the form of his sharp teeth and piercing red eyes. Due to these features and the expression he often wears, many people see him as frightening.

Akshath owns very few clothes, but the ones he does wear are often dark in color, matching his features and preference for clothing that makes him difficult to see at night. While it is partly due to a lack of money, he also wears simple clothes simply because they suit his tastes, not caring for anything fancy or restrictive. Almost everything he owns has tears or doesn't fit as it should. One accessory that does stand out is the pair of silver earrings that his father gifted to him, as he never takes them off. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class=mainText] Akshath is rough around the edges, to say the least. Having grown up in a tough environment and around even tougher people, he had to develop similar personality traits as a means to survive. Uncouth, he generally doesn't care for things such as grace and formality, living life on his own terms and acting as pleases. He's brash and has little care for how others may feel about the things says. Not very skilled at talking things out, he's always willing to settle a dispute with his fists. The man is also fond of alcohol, which can sometimes add to his abrasive personality when he goes beyond his limits.

Behaving as he usually does, Akshath doesn't make the best first impressions with other people, but there is more to him that lies beneath the surface. As assertive as he can be, Akshath is very aware of his limits, knowing when to pull out of a situation that he isn't skilled enough to handle. While he does have pride in the martial skills that were taught to him, the same goes for the wisdom he has gained over time. He may not be extremely studious, but he does possess a talent for planning his actions.

While the brazen side of his personality receives the most attention, there is a certain gentleness to Akshath that not many don't see. He has a great love and respect for his father, showing a fierce devotion to the man, and a willingness to do anything for his sake. His past experiences have made it difficult for him to place trust in others, but for those capable of earning it, he shows great loyalty.

Akshath does have a certain soft spot for children, particularly those that remind him of his past situation. While not completely, he does reel back on the personality traits that tend to scare those younger than him. The same fondness extends to small animals, particularly mice. Although, he'd rather avoid being around snakes for too long.

Despite his outward appearances and lack of care for being proper, Akshath has had some manners beaten into him over the years, always praying before receiving meals and cleaning up after himself. He also has a knack for writing, finding it enjoyable to put pen to paper and let the ink flow. [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class=mainText] Akshath never goes out of his way to hide the negative aspects of his personality, much like how he doesn't conceal his own thoughts and opinions. He cares very little about how people react to the things he says, not willing to sugarcoat his words and play things down for the sake of not hurting someone's feelings. Naturally, this tends to causes a great deal of conflict with others.

When it comes to interacting with others, Akshath is lacking in many areas. In addition to his lack of consideration for how others feel, he has closed off his own heart as well. He doesn't share things about himself, struggling to place trust in anyone but or anything. He's grown used to being alone and despises feeling vulnerable. Even as a loner that prefers his own company, he has a negative image of himself, something that he has more or less accepted as a fact. [/div] [div class=mainSubheader] Motivations and Values [/div] [div class=mainText] Akshath's only motivation is the threat of his father's impending death. To prevent that fate, he will do anything. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class=mainText] Akshath fears losing the only thing he's ever had and living with the thought of his own failure, knowing that he had the power to save his father. [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class=mainText] Akshath's power deals with the removal of obstacles. This allows him and whatever he comes into contact with to lose its physical form. Whether it be his own body or an impassible wall, the object in question becomes intangible. If a target meets the requirements for him to activate this ability, it is possible for Akshath to focus on certain aspects, such as removing weight and visibility, rather than the ability to interact with the world [/div] [div class=mainSubheader] Limitations [/div] [div class=mainText] The range of Akshath's power is limited to what he can touch with his own hands, and anything with a very large surface area cannot be completely affected. While he is not limited to small objects, targets that are large in scale can cause a physical drain when under the influence of his ability. The same goes for the extended use of his powers in physically demanding situations. It is possible for him to use this ability on other people, but doing so is a struggle when it comes to moving targets, making it hard to get a necessary grip. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class=mainText] Most of Akshath's skills have to do with combat. Having plenty of experience on the streets and in formal training, he is a skilled fighter, knowing how to properly use his great strength and resilient body. While good in a fist fight, Akshath also possesses great skill with his weapon of choice. He wields an ankush, closely resembling a spear due to its length. It is a diverse tool, possessing a pointed blade at its tip, as well as a hook that can be connected to a separate chain. The pommel resembles a claw, which also serves as a grip for the hidden kīla stored within the weapon's main body. Finally, there is a compartment in its side that reveals a blade with an edge similar to an ax. Akshath uses his weapon to grab, cut, and stab at enemies with very quick and precise actions, using uncharacteristically graceful movements to divert attention from his intended strikes.

Growing up in a harsh environment, Akshath knows how to survive even under the most difficult conditions. Aside from possessing useful knowledge about things that are safe to eat, he has become very hardy, able to tough things out as long as he needs to. Of course, he's also a very accomplished thief, able to take things quickly while avoiding detection. Much more than your average slight of hand.

While he doesn't find it worth mentioning, Akshath is also skilled when it comes to penmanship. He's come quite far for someone that didn't know how to write for most of their life. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes (Optional) [/div] [div class=mainText] "That guy is a real monster. He's put half of my men out of comission, and the other half want him dead. Can't even touch him before you end up on the ground with your pockets empty. I'd almost want him for myself, but he crossed a line. If I ever catch him in my territory again, I'll kill him myself!"- Crime boss from Ayodhya

"He looks really scary, but he can be nice sometimes. He gave me and my sister some bread the other day."- Child from Ayodhya [/div] [div class=mainSubheader] Reputation (Optional) [/div] [div class=mainText] Among the people that live at the very bottom of Naraka, many know about Akshath and the things he's done. While he has a sizable reputation, the nature of it varies from person to person. For the most part, however, it is overwhelmingly negative.

Due to his appearance and the large number of people he has injuries in fights over the years, Akshath is feared by many of the people that are aware of him. While he doesn't go out of his way to start trouble or hurt those that haven't wronged him, the idea alone is enough to make people afraid. His status as an Astra and the powers that come along with it have only made things worse. To those that aren't filled with fear at the sight of him, he is still an unpleasant person to deal with. This is mainly a result of his past thievery, having stolen from everyone he could.

Akshath has been particularly troublesome for the criminal organizations that call the dark areas of Naraka their home. While he doesn't particularly care about what other criminals do in the lower levels, many of them have labeled him as an enemy. His abilities have made him desirable as a recruit for many gangs, but his constant refusal to join has often been taken as disrespect, quickly leading to conflict. The end result is always him coming out unscathed, followed by the theft of everything the aggressors have. Of course, that only leads to greater frustration and anger on their part.

While many people don't see him in a positive light, there are a few individuals that know Akshath isn't as bad as he's made out to be. Despite being disadvantaged himself, his soft spot for children has led him to provide them with food and other necessities. While he isn't very receptive to appreciation, his actions have let some know that there is good in his heart. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies (Optional) [/div] [div class=mainText] Modak- Akshath's adoptive father. While he was initially wary of the man, only staying with him for his own survival, Akshath eventually began to see the Deva as a true parent. Whether it was as a mentor or a guardian, Modak cared for him to the best of his abilities, no doubt saving him from death, or some other terrible fate. For that reason, Akshath is eternally grateful to his father and is fiercely loyal to him, despite his refusal to openly admit it. There is nothing he wouldn't do for Modak and he has made it his responsibility to save him.

Maia- While not someone he would consider an ally or a friend, Akshath has met with the woman in the past, the first time being when he stole clothes from her workplace. He doesn't give her much thought, but is aware of her and the coincidence that she also turned out to be an Astra. [/div] [div class=mainSubheader] Enemies (Optional) [/div] [div class=mainText] While he considers them more of an annoyance than enemies, Akshath has gotten on the bad side of many criminal groups for his refusal to join them and injuring their men. [/div] [div class=mainSubheader] Organizations (Optional) [/div] [div class=mainText] What organizations are you a part of, or have ties to? [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div]
 
Last edited:
[class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #090909; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://imgur.com/n9DIlmb.jpg); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"] Lexielai [/div] [div class=hexRender][/div] [div class="characterName characterNameText"] Conservation, Preservation [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Aretta Ward [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] Historia, Safe Guard [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 24 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Female [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Manu [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Kumbh => Arcadia [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class=mainText] Before she could even remember, Aretta already lost her mother. Her grandmother never went into specific, but it was obvious that she was dea, and not running about with another man. What she did know is that her father was so stricken by the loss that he left Aretta and her twin, Adrian, in his mother's care before leaving. Later on, their grandmother would tell the twins that their father went to Arcadia to work on his own research and even became well known to the locals, but it had no implication on the young twins. Their parents were practically stranger to them as a child, and so they went on growing up with their grandmother raising them like a parent.

Describing the twins as the sun and the moon would be a fitting symbolism. Where Adrian was boisterous, loud, and passionate, Aretta was more quiet and studious. Adrian's hearty behaviour came from his intention to protect his sister by standing out more and more, leaving Aretta with less matter to face. However, this intention also contributed to Aretta's self-reserved behaviour. By having less attention on herself, she became used to being by herself and less used to interacting with people. The dynamic between Outgoing Brother and Shy Sister held out all the way through elementary school, which shaped Aretta into what she is; Someone who loves to pursue knowledge, yet lacking in interpersonal skills.

It was when she hit puberty that something changed: she wanted more attention. She wanted to be praised and acknowledged by those around her, but due to her own weakness in communicating with others, she couldn't say it in an outright manner. She studied harder. Increased her scores and joined academical competitions so her classmates would ask her for help, and her grandmother would praise her. And they did. But only for a moment before they turned their attention to Adrian.

To put it in simple term, Adrian was an idiot in the academical faculty. He barely passed the second year's final -- even with Aretta tutoring him -- but he was socially accomplished. His name was known by everyone in the school. His friends included some of the upperclassmen, and he was well acquitted with the school staffs they couldn't help but have a soft spot for him. Though Aretta had her own circle of friends, Adrian seemed to know everyone everywhere.

It was the start of an underlying jealousy; a feeling of inferiority. However, as Aretta never revealed her feeling to anyone, not even to Adrian or her grandmother, the problem kept growing.

Nysa, Aretta's grandmother, made a living by running an boarding house she owned jointly with her brother-in-law, Francis. Her own husband had died several years before, but with the responsibility of raising her grandchildren, she rarely showed her own sorrow over the loss of her husband. Once they were in their teen, Adrian and Aretta would often help out at the inn; it wasn't a large establishment with only twenty rooms, so the two of them often help with preparing meals and cleaning rooms once guests leave.

At one night, a customer got heavily drunk after he was dumped by a girlfriend. When he was about to return to his room, his eyes fell on Aretta, who was just finished washing dishes in the kitchen. In his drunken stupor, Aretta looked a lot like his ex. He staggered toward her... and assaulted her. Aretta let out a scream, but the boarding house was empty that night as most guests had left to attend a festival at a nearby shrine. Aretta ran toward her room, which was on a different building from the boarding house. The drunk guest didn't chase her, but her grandmother asked her not to help out so late anymore. She knew it was for the sake of her safety, but it left a bitter taste in her mouth. If Adrian was the only one that could help out at night, didn't that mean he was more trusted than she was? It was a childish line of thought, but that was what she thought at the time. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class=mainText] When Aretta discovered her power, she was elated. Her power was nothing harmful or malicious. Even more, she could use it to help out at the house. Most importantly, it would put her one step in front of Adrian. She decided to keep her power a secret for some time in order to develop it further and surprise everyone. She was almost 19 at the time, fresh out of high school. And when it was her birthday, she was excited. She planned to reveal her power, and be of more help to her grandmother right at that joyous moment. She went to the bathroom to tidied up her clothes and pumped her spirit up, and when she returned to the living room to broke out the surprise...

What she saw was Adrian, half sinking on the wooden floor, laughing. He had developed his power.

Aretta was quiet for the rest of the party, but as she put on her usual smile and congratulated Adrian for his new found power, nobody thought there was anything wrong. Aretta left the house the next night, leaving not even a letter behind.

It would be simple to see that Aretta hadn't matured well mentally, but as she always keep everything to herself, no one could help her, or even tell her to visit a psychologist.

After running away from her house with her own saving and clothes, Aretta went for Arcadia to look for her father. It wasn't hard to look for him, as his eccentricity and odd researches on disease was infamous. She knocked on his door and introduced herself as his daughter. Befitting his fame (or infamy), Triage just shrugged and told her where her room was. The father and daughter started living together ever since. Triage paid for Aretta's tuition at a nearby university and knowing well how useful her power could be, Aretta picked archaeology as her major. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class=mainText] Standing at 163 cm, Aretta has a slim build with little to no muscle on her limbs. Her skin is pale, and her eyes are often seen with black circles around them, a sign of lack of sleep. Her limbs are slender and firm from the daily house chores she does. Her eyes are actually brown, but she wear a pair of purple eyes lens most of the time. Aretta braids her eyes into two normally. She can be seen wearing dark coloured clothings. She likes dresses more than trousers. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class=mainText] When one first meets Aretta, they will be greeted by a calm attitude that neither approach or reject them. To a level, the feeling is a lot like being in a room with a cat. It seems interested in you, but you can't be sure. Aretta is careful to be polite to others when they first met, and she rarely shows her true feeling even to those close to her. The mask that she shows everyone is that of a compliant woman, bordering that of a yes-man, who is open minded and has broad perspective. Under the steady surface of her mask, however, is a turmoil of emotions. It has becomes a habit for Aretta to be kind to everyone in order to get along with them. She shows support to those around her for the sake of strengthening their bond, but deep down she is always worried how others really feel about her. Under that anxiety, she runs after the perfect behaviour that everyone would like. This desire stems from her desire to be praised and acknowledged by others. Aretta's satisfaction [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class=mainText]
  • Easily swayed by praises
  • Often bottles up her emotions
  • Stubborn when it comes to what she believes
[/div] [div class=mainSubheader] Motivations and Values [/div] [div class=mainText] What she wants most is acknowledgement. She no longer look for blind praises, but she wants to be known and thanked for her work and what she does. Though she wouldn't say she wants it, she wants to be famous and adored by everyone as well.

Aretta values appreciation in people, and how they judge people around them. Shallow people that only judges from appearance is the kind that she hates the most. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class=mainText] Fear
Rejected by society
Giving speech
Blind dates

Taboo
Judging someone from appearance
Killing people
Destruction without goal
[/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class=mainText] Preservation
Preservation allows Aretta to slow decay and preserve non living things. Foods will stay fresh longer. Ice cream stays solid longer. Furnitures will take longer to rot or rust. Radioactive decay happens at a slower rate.

Preservation also allows Aretta to keep living things at a state. A state being a state of being, meaning the state which the living is in when Aretta preserve it. For example, if Aretta preserve a man who is walking on a street, the man will -- for a moment -- halts his walking as if he is intentionally freezing midwalk. When he is no longer preserved, the man will keep walking as if nothing happens. [/div] [div class=mainSubheader] Limitations [/div] [div class=mainText] Non Living Things
  • Touch Reliance: In order for Aretta to preserve something, she needs to be able to touch it. This is why she couldn't preserve canned food inside a can.
  • Time: The time Aretta needs to preserve things is directly proportional to its surface area. If she is interrupted before she is finished, the thing won't be preserved at all.
  • Outside Force: A preserved object is not immune to outside influence. A preserved book could still be torn by hand, and dust will still gather on objects.
Living Things
  • Direct Contact: In order for Aretta to preserve something, she needs to be able to physically touch it. This is why she couldn't preserve people inside a vehicle, but able to preserve people through clothes.
  • Duration: Aretta can only preserve living things for a short time. The more a living thing try to change their state, the shorter the preservation period will be. The average duration of preservation of an average man is 8 seconds. Those with higher physical capability or perform high impact activities would be preserved for shorter time.
  • Outside Force: A preserved living thing is not immune to outside influence. A preserved man can still be punched on the face, and wound will not get better just because it is preserved. However, the full sensation received from outside influence will not be felt until the preservation is gone. The pain from the punch will be felt latter, for example.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class=mainText] General Skill
  • Cooking
  • Housekeeping
  • Accounting
  • Painting and Drawing
  • Historical Knowledge
  • Preservation
  • Scientific Knowledge
Combat-related Skill
  • Novice judo
  • Beginner Car Driving
  • Beginner Bike Riding
  • Perception
  • Observation
[/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class=mainText] Father Triage: Aretta? Nice kid. A bit closed, but try hard. Shame she always clams up.
Brother Adrian: She's the best! She's kind and warm and always smiling and help me at school! I wonder why she ran away...
Grandmother Nysa: A nice child. Her feeling is easily hurt, but she always want to help people. Such a sweet child...
Friend Marielle: She's witty and knowledgeable. It's fun to talk to her because she's very keen on subjects that she's interested in.
Mentor Ebenezel: Very serious. I don't know if she knows it, but when she is immersed at study, her eyes change as if a fire is lit behind them.
Ex-boyfriend Daisuke: Sucker. Praise her up a bit and she'll eat out of your hand. I mean, is she a child or something? [/div] [div class=mainSubheader] Reputation [/div] [div class=mainText] Among archeologists and food producers, Aretta is well known for her ability to preserve food products and historical objects. She has been interviewed by newspapers and media several times for a short article and appearance at history channel. A talk show featuring several others business in Arcadia had also invited Aretta as a representative of the odd jobs workshops. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class=mainText]
  • Triage Ward: Father. Though she only knows him recently, the daughter and father fully trust one another.
  • Archeologist Ebenezel: Mentor. He was the first archeologist she worked under, and his kindly and gentle attitude make Aretta quick to trust him.
  • Reporter Marielle Hunt: Friend. They meet for the first time during an interview, and after a mandatory diner turns into a night long walk filled with street side snacks and conversations, they decide to keep in contact with each other.
[/div] [div class=mainSubheader] Enemies [/div] [div class=mainText]
  • Daisuke Huriko: Ex-boyfriend. He asked her out, but it turned out that he only wanted to profit from her power. He got dumped and their relationship turns sour afterward. Currently working as cultural resource lawyer at his father's firm. An astra.
  • Rose Nephthys: Ex-boyfriend's new girlfriend. Daisuke's real girlfriend. She was the one to plan for Daisuke to go after her. An astra.
  • Adrian Ward: Brother. After she left home, Adrian went on and started a hotel chain. His business was still growing, but it was famous enough for its name to be known even in Arcadia. She hates it.
[/div] [div class=mainSubheader] Organizations [/div] [div class=mainText]
  • Trinity Archaeologist Association: An association of archaeologists looking for Precursor artifacts and more conservative archaeologists. The association has a headquarter in Arcadia and holds an annual meeting in Arcadia.
  • Whatever Work I Guess Workshop: The workshop resided by Triage and Aretta Ward. Aretta once asked the name of the laboratory and Triage said 'Whatever Work I Guess'. Aretta proceed to paint a huge sign in front of the house and the name sticks.
[/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div]
 

Attachments

  • Fukawa.Touko.full.1799286.jpg
    Fukawa.Touko.full.1799286.jpg
    181.6 KB · Views: 6
Last edited:
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"]
The Drunken Master
[/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"]
Maxwell Cross
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"]
Max
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"]
35
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"]
Male
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"]
Asura
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"]
Kumbh
[/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class=mainText]
Maxwell was born and raised in Kumbh, to the owners of one of the larges dojos in Kumbh, specializing in Karate. From a young age Maxwell was raised in the strict discipline of martial arts as well as the principles of the faith. Unlike how many people see Asuras, Maxwell's parents were calm and collected people with a strict code of honor. They did their best to pass down these traits to Maxwell and the rest of their students. Maxwell enjoyed martial arts but felt the strict code was too tightening and restricting for his tastes. So he left as soon as he was a legal adult, to the disappointment of his parents. Maxwell began traveling all around Kumbh, visit and staying at the various temples. During his stays at the temples he would study a bit about what the temple was about and if the monk there practiced any form of martial arts he would ask to join in the training during his stay. He learned a variety of martial arts this way, while not going to deep into them he did at least learn the basics of them. But while he enjoyed his time at the temples, he didn't like prospect of ever becoming a monk at one for the same reasons he left home. So he would always leave and head out on his travels before he over stayed his welcome. He did this for a few years but eventually he had to find a permanent home for himself.

During this search for a home of his own, he found what seemed to be an ancient looking dojo by today's standards in a more historical and underground part of the district. Maxwell entered the abandoned dojo and started to explore the building. Inside he found books that would change his whole look on martial artists. These texts were a detailed history of the martial arts commonly referred to as drunken boxing. Maxwell loved the more unpredictable nature of the art and thought to himself how he could adapt what he had learned previously with this new knowledge and make his own form of drunken boxing. So with the little money he had Maxwell purchased the building and quickly began practicing and honing his new version of drunken boxing.

After years of perfecting his new martial art and taking many odd jobs to make ends meet Maxwell had created his new form of drunken boxing. This form didn't focus on making movement like a drunk man but instead focused on the unpredictable nature of the art. Maxwell's martial art seemed far less honorable than others and seemed to have many cheap tricks mixed into the style, but that's just how Maxwell wanted it to be. Finally at the age of thirty Maxwell opened the door of the dojo to the public and students. And no one came, as many people were either scared of him or thought he was a quack. No one came to the dojo, until one faithful day shortly after people began developing powers...
[/div] [div class=mainSubheader] Post-Awakening [/div] [div class=mainText]
One that day Maxwell was "awakened" a few men from his parent's dojo came to his dojo. They all seemed to be almost finished with their training and heading off to a military academy soon. They had heard of their master's disgraced son and decided to take upon themselves to remove what they described as a "stain on the face of Kumbh and Trinity as a whole". Maxwell greeted them when they entered and noticed the symbol of his parent dojo on their shirts. This was the moment he knew had to use what he had been practicing for years to defend himself. Maxwell walked forward, looking like he was going to greet them more before he quickly shifted positions and punched one of the students in the stomach. The first student fell back from the surprised blow but the other two began throwing there own punches and kicks at Maxwell. Jumping back from the two, as Maxwell knew he wouldn't be able to block a strike from two directions from people of their level of skill. But as Maxwell was figuring out how to handle the people in front of him, the student he punched in the stomach got up and with a look saying he was done with this, he pulled out a small pistol from his jacket. He fired straight at Maxwell.

Maxwell's life began flashy before his eyes as the bullet flew to him. And just as it hit... the bullet seemed to have blocked by aura like a shield that appeared around Maxwell. Maxwell looked surprised as he patted himself down and laughing happily that he was alive. The students went wide-eyed in surprised before looking at each other and charging at Maxwell. Maxwell prepared himself and struck quickly as they came at him. To Maxwell's surprised his strikes seemed to hit harder, a lot harder. Maxwell's strikes knocked the men on their backs and made them groan in deep pain. They quickly ran away after this and Maxwell stood victories.

After this incident, Maxwell has been practicing with his new powers and even gained a few students. Though it has been hard to keep them when with the constant harassment from the members of his parent's dojo.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class=mainText]
Maxwell is a large dark green-skinned man, which is not uncommon for an Asura. Maxwell has well tone and muscular body from his years or martial art training. Maxwell wears the few small scars on his face and few more across the rest of his body from training and dealing hostile people. His eyes are an emerald green. He is (unhappily) bald but to make up for this he takes great care of his thick sideburns and beard combo. Lastly, Maxwell has four large sharp teeth that stick out of his mouth.

Fashion-wise Maxwell, in his dojo and for formal events, wears white martial arts uniform, similar to that worn by other schools of martial arts. On the streets and in his free time Maxwell dresses up more like a biker, with a sleeveless leather vest, old and worn out jeans, black boots, and a plain white t-shirt.
[/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class=mainText]
Maxwell is an upbeat glass half full kind of guy. He tries to see the bright side of things and keep spirits up around him, even in the worse parts of his life. He is also more free-spirited, not liking being restricted by many rules. He likes going with the flow and enjoying things as they come. While some say this would be weird for martial arts master, Maxwell just thinks it's a part of him and why he had more or less built his martial art from the ground up, because he wanted more freedom in his fighting style. Maxwell to most common people is a happy go lucky and talkative man who enjoys telling stories about his real and fake adventures. Which makes him a very likable man to most. Though to most of his fellow martial artists, especially his parents, think he's an eyesore to martial arts with his fighting style that uses cheap tricks as an important aspect of it.
[/div] [div class=mainSubheader] Fatal Flaws [/div] [div class=mainText]
A flaw in his personality is his free-spirited attitude. While not outright troublesome this does constantly bring him at odds with others with a stricter point of view and even some government officials who meant him to have shows dislike to his point of view. The only reason they have taken action against him is that they just see him as a fool running a failing dojo. Other then this his upbeat personality can become annoying to those not in the mood for it.
[/div] [div class=mainSubheader] Motivations and Values [/div] [div class=mainText]
Maxwell wants his dojo to thrive and pass it's teachings down to others. He also wants to continue living his life freely and without restrictions.
[/div] [div class=mainSubheader] Fears and Taboos [/div] [div class=mainText]
Maxwell is afraid of losing his freedom and having his martial end before even passing it down properly to his few students. He also has a small drinking problem and while it doesn't affect his fighting abilities it makes more annoying to those who already didn't like his upbeat personality.
[/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class=mainText]
Chi field- The chi field works as a barrier of sorts around his body that help block or weaken blows against Maxwell and even help pack more of a punch. The chi field does by hardening around his fists and act as brass knuckles.
[/div] [div class=mainSubheader] Limitations [/div] [div class=mainText]
Maxwell has a limited amount of chi to create and keep the barrier up and in a long fight it can run out. When it runs out Maxwell suffers a great deal of exhaustion and almost always passes out. He can recharge his chi by more or less relaxing and meditating. Finally, his Chi field can only block so much, like anything of a higher caliber then a regular handgun will break though Maxwell's Chi shield and hit him.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class=mainText]
Maxwell his a very skilled martial artist, learning the basics of a large variety of martial arts and even go as far as making his own fighting style. Besides his martial art skills, Maxwell has become a decent handyman from the experience of fixing up and repairing his dojo over the years. He also grows a large resilience to alcohol and has drunk dozens of people under the table.
[/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class=mainText]
"There goes the Drunken Master... Looks like the bar is going to busy" - Random people on the streets
"He is a disgrace and blemish in our family history. I will not cry when some mugger gets rid of him. Instead, I'll be able to rest easy that he won't be able to ruin the family name anymore!" - Master Archer Cross, Maxwell's father.
"He's the best drinking buddy you'll ever see. His stories are fun and any poor any guy tries to look tough and mess with always end up right out the door" Maxwell's drinking Buddy and one of his few students, George.
[/div] [div class=mainSubheader] Reputation [/div] [div class=mainText]
Among marital artist Maxwell is fairly well known, though not in good light. Most martial artist think of him as mockery to martial arts and rather not talk about him.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class=mainText]
Maxwell has few students who teaches his fighting style to. George is his top student and drinking buddy, though George seem to do more drinking then learning as time has gone by.
[/div] [div class=mainSubheader] Enemies [/div] [div class=mainText]
Maxwell is disliked by a large portion of the martial artist community, especially his parents and their students.
[/div] [div class=mainSubheader] Organizations [/div] [div class=mainText]
Maxwell is a former member of his parent's dojo, a large facility above ground. Now Maxwell runs his own dojo, in much smaller building underground.
[/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; overflow-y: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; height: 1.6em; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] max-width: 100%; height: 50vh; margin: 0px; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); whi[/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); line-height: 0.4; white-space: normal;[/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100vh; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url(
https://i.pinimg.com/736x/ba/bd/df/babddfab7786fbdbaf78b4aa01568918--a-thing-storytelling.jpg
); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --characterNameHeight: 15%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
Last edited:
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"] [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Remi Konaté Hassad [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] Recon [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 24 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Male [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Manu [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Arcadia [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class=mainText] Remi was an unimportant child born to two unimportant people. They worked unimportant jobs in an unimportant research facility, painfully watching as the stations of their coworkers were progressively replaced by automation. Eventually, cost-cutting measures found their stations as well. As a result, the majority of Remi's life was spent moving between progressively worse houses, seeing less and less sunlight and more and more grime, steam, wires, and fluorescent bulbs. His parents worked whatever jobs they could, yet such work was almost always temporary, low-paying, and exhausting. The small family's finances finally stabilized when they settled into a lower-middle class apartment block on one of the city's lower levels, and Remi himself finally managed to experience Trinity's version of a normal childhood. He went to school, did homework, and socialized with his average-sized group of average friends. His parents were supportive, told him that he could be whatever he wanted to be, and he, in his infinite childhood wisdom, wanted to be a doctor.

Rest assured that the irony of this desire is not lost on him.

At age 17, Remi was diagnosed with a terminal, degenerative disease as a result of various, long-term exposures to undesirable elements of the lower city's natural environment along with important genetic factors, themselves caused by long-term generational exposure to the hazardous technology of the city's underbelly. His life expectancy was five to eight years. Treatment was expensive, far too expensive indeed for the family's slightly-less-than-modest income, and all that said treatment could do was slightly prolong a painful existence. Remi wasn't the first to acquire such an illness, and he wouldn't be the last; many saw it as the price of living in the lower levels, a marker of generational poverty. The Hassan family did not take the news well, yet they ultimately resolved to try and make the best of Remi's final years, as there was little else for him to do. He applied to local universities, seeing no point in going elsewhere for school. If he was running out of time, then he was going to spend what little he had with his parents. And so, Remi made peace with his fate, began attending college, and prepared to die. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class=mainText] Three years went by. Remi eventually found himself in a wheelchair, unable to walk. More and more courses were taken remotely, and more and more time was spent at home with his family. Arguments had become taboo, as had blatant mentions of the obvious. Remi had taken on sculpture as an idle hobby, putting together small figures and objects out of spare parts and odds-and-ends, and his classes, despite his lack of on-campus presence, were going reasonably well.

Remi's awakening was no grand affair. He simply finished a sculpture one day, and it began to move.

With no way to explain such an occurrence to his mother and father, he simply hid his ability, exploring it in private, disassembling and reassembling whatever his father brought back from the lower city's junk piles in the name of his sculptural (or "sculptural") explorations. He began incorporating the knowledge gained from his engineering courses, fashioning machines of all sorts with the power of his mind. He braced his legs, then his arms, walking again for the first time in more than a year. He was, of course, still dying. But now, now, he could fix that.

Depending on who you ask, his morals slipped. He used his machines to subtly begin pilfering research data from the wealth of pharmaceutical knowledge levels upon levels above him, fashioning better and better systems that could keep him alive using chemical cocktails quietly lifted from laboratories and research facilities. His nighttime excursions grew longer and longer, and his parents attributed their wheelchair-bound son's growing fatigue to consequences of his condition. His ring of trusted contacts grew, bolstered by underground, nearly folk-hero status gained by releasing the spoils of his data-robbery to the public. Slowly, he prolonged his life, and eventually "stopped" his death--but he was not cured, not at all.

His research eventually lead to the discovery of an experimental process, one which, if indeed real, would be capable of not only eliminating his illness and allowing his body to reverse the damage, but correct the very genetic susceptibility attached to his condition. It sounded too good to be true, but if there was even the slightest possibility, he had to acquire that data.

The meeting, an invitation to which had reached his alias via trusted channels, is something of an experiment in that regard. If there are those there that are willing to help him, then so be it. The real issue is knowing who he can trust.

This will be Recon's last heist, if he can help it. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class=mainText] Standing at an average height with a thin build, Recon hides his appearance under a helmet that features internal and external holographic displays, an air filter and voice modulator, along with several modes of vision. Such items (generally without some of the more useful functions) are common among certain fashion subcultures, allowing him to blend in to a certain extent. He pairs this, generally, with light, loose yet covering clothing, or coats, both for the sake of covering his braces, support systems, a light set of body armor, and a small belt with various sets of tools, spare parts for his helmet and support systems, and pods full of Seer-Spiders. Often, he'll also carry backpacks or sling bags full of additional parts or machines.

Few people, if any, have seen beneath his helmet. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class=mainText] Despite his less-than-legal activities and general preference not to talk to others, Recon is surprisingly sociable when pressed. This isn't to say that he's particularly charming, especially since such a thing is at least partly a matter of personal taste, but he's intelligent, somewhat chipper, and well-spoken enough to carry a conversation and maybe even make it somewhat enjoyable. He's the sort of person that it isn't a chore to be around, in a way. He prefers calculated risks, and unless his ability to acquire the data he seeks is on the line, it's far more likely that Recon will take the subtle approach to solving a problem, or bail from an undesirable situation entirely. He's cultivated a subtle yet natural layer of paranoia as a result of this thinking, though he prefers to call it "good foresight." Given the state of his body, his number one priority is emerging from most things as unscathed as possible, even if that means ultimately leaving others behind. [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class=mainText] Remi quite literally has a fatal flaw; that is to say, he's dying.

Were it not for his ability, he'd likely have died quite some time ago, and even as things stand, he isn't in very good shape. Without his ability in play, Remi is incapable of simple actions such as running, jumping, or even pulling himself up a ledge, not to mention the slow, painful deterioration of his body. The only way he has managed to keep himself going is by building a subtle set of systems that constantly inject and recycle a chemical concoction that keeps him alive, yet unfortunately fails to reverse his condition. His power additionally affords him metal leg, arm, and back braces to give him the capabilities of someone more normal, even if they don't quite reinforce his frail and fading frame. [/div] [div class=mainSubheader] Motivations and Values [/div] [div class=mainText] Acquire the Tesseract Medical Corporation's G-Reconfiguration data. At any cost. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class=mainText] Mortality, obviously.

That aside, he has a deep disdain for the privatization of life-saving information and services, and tends to publicize what he gathers, even if such has the threat of becoming a security risk. If he comes across something that "the people must know," as he puts it, he'll do what he can to get it to them, even if that requires turning his current situation into an unfavorable one for those around him. Of course, he's always thinking about he himself can find a way out of such messes.

Flying also makes him antsy, as do threats of physical violence. Guns, with their ability to kill the frail so quickly, are a particular point of fear for him. [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class=mainText] Golemancer -- The concept of Golemancy is, as many things related to the Astra are, something that has long become seeped in myth and legend. Yet, the compounding of historical errors and embellishments have diluted the simplicity of what Golems actually are. In truth, Golems are quite simple; they are machines which, according to normal laws and logic, should not work.

Remi, therefore, creates impossible machines.

Machines without conventional power-sources. Machines that bend and move without proper motors. Machines which, if subjected to even the lowest baseline of mechanical review, outstrip their expected capabilities many times over. And yet, there they are. At a whim, Remi disassembles objects and machines and reassembles them into far more strange ones, sometimes resembling their initial forms, and other times very much not. [/div] [div class=mainSubheader] Limitations [/div] [div class=mainText] Remi's machines are subject to the physicality of their components. Weak parts wear down and eventually break, rubber melts, glass shatters, and though "hotfixes" such as tying things together or re-socketing joints are possible, elements that are physically separated via damage cannot be rejoined without some sort of bonding agent. This proves particularly problematic where his life support systems are concerned, as every moment without a functioning system are ten moments more off his life.

The construction of golems requires concentration, and though he's quite good at multitasking, Remi cannot complete his creations when fully distracted, or when his ability to think is overridden by more immediate sensations, such as horrible pain, severe emotional distress, unconsciousness, or addled mental states (i.e., drunkenness, confusion). When distracted, his half-finished creations begin falling apart; if he fails to attend to them for too long, he will, of course, be forced to start all over again.

It is also something of a requirement that Remi build "intelligently;" just because his machines will always "function" does not mean they will always "work." Without things like the proper distribution of weight or proper structure of movable elements, his machines will turn on, but eventually fall over, move with all the skill and grace of a child taking their first steps, or completely fail to do anything at all. He provides the life and animation, but the structure of his machines themselves must still provide the capability to function, even despite his power letting him cheat here and there.

Lastly, Remi is, of course, limited in regards to what is actually present to build from. If there's no metal, he'll have no metal. If there's no wires, he'll have no wires, and the usefulness of something made of dust and ashes is questionable at best. In tandem with this, though he does not have to "physically" build his creations using his own body--their construction seems more telekinetic than anything else--his range seems limited to elements that are either nearby or blatantly visible. His small army of "Seer-Spiders," interlinked with the helmet he always wears, serve as his main way around this problem by granting him greater spatial awareness. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class=mainText] In tandem with his Astra Power, Remi is a reasonably skilled engineer (and sculptor, surprisingly). A journeyman's knowledge of computer systems--and how to break them--is also within his purview. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class=mainText] "Who?" -- Most people.

"That data saved my life. The guy's a hero, and the corporate sphere just want you to think differently so they can keep their money." -- SeculNet user.

"My clients have no comments at this time in regards to anyone named 'Recon.'" -- Thaddeus Flynn, Representative, Trinity Pharmaceutical Partners. [/div] [div class=mainSubheader] Reputation [/div] [div class=mainText] In digital spaces, Recon has a fair bit of notoriety as someone who posts data-dumps of pharmaceutical and medical data for use by the general public. Some estimates have placed the damages of such activities in the range of millions of dollars. Physically, however, he has a rather low amount of presence, something which he prefers. A few less-than-reputable sources have reported someone with a helmet on passing by various corporations right before espionage events, but those could, of course, be anyone. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class=mainText] Though his family does not know about his nightly activities, they've been growing more and more suspicious, as their son has outstripped his initial projected lifespan and appears to have stabilized. That isn't to say that they're not happy about this, indeed, far from it, but concerns swirl around something that seemed so very certain once upon a time. His parents are the only true allies that "Remi" has, save for a longtime friend that mostly serves to corroborate the occasional cover story.

As "Recon," however, he has a small circle of people he can trust to monitor certain spaces, mine for data, and check the news for things he might miss. The vast majority of them have never seen him in person. [/div] [div class=mainSubheader] Enemies [/div] [div class=mainText] Recon is on the watch list of several major medical and pharmaceutical companies. That said, he's more of an "idea" to them as opposed to something tangible, as he takes great pains to ensure that his physical appearance remains unknown to them, or at least something actively questioned. [/div] [div class=mainSubheader] Organizations [/div] [div class=mainText] N/A [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; overflow-y: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; height: 1.6em; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] max-width: 100%; height: 50vh; margin: 0px; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); whi[/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); line-height: 0.4; white-space: normal;[/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100vh; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url(); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --characterNameHeight: 15%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
Last edited:
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"]
Night Light
[/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"]
JAKOB BRÖTZMANN
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"]
Night Light
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"]
24
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"]
Male
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"]
Manu/Cyborg
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"]
Ayodhya
[/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class=mainText]
Jakob led a simple life before his awakening.He grew up with his parents in the lower districts of Ayodhya in which his parents owned and ran a small dive bar. Although the conditions weren't ideal to raise a child in, it brought in good money allowing them to live reasonably comfortably. At school Jakob was a relatively unremarkable student, not standing out for particularly good or bad grades. It was during his school years that he began to become somewhat of a delinquent, and with his parents being busy with their work and unable to spend much time with him he only got further involved with that world. [/div] [div class=mainText] After finishing with school he had no real skills, and after seeing how much of their lives they were spending on the bar he refused to go into the family business. This left his only option was to sink further into the underbelly of society. He started off with smaller crimes like petty theft, but was soon put to work selling drugs in the darkened alleyways of the city. He was initially against selling them due to the possibility of his actions leading to someone's death. However after seeing how desperately people seemed to want what he was selling, he started telling himself that he was providing them an escape from their everyday lives. Whether or not this was the truth, didn't matter. What mattered was that it helped relieve some of his guilt. One particularly slow night he decided to try a new area, unfortunately he found himself selling in another gang's territory. To ensure that he didn't repeat the same mistake they beat him and left him for dead. when he came to, he found himself in a hospital bed. His body ached and was difficult to move. The damage done to him was enough to warrant replacing various parts of his body. With is parents unable to afford biological replacements he was fitted with older cybernetics.
[/div] [div class=mainSubheader] Post-Awakening [/div] [div class=mainText]
It was during his rehabilitation in the hospital that Jakob began to notice changes, he was stronger, quicker, and more aware of his surroundings. At first he put this down to the cybernetics, until he started to notice strange occurrences with the lights around him. It began as the light getting brighter or dimmer based on his mood. He began practising manipulation the light alongside his rehabilitation, by the time he was done with it he had mastered controlling the level of light consciously as well as began to learn to make simple mirages using his new powers. [/div] [div class=mainText] Once out of the hospital Jakob dedicated himself to honing his new powers, finding new ways to use them and perfecting those that he had already learnt. He did all of this with one thing in mind, he realised that the life he was living was one that profited off of the weak and vulnerable, and he was going to try and put a stop to it anyway he could. He spent his nights lurking in the spots he knew there was going to be gang activity and dealt with them the same way that dealt with him.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class=mainText]
Jakob stands at 6'0" with a relatively thin build, he hides most of his features under several layers of loose clothing. This is partly to avoid being a victim of the stigma against cyborgs, and partly due to avoid being identified when performing vigilante justice. Under his clothing the majority of his body has been replaced with various cybernetics leaving very little of his original body. He carries very little equipment with him, the exception being a series of bottles as well as a portable UV lamp and batteries to power it.
[/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class=mainText]
In everyday life Jakob is surprisingly outgoing and chipper. His brush with death made him appreciate life and all that comes with it, so he chooses to spend it trying to make other's lives better. He doesn't feel that it is worth it to make enemies as it isn't productive for either party in the long run. His time around his parent's bar also taught him how to carry a conversation with people from all walks of life. He is also overly eager to try new things whenever he can, variety is the spice of life after all. When it comes to action he's not really a thinker, he prefers to act without planning hoping that everything works out in the end. This attitude often leads to more negatives than positives, but he's still walked out of each encounter alive, and most importantly with an interesting story to tell.
[/div] [div class=mainSubheader] Fatal Flaws [/div] [div class=mainText]
One of Jakob's main flaws is that he is very easy to manipulate and can be quite hot headed. This often leads to him rushing in and making mistakes, leading to more damage to himself and others. He also has a warped internal logic that he uses to justify his less than desirable actions, often brushing them off as being for the best. This can often lead to him being overly sadistic in his actions to others.
[/div] [div class=mainSubheader] Motivations and Values [/div] [div class=mainText]
To rid his community of gang activity and make it a safer place for people to live.
[/div] [div class=mainSubheader] Fears and Taboos [/div] [div class=mainText]
Autophobia - A fear of being alone. Jakob's deepest fear is to be lose everyone he cares about or to be forgotten by them. [/div] [div class=mainText] He won't harm anyone that was 20 or younger and will often let them go. This is because he changed his life at 20, so in his eyes these people are still redeemable.
[/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class=mainText]
Light Manipulation - Jakob has the ability to manipulate light in various ways. [/div] [div class=mainText] 1. Light levels - Can adjust the levels of light in an area. This expands to both extremes of the spectrum, both making an area completely dark or blindingly bright. [/div] [div class=mainText] 2. Mirage - Can make simple mirages. [/div] [div class=mainText] 3. Depth Shift - Can bend the light to make objects or people seem in a different place. [/div] [div class=mainText] 4. Light Storage - Can store small amounts of light in containers to create makeshift blinding traps or flashbangs. [/div] [div class=mainText] 5. Cloaking - A technique he's still working on. With some effort he can manipulate light to bend around him to make himself invisible, can only do it for a few seconds currently.
[/div] [div class=mainSubheader] Limitations [/div] [div class=mainText]
The amount of use that he can get from his power depends entirely on how much UV light he has been exposed to. Once he is out of stored light he is unable to use his powers. The exposer needs to be prolonged, so simply being outside in the sun will provide him with very little. Other than this his power has very limited offensive and defensive capabilities when it comes to actual fights, and is better suited to being used to prepare traps beforehand.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class=mainText]
The only real skill that Jakob has outside of his powers is his brawling skill. He lacks any formal training in hand to hand combat and is more familiar with street fighting, this also means he isn't above playing dirty if it means it'll win him a fight.
[/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class=mainText]
"Seems like a nice enough kid, bit eager for my tastes. But, that's youth for you I guess." - Bar patron [/div] [div class=mainText] "If I ever catch him on my turf, I'll strip him for parts." - Gang Member [/div] [div class=mainText] "He's a nice boy really, he's just a bit rough around the edges." - His Mother
[/div] [div class=mainSubheader] Reputation [/div] [div class=mainText]
Jakob is reasonably well known it two different places. The first being his parent's bar. The regular patrons have become like an extended family to him, often keeping an eye on him as he played in the bar when he was younger. [/div] [div class=mainText] The second place is with the gangs of Ayodhya. Most have heard of him, but don't regard him as any real threat to them, simply choosing to dismiss him as an urban legend since nobody would be dumb enough to try to fight gangs alone.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class=mainText]
His strongest relationship is with his parents, with a distant second being those that come around the bar. His parents are still unaware of his nightly activities, but some of the regulars have started to put two and two together based off of rumors that they have heard. Not wanting to cause his parents anymore undue stress they have agreed to keep it quiet for him.
[/div] [div class=mainSubheader] Enemies [/div] [div class=mainText]
His enemy is less of an individual figure and a more of a series of organised gangs. Although they might not regard him the same way, he still has a personal vendetta against them. [/div] [div class=mainText] He is also on a watchlist with the local authorities due to the people that he has sent to hospital.
[/div] [div class=mainSubheader] Organizations [/div] [div class=mainText]
Old Faithful Friend - His parent's bar and current place of employment.
[/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; overflow-y: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; height: 1.6em; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] max-width: 100%; height: 50vh; margin: 0px; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); whi[/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); line-height: 0.4; white-space: normal;[/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100vh; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url(
https://johngarden.files.wordpress.com/2016/06/tom-garden-tom-garden-char-june-2016-10.jpg?w=700
); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --characterNameHeight: 15%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
Last edited:
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"] Dead Man Walking
[/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Ophelia Rushka
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] N/A
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 25
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Female
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Manu Cyborg
[/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Ayodhya
[/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class=mainText] Ophelia comes from an old family. Once a lineage that stood at the forefront of scientific advancement, by the time that her parents were born the Rushka line had long since faded into obscurity. Coasting off of old, dwindling money in a crumbling family estate, Ophelia's birth brought with it a creeping anxiety. Her parents had been out of the workforce for years, and they had no desire to wade back into it.

Their solution, after a few years of debate, would be to convert the house into a rental building. It was too big for one family anyway, and there were more than enough people looking for a cheap roof to put over their head in the streets of lower Ayodhya. It was a decent enough idea in and of itself, they'd rent out individual rooms as small apartments and after only a few months they'd filled all vacancy. The problem was with the clientele. The pair were not landlords, and neither were they of a particularly dedicated ilk, so, as long as money came their way, they did little to screen or pry into the affairs of their renters. Over time, the building became a regular spot for addicts and criminals, Ophelia's parents looking the other way so long as they were paid.

Obviously, it wasn't exactly the most ideal place to raise a child.

Her home's degeneration into a crime den seemed to happen in tandem with her childhood. With each milestone in her life, each word learned or test aced, it seemed to play host to some new form of crime. Drug trafficking, smuggling, even a few cases of cold-blooded murder. By the time she was sixteen, she was familiar enough with all of it, some of it even first hand.
[/div] [div class=mainSubheader] Post-Awakening [/div] [div class=mainText] It's not entirely clear when exactly Ophelia awakened, but the day she learned about her gift is one she'll never forget.

In her last year of school, apparently, some thug or another let slip the location of his 'hideout' in the wrong place, and at the wrong time. Unbeknownst him, Ophelia, or her parents, the wheels of their demise were set into motion that day. An investigation was put into action and over the course of the next few weeks, more and more evidence against the estate, and her family by proxy, began to mount up. More than one crime lord was found to be using the place as a regular part of their operations, and at the same time the investigation turned up neither ignorance of nor resistance against the place's new purpose. As far as the law was concerned it was nothing more than a hive of crime, and a raid was scheduled.

The exact record of the events isn't particularly important, but complications arose, things went wrong, and more residents left the estate that day dead than alive. Her parents belonged to the prior, and by all means, Ophelia should have too. At the end of that day her body lay tattered and mangled, the victim of a resident's desperate attempts to ensure his safety, and she waited to die.

And waited.

And waited.

There was more blood outside of her body than in it, yet her consciousness didn't do so much as wane. When the cleanup crew eventually arrived, they were surprised to hear a faint crying for help, and even more surprised when they saw the body that it was coming from. Her body looked like it could be served up on a cheese platter, yet there she lay, conscious and begging for help. It didn't take a genius to figure out how. She was an Astra.

Her age shielded her from suffering the consequences of her parents' actions, but regardless, she was left alone in the world, with hardly even with a home to go back to. Her body seemed to be putting itself back together, slowly but surely, and over the months of recovery, she contemplated things. She definitely couldn't go back to a normal life, not physically or socially. That aside, her stay in the hospital was dull. She'd get the occasional visitor, either a distant family member, nervous friend, or otherwise interested party, but she brushed them all aside.

She already had a pretty good idea of what she'd do when she could walk on her own two feet again, and when she could, she decided to embrace the crime that had torn her old life down. Her justification had been something along the lines of tearing it down from the inside-out, but really, she'd just given up. It was easy enough to put her newfound durability to use in the criminal world, it even seemed like the more blood she spilled, both belonging to her and not, the more money she could make. But ultimately, it was all for naught. The creature comforts that she once enjoyed now did nothing for her, and she had no cause to fight for.

So she'd need to find one, in some way or another.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class=mainText]
Yesterday at 7:09 AM
#6
Standing on stilts of iron, at 6'3" Ophelia towers over most other women. Her organic body has a youthful, well-trained appearance, that of a hopeful young girl ready to face the adult world. She doesn't have much in the way of blemishes and quite clearly takes care of herself, or rather, did take care of herself before her awakening. Her cybernetic body on the other hand, shows little regard for appearance other than the most throwaway of modifications. Her forearms and lower legs both have the appearance of hulking, industrial approximations of the human form at best, clearly built with form in mind rather than function. Both of her eyes have been replaced with orange-colored cybernetics, and over her right is a retractable 'eyepatch' that functions as a sort of portable database.

The most unusual part of her appearance is the long, writhing tail that emerged from the base of her spine. Its capabilities are fairly basic, functioning as a prehensile, third limb. It's as flexible as you'd expect from its appearance, though its clawed tip lacks the dexterity of a proper human hand.
[/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class=mainText] Ophelia presents herself as a levelheaded enough person. She's not the type to lash out in anger or get overly excited about something trivial, neither is she likely to cry out in joy at winning the lottery or eagerly look forward to a birthday. That is to say, she's a very withdrawn woman. She'll play the part of an amiable young lady in a conversation, but it's ultimately just a mask. One that she's learned it's easier to wear than to show her disinterest in the world at large. Those who pay closer attention to the conversations they have will notice; She rarely talks about herself or her life, and never seems to mention hobbies or interests, because she nigh on has none. Ophelia finds it difficult to find satisfaction in her life. She has no need for the usual human goals of food and shelter, and the hobbies that would usually serve as an escape from the droll march of life have long since grown hollow to her.
[/div] [div class=mainSubheader] Fatal Flaws [/div] [div class=mainText] She's cripplingly apathetic. She has no regard for her physical wellbeing, and at this point in her life, the only thing that brings her any degree of joy is the odd song, and the oily smell of a brand new cybernetic enhancement, and one of those is riddled with issues of its own.

Spurred by a frustration with the brakes put on her body's ability to develop, Ophelia has developed an obsession with cybernetic enhancement. Most of the money she earns is earned for the sole purpose of replacing her current body, and fine-tuning her new one. While an escape from her usual apathy, it's definitely not one brought out in a positive light, and ultimately does her more mental harm than good.
[/div] [div class=mainSubheader] Motivations and Values [/div] [div class=mainText] Find something decent to do with her life.
[/div] [div class=mainSubheader] Fears and Taboos [/div] [div class=mainText] Her current life. The most common emotion Ophelia feels is the fear that she's never going to find something to live for, and she's considered ending her life more than once because of it.
[/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class=mainText] Golem - By traditional definitions, Ophelia is not alive. The only parts of her body required for her continued existence are her nervous system and brain. Her body has no need for food, air, water, or rest, and all of her organs not previously mentioned are dormant and unnecessary. Despite the non-functionality of her organs, her body seems to operate in perfectly good health. Her immune system is functional, her brain is properly supplied with what it needs to continue functioning, her wounds heal normally, and her muscles do not atrophy.
[/div] [div class=mainSubheader] Limitations [/div] [div class=mainText] When she awakened, Ophelia's body was essentially put on pause. She while, on one hand, this means she doesn't age, it also means that she can't develop her muscles or strengthen her body in any natural way. Furthermore, while her ability is incredible for her survival ability, it is nearly useless in terms of attack or defense. Finally, it doesn't come paired with some super-regenerative ability. She can recover from wounds that she'd normally be killed by, but that's only because her body doesn't die first. If she loses an arm, it's gone for good.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class=mainText] Less a skill than an enhancement, Ophelia has replaced her lower legs and forearms with cybernetics. The legs are made for the purpose of urban navigation, allowing her to leap from rooftop to rooftop with ease, and the arms for utility and strength. Her arms are able to be detached and swapped out, while not on the fly, easily enough. She has one model made purely for physical strength, another made to conceal a firearm, and a final one with no special functions for everyday use.

She used to be a member of her school's gymnastics squad, and while her half-cybernetic body doesn't exactly benefit from flexible muscles, she'd kept the agility she developed back then and is quite light on her feet.

She's a decent fistfighter. She hasn't been trained, but her cybernetics as well as her lack of regard for her physically wellbeing usually allows her to make up for the gap between her and more skilled opponents.
[/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class=mainText] "Hey, hey. You remember Ophelia? From high school? I ran into her the other day, and she's gone an made herself into a cyborg. Gross, right? You'd think that thing with her parents would've straightened her out." - An Old Classmate.

"Cheap. No regard for self-preservation. No interest in spilling the beans about our little arrangements. The perfect merc, really. I can put you on the line right now." - A Middleman.
[/div] [div class=mainSubheader] Reputation [/div] [div class=mainText] She's regarded quite well in the criminal underworld as someone who'll get a job done without complaints, and at a low price. That aside, she's something of a ghost in general society. She doesn't have any friends, doesn't have any hobbies, and is really only known in her neighborhood as the resident pesky cyborg.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class=mainText] A couple of middlemen that she uses to find work.
[/div] [div class=mainSubheader] Enemies [/div] [div class=mainText] A handful of criminal organizations that she's been hired to work against.
[/div] [div class=mainSubheader] Organizations [/div] [div class=mainText] She has loose connections to a low-level group of mercenaries that take jobs from various criminal groups. She's worked with a few of the other members but, as ever, she's hardly attached to any of them, and would pack up her bags for a better deal at a moment's notice.
[/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; overflow-y: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; height: 1.6em; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] max-width: 100%; height: 50vh; margin: 0px; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); whi[/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); line-height: 0.4; white-space: normal;[/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100vh; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://www.rpnation.com/media/a83ac33d8d83aa0e5f37591d1bde9465-png.37437/full
); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --characterNameHeight: 15%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"] Ayodhya 1 (A1) [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Maia Asim [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] Ayodhya, Ayodhya 1, A1 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 21 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Female [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Manu (Human) [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Ayodhya [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class=mainText] Maia is a Grounder. Born in Ayodhya, she grew up at street-level at the very bottom of the district. Her parents were cleaners, as were her four siblings, her aunts and uncles and their families. Maia's immediate family all worked for a laundry service as essentially slave labor in exchange for food. She grew up learning how to fight...and how to run, because virtually everything and everyone that wasn't a beggar or another kid was stronger than her. Like many kids, local Ashvamedha games provided her only recreational outlet and Maia played hard and played to win. The brutal game and often brutal fights after the outcome of a game made her fit and strong.

She doesn't dwell much on who she was because of its homogeneity. Perhaps children in upper levels experienced distinct events in their lives, birthdays and graduations and changes in fortune. For Maia, from her youth on, life was pure and persistent struggle alongside her immediate and extended family. For the most part, they were lucky. No one was murdered. She wasn't raped and neither were any of her siblings. They kept a low profile and they worked from the time they woke to the time they slept. Only Maia, with her skill in Ashvamedha and her propensity to stand up for herself stood out, and it was thanks to counsel from her fellow players as well as family that she never got in over her head against one of the major cartels or even minor criminal rings who would have killed her, if she was lucky. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class=mainText] Maia's Awakening happened during a match of Ashvamedha. No one could keep up with her. Nothing could even make her breath hard. And when she accidentally flipped a fellow player end over end across the street, she knew her life had changed forever.

And it did. Word spread of what she'd done in that match and when the Ministry of Ayodhya District Security investigated, Maia submitted to their interrogation and all the tests they cared to make. The Ministry then made an extraordinary offer. They would educate her in partnership with Ayodhya's best universities while moving her entire extended family to the upper levels where they could be given work in the laundry services for a major university. Maia would be given a suite, a paycheck and a uniform along with formal security training. In exchange, she would put her talents to use for the Ministry of Ayodhya District Security, committing her life to their work. Without hesitation, Maia agreed.

That was five years ago. She learned to read and write, and voraciously learned everything she could from New Mombasa University. Maia is photogenic, friendly, surprisingly good at making a speech and decidedly heroic in carrying out her orders. And the Ministry is only too happy to spin and leverage her accomplishments as a tool of social pacification, using her as a role model for uplift (i.e. "You too can be Ayodhya if you work selflessly for the state!"). Particularly in the last year, Maia's image has been methodically retooled and crafted for mass appeal to socially and economically stratified populations. Her face is everywhere, on billboards, on magazines, and on lunch boxes and even footwear.

And Maia silently performs her duties, gives the inspirational speeches she's asked to make and privately tries to bury her fear that nothing she does is actually making things better for anyone except herself. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class=mainText] Maia is an athletic, beautiful woman who radiates a palpable physicality, a threat of imminent danger to those breaking the law and a sense of immense power on your side for those who aren't. She walks with a determined, confident stride that suggests nothing will get between her and what she's aimed at. Maia wears her black hair loose and curly, heedless of the potential of someone grabbing it. If they're close enough to grab her hair, they're close enough for her to grab them and then it's all over. Her natural speaking voice is loud and determined, and her alto can ring out over crowds and battlefields alike.

When on duty, she wears the all-black uniform of the Ministry of Ayodhya District Security (MADS), with one telling exception. The golden badge of office worn by all Ministry that details their Ministry Identification Number and branch assignment is instead a gleaming featureless silver that makes its own statement; Ayodhya doesn't need a number. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class=mainText] Maia is, much to her own surprise, the genuine article. When she "signed up" for this job, she expected to deeply resent having to risk her life for others in order to get her family out of Ayodhya 1. Early on, the Ministry of Ayodhya District Security put her through a finishing program, designed to smooth off the offensive slang, improve her public comportment and it became very obvious that they wanted her to act out a role for the public as much as they wanted her to use her incredible strength to stop crime. But as she turned 18 and went to work for the Ministry, she saw the faces of the people she saved and something changed. Being deployed to fight the 'bad guys' more often than not meant protecting people, real people, and not just the status quo.

The last three years have sharpened Maia, refined her, cut away some of her imperfections, and leaving a woman who may become the myth the people see her as. She really is fearless in the defense of others, passionate in the pursuit of justice, a natural leader, incredibly charismatic on the street and larger than life while not being out of touch. [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class=mainText] Maia harbors a fierce, bitter cynicism towards MADS in general and Ayodhya's public policies in particular, for she (rightly) believes people like her have been abandoned by the government. Living among the upper class for the last five years has made her a bit self-absorbed in her life and her job, despite her private critique of policy. Her job puts her in regular contact with the 'common folk' but her new life of privilege has isolated her and reduced her empathy for people who commit crime and hurt others. She's occasionally callous and from time to time forgets not everyone's as durable as she is. [/div] [div class=mainSubheader] Motivations and Values [/div] [div class=mainText] All Maia originally wanted was to get herself and her family out of poverty. She's accomplished that. A life in Ayodhya's upper levels hasn't resulted in complaceny, though, but quite the opposite. Despite her incredible strength, Maia feels the Ministry has all the power in their relationship and she's dependent on their continued good will towards her and her family, ensuring her loyalty and cooperation. As much as the job permits, Maia privately wants to make Ayodhya better for everyone, wants crime out of there and wants people given more fair economic chances. Her education has only given her appreciation for how monumental that task really is, though. In the meantime, she revels in being the hammer of the Ministry for stamping out crime and she particularly enjoys the opportunity to go to schools and give talks to students about pursuing opportunities of service to the state instead of looking for opportunities in the streets.

Long term, she hopes to continue her University education, finish her studies of law and eventually leverage the state-crafted image of Ayodhya 1 into a shot at a political seat, where she can start to try making real changes to the system. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class=mainText] More than anything, Maia is afraid for her family. She's afraid one day she'll make a mistake the propaganda machine of the Ministry can't walk back, and it'll be her family that pays the price.

[/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class=mainText] Super Strength: Maia is enormously strong. On a scale of "Wow" to "Oh God, she's going to hit the MOON!", the moon's in trouble. Past feats have included tearing steel doors apart, punching a cartel-stolen APC through reinforced concrete and stopping a moving mag-lev train with nothing but her hands and feet. [/div] [div class=mainSubheader] Limitations [/div] [div class=mainText] Range: She doesn't have it, except for maybe grabbing something and throwing it.
Durability: While extraordinarily strong, Maia isn't much more durable than any other Astra. She's easily capable of lifting something heavy enough to actually kill her if she loses her grip. Likewise, she can jump high enough to hurt herself if she doesn't brace herself for landing right.
With Great Power...: While not a function of her powers, Maia's very careful about the risks of using her full strength. Against environmental obstacles, she'll cut loose but she still has nightmares about the first criminal she put her fist through. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class=mainText] Maia is amazingly good at washing clothes, removing stains and sewing up rips and tears. She's also an excellent Ashvamedha player who might have gone pro with another couple of years of practice.

Thanks to years of remedial education, she has a broad grasp of history, politics, culture, maths and sciences. And thanks to her Ministry education, Maia is a competent officer in forensics, interrogation and basic policework. Her use as a weapon of the Ministry means most of this training has been more theoretical than practical.

Between a lifetime of brawling on the streets coupled with the best training the Ministry of Ayodhya District Security, Maia has become a ferocious hand-to-hand fighter. She's trained, drilled and fought one-on-one and in group combat, and has encountered a multitude of fighting styles. Her own uses a mixture of soft deflection techniques and a great deal of grappling. While she's perfectly good at throwing a punch or a kick, she's rarely done so in the last five years given the probability of death or permanent disability to her opponent. Maia is also a good, if otherwise unremarkable, shot with the pistol, shotgun and assault rifle. She's quite good with a knife as well but has never used one since her Awakening. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class=mainText] "Ayodhya? She's amazing! Have you seen her? She was on 3 the other day, you know that opium sweatshop over near Hussien? Ayodhya just went in and brought the whole building down! Punched out like two dozen of them! Hell, the government's never given a damn about us down here but the Ministry? They're on the level. Guess they don't have enough to go around, same as any of us, but as long as they've got Ayodhya, you know someone's watching out for us." - Citizen from Ayodhya 5.

"Ayodhya 1? Oh yeah, that bitch. I mean, she's alright for Ministry I guess. She's a Grounder so you know she's been in the shit. But she wears the uniform like the rest of them. She doesn't live here no more. And what she breaks don't stay broke neither. Smash a cartel, another rises, same shit on another day. Still, at least it's fun to watch her in the news, throwing people around. And have you seen that ass in those black pants? MmmmMMMM!" - Unsolicited praise from a boosterganger on Ayodhya 2.

"Ah, Maia Asim. She's an adequate student. More diligent than most. Quite the reputation she has in the broadcasts, the sort of late night entertainment the lower class thrives on, no? She's entirely different here, of course. For a Grounder, she's quite remarkable. At least she knows her limitations, though. It's not as if she'll ever be anything more than a pretty face on a billboard." - Professor Keita Masolle, New Mombasa University. [/div] [div class=mainSubheader] Reputation [/div] [div class=mainText] The face of Maia Asim is one known across all of Ayodhya, as its plastered on holographic billboards and crops up regularly in the media feed. Ayodhya 1 burst onto the Hero scene three years ago and has left a blazing trail of righteous destruction and justice in her wake. Known for her fearlessness in battle as well as an unfailing commitment to the preservation of citizen lives, Ayodhya is a beloved iconic figure in the lower levels of the Ayodhya District, exemplified by the media giving her a moniker of the district itself. She even has her own action figure line as well as an animated series of her adventures. Ayodhya is almost as well known for her inspirational speeches, given at news conferences, school graduations and during her frequent community service projects where she's visibly seen helping with large-scale construction. Loved by most and hated by a few, Ayodhya has a reputation for being the very best her District has to offer from down below. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class=mainText] Maia has the meaningful support of her colleagues in the Ministry of Ayodhya District Security. She also has a flattering press, and a small but dedicated workground in the Ministry's Propaganda arm dedicated to creating and expanding her public image. Because of her fame, she enjoys widespread support from Ayodhya's lower levels who see her as (1) one of them and (2) someone on their side. [/div] [div class=mainSubheader] Enemies [/div] [div class=mainText] Every criminal organization in Ayodhya would like to see her dead. Or at least not aimed at them. [/div] [div class=mainSubheader] Organizations [/div] [div class=mainText] In the Ministry of Ayodhya District Security, Maia Asim's profile shows she holds the rank of Captain and is assigned to the Ministry Special Task Force Projects Division. In practice, Maia enjoys widespread cooperation and support from her District's Ministry of District Security (and the tacit support of other Districts) but she's also part of the chain of command. By virtue of her role, she has no direct reports and little say over her assignments. She goes wherever the Ministry tells her to, whenever they tell her to. [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; overflow-y: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; height: 1.6em; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] max-width: 100%; height: 50vh; margin: 0px; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); whi[/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); line-height: 0.4; white-space: normal;[/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100vh; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://i.imgur.com/T4Kfz4R.jpg); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --characterNameHeight: 15%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
Last edited:
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"] The Hierophant [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] David O'Shaughnessy [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] Six-shooter Preacher, Six-Shot Dave, Preacher David [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 38 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Male [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Manu [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Ayodhya [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class=mainText]
In his early years, if you told David O’Shaughnessy that he would be preaching about The Faith to those who would listen, he would have laughed and slammed the door shut on your face. Though both his parents were devout believers of The Faith, young David did not care for the religion. As a youth, the man was only interested in thrills, and even as his parents chided him for betraying their faith, he turned to the military, since, in his own words, it was the only place where he could shoot a gun and get away with it. David wasn't one to make a wish and not go with it-- he earned a place in the military as a skilled marksman with both a rifle and a handgun. His peers saw him as on par with legends, and he fed off that attention. He earned the name Six-Shot Dave for his skill with a revolver, and was known by that moniker for the longest time.

But that was a long time ago. After his father passed, his mother disappeared, there was no more reason to go back home, so he devoted his life to the military. As time went by, he began to feel emptiness. He had achieved all he wanted, he held the attention of his peers, he was a shot and a half. He had nothing else to look forwards to. The man slowly fell into a rut. The four walls seemed so empty, the world seemed so lifeless, everything just seemed…unworthy. Day in, day out, the light of life faded from his eyes, until he was but a husk of a man.

But Vishnu, the Preserver, came for him. Having been deployed to quell a radical group violently protesting against the monarchy, his squad arrived first, only to be beset upon by an ambush. His comrades were entirely wiped out before he could even set up his rifle, and they were now closing in on him and his spotter, and very soon, just himself, as a bullet caught the poor lady across the skull. In that moment, life flooded back into his eyes, as he prayed fervently to every and any god out there to listen to a heathen’s prayer. He vowed he would walk the path of The Faith if they let him survive. When he opened his eyes, and when the tears of fear and sorrow cleared, he saw, on the ground, an amulet of Vishnu, having fallen out of his spotter’s pocket. Scrambling for it, he held it close to himself, and at that moment, a miracle occurred. Reinforcements swept in, turning the tide entirely. When the medics found him, they gave an account as to that David had a serene look on his face, as he clutched tightly in his hand, an amulet of Vishnu.

He remains to today as a man of the military, but a soldier devout to the teachings of the Texts. He does as the Empire wishes of him, but also as the Faith dictates. Over the years, he has been enlightened by the teachings of other gurus, and seeks transcendence above human wants and karma itself. He has since started living a minimalist life. His preaching has turned his previous moniker into a new one, with many of his comrades beginning to call him the Six-Shooter Preacher.

[/div] [div class=mainSubheader] Post-Awakening [/div] [div class=mainText] Upon attaining his powers, David did not claim himself to be amongst the deities. No. He took it as a message instead, from on high, that he was gifted with his Astra powers by the fates itself, that he was chosen amongst so many despite his violent past to showcase miracles to bring others to the Faith by the sight of them. Overjoyed at this prospect, he did so, and he did so convert many unbelievers to the Faith, under his own teachings as well. Many still do not dare call him a guru, but they do see him as one of the chosen of the gods. His relatively peaceful ability even furthers the idea that he truly is fated to usher in a new golden age for The Faith, and he, too, believes this.

David was later assigned as part of the Royal Guard, and was initially part of the Queen’s more obscure bodyguard detail, until the responsibility changed to overseeing the Princess’s actions, for she, too, was one of the chosen. He was to keep an eye on her, while maintaining his distance- she was not to know of his role in this play. He takes on the role of a wandering preacher, and has since earned the name of Preacher David amongst the devoted.
[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class=mainText] A lanky man of about 5'10". His thin frame tends to fool others into thinking he is taller than he is. He sports a rather wicked-looking beard that curls upwards and messy hair that is often underneath a black-banded fedora. He prefers his wardrobe to be simple and distances himself from gaudy clothing, choosing instead to sport a simple black suit with a white dress shirt, complete with a black tie. He may change the colours once in a while, but they often retain basic colours of black, white, grey, or occasionally blue. He speaks in a distinctive drawl. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class=mainText] A calm man who has removed himself from materialistic wants from this world, attaining an inner peace of sorts. All things must come to pass, life must go on. Instead of granting him serenity, however, David now seems quite aloof to the world at large. Sorrow does not assail him, fear no longer lives in him. The man is unfettered. Because of this, however, he is also an efficient arm of the military and the Queen- he feels neither regret nor sorrow. He advocates peace, and he is more like to call for a truce and a talk first, but if it is beyond his help, then he will let his revolver speak for him. Those who will not listen to reason must not be allowed to accrue more bad karma, and he prays that every life he has taken to be reborn in a new form, where they can now begin anew. His blue-and-orange morality is difficult to get a grip on, and none should try to reason with him without express knowledge of the Texts. In short, the man believes himself to be an act of The Faith, to usher in a golden age.
[/div] [div class=mainSubheader] Fatal Flaws [/div] [div class=mainText] He comes off as extremely apathetic. It isn't because he doesn't care- he knows of sorrow, of worry, of concern, of grief, but he has since removed himself from such emotions and his ability to just simply skip over a death after a prayer and some offerings has put him in a very unsettling light. He does what he must do. [/div] [div class=mainSubheader] Motivations and Values [/div] [div class=mainText] David seeks to achieve transcendence, and to bring the Faith to the people. His current military duty dictates that he must protect the Princess with his life, if necessary. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class=mainText] David is the unfettered. Nothing holds him back any more. There is nothing he will not do. That is, other than abandon the Faith. He will not see his faith be trampled upon, and deep inside, somewhere, he fears that The Faith is nothing but a lie. If this is realised, he may lose more than a few screws.[/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class=mainText] The power to bring a seed to the apex of its life. By holding a seed in his hand, he is capable of imbuing it with energy, and upon discarding it onto the ground, the seed will immediately burst with accelerated growth, immediately shooting up to its highest growth attainable. [/div] [div class=mainSubheader] Limitations [/div] [div class=mainText] For one, David requires a seed or a few to work his 'magic' as it were. Furthermore, he may require more than one seed to create the desired effect, like a wall of trees. To add to that, this ability is somewhat upset by its actual lack of utility, requiring heavy thinking and creativity on David's part, which include factoring in what kind of plant the seed would grow into.[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class=mainText] Fastest draw in the Trinity, he currently holds a record of 0.35 seconds draw time, and he has the eye to match it to. Many have claimed that perhaps his supernatural skill with a gun is his gift.[/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class=mainText] "Dave? He's changed. Used to be cynical, bloodthirsty, then dead inside. Now, he's all about The Faith, and Vishnu, and all that jazz. I'm happy to see that he's back on his feet again, but he's just...different now, you know?"
-Cpl. George Bromwich, soldier

"I wouldn't call Preacher David as a guru. His teachings are nothing new. We've heard it before. But on coals where other gurus fear to tread, Preacher David goes."
-Maya Ibrahimovich, Vaishnavan devotee

"His violent ways are very persuasive, I give you that, and he does only take that route when he believes that they cannot be saved. My teachings do not advocate such behaviour, however, and though he has taken it upon himself to carry out perhaps Shiva's will, I cannot condone it. Listen to Preacher David, for he preaches well, but do not do as he does. That is my opinion."
-Braga Volcker, Guru

[/div] [div class=mainSubheader] Reputation [/div] [div class=mainText] Known by many of The Faith, particularly the Vaishnavans, as a well-read preacher, but actual opinion on the man is divisive- whether his acts are righteous or misplaced is debated by many to this day, and will be debated in the future. He has also earned a reputation amongst some of the military and district securities as a record holder for the quickest draw in the Trinity, and his marksmanship.[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class=mainText] The Empire's military sees him as an asset they can call upon, if only for his ability with a gun, and has a number of friends in the military and the MADS to call up on if he requires help.

His relationship with the Royal Guards is professional, not too distant, not too close. Those who can stand his occasional preaching see him as a conversational partner at best. Those who can't, see him more as a valuable ally.

At his position as a Royal Guard, David is privy to private audiences with the Empress herself. He respects her deeply, and sees her as someone to seek out when he needs to meditate on his own doubts. If anything, he reveres her as a guru. He does not try to bother her too much, and only actually seeks out audience with her when he requires advice or is reporting in on his duties.
[/div] [div class=mainSubheader] Enemies [/div] [div class=mainText] He would like to believe he has none, when he has many. His death would not matter in the end, for it is the fate of all things.[/div] [div class=mainSubheader] Organizations [/div] [div class=mainText] The Empire's military's Royal Guard[/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; overflow-y: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; height: 1.6em; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] max-width: 100%; height: 50vh; margin: 0px; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); whi[/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); line-height: 0.4; white-space: normal;[/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100vh; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://i.imgur.com/EBwmzxV.jpg); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --characterNameHeight: 15%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
Last edited:
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"] The Hunger [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Francis Evren [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] Franky [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 29 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] male [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Manu-Asura Hybrid [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Arcadia [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class="mainText preserve"] Being conceived as a hybrid after his human mother's one year relationship with a rather eloquently spoken Asura, Francis was always considered a blessing by both of his parents. Despite the fact that the two are now separated, they've always done their share to provide for their hybrid child. Arcadia being a place of more hospitality than most allowed for Francis not as much distance from other people, compared to if he lived in other districts. In his later years, Francis didn't have many aspirations for grandeur or recognition, quite content for settling with industrial work with some close friends. At the behest of his father, unfortunately, who felt that his son should go for a safer profession. Disregarding any such warnings, Francis had effective success in his career, helping his associate complete many construction projects. One noticeable quirk he started developing during this time was an absurd obsession with eating and drinking liquids, yet surprisingly never going into poor health. This would turn out to be the start of something life changing, as Francis' breathing and movements also became much quicker and sometimes erratic. Going for many physical evaluations provided no cause for this, all that became known was that Francis' metabolism had sped up exponentially, explaining his need for more water, food, and oxygen. This wasn't deemed as a negative health condition, so Francis was allowed to continue his work. Not exactly the best decision as this led to many minor accidents on construction projects. None resulting in injury, Francis was slowly becoming distanced from some of his coworkers as a result. They'd think him becoming careless or insensitive, but that was the extent until the final straw, where his own folly caused major damage to himself. Falling a large height and being crushed would kill any normal man; yet Francis came out healthy, but different. Emerging from the rubble was a creature with ruptured skin and much lacerations, but not from external damage. These injuries were inflicted by growths of Francis' bones and muscles. Turns out his increased metabolism was the beginning of his power; his cells metabolizing so quickly at this rate, they were capable of rapid minor healing and growing in certain areas to adapt to external pressures. Francis was also shocked at this moment, unsure of what to do. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class="mainText preserve"] Following the incident, Francis was promptly fired for not only negligence, but also due to how grotesque his body was at the accident. Of course, his body went back to normal shortly afterwards, as the prior generation of adapted cells died out and were replaced with normal cells again. Finding himself now unemployed and more hungry than ever, Francis went on a binge eating spree, promptly followed by another visit to a health professional. They were more than willing to perform tests to see the extent, not only for their curiosity, but Francis' as well, of his newfound abilities. This never served as any sort of positive gain for the guy, as all he received were various obscure and sometimes painful or traumatizing tests. By the time his limits were about to be gauged, Francis had had enough and voluntarily quit before the final results. As far as he was concerned, he knew his limits now, and one thing he always needed was more sustenance. That would always be an expensive venture, so he'd have to find more employment for the time being. While his own efforts of searching were fruitless, his test rseults were sent out to a few academic backgrounds; ultimately going to the hands of Arcadia's District Security. Francis was now put onto the force as a welcomed new recruit, especially with the possibilities of his uses. Through a series of many loopholes that the Arcadia branch spent agonizing hours going through, Francis' test results would be kept a close secret from every other district and the central government, until whenever they felt was necessary as leverage. So now, he stands as being no more than a tool for the more dangerous jobs and crimes of the district security, should they ever arise. His father ended up finding out of his son's new life, and is currently seeking ways to get him out; both legal or otherwise. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class="mainText preserve"] Francis is a slightly portly man, with hints of muscle showing underneath the small amounts of fat he tries to keep on his frame. With dark hair and a slight beard, he has the appearance of a stern individual. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class="mainText preserve"] Francis is very much a wholesome individual who puts calmness and positivity as his main tenants. Although, he can grow much more irritated with being obnoxiously ignored for no reason, or someone turning their back in his time of need. [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class="mainText preserve"] Francis has grown some trust issues with those new or maintaining an appearance of disregard or criminality. He will become very aggressive if this comes back to personally impact him, in terms of health or lifestyle. As a recent development, he has become very focused on respect; a teaching from his father's side. This is too far to the point of a fault, having an impact on social interactions with people. [/div] [div class=mainSubheader] Motivations and Values [/div] [div class="mainText preserve"] Francis is mostly interested in rebuilding the relationships with his old friends and estranged mother, who all turned away after his last construction accident. Thinking it as something respectable, he expects being part of security to help make those lost come back to him with respect and intrigue. If that can't be achieved, he wouldn't mind going up the ladder as far as he can to gain that respect. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class="mainText preserve"] Francis is very concerned with how far he can go with his power. He sees it not as a curse, nor a gift. It's more of a piece of baggage he has to maintain constant observation over. Not to mention, he has some deeprooted fear people might try to take advantage of that; though, that's not in effect when surrounded by the District Security. (how ironic) [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class="mainText preserve"] Francis' power is one of intense cellular metabolism. In effect, this makes the cells of his body grow fast, reproduce, and die quickly. While this seems to have no effect on his aging, it does allow for quick changes in his body structure to the extent of massive growths of adaptations. For example; if he was getting crushed under a huge piece of debris, his cells will quickly grow to create a generation of stronger muscle cells. Francis does have a degree of control over this; mainly by focusing as much conscious energy on certain body parts, he can get them to adapt quickly. This can go too far as if he needs a quick weapon, his arm bone might grow straight out of his body painfully. A weapon is created, but at the cost of pain and discomfort; though it is only temperary before his cells go to a more passive generation. [/div] [div class=mainSubheader] Limitations [/div] [div class="mainText preserve"] There are many limits that Francis' power has; known thanks to the testing of eager physicians. Being a person of metabolism, Francis needs much more sustenance than other people. Especially after using his power extensively or for a very long period; he will need to eat and drink a lot, lest he suffer extreme exhaustion to the point of not being able to move. The actual growth of his body can't absurdly exceed his body mass either. It is literally impossible for Francis to grow traits his body does not have, like wings or multiple limbs. Additionally, you won't be able to see him be able to shrink at all, or grow to a giant taller than seven feet. As a caveat to conscious control of his powers, his emotions and state of mind can have an effect on his power. If he becomes to agitated,especially in a life threatening situation, his body can adapt too much; becoming a monstrous creature of dangerous proportions. This will actually hurt him majorly once any present adrenaline wears off. This is actually what is known by the Arcadia Security after they viewed his test results and physicians' predictions. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class="mainText preserve"] Francis does have knowledge of construction; though, it has dumbed down now that this is no longer his career. Although, this is replaced with new knowledge of de-escalation tactics and some weapons training. Being around the physicians for testing also let him pick up and understand a very small amount of medical jargon and basic procedures, though he'd have no clue how to even begin to perform one. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class="mainText preserve"] "At least he's better than the guy who drank himself to sleep on the job." -A fellow security officer. "That boy really needs to get his head straightened out nowadays; I don't understand how he such a thing changed him so much." -Francis' father "I still wish he was here; I'd love to see how far we could push him." A young eager medical examiner looking for some quick fame. [/div] [div class=mainSubheader] Reputation [/div] [div class="mainText preserve"] Francis is considered average amongst his new peers; not seen as bad, nor overly good to hang around with. But, there are quite a few officer's who have opened up to Francis and are much happier to spend time with him. The higher ups of Arcadia security that know of Franci's potential think him as more of an asset than a person. They wouldn't dare try and exploit him at this point with any legal ramification; so they're just waiting for he right time to send the word out to other districts and government once they discover what's could be in it for them. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class="mainText preserve"] Francis' relationship with other officers is mostly duty bound, so they won't talk bad or go out of their way to undermine him. Though his father is much more caring; though is mostly concerned about his son having chosen a self destroying path now. On a side note, Francis did manage to get the contact info of a cute medical assistant during his times of testing, though has yet to contact her. They did hit it off upon first meeting, however. [/div] [div class=mainSubheader] Enemies [/div] [div class="mainText preserve"] All of Francis' construction buddies, and even his mother, have severed all ties with him. They want nothing to do with this new Francis with powers; though they see it as more of a gross medical condition. Francis himself wants nothing more to do with anyone sending requests for testing; although, some offering monetary rewards have been proving hard to resist lately. He will always hold some contempt for them. [/div] [div class=mainSubheader] Organizations [/div] [div class="mainText preserve"] Francis is an officer for Arcadia District Security, and has all the access and luxury of any other typical officer. He's been inquiring lately about higher positions, and this is being discussed in the local upper echelons. Not that he's done an exemplary job, but it might be easier to keep him on a tighter leash. [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=preserve]white-space: pre-wrap;[/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://pre00.deviantart.net/5661/th/pre/i/2012/298/8/2/bearded_man_red_serie_by_artbyfab-d5ixzo3.jpg); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"] Biological Vampire [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Kirk Țepeș [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] Dr. Țepeș [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 30 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Male [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Manu [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Ayodhya [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class="mainText preserve"] Kirk was born as a middle child to an average family in the current day Carpathian mountains, near the border of Ayodhya and Kailasa. His father was a professor at a local university and due to that got a decent wage to support Kirk and his family. That meant most of his early life was spent without much trouble. However that all changed, on his 15th birthday Kirk got a rare blood infection that couldn't be cured by any conventional way, his life would be destined to be much shorter than everyone else's. As a teenager dealing with his impending mortality, he came to a peculiar resolution. If there wasn't a cure he would just have to make one. A decision ridiculed by his peers and one that his family couldn't support, wishing that he would just live his life to the fullest while he still had time instead of spending time in the library trying to catch dreams. However ignoring the ridicule and without his family's support, he got accepted into a prestigious medical institution, picking bio-engineering and biochemistry at his studies. With the university's wealth of knowledge and the high tech facility, he had the perfect environment to find a cure for his condition, however, his condition only got worse and in his last year of university he was hospitalized at least once a month, due to that he spent less and less time in class and more and more time in the lab developing his cure, when he finally did it. He managed to create a serum that synthesized bat blood and nano-machines, which once injected would override his immune system and change it to one of a bat. However, before he could test it his condition got critical, he was once more hospitalized and the doctors told him he had a few hours left to live so he was discharged to go and spend his last moments with his family. Obviously however, he made his way back to the laboratory where he immediately locked himself in and injected the experimental serum into himself. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class="mainText preserve"] As the serum entered his body and took control, changing his immune system he couldn't feel anything but a large burning pain from his arm and the heat from his body dissipating until he blacked out. He woke up to find the door to the lab caved in and his younger sister crying over him and being consoled by his older brother. However there was a much bigger problem at hand, he was feeling an agonizing hunger take over him and there was a succulent throat sitting right in front of him. He jolted back up grabbing onto her shoulders and biting into her neck, the feeling of the blood being pumped into him calmed him. Which allowed him to get control of his actions once more, realizing that he was killing his sister, he let go. His sister fainted due to lack of blood, which resulted in Kirk being called a monster by his older brother and threatened to be killed if he showed up to his family ever again. After that, he presented his research to the board of the university and due to it he got his doctorate, he then later got funding from the Direct Administrator of Rapture to open a lab deep in the levels of the Ayodhya, where he could perform his research in peace and also feed on the scum of the lower levels without fear of authority intervention. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class="mainText preserve"] Kirk is a tall and lanky individual pale enough to confuse him with a corpse. He has blood red pulsating eyes that are anything but pleasing to look even more so with his abnormally large canines. He also has medium length dirty blond hair with a white strand at the side of his face going over his temple. His wardrobe compliments his creepy look as well, preferring to wear shirts and vests switching it for a lab coat when inside of his laboratory. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class="mainText preserve"] Kirk is a very patient and calculated individual, doing everything with surgical almost mechanical precision. He spends a lot of time organizing and sorting through his laboratory, some people even going as far to call the way he does things obsessive or even compulsive. Other than that there isn't much to know about him, he likes to keep to himself and doesn't break under pressure meaning you can't pressure him into talking more about himself. He only drinks before 7 and drinks a glass of milk and exercises for half an hour before going to sleep. [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class="mainText preserve"] He has trouble letting people into his life, after his family gave up on him there is no one else who would be willing to approach him, he, however, doesn't seem to mind that much. His OCD is also quite a big problem if things don't go his way he will either get angry or simply give up and stop trying. [/div] [div class=mainSubheader] Motivations and Values [/div] [div class="mainText preserve"] He wants to continue living, after narrowingly escaping death he now has the time he never had in his early days and he will do anything to make sure that this time lasts as long as it can. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class="mainText preserve"] As you might have guessed, his greatest fear is dying. But another fear that isn't so obvious is hurting the people he cares about, after making his sister pass out he has made sure to carefully monitor his feeding needs in order not to repeat the past. [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class="mainText preserve"] Vampiric physiology - After the serum made his blood resemble one of a bat, his Astra power activated changing aspects of his physiology to resemble a bat/human hybrid. This new physiology gives him increased strength and agility, even compared to an Astra, which only increases as he consumes blood. Finally, it increased his senses to a whole new level, he can see heat signatures and it also gave him the ability to use echolocation. He can see make noises too high for human ears to hear and use the returning echoes to make a sonic map of the area around him. Also with a new vampiric immune system not only diseases don't affect him but he can also transmit them to people he feeds on. [/div] [div class=mainSubheader] Limitations [/div] [div class="mainText preserve"] First of all, with his new ability, he lost the ability to use sunlight in any beneficial way, it now hurts his sensitive pupils if he stares at a bright light for too long and due to a much lower overall body heat he cannot deal with higher temperatures. His dependency on blood is also a major problem for him, if he doesn't feed on it regularly he becomes weaker and might even die, at worst cases his instincts take over and attack anything with a heat signature until he gets enough blood. His increased senses also play as a double-edged blade, loud noises and bright lights can disorient and even make him blind/deaf depending on the intensity. His increased strength and agility is also isn't that impressive to Astra's who's powers specialize in those areas. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class="mainText preserve"] He's a genius bio-chemist and engineer, otherwise, his fighting skills depend mostly on instinctual actions which usually do the trick. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class="mainText preserve"] "He's a fucking freak I tell you, I mean who knows what he does in that laboratory of his?" - Lower Level Citizen "He didn't interact much with his fellow classmates but he clearly is very intelligent, from his thesis." - Member of the university board. "He's a horrible monster that he shouldn't be alive, he better not show up his fangs around here ever again." - Alexander Țepeș, his older brother. [/div] [div class=mainSubheader] Reputation [/div] [div class="mainText preserve"] He has quite a controversial reputation, to people outside the medical world he isn't that well known but any self-respecting medical practitioner has at least heard rumors about his research and reputation. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class="mainText preserve"] He has a few friends and acquaintances in the medical industry, but they are all purely professional nothing to write home about. However he sometimes secretly speaks to his little sister every once in a while, and if he ever needed help he could trust her. [/div] [div class=mainSubheader] Enemies [/div] [div class="mainText preserve"] Basically his entire family except for his sister, after the incident you can't really blame them for their distaste of him and why they keep their distance. [/div] [div class=mainSubheader] Organizations [/div] [div class="mainText preserve"] His laboratory is technically a branch or a franchise of the Direct Administrator of Rapture, so he is part of them. [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=preserve]white-space: pre-wrap;[/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url( https://cdn.discordapp.com/attachments/479356392998961176/487039018240835587/haerAOH.png ); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
Last edited:
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"] The Roots of Hope [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Rosalie O. Laterra [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] Rosa - Terra [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 27 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Female [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Manu [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Arcadia [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class="mainText preserve"] Like all the previous generations of the Laterra family line Rosalie has called Arcadia home since the moment she drew her first breath. Her mother is a celebrated biomedical engineer and her father is one of the leading scientific researchers into sustainable food sources. Everyone had high hopes for Rosalie, grooming her to be a successful and bright heir to the Laterra line. To the dismay of her parents Rosalie had little interest in the lessons imparted to her by her tutors and mentors, and she preferred to spend her time among nature and take in all the splendor that Earth had to offer. She spent a lot of time in the nature parks of the city, and would slip away from her lessons just to spend a few moments in the sunlight. For twenty two years she led a carefree life full of happiness despite the scolding from her family and tutors, that is until her awakening. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class="mainText preserve"] After the discovery of her powers her life became dark and full of despair. Gone were the days of going out and enjoying life, gone were the tutors and mentors she knew for most of her life. Everything changed and came crashing down around her. Rosalie parents confined her to a cell disguised as a room, locked from the outside and guarded at all times. Only the science team and her parents ever came to visit, and only a screen with computer generated images of outside to sustain her. For two years she lived this way until a mistake was made, her nanny was allowed one last visit. Dear Natasha loved Rosalie and took care of her while her mother and father worked, and she could not bear to see Rosalie locked away like that, so during her visit she helped Rosalie escape and set her loose into the world. Natasha was not able to take Rosalie so she gave her what she needed and told her to run, and Rosalie ran as far as she could, wishing her the best on her journey. She ran as far as should could with what little she had and found herself in Central where she carved out a peaceful living growing and selling medicinal plants to those who couldn't afford main stream medical care. For three years she scraped by on the streets of Central, until the summon for all Astra to gather. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class="mainText preserve"] Rosalie is a meek girl who you wouldn't notice walking down the street due to the unassuming way she dresses and carries herself. She sports long chestnut hair and does have some noticeable freckles on her face that she attempts to hide, and hazel eyes mixed with a soft green hue. She has no markings, scars, or augmentations that would make her stand out in a crowd. Her body type is slender and short, standing at just five feet four inches and weighing only one hundred and thirty three pounds. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class="mainText preserve"] Rosalie's personality is one that shows how betrayed she feels after what happened with her friends and family during her awakening. She is distrustful of those she meets and doesn't warm up easily, usually staying away from crowds and preferring the comforting embrace of nature. She knows there are good people in the world, but it can be difficult to tell the truly kind from the bad. Rosalie has a kind heart and can't turn away those in need, despite how she may feel about them. [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class="mainText preserve"] Rosalie struggles with trusting people while also being gullible to those who are in need. She will sometimes let the wrong people I for the right reasons and end up betrayed. It makes her wary of normal people and hard for her to engage in basic human socializing. Outside of the people she sells her herbs and medicine to she doesn't go out of her way to meet others. [/div] [div class=mainSubheader] Motivations and Values [/div] [div class="mainText preserve"] She is motivated by a strong urge to be normal, to have her powers either hidden from those around her or gone entirely. She wants to go home to her family and start a new life without being locked away or feared by others. She hopes that one day all this Astra business will end and things will go back to the way they were. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class="mainText preserve"] Like most people Rosalie fears death, dying, and everything about coming to an end. This makes it impossible for her to hurt or kill anything, no matter how much it may deserve to die. Why would she force her greatest fear onto anything, especially other people. [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class="mainText preserve"] Rosalie's awakening as an Astra has given her the ability to manipulate multiple forms of plant life. She can root herself in a single spot with small vine like tendrils that come from whichever part of her body is closest to the ground. While she is rooted she can control the plants within the immediate area and force them to grow well beyond their natural limits. She can also force their molecular density to change and cause the plants to become hard as steel and stretch into ropes to bind her enemies. The plants she controls feeds off her body's energy and she can use her energy to bring dead plants back to life and they can grow long after her connection with them is severed. [/div] [div class=mainSubheader] Limitations [/div] [div class="mainText preserve"] The range of her plant manipulation is limited in reach, and while using her power she cannot move due to the roots that connect her body to the Earth. She doesn't fully understand her powers but they seem to feed off her energy and exhaust her the longer she uses her ability. Another drawback is the amount of influence she can exert over multiple plants. If she is using her ability to force a plant to grow and harden to block something she cannot split her focus and do so on all sides. If the level of command is simple she can affect a wider area, but if it's complex her area of affect is limited. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class="mainText preserve"] Outside of being an Astra she doesn't amount to much, she never really paid attention to her tutors and has no special knowledge. She has always been adept at growing and caring for plants, but her new powers make it impossible for her to fail at taking care of anything that grows. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class="mainText preserve"] "Ungrateful twerp, don't you know how much your parents do for you?" - Tutor "You're the kindest person I know, don't ever change." - Natasha "This is for your own good, don't fight it honey." - Mother "You're no daughter of mine, you're just a freak of nature." - Father [/div] [div class=mainSubheader] Reputation [/div] [div class="mainText preserve"] Rosalie isn't well known outside of family circles. Some may have heard of the Laterra heir, but not many. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class="mainText preserve"] Natasha is Rosalie's only friend in the world, but she hasn't seen or spoken to her since she escaped her parents. [/div] [div class=mainSubheader] Enemies [/div] [div class="mainText preserve"] Right now, as an Astra, her entire family and all her old friends are enemies who want to lock her away and experiment on her. [/div] [div class=mainSubheader] Organizations [/div] [div class="mainText preserve"] Rosalie is not affiliated with any groups or government organizations as of yet [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=preserve]white-space: pre-wrap;[/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url( https://s-media-cache-ak0.pinimg.com/236x/e2/04/73/e2047348f6facbc90792e00d4e866037.jpg ); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
Last edited:
Finished! Lexielai Lexielai
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"] Agent Orange [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Richard Fyodorovich Sharapov [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] Rich, Papa, Fyodorovich [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 64 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Male [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Manu [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Central [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class="mainText preserve"] Little is known about the origins of Agent Orange. They are believed to be behind no less than hundreds of poisonings, dropped pianos, botched muggings, toilet drownings, spontaneous combustions, and public executions. However, no evidence has ever been brought forth that implicates the true Agent Orange. He operated for twenty years in the interests of countless parties. It was at this time that Richard Fyodorovich Sharapov had a daughter, Elissa Sharapov, and Agent Orange suddenly vanished. After an intimidating letter from Tessaract, Elissa's mother was diagnosed with an incurable cancer, dying a slow death three years later. In the past five years, Agent Orange is believed to have resurfaced, taking contracts for unknown clients. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class="mainText preserve"] His recent Awakening has heightened his already present physical ability to incredible lengths, but he has personally refused to use these powers except when taking on other Astra.[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class="mainText preserve"] Richard is a muscular man, about 6 feet tall and 200 pounds. His intimidating stature is often in stark contrast to his warm smile, tempered by tired eyes.[/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class="mainText preserve"] Rich has a calm and cool demeanor most of the time, almost to the point where he seems robotic. He gathers his energy through solitude and calm reflection, and has been occasionally seen flirting with music and art. However, he has little by way of morals, and is prone to bursts of homicidal anger when threatened. [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class="mainText preserve"] Rich becomes insatiably angry when things are beyond his control, often causing him to go to extreme and sometimes violent lengths. His addiction to alcohol and anti-depressants often leaves him in long periods of increasing depression and fatigue.[/div] [div class=mainSubheader] Motivations and Values [/div] [div class="mainText preserve"] Rich's primary motivation is to provide for and protect Elissa, providing her with a comfortable life. He is personally driven by his own self-loathing, his guilt over his wife's death, and his fears for his daughter's safety. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class="mainText preserve"] Rich fears giving into his bloodlust. He also fears becoming unable to provide for Elissa or allowing harm to come to her. [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class="mainText preserve"] Rich has the capabilities of heightened physical memory, allowing him to replicate any physical action he sees or performs himself. For example, he is able to watch a Kung-Fu movie and perform all the stunts within it, even if those stunts are not actually being performed by the actors in them. [/div] [div class=mainSubheader] Limitations [/div] [div class="mainText preserve"] Rich cannot do anything that his body cannot physically do: he is no more flexible or strong than any other Astra. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class="mainText preserve"] Rich is a world-class spy and assassin, skilled at disguise, diplomacy, and all forms of weaponry. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class="mainText preserve"] "Wait a second, tzypa, tell the bus driver thank you." "Elisa, please try not to fall off the roof this time. New bones are expensive." "Okay, I know that it may look cool when Papa breaks somebody's shins, but you should never hit someone. Unless they try to hit you. Then all bets are off." [/div] [div class=mainSubheader] Reputation [/div] [div class="mainText preserve"] He is most well-known as an integral member of the PTA and his neighborhood committee, but a certain class privy to his services know him as an incredibly dangerous spy.[/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class="mainText preserve"] His only notable allies Elisa Sharapov, his daughter, and Tessaract, his employer. [/div] [div class=mainSubheader] Enemies [/div] [div class="mainText preserve"] He has few direct enemies. Those who did appose him were dead before they knew his name. However, employers, past and present, have their own agendas which contain him, and may contain his death.[/div] [div class=mainSubheader] Organizations [/div] [div class="mainText preserve"] He is currently acting as an agent for Tessaract, but has been employed by several others throughout his career. [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=preserve]white-space: pre-wrap;[/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url( https://vignette.wikia.nocookie.net/dreamdaddy/images/f/f1/Robertsmall-transparent.png/revision/latest?cb=20170817133259 ); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
Last edited:
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"] The Little King [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Connor McKinley [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] The Beast, Little King, Runt [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 21 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Male [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Manu [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Kumbh [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class="mainText preserve"] Connor has had it pretty rough since he was born. They weren't necessarily discriminated against. It was the fact that they were Manu that played against them. Manu don't care to much for one another unless they are their kin, or can offer something. As for the other two races, naturally they proffered their own kind over those that weren't. This lead the McKinley family to taking whatever odd jobs they were given, often just scrapping by by the skin of their teeth. And when Connor was old enough, he was set to work as well. Connor worked diligently for the first few years, but soon the never ending grind began to show. He had become irritable and short tempered, he closed himself off from his family, and he slept for most of his time at home. And when he lost his job, he disappeared completely for two months. When he returned, he was like a new man in every sense of the word. Oh, he was still similar to how he had been before he left, he still slept a lot, but his outlook on life had changed. If you wanted something, you had to take it. No one was going to help, and the only way you were going to get any was to strong arm them. The world was a cruel place, he figured, and the only way to make it anywhere was to be just as ruthless to it as it was to him. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class="mainText preserve"] Connor's awakening simply happened. He was jumped by a few goons of some guy he had pissed off. And one second he was surrounded, the next all but one were running with their tail between their legs. The one not running was lying face down with a concerning amount of blood pooling around him. And when Connor looked at himself to try and figure out what had happened, he saw the body of a beast. Long claws replaced his hand, digitigrade legs, and when he felt his forehead, massive horns curled back before pointing to the heavens. He ran his tongue along his aching mouth and discovered that his teeth had become pointed and sharpened, and for that matter his tongue had become forked. His skin had turned a purplish color with patches of even darker scales dotting his exposed skin, no doubt more were left unseen under his clothing. But the real freaky part was that he now had a tail, a surprisingly fluffy one. For a split second, he worried that he had changed permanently. But he thought about it for a second. He was now one of those Astra he's heard about, that was the only explanation. So if he had been able to change, then he must be able to change back. And he did, luckily. It required some time spent sitting in an alley, but eventually he was himself once more. That over, he got to thinking. He had been able to deal with those guys easily, now that he had this kind of power. If he could do that, what couldn't he do? So he made a plan, he would take over Kumbh, he would become it's king. Trinity was ruled by it's Queen, but the district of Kumbh would have it's king. There was a long road ahead of him, however, but now being an Astra, how hard could it be? [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class="mainText preserve"] Connor stands at a height of 5'4", contributing to his self imposed title of 'Little King'. His beast form has changed since his first use. The horns now curl further back, with additional growth sprouting skyward that are almost evenly spaced. Incisors have grown and begun to curl outwards at the tips. His pupils have now formed a cross, allowing his eyes to become almost black when fully dilated. The patches of scales have grown, and a few have linked up with each other. The fur on his tail has gotten fluffier and acquired a glossy shine to it. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class="mainText preserve"] Connor is a very gruff person, thinking himself greater than everyone else. Not only that, but he's very quick to display and show off his power. He cares greatly about his mom and dad, but everyone else can go and suck it. He does, however, have a soft spot for children and the down trodden. Children can do so much with their lives, as long as they take it with both hands. Same goes for the down trodden. [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class="mainText preserve"] Connor has few people he really likes and can rely upon. If he can't handle something, no one is coming to help him. Not like it matters, he doesn't like to ask for help to often. [/div] [div class=mainSubheader] Motivations and Values [/div] [div class="mainText preserve"] Connor has always been at the bottom of the barrel, well now he's going to try his hardest to sit pretty at the top, and stay there. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class="mainText preserve"] Connor is terrified of losing everything, and will cling on to it tightly with both hands. He has worked so hard to claw his way out of the muck that he saw himself in, that the possibility of returning there and having none of his work matter would most likely break him. [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class="mainText preserve"] Connor can transform into a beast like creature enhancing his physical traits. Each transformation makes him more and more beast like. So far, this is in appearance alone, but who knows how it's affecting him psychologically. [/div] [div class=mainSubheader] Limitations [/div] [div class="mainText preserve"] Though his physical capabilities are far superior to those that don't have any way of boosting them, they are much less than those that specialize in enhancing a certain aspect. For example, let's say he gets into a slug match with an Astra specializing in hitting things really hard. If he did not use his speed to dodge and relied on his increased durability, he'd lose. If someone is jumping around him at nearly the speed of sound, unless he can predict where they're going to be, they're going to beat him. If someone has the ability to turn to stone, he's going to break his hand. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class="mainText preserve"] Connor is a back alley brawler and so fights very unconventionally. His strikes are savage and unpredictable, and anything can be used as a weapon. Not to mention his somewhat intimidating appearance makes most people steer clear of him. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class="mainText preserve"] "He's just... finding his way" "He's been stirring up trouble is what he's been doing, Martha" [/div] [div class=mainSubheader] Reputation [/div] [div class="mainText preserve"] Connor has garnered renown, both good and bad, with the people in the poorer sections of Kumbh. Some see him as a person that speaks the truth and a helping hand, others see him as a super hooligan that needs to be taken care of. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class="mainText preserve"] N/A [/div] [div class=mainSubheader] Enemies [/div] [div class="mainText preserve"] Kumbh Law Enforcement doesn't like him all that much, neither do several small time gangs that he's gone and pissed off. [/div] [div class=mainSubheader] Organizations [/div] [div class="mainText preserve"] N/A [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=preserve]white-space: pre-wrap;[/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://i.imgur.com/Go9cFQ5.jpg); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 

Attachments

  • 1537895437790.png
    1537895437790.png
    348.2 KB · Views: 6
Last edited:
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"] Deadly Nightshade [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Judith Clair [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] Judy, Nightshade [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 27 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Female [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Cyborg [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Ayodhya (West) [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class="mainText preserve"] Growing up in a moderately wealthy family, Judith found mundane life boring. She was a thrill-seeker and a tomboy. It wasn’t until her teenage years that she read an online article about the transformative power of art and fashion. She was inspired by what she saw, so she shifted from a shrew to a young woman who found a balance between toughness and refinement. After a few years of college, she began some mediocre desk job with the Ministry of Ayodhya District Security (MADS), which she worked for three months until her powers unexpectedly awoke. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class="mainText preserve"] Not much changed immediately, until MADS began deploying Astras. She was among the original team, but the flagrant heroism made her roll her eyes. She wanted less widely-publicized work, so she was transferred to the RBI. She enjoys the lucrative work and the covert operations, in addition to the host of enhancements she received to optimize her for said jobs. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class="mainText preserve"] Judith only stands at 5’6 and has an athletic build and a heart-shaped face. Her blonde hair is styled in a pixie cut with heavy bangs. Her gray-blue eyes are accentuated by dark eyeliner and eyeshadow. Oftentimes, Judith lounges around her apartment in a silky bath robe. In public, she dons one of many fashionable women’s outfits. During a mission, though, Nightshade wears a dark gray or urban camo outfit with various holsters and a light polymer vest that can resist most pistol and submachine gun rounds. Finally, she carries a purse containing several unassuming items that are actually components for the Puzzler, an unusual compact pistol. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class="mainText preserve"] Outwardly, Judith keeps a level head and a dry professional facade at most times, making her appear one-dimensional to those around her. Those who don’t know her assume it would crack her face if she smiled. She takes a sly approach to most problems, content to be that invisible person pulling the strings, behind the scenes. Her loathing for the limelight means that she only takes credit for her actions when writing reports that only a handful of her superiors will see. She values her privacy and keeps secrets, dodging around personal questions. A few years of clandestine operations have left Nightshade confident in her own skills and fiercely independent. While she isn’t keen on demonstrating, she is also not afraid to delegate a beatdown to those who try to strike first. On the flipside, it irritates her when people are slow to act or speak; she believes in keeping a steady pace, a happy medium between haste and dallying. In addition to watching some contact sports, Judith enjoys fashion, art, and the night life, visiting outlet stores, galleries, bars, and nightclubs in her free time. It’s rare to see her outside during the day, as she simply turns up the opacity of her penthouse windows and sleeps from roughly 5AM to 1PM. It’s even rarer for her to turn on lights beyond the occasional lamp; she takes full advantage of her night vision enhancements. [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class="mainText preserve"] She has a bit of a drinking problem. A few of her kills weigh on her conscience. There is almost always some alcohol in her system, and she frequently orders obscure mixed drinks with absurd names that make even seasoned bartenders raise an eyebrow. The fact that she avoids answering questions may also be seen as a double-standard, as she is somewhat nosy herself. Her frugality leaves much to be desired, as she is lousy about tipping, turning on lights, or spending time on the phone. [/div] [div class=mainSubheader] Motivations and Values [/div] [div class="mainText preserve"] Judith simply wants to retire before the age of 50. It’s a pipe dream, but it’s something to work towards. Ideally, she would like to achieve this goal while in one piece. She counts her blessings that her life has went smoothly so far, and that she hasn’t been shanked, run over, or dropped off a building yet. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class="mainText preserve"] She dreads the possibility of one of her superiors handing down an order to capture or kill a friend or ally. Furthermore, she fears betrayal, a fact which makes her marriage shaky at times. [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class="mainText preserve"] Mirage: Judith distorts light around her to turn herself almost completely invisible. The effect can be dispelled normally or with a bright flash of light akin to that of a stun grenade. An alternative use of her powers allows her to distort her movements to confuse an enemy in direct combat. [/div] [div class=mainSubheader] Limitations [/div] [div class="mainText preserve"] Her powers have no offensive capabilities, and the flash is only usable when fully cloaked. It takes roughly three seconds for Judith to cloak herself to the best of her abilities. Even when cloaked, there is still a faint silhouette of her, meaning a perceptive opponent could find her in a well-lit area. She supplements these offensive shortcomings with a suppressed flechette gun and two memory knives; the latter camouflage as bracelets until converted into their true forms via wireless signal. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class="mainText preserve"] Judith can operate small vehicles like cars and motorcycles, plus climb and swim. She is also skilled with pistols, submachine guns, blades, improvised weapons, and gymnastics. Her non-combat skills include math, computer repair, and dancing. Her cybernetic augmentations include a smart-gun link, night vision, and an integrated comm link. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class="mainText preserve"] “Keep making morally questionable decisions, Judith.” [/div] [div class=mainSubheader] Reputation [/div] [div class="mainText preserve"] She has some commendation for her involvement in MADS’ team of Astras. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class="mainText preserve"] -She has a best friend named Lynn Petrov, a combat medic and fellow Astra. -She is married but without children. Her husband travels a lot, so they often text each other. [/div] [div class=mainSubheader] Enemies [/div] [div class="mainText preserve"] While she doesn’t think of them as enemies, she dislikes the heroics of MADS; they are too publicized for her tastes, and would rather not be seen with them. [/div] [div class=mainSubheader] Organizations [/div] [div class="mainText preserve"] Judith is a field agent for the RBI. [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=preserve]white-space: pre-wrap;[/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url( ); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
Last edited:
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"] STARCHILD [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] HSU THIRI MYA [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] THIRI // STARCHILD // GLITTER [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 19 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Female [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Deva [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Kumbh [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class="mainText preserve"] Born and raised in the upper levels of Kumbh, Thiri’s life has always been pretty ordinary, borderline boring. Sure, she may have grown up in a decently large surface-leveled resort, but it was still all family owned with upper middle class benefit situation. As far as she was concerned, Thiri was still just a quiet lanky girl, nothing in her life would ever be out of the ordinary, she would grow up to work in her family’s hotel, or somewhere nearby in the district as her siblings had before her. Every part of her life was good, but predestined, and left no room for change. Thiri pulled all the splendor she could from the few interesting visitors of the resort, but her family and their elders thoroughly encouraged her to stick to their plans, even furthered into a routine by the school. Though she loved her family and the resort, Thiri always wanted more than the simple life she way granted. Nearly every night, Thiri would climb to the highest point in the entire resort just so she could lay under the stars and dream of the possibilities her life could hold. But the stress of inevitably having to support the place and people she called home kept her quiet, and and silenced any motivation she had to expand. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class="mainText preserve"] One night, while gazing into the thousands of twinkling lights above, something changed in Thiri. She couldn’t tell what it was, if she was just overly tired, if she was getting sick, or if she actually could feel the stars. As she did with most of her feelings, Thiri tried suppressed this, she continued with her routine and even stopped her stargazing, but nothing she did could shake this feeling she had, as if she could connect with the very air around her. The first time she laid with the stars after the feeling initially started, Thiri felt more at peace than she had since she was just a small child, as if the air around her was more warm and light than it had ever been, as if there was a blanket separating Thiri from her usual stress. That’s when she finally saw it, a twinkle of gold dust swirling in the air around around herself, illuminated under the moon and the stars, warm like a breeze from a heater. After that night, thiri noticed more and more of the gold dust, slowly learning to bend the dust in the air thanks to her curious nature. After a while, Thiri noticed some of her small scars, like scrapes left on her knees from childhood accidents, begin to fade. The more interaction she had with the gold dust, the quicker her scars started to fade. Thiri also noticed the seemingly overnight appearance of a few light blonde hairs. One night, while climbing up to her viewpoint atop the resort, Thiri missed a thin step halfway up a one-story ladder, and ended up slipping the whole way down, gliding her leg right along a sharp corner or a discarded desk. Before she even hit the ground, Thiri was screaming into her sleeve in effort to not alert any family members of her secret penthouse. Thiri’s leg had been sliced halfway up the calf from the ankle, and was bleeding profusely. Just as the blood gushing from her wound, the tears from her eyes seemed to almost call out to the stars above. As if a spirit took over her own body, Thiri waved her hand above herself, collecting golden dust like a magnet, focusing the dust into her palm, concentrating the dust into a form unseen before, a glow as brilliant as the stars above. Thiri gently placed the warm palm of energy over her cut, wincing as she felt the tissue in her leg mend together, almost as perfect as a reverse in time. The rest of the night was a blur, but Thiri was woken up the next day to her father, carrying her in his arms to their family room. Apparently, Thiri had passed out after exerting so much energy, prompting a mass panic when her family didn’t find her in her bed the next morning. Adding to the panic, Thiri’s father found her lying in a light pool of blood, her clothing all stained, her hair as light as the stars. Even through the fear of upsetting the order her family and elders had worked so hard to impose, Thiri still felt compelled to explain all that happened: the golden dust and her connection to the stars, her regular ventures to the top of the resort, the great healing that Thiri was able to conjure from her collected dust. To Thiri’s delight, her family and elders saw this ability as a gift, a holy present from the spirits and those above. To accompany this new gift, Thiri’s family and elders granted her a gift of their own, the gift of a bit of self responsibility, the gift of a more fluid destiny. Since that initial expression of her ability, Thiri’s personality and power has done nothing but grow along with her continued practice of her gift. With every step she takes towards a stronger connection with the gold dust, she takes a step towards carving her own path and making her own choices in advancing her life, weather those be good or bad choices. Once a quiet ordinary girl, burdened by her solidity in life and future responsibilities, Thiri has blossomed into a golden beam of light, an extrovertive girl who chooses to let her past burdens drive her rather than hold her down. Now, with with her home and own kind, the Astras, being in more danger than ever due to the threats of terrorism throughout the city, it is time for Thiri to truly take control of her life and fight for everything she believes in. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class="mainText preserve"] Over six feet tall and as thin as a princess, a lemon-colored supermodel with a face more precious than a temple, her lips are full and glossy, like her carmel-centered eyes. Her long wavy hair flows like a milk ocean, though it was brown like the earth before her Awakening. Thiri’s serious exterior hides her anxiousness, just as her laugh and leisure hides her nervousness; through rain or shine, like the golden dust that accompanies her, Thiri radiates a beautiful aura of joy and mystery. Though her clothing hints at wealth, Thiri just understands how to shop, and no matter if her outfit is elaborate or plain, call yourself lucky if you see her without heels on. (Art is in the works, based on Beauty Thet Thinn.) [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class="mainText preserve"] Thiri has a personal duty to not care about any of her personal duties. Thiri’s goal in life is to live like no one else every has, ignore all her responsibilities, and do whatever it is to feel as happy as possible. Thiri is super fun loving and care-free, but almost to the point of immaturity. Her sense of humor is incorporated into nearly everything she says and does, aka she will almost never take herself seriously and neither should you. Thiri has always been one to avoid conflict, even with her tendency to rebel. Also, despite her generally calm and careless attitude, Thiri is actually quite tactile and often stressed. [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class="mainText preserve"] Thiri’s seeming carelessness and party girl nature often leads others to dismissing her as such. Thiri is described as clumsy and somewhat reckless when it comes to not only using her powers, but also just in general life, often doing and saying things without much thought. Thiri’s fears and taboos often lend to her stress levels, leading her to emotionally distance herself from anyone she loves. [/div] [div class=mainSubheader] Motivations and Values [/div] [div class="mainText preserve"] Now that tensions across all of Trinity are spiking, the Astra Conference has been hit by a large-scale attack, and business is starting to fizzle at the resort, Thiri is once again finally deciding to put some of her responsibility first. The time for Thiri to protect her friends and family is now, even if it means struggling against her self interests and much needed freedom. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class="mainText preserve"] Thiri is terrified of growing up. While she jokes about getting old and ugly, she's actually terrified of the responsibility in her future, outliving many of her friends, and eventually having to take care of her family and the resort. These fears give reason to her tendency to distance herself from her friends and family, and her “I’m here for a good time, not a long time” lifestyle. [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class="mainText preserve"] Stardust Manipulation: The user is granted access to the free stardust moving around in the Universe. The user can collect and manipulate this stardust. Typically, this stardust is used for healing as it can be concentrated into a wound to to mend the tissue back together, and even replace destroyed tissue. Collected stardust can also be forced into an unstable state where it can be used in offensive attacks. Unstable Stardust is very similar to fireworks in both appearance and damage capabilities. [/div] [div class=mainSubheader] Limitations [/div] [div class="mainText preserve"] Stardust is dormant unless affected by the user, and is only truly useful in large amounts. If unskilled and unpracticed, both the collection and application of stardust can be quite exhausting. Stardust collection and application is like a muscle. Through collecting more and more stardust, the collection process will become easier and the user will be able to collect more efficiently and from a larger area. Through practicing the application of stardust, weather it be through healing or destabilizing, the application process will become less exhausting, the effectiveness and speed of healing will increase, and the power of the unstable Stardust and the control of the unstable Stardust will both increase. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class="mainText preserve"] Thiri has all the same basic to above average skills of anyone of her same age and class: she can drive basic vehicles, swim, speak a language or two, effectively lie to nearly anyone, etc. Though Thiri can more than defend herself, what she lacks in combat experience and brute strength she makes up for with mental ability. Due to living in an active resort, regularly being in company of businessmen and “influencers,” Thiri has learned more than a thing or two about manipulation and image importance. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class="mainText preserve"] “That girl’s healing is a gift from the gods, I’ve seen it first hand! I just wished she got her head out of the clubs and the gutters and into the shelters and temples…” - Local elder “Oh, that sparkly Deva girl? Yeah, she shot a can out of the air with her weird firework thing at my party last week. It was fucking hot!” - Local clubber and partier [/div] [div class=mainSubheader] Reputation [/div] [div class="mainText preserve"] Thiri used to be a very quiet girl who did everything by the book, but her freedom and confidence has done nothing but grow tremendously in the past few years. Those that don’t know her see her as a mysterious party girl, those that do know her see her as a lovable mess with a tendency to overshare and over joke. The elderly and religious see her as a problem child with a heavenly gift, the young and wild see her as a free spirit with a foot in the fun and barely legal. No matter the angle you see her from, Thiri will always be a girl who does what she wants, what she believes is right, and what she believes will help those she holds closest to the greatest extent. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class="mainText preserve"] N/A [/div] [div class=mainSubheader] Enemies [/div] [div class="mainText preserve"] N/A [/div] [div class=mainSubheader] Organizations [/div] [div class="mainText preserve"] A.S.T.R.A Initiative [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=preserve]white-space: pre-wrap;[/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url( ); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
Last edited:
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"] Mastermind [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Xavius Lonestar [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] Matermind [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 22 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Male [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Deva - Cyborg [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Kailasa [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class="mainText preserve"] Xavius was born the youngest of three siblings into a home of high ranking Government officials where he was seen as the runt of the litter. His Father (Alistair) and his side of the family expected every male member to eventually become a Judicator in The Royal Magistrate, this expectation was obviously forced upon him and his two older brothers, Darius (the oldest at age 84) and Granamyr (Second oldest at age 56). His mother Allisandra was a high ranking member of The Royal Bureau of Investigation, and this resulted in insanely high expectations of him from a young age. Growing up, Xavius had a less than ideal life in spite of his family's wealth and standing. He was constantly berated by every single member of his family as being a "disappointment" and an "embarrassment to the family" due to him lacking interest in even working for the Royal Magistrate. However, even outside of the insults, his family was naturally cold and ruthless; growing up in a household such as this definitely had an effect on the young Deva's mind. As time went on, this caused the boy to resent his family more and more by the day, and the more he resented the more he saw how corrupt they were; his Father and siblings being easily swayed but large sums of money and other valuable items, and his Mother who would seem to take almost sadistic joy in the 'removal' of undesirable elements within Trinity. As Xavius' life continued in this manner, he began to develop a rather pessimistic life view and personality, believing the only person he could ever really rely on was himself. This in turn, later developed into a sort of self absorption where he believed he was better than everybody else, likely as a backwards way to protect himself, seeing himself as the most intelligent person around, and viewing other people as complete Idiots. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class="mainText preserve"] After Xavius' power awakened (when he was 17), he decided to keep it a secret from his 'loving' family, because ,even though he wouldn't admit it, the prospect of giving his family more reasons to hate him terrified him; he was already a failure and a disappointment, he didn't need to add freak to the list. Fortunately for the teen, his power was connected to what he loved most: Technology. He would use any, and all free time he had to practise with his power in order to honing it to the best of his abilities; though admittedly there was only so much he could practise while in the confines of his room. These new powers also gave Xavius a confidence boost, which unfortunately came over as arrogance, and cocky-ness; never the less these attributes gave ,the now 19 year old, enough courage to stand up to his Father, a mistake which would prove fatal. A week after an explosive argument with his Father Xavius woke up in what most people would consider a scary situation, though to the teen it was not entirely unexpected. He had awoken in what seemed to be an old shipping container with nothing but a communication device and a bomb. Using the coms he had one last 'friendly chat' with his Father and ,for awhile, was rather content with his imminent demise until he realised what was locking the crate: a magnetic lock. This led the young Deva to have an epiphany, the ultimate, proverbial middle-finger to his snake of a Father: Survive. So that's what Xavius set out to do. He knew that the bomb would be too complicated for his abilities, but the lock, just maybe that would work. There was no doubt that the lock was challenging for him, and the added stress of watching the clock of the explosive device tick down didn't help much, however he did eventually have success. As the door swung open Xavius had to sprint for his life as the bomb had but a few seconds left, it was the following moments however, which would stay burned into the mans mind for the rest of his life; the deafening boom of the explosion followed by the feeling of being blasted away, and the searing agony he felt in his right arm before the darkness swallowed him. After he awoke, Xavius found himself bandaged up, especially around his right arm, of which he could not feel. As it turned out a man by the name of Belthazar Gelt (age 20) was close by when the container exploded, and had taken care of Xavius while he'd been out. Belthazar couldn't have been any older than the Deva, and he wasn't wealthy, far from it infact, by Xavius' account they seemed to be in some kind of slum ,which was in itself an over exaggeration. Though strangely as Xavius spent time with the man he found Belthazar's chirpy attitude annoying, yet somehow not unwelcome. Over the course of the next three years Belthazar became the closest thing to a friend the Deva had ever had, as they had become somewhat partners, running a small workshop in some back alley in Kailasa, where they repaired/made anything requested, assuming they payed. This service also extended to the repair of cybernetics for cyborgs, which Xavius now found himself as, a robotic arm replacing the one he lost in the explosion. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class="mainText preserve"] Xavius stands at roughly 5 foot 10, with a somewhat thin but slightly toned figure caused by the three years of manual labour he needed to do to survive. His facial features are all reasonably refined, with their most noticeable feature being the Deva's bright purple eyes. He has extremely light violet hair ,to the point of looking almost white, which comes down both sides of his face, and sweeps back into a short, somewhat messy ponytail which ends a little distance after his neck. Much like his hair, Xavius' skin is also an extremely light shade of violet, a trait he shares with the rest of his family. Xavius has a very flamboyant sense of style, with all his clothes consisting of combinations of white, purple and gold, along with the occasional bit of black thrown in. The Deva also never dresses informally; the least formal outfit he is likely to wear is a shirt, tie, waistcoat and suit trousers. His robotic arm is coloured white, with gold detailing along small gaps in the metal which have purple lighting inside. When he goes out in public he will always wear white and purple gloves over his hands, this helps him retain respect from people around him as his usual outfit will cover his arm, allowing him to pass as a normal Deva. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class="mainText preserve"] Xavius is by design a cold man, after all, when your family is pretty much talking ice cubes, you can't help being a little chilly yourself. His childhood has also made him displaced for not only his own emotions, but also that of other people. This results in him not being able to comprehend certain actions carried out due to high emotional stats such as anger or sadness. The Deva also has what can only be described as a natural prejudice towards anyone, seeing them all as stupid, and isn't afraid to call them out for it. This however, means that when someone outdoes him he becomes very angry, though most of the time he will just seclude himself from people until he has calmed down. On top of that, this mentality can spread to when he's fighting, this generally makes him seem arrogant and egotistical hen up against an opponent. All bad aside however, it is possible to earn his respect and trust, albeit hard. Though most people wouldn't immediately see a change in behaviour between the people he likes, and dislikes there defiantly is: To the people he likes he is generally neutral with them, and is rarely rude or insults them, and when he does there is much left annoyance in his voice. For these 'lucky' few, the Deva is also furiously loyal, and will never leave them behind. [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class="mainText preserve"] Xavius' ego and arrogance can cause him to become extremely cocky, though in normal circumstances this trait is just annoying, in a situation which involves fighting this can cause him to underestimate opponents. Another flaw with his personality is his seeming lack of any positive emotion, and ability to understand emotion in general. This can lead him to be rude and insincere with people; this also effects him, as he has no proper understanding of how to deal with his own emotions. [/div] [div class=mainSubheader] Motivations and Values [/div] [div class="mainText preserve"] Xavius wishes to expose his family as the corrupt, lying snakes they are, and on top of that, the removal of all corruption from the Government. Though after years of abuse and living in relative squalor, he has since left behind that dream as just that, fiction; though that isn't to say that a small part of him doesn't still wish it could be true. Above all else, Xavius respects intelligence, loyalty, compassion, and justice in people, though a person would have to show them in abundance in order to truly gain the Deva's respect. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class="mainText preserve"] What scares Xavius the most, is the prospect of failure. This is due to the fact, that for him to fail would result in the collapse of one of his most important mental defences: that he's better than anyone else. The idea of this can lead to the Cyborg acting out of fear and/or anger in order to avoid such a thing from happen, by any means possible. He also greatly fears loosing Belthazar; though he would never admit it, the fact is the Manu is the closest thing to family he has, and if he was ever to loose him the last remnants of a good person inside Xavius may just fade. Xavius would also like to imagine that he would never become like his family, this means: No stepping on/manipulating other people to advance, not being bribed or controlled by the prospect of money, and most importantly, not harming or exploiting innocent people. [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class="mainText preserve"] Technomancy. Xavius is able to gain control over tech, allowing him to mentally control it's functionality and movement, so long as it's controlled electrically. This can allow a multitude of functionalities, for example: If Xavius was to control a phone, he would be able to make it record conversations; or if he was to control a camera he would be able to choose where it points, or even loop it's video feed. [/div] [div class=mainSubheader] Limitations [/div] [div class="mainText preserve"] Xavius is only able to control one system at a time. A prime example of this would be the camera: while he can control functionallity inside the camera, Xavius would not be able to control the different computer systems connected to it. Technomancy also requires a large amount of concentration to use, the more complex the tech, the longer it takes for Xavius to gain control over it; this can leave him immobile due to the large amount of focus it would take. Not only that, but in the case of advanced tech, Xavius can only control it for a small amount of time before losing control, however basic tech such as phones can be controlled indefinitely due to the small amount of concentration required in controlling it. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class="mainText preserve"] Xavius has upgraded his mechanical arm to conceal a long, sword like blade which he uses when being attacked up close, however due to his arm acting as a kind of hilt he has a lot less movement with the blade when compared to a normal sword resulting in his less than eloquent swordsmanship. The arm has also been equip with a basic pistol, allowing for a ranged option to attack, something Xavius much prefers. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class="mainText preserve"] "I know he may seem like he doesn't care but really he... no fair enough I doubt he does. Well even if he calls you an idiot he probably doesn't mean it... no he probably does. Ha! But even if he says Trinity can burn for all he cares, I'm sure he doesn't mean it... hopefully. Never the less, I'm sure if you break through that near unbreakable shell, and smash your way through the cold depths of his heart, somewhere in there is still the remnants of a good person, I know it!" ~ Belthazar Gelt to Literally anyone. [/div] [div class=mainSubheader] Reputation [/div] [div class="mainText preserve"] While most normal people know Xavius as a super grouchy and rude repair man, he is favoured by many cyborgs who live in the area as he helps them, and treats them equally to everyone else. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class="mainText preserve"] Belthazar Gelt: The chirpy and optimistic Manu who quite possibly saved his life after the explosion. The closest thing to a friend the Deva has, as well as business partner/assistant in his workshop. [/div] [div class=mainSubheader] Enemies [/div] [div class="mainText preserve"] His family: Whether they know Xavius to be alive or not they will always resent the now cyborg for refusing to become like them. If they were to learn of his miraculous survival they would likely put as many resources as possible towards his elimination. [/div] [div class=mainSubheader] Organizations [/div] [div class="mainText preserve"] Xavius has links to several organizations most people would consider...'distasteful'. Though not working for any, he provides them with any service they need so long as they pay well; this generally revolves around the creation of weaponry, such as guns, explosives, and occasionally the odd miscellaneous gadget for a specific purpose. [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=preserve]white-space: pre-wrap;[/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://elwiki.net/wiki/images/4/46/MMPortrait.png); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
Last edited:
[div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"]Lexielai[/div] [div class="hexRender"][/div] [div class="characterName characterNameText"] Pariah [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Mao Gatinding Galit [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Aliases [/div] [div class="profileInfo profileInfoText profileText"] Doctor [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 62 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Male [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Race [/div] [div class="profileInfo profileInfoText profileText"] Cyborg [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] District [/div] [div class="profileInfo profileInfoText profileText"] Kumbh [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Dossier [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Psych Eval [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Capabilities [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Associates [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Background [/div] [div class=mainSubheader] Pre-Awakening [/div] [div class="mainText preserve"] A mildly unhinged cyborg that near constantly disguises himself as a human, utilizing his prowess in bio-engineering to make mechanical marvels: Prosthetics virtually indistinguishable from actual body parts. Things weren't always this unusual though.
He would always insist that he came from fairly simple beginnings. Even though they weren't well off, the family he was a part of was certainly a warm one. Having been taught in the ways of traditional medicine from a young age, he rapidly took to it, and even turned out to be a natural when it came to these studies. Nevertheless, it was still rather surprising that he would be selected for admittance into a very prestigious place of learning in the western district. It would be very far from home, but the chances this scholarship offered were simply too unique to pass up: his dream of becoming a doctor could come true.
Having enrolled in this so called "academy", he took to it like a fish to water, and immediately surprised his surroundings with the incredible pace at which he absorbed the knowledge presented to him. Evidently being talented enough to surpass most of his peers, he immediately picqued the interest of most of his teachers. And as his studies progressed the more enamored professors began to offer him more chances to increase his knowledge with special lessons. They were even more surprised to see that his affinity for knowledge wasn't limited to just the medical sciences. During this period he began to explore a wide range of topics, and became empassioned with amongst others the studies of physics, robotics, maths, computer science.
At this point more than just a few of the professors in the Academy began to speculate that this rare talent could possibly even warrant him a position in the famed Satya station once his studies had been completed here. The other students in the Academy were less than thrilled however. They were often established elites; progenies of powerful families. And this peasant did not merely intrude upon what they considered a sacred place of learning, he was actively undermining their positions and challenging the natural order of things. He was the poor kid in a very elitistic society, and this, paired with his academical prowess, made him stand out like a sore thumb. This sacrilege could not stand.
This was a problematic situation for them however. The simple truth was that they could not outmatch him when it came to their studies. Not even the people of the studies that he was branching off into were a match for him for any length of time, earning him even more animosity. They had to come up with a countermeasure in order to show this upstart his place, but how? They could not simply utilise their connections to kill him socially, and pressuring the Academy to expell him? That would be akin to using a bomb in order to kill an insect; an act that would sooner disgrace and embarass the perpetrator than solve their problem. Not to mention it'd be an admission that they could not defeat him by normal means. No-one was willing to stain their hands on these faux pas and risk what would amount to excommunication from their families and certain ridicule from their peers. If they were going to deal with this threat, they would have to improvise. And a solution finally came when they decided to utilise the means they had access to, but simply in a more skillful and sinister manner. They would hurt him in the wallet.
A simple plan, but a surprisingly effective one: pressuring the academy to adopt practica and lessons that, in order to continue his studies, would force him to partake in seminars that would require a substantial sum for supplies. A sum far beyond most people their means to afford. Simultaneously it was also ensured that his scholarship could not deliver these to him free of charge, and would not increase. At the time he was rather naive, and didn't notice any of this happening until it was too late. He figured he would get through this by cutting in to his savings for a while, and possibly helping people with their studies on the side. By the time he understood what was happening the measures had already been put in place long since. In response he began to desperately reach out for means to continue in the education that both his family (which he was making so proud by competing on such a high level) and he himself had sacrificed so much for.
Debt and despair do dangerous things to decent people. So in his attempts he finally came into touch with the less savoury parts of the western district, and through some of his contacts amongst the eastern-district immigrants he was connected to a triad. The deal was simple: This triad bought his services, which only increased as the cost of his education did, in exchange for the means to save his academic life. And surprisingly enough he took to this quite well. At least discounting the moral conflict he had every time he took one of these jobs. Part of his life was now smuggling high-tech equipment for the mob. But he justified it as being a neccesary evil, and that once he reached the Satya station he so desired all would be well, and that it really was for the greater good considering how much good he'd be able to do for the world once he got in.
The jobs were escalating though, and part of it now entailed helping the triad improve their weapons with the vast knowledge he had been accumulating, and serving as a private off-the-record-doctor whenever the situation called for it. This was when he also began experimenting with prosthetics and, once he got used to/bored of those he began to be intrigued by full-blown bionics. Meanwhile his study-mates at school only grew more infuriated as he didn't just not fall off the boat as they'd expected he would, but began to improve even faster. Making full use of the hands-on knowledge and experience he was acquiring he impressed his teachers ever more. This was probably when he was happiest in life. Unfortunately, all good things must come to an end.
One day, when he was called in as the personal physician for a high-ranking character in the triad, they were attacked by a group of organised attackers. Heavily armed, armoured, and well trained, they penetrated to the inner sanctum of the area and he too got embroiled in the fight. He only survived due to his experience with martial arts that his grandparents (on both sides, they kept fighting over which style to drill into him) taught him from a fairly young age. Maybe if he had continued practicing he would've gotten off with less physical harm too. He was badly injured, and one of his leg-bones was completely shattered.
To make matters worse: the person that had been behind the hit had been affiliated with a major family, and his only child was one of his academic rival. Needless to say they abused the knowledge that he had been associating with the criminal underworld as much as they could. There was little even his most favoured of professors could do, and the academy finally succumbed to pressure and expelled him at once. And finally there was the fact that there was such a heavy scrutiny upon him now that even the triad didn't want to associate with him. They weren't willing to risk a witch hunt. So they cut him off. Broken and beaten he dragged himself to his cheap appartment. He had moved twice in his time with the triad so that his laboratory and workshop could expand, but it was still worn-down and in a bad part of town. Finally there, feeling betrayed by all, whilst simultaneously not wishing to return home and become a burden to his family, he began his great work. His true masterpiece, which he continues on to this day.
In the present day his research has led him to unforeseen heights. He has succeeded in making cybernetic prosthetics that even most physicians would not be able to distinguish from real body parts without the use of specialised equipment. He has used this to craft 3 personalities for himself, in which he implants his brain so that they may act as surrogate bodies. The first of these is Wilfred Mann; A very large and sturdily built Canadian-looking man, with a very well-trimmed beard. He has on occasions been likened to a a very large dwarf by his patients, and he is adored by the community which he serves as a family physician. Then there is Juliana 'Jill' Carneggie. She doesn't see a lot of action, but on occasions is used for shopping and networking purposes, and is on occasions regarded as the mad doctor's assistant/secretary. She is also used for covert information acquisition. The third is simply known as Studly, though as he is only ever utilised as an assasin that just doesn't seem to die no matter how much he bleeds out he is sometimes called "Immortal studly". A relatively low profile assasin, and really just one among many, but he is known for not having failed a single hit and, as his nickname implies, always living to fight another day no matter what.
The mad doctor himself though... He has long since stopped resembling humans beyond the basic physique. His surgeries are what people both fear and respect him for. In all probability he is the single most capable person in all of the districts when it comes to the development and appliance of cybernetics. No matter how one may look down on the people that don them, there is no denying their usefulness. And Mao Matinding Galit has certainly earned his stripes when it comes to this. [/div] [div class=mainSubheader] Post-Awakening [/div] [div class="mainText preserve"] The main difference to him thus far is the fact that he has managed to make Studly an even more mistifying personage, managing to make him land virtually impossible shots and make equally impossible getaways. Beyond that he uses his abilities quite casually, and only when he is certain no-one is near to see it. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Appearance [/div] [div class="mainText preserve"] The combination of worn-out full body robes and the fact that he is always donning a toonish mask could pass him off as a simply eccentric individual, if only it weren't for his true hallmarks. These are the mechanical tentacles that seem to sprout from his back as though they were tails, or mechatendrites as he himself calls them. He has been seen using up to 7 of these at once, and usually does so in order to assist him either during his experiments, his surgeries, and very during rarely combat. Though they were originally intended for utility purposes, his paranoia and quest for vengeance have inspired him to weaponise these, and most of these have different attributes. These of course usually pull the attention away from the rest of his choice wardrobe.
A fully mechanical body, mostly covered by the robes that resemble those of an old priest. The mask, that looks like a simple sheet of metal in the shape of a face, attached to what seems to be a metal jaw. The mask itself resembles how one would imagine an old apothecary, with 2 wide open eyes that appear like a large pair of glasses. The mask has no mouth: instead it has a closed slit on the height where the nose would usually be. And upon very close inspection one might even notice small indentions on the bottom of his mask and would-be jawline. These exist because Mao used to insert robotic tentacles that were attached to his face, and would light up his eyes and wriggle these about in order to scare small children. He has since stopped this practice as he figures that reports of a man with tentacles on his face may draw in the wrong crowd, ever since the events of the ASTRA conference. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class="mainText preserve"] Mao is a friendly person at heart, and generally likes to observe how things function in their natural state. His slow descent into madness however has damaged him, and he has become fearful and cynical in addition to these key traits. Despite his usually calm demeanor and patient outlook on the world, he is inclined to lose himself to his frustration in a fit of anger whenever he feels that someone or something has directly put his plans in harms way, or betrayed his expectations. [/div] [div class=mainSubheader] Fatal Flaws [/div] [div class="mainText preserve"] His insatiable greed, which may cause him to lose his temper and self-control when it comes to his primary goals. His paranoia, which may cause him to reject other people for little reason and act in self-destructive ways. And of course his obsessive nature, which has tended in causing him to be overly controlling when given half the chance. [/div] [div class=mainSubheader] Motivations and Values [/div] [div class="mainText preserve"] With three goals in mind he has blighted this world for the better part of the last century. He is hellbent on achieving his full perfection by making his brain an effective bionic part as well, maintaining any previous functions he deems neccesary as well as allowing for, in his eyes, significant upgrading. The second is his desire to exact his revenge on the system and the people in power that previously pushed him out of his candidacy for employ in the Satya station. The government that allows for such discriminatory practices due to the social position of certain individuals is irreconcilable with a progressive and free society to him, and the first part of his descent into embracing the bionics was largely fueled by his animosity towards this group. He took it very personally. The final one directly correlates to the fact that he desires to adhere to his own sense of justice, and that he wishes to establish a community of entirely equal individuals. An anarchy if you will. He also sees the cyborgs as the prime candidates to be part of this, as they have been pushed out by society, and in his mind have the potential to become anything so long as their parts allow for it. As such he is willing to either seduce people into installing bionics, or potentially installing them on his patients when he regards it as a neccesity. [/div] [div class=mainSubheader] Fears and Taboos [/div] [div class="mainText preserve"] He is in part fearful of the current elite out of trauma for what they did to him, but he is mostly afraid of rejection. As such he isolates himself and has attempted to redefine himself entirely in a way that he perceives as inviolable. [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] Astra Abilities [/div] [div class=mainSubheader] Power [/div] [div class="mainText preserve"] Portals. Mao can utilize small spatial anomalies through which matter and energy can be transferred to another similar anomaly linked to it, allowing two-way traffic. These can be opened by him in vacant spaces, up to the size of a large person. If one manages to spot these the air where they are formed would seem as though it were a glass pane, slowly bulging and cracked under pressure. [/div] [div class=mainSubheader] Limitations [/div] [div class="mainText preserve"] At present he can use a total of 4 linked sets of portals, excluding potential decoys, and has made himself the habit to open them with a hand gesture. This isn't an absolute neccesity, but he finds it easier to manage them casually whenever doing so. In order to open a portal he must be either intimately familiar with the location, or must be able to perceive it as an empty space in his vicinity. If the spot isn't actually/mostly empty it fizzles though. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Skills [/div] [div class="mainText preserve"] Naturally Mao has extraordinary skills in the fields of medical science, surgery, robotics and has surprising mastery in the development of weapons due to his hands on experience and reverse engineering of high-tech appliances. But ever since his near-death experience he has once again begun practicing the mantis-style internal martial arts from his childhood. After an extensive period of time he has become proficient in this, however as he is almost entirely robotic the usually beneficial side effects to health and mind mean little to him. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Outside Opinions [/div] [div class=mainSubheader] Quotes [/div] [div class="mainText preserve"] "Alright then, the doctor is in and ready for your appointment Sir. Just a quick word of advice, don't take either him or yourself too seriously near him. He sure as hell won't either." Gang member, leading an acquaintance to a surgery appointment. "Extra-ordinary what the man can do for you on a tight budget. Always makes me wonder how one like that ended up here." A frequent client "A shame about such a talented young individual. But a single man can't fight the world." His former mentor [/div] [div class=mainSubheader] Reputation [/div] [div class="mainText preserve"] Both Mao and Studly, his main way of acquiring funds, are fairly infamous in their respective circles due to the competence with which they conduct business. They do not breed a great deal of true animosity due to the mercenary way in which they are open to employ, and almost all of his 4 personas are fairly easy to contact. [/div] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Relationships [/div] [div class=mainSubheader] Allies [/div] [div class="mainText preserve"] No real allies. He still has a family in Kumbh, but has not maintained a great deal of contact with them and little connection remains between them. This is entirely deliberate on his end. [/div] [div class=mainSubheader] Enemies [/div] [div class="mainText preserve"] These are mostly onesided. He considers the powerful families that pushed him out of his rightful position to be his nemesis, and by extension the system that allowed for them to maintain theirs. As such he vehemently, albeit covertly, opposes the current government. Aside from this merely minor and briefs opponents, and those conflicts were easily resolved either when the opponent quickly discovered he either wasn't worth the hassle or when they found out that there were more than a few parties that valued his continued services. [/div] [div class=mainSubheader] Organizations [/div] [div class="mainText preserve"] Mao acts almost entirely on a freelance basis. Despite the fact that his main customers are part of the gangs that he associates with, or people in lower levels of Ayodya drawn by the rumours, he has in the past rendered his services on a pro-bono basis to people down on their luck. He mostly attempts to validate these occasions as him being able to perform experiments on subjects that allow in the field observation. [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 85%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=preserve]white-space: pre-wrap;[/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 40px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Open Sans', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Anton', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Roboto', sansserif; --profileTextSize: 0.8em; --profileImage: url( https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/intermediary/f/e584a7b0-d1c9-404b-a74c-22c494eb5b6c/d2y1nmw-5b8ea4ff-ee8c-4f20-9018-901aefd15230.jpg/v1/fill/w_900,h_592,q_70,strp/the_flesh_is_weak_by_gibaxh_d2y1nmw-fullview.jpg ); --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: rgb(130, 20, 40); --diagonalColor: rgba(220, 220, 220, 1); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; [/class]
 
Last edited:

Users who are viewing this thread

Back
Top