Fantasy Small Gods Character Sheet

Lexielai · Dec 18, 2018

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=instructionsContainer] position: relative; width: 100%; box-sizing: border-box; margin-bottom: var(--instructionsBoxMargin); background: var(--instructionsBoxColor); overflow: hidden; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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] [class name=inputBox] display: block; position: relative; width: 100%; box-sizing: border-box; padding: 12px; margin: 0px; background-color: var(--inputBoxBgColor); color: var(--inputBoxTextColor); font-family: var(--inputFont); font-size: var(--inputTextSize); white-space: pre-wrap; text-align: justify; [/class] [class name=inputBox state=focus] background-color: var(--inputBoxBgColor); [/class] [class name=inputValue] display: inline; white-space: pre-wrap; [/class] [class name=smallBox] height: 2em; [/class] [class name=medBox] height: 15em; [/class] [class name=largeBox] height: 30em; margin-left: 5px; [/class] [class name=preserve] white-space: pre-wrap; [/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: 15px; margin-bottom: 20px; margin-right: 20px; margin-left: 20px; font-family: var(--codeSheetFont); color: var(--codeSheetColor); overflow-y: scroll; white-space: pre-wrap; [/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: 5px; background-color: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; text-align: center; [/class] [class name=generate state=hover] background-color: rgba(255, 255, 255, 1); [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [script class="generate" on=click] // Hide the current code if it was displayed hide codeSheet // Get the values and store them in variables set mortalName (getVal mortalNameInput) set godName (getVal godNameInput) set imageLink (getVal imageLinkInput) set appearance (getVal appearanceInput) set demeanor (getVal demeanorInput) set arrival (getVal arrivalInput) set tale (getVal taleInput) set archnemeses (getVal archnemesesInput) set allies (getVal alliesInput) set friends (getVal friendsInput) // Fill in the user values setText ${mortalName} mortalNameValue setText ${godName} godNameValue setText ${imageLink} imageLinkValue setText ${appearance} appearanceValue setText ${demeanor} demeanorValue setText ${arrival} arrivalValue setText ${tale} taleValue setText ${archnemeses} archnemesesValue setText ${allies} alliesValue setText ${friends} friendsValue // Show the generated BBCode slideDown 1000 codeSheet [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://i.imgur.com/9zcnkCB.png); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --primaryBoxColor: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --instructionsBoxMargin: -5%; --instructionsBoxColor: rgba(24, 33, 33, 1); --codeSheetBgColor: #EFEFE7; --codeSheetFont: 'Courier New', sansserif; --codeSheetColor: rgba(20, 20, 20, 1); --codeSheetBorderColor: rgba(24, 33, 33, 0.5); --inputBoxBgColor: rgba(24, 33, 33, 1); --inputBoxTextColor: #EFEFE7; --inputTextSize: 0.9em; --inputFont: 'Roboto', sansserif; --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="instructionsContainer"] [div class=mainHeader] Instructions [/div] [div class=mainSubheader][/div] [div class=mainText] The sections of this character sheet are similar to writing samples. They will be used to evaluate your capabilities as a writer, so a poor effort will reflect poorly on you. Although there are only a few sections, I would not suggest half-assing it. You are free to write about whatever you like, but I will use the quality of writing and storytelling here as a metric to gauge your skill. Use of vocabulary, concision, literary devices, sentence structure, pacing, correct punctuation, proper paragraphing, and content are all possible candidates for evaluation. Not all of them are necessary for a good story, but they are a good place to start. You may use any template for the character sheet, but a generator for my style has been provided for you below. Please fill out the text boxes in the tabs below BEFORE you generate the code! [/div] [div class="generateContainer"] [div class="generate"]Generate Code[/div] [/div] [div class="codeSheet"] [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][font="Text Me One"]font reference[/font][font=Staatliches]font reference[/font][/comment] [comment]<--------------SETUP-------------->[/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-------------->[/comment] [comment]contains all primary flex objects[/comment] [class name=mainFlexContainer] display: flex; position: relative; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; 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: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [comment]<--------------LARGE-INFO-BOX-DIVS-------------->[/comment] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [comment]gradient divider between text[/comment] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [comment]<--------------COVER-------------->[/comment] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/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] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [comment]invisible scrollbox[/comment] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [comment]<--------------VARIABLES-------------->[/comment] [comment]variables[/comment] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url([div class="inputValue imageLinkValue"][/div]); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]@Lexielai[/div] [/div][comment]*noOverflow*[/comment] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div][comment]*menuFlexContainer, menuContainer*[/comment] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [comment]*Keep this div empty. Image will be here. Check the VARIABLES section and look for "profileImage" to insert link*[/comment] [/div][comment]*profileContainer*[/comment] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] [div class="inputValue mortalNameValue"][/div] [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] [div class="inputValue godNameValue"][/div] [/div] [/div] [/div][comment]*characterInfoContainer*[/comment] [/div][comment]*coverContainer*[/comment] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] [div class="inputValue appearanceValue"][/div] [/div][comment]*mainText*[/comment] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] [div class="inputValue demeanorValue"][/div] [/div][comment]*mainText*[/comment] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] [div class="inputValue arrivalValue"][/div] [/div][comment]*mainText*[/comment] [/div][comment]*scrollBox*[/comment] [/div][comment]*infoContainer*[/comment] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText] [div class="inputValue taleValue"][/div] [/div][comment]*mainText*[/comment] [/div][comment]*scrollBox*[/comment] [/div][comment]*infoContainer*[/comment] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] [div class="inputValue archnemesesValue"][/div] [/div][comment]*mainText*[/comment] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] [div class="inputValue alliesValue"][/div] [/div][comment]*mainText*[/comment] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] [div class="inputValue friendsValue"][/div] [/div][comment]*mainText*[/comment] [/div][comment]*scrollBox*[/comment] [/div][comment]*infoContainer*[/comment] [/div][comment]*infoFlexContainer*[/comment] [/div][/div][comment]*primaryBox, mainFlexContainer*[/comment] [/div][/div][/div] [comment]*root, aspectRatio, variables*[/comment] [/nobr] [/div] [/div] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Mortal Name [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] Godly or Heroic Name [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Mortal Name[/div] [input class="inputBox smallBox mortalNameInput" type=text placeholder="What is your name on Earth?"][/input] [div class=mainHeader style="margin-top: 20px;"]Portrait Link[/div] [input class="inputBox smallBox imageLinkInput" type=text placeholder="Please insert the link for the image you would like to use as a portrait. (EX: https://i.imgur.com/oygv734.png)"][/input] [div class=mainHeader style="margin-top: 20px;"]Appearance[/div] [div class=mainSubheader][/div] [input class="inputBox medBox appearanceInput" type=textarea placeholder="Describe your character's appearance."][/input] [div class=mainHeader style="margin-top: 20px;"]Demeanor[/div] [div class=mainSubheader][/div] [input class="inputBox medBox demeanorInput" type=textarea placeholder="Describe your character's personality however you like. I will be looking for fears, insecurities, and redeeming qualities; people, not caricatures."][/input] [div class=mainHeader style="margin-top: 20px;"]Arrival[/div] [div class=mainSubheader][/div] [input class="inputBox largeBox arrivalInput" type=textarea placeholder="A year has past since you came to Earth. Write a short story or passage describing your character's life here so far."][/input] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]Godly or Heroic Name [/div] [input class="inputBox smallBox godNameInput" type=text placeholder="What was your name in Terra Sancta?"][/input] [div class=mainHeader style="margin-top: 20px;"]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [input class="inputBox largeBox taleInput" type=textarea placeholder="Write a short story or passage describing your character's life in the world of Terra Sancta. What sort of God or Hero were you? What kind of reputation did you have?"][/input] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [input class="inputBox medBox archnemesesInput" type=textarea placeholder="Which Heroes or Gods were your greatest enemies? Why were you at odds? How do you feel about them?"][/input] [div class=mainHeader style="margin-top: 20px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [input class="inputBox medBox alliesInput" type=textarea placeholder="Who were your greatest allies and trusted servants? Why did you trust them? How do you feel about them?"][/input] [div class=mainHeader style="margin-top: 20px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [input class="inputBox medBox friendsInput" type=textarea placeholder="Who do you count among your inner circle? Who do you regularly interact with? What is your relationship with these people?"][/input] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

Lexielai · Dec 18, 2018

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://i.imgur.com/wRkrFjk.jpg); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Hisakawa Rikka [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] The Queen of Flames [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] There is something alluring about the unattainable. You begin by gazing upon her slender, even refined features. There is an air of authority in her bored expression and listless eyes, as if this world does not please her. She stands at a reasonable 5’6” (~ 168 centimeters) yet her presence fills a space many times that size. It is an intangible sensation, like an invisible and impermeable bubble which surrounds her — prohibiting the unworthy from trespassing into her domain. She is the enamoring Hisakawa Rikka, a figure easily recognizable among her fellow workers. Her bewitching presence leaves a lasting impression, but it is this same allure that also makes her entirely unapproachable. Her smart sense of style, long black hair, vivid eyes, and other carefully maintained features are magnified by the sense of unattainability which surrounds her. It is as if her distant demeanor could be breached by just a little more effort; by just watching and waiting a little longer, waiting for the perfect opportunity to make a move. Put simply, Rikka possesses the same hard-to-get aura that both drives people to admire celebrities and idols. It is also the same air that intimidates would-be observers, fearful that they might make a fool of themselves if they were to approach her. Truthfully, the person beneath her looks is rather removed from the stunning impression she makes. Nonetheless, considerations like that are often irrelevant in the mind’s eye of the people who perceive her. Instead they chase after the fantasy they have imagined, disregarding who she really is and is really like. [/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] Hisakawa Rikka is a polite, but serious individual. She possesses a complicated mix of maturity and naivete — a direct consequence of being forced to grow up at a young age, but subsequently missing out on important parts of youth. Often she responds with deadpan, unfazed responses to tricky challenges, yet can also be flustered just as easily by romantic insinuations and unfamiliar situations. Despite opinions to the contrary, Rikka also harbors feelings of anxiousness and guilt. Although she has tried her best to move on, she is still quite sensitive about the defining tragedy of her past. The bitter memories and painful wounds of that period still haunt her even if she does not outwardly show it. Her strong will and stubbornness exacerbate her unwillingness to share her burdens. This, naturally, produces an ongoing conflict between her inner strength and deep-seated vulnerability. She believes that sweeping her personal issues under the rug will be sufficient enough to forget about them, even if she suggests otherwise when dealing with others’ problems. This makes her somewhat of a hypocrite; one who feels too hurt and afraid of confronting her fears to take her own advice. Aside from her inner conflicts, Rikka can also be kind once someone pierces her cold exterior. She is patient and considerate, and strongly loves the people close to her. It is this same fear that has induced her distant, polite demeanor which holds the world at arm’s length, fearful of allowing anyone to get too close. [/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] For the last year, the Queen of Flames has been living as Hisakawa Rikka in a place known as Tokyo, Japan. Immediately she received countless stares because of her full plate battle armor and complete ignorance of traffic laws. She wandered the streets until she was arrested by police officers, at which point she realized two things. The first was that the language here was completely different from Terra Sancta; the second was that Gods and Magic were considered fantasies in this realm, unlike in her own. Although she still possessed her Sacred Flame, its power was gravely weakened. Given the circumstances, and the frailness of her body that was drained of magical power, she concluded that her hunt could not continue until she had discovered a way to recover her abilities. Therefore she had to blend in with the people here for now, and begin reconnaissance to identify her prey. Unfortunately, the ordinary life was not well suited for her. Rikkard had been a holy warrior ever since she was a young girl, and never had to bother with mundane tasks like budgeting or cleaning. Her resume was mostly filled with lists of battles she had participated in and demons she had killed, which was a bit out of place for applications to fast food restaurants. The situation was not looking good for her. However, she was a survivor. She had withstood the assaults of greater Demon Lords and fought Gods; hunted down dozens of powerful enemies. Surely she could take on a job hunt too, right? Rikka’s arrogance later came back to bite her. As, essentially, a foreigner with no history and no record, it was near impossible to find work. She had to do over a hundred odd jobs, sleeping and showering wherever she could and communicating mainly with wild body language until she had a better understanding of the Japanese spoken here. Some people mistook her flailing gestures as indications that she was a crazy homeless person. Well, one of those adjectives was true. In any case, Rikka’s good character eventually landed her a job at a chain clothing store, where she proved herself to be an excellent worker. Recently she has been so successful that management has decided to transfer her to a busy location in the city. Having just moved into a brand new apartment there, she’s poised to prove her mettle in this new field of battle. [/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText] It burned. The fires were everywhere, ruthlessly consuming the world around her in agonizing heat. It had no feelings; no compassion, no empathy. It simply wished to turn the world to ash, and she would be another victim to its hunger. Then there was a light. A woman who brushed past the flames, bravely rushing through the splintered wood and toxic fumes. She recognized her; it was her mother. She was dressed in the characteristically bright robes that she had often teased her about. That silly red, bowl-like hat was still on his head, as was the mask that protected her face. She had once thought that mages looked silly. But the sight of her mother, frantically pushing through the rubble, fighting passionately against the overwhelming forces of nature and reaching out towards her, had immediately become synonymous with the title of hero. On that day, the demon armies of Satan had razed her home city to the ground. Most of the people she knew perished in the flames. This included her mother, who had fallen in battle to ensure the survivors’ safety. All she had left as a memento of her past was a small ring and the burning hatred in her heart. When she arrived at her destination, a grand temple of dazzling lights, she learned who she really was: Rikkard, daughter of an archangel and a human, and wielder of the Sacred Flame. Within her soul was the antithesis to demonic Hellfire, a holy power with the strength to burn away all the evils of the world. They wanted her to be their weapon, and she wanted her revenge. It was a match made in heaven. In time, she became known as a Demon Slayer, the Queen of Flames. However, she became obsessed with her hunt. The Queen of Flames swore sole responsibility for defeating her archnemeses, including her longtime enemy Satan. She led charges against one army after another across the world, all the while becoming blind to the evils of the Divine Gods she served. Unlike the majority of the world, Rikkard was furious when the Gods fled. She felt as if the revenge she had been chasing all her life had slipped out of her fingers. Therefore, without hesitation, she jumped into the unstable portals in pursuit, swearing to continue her hunt no matter which world they fled to. [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] The Queen of Flames hates all Demons, but she especially despises Satan for ordering his armies to attack her home and kill her family. [/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] The Queen of Flames was directly allied with several Divine Gods, believing them to be on the side of justice. Truthfully, she was so focused on her war against the Demon Gods that she didn't scrutinize her "good" allies all that closely. [/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] Rikka has a cordial relationship with most of the people she meets, but chooses to keep them at arms' length for their own safety and her own comfort. As a recent transfer to the big city, she hasn't had much of an opportunity to develop true friendships in Tokyo either. [/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

The Fluffiest Floof · Dec 18, 2018

Relationships will be added when they have been cleared up.

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://danbooru.donmai.us/data/sample/__admiral_graf_spee_and_deutschland_azur_lane_drawn_by_3104_3104milkshake__sample-d61048e11106734f67aafee325c0ceb8.jpg); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Narishima Yuki [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] Yunaseth, the Wisdomseeker [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] Yuki is a female with a rather pale complexion. She has that typical tone of skin of a person that never goes out the house much. She appears to be between 18 and 20 years, according to her looks, though some people may guess her younger from time to time. That is also due to the fact, that she is a tad shorter than the average woman "her" age. Yuki has no distinguishing skin marks, such as scars, freckles or moles. However, she can still be fairly easily recognized by her hair. She always wears the white mane it in a bob hairstyle. Only one strand of hair, on the left side of her face, is longer, breaking the symmetry of the cut. That particular strand is further red of color. The red reaches all the way to the hair roots, however, it makes a small jump at a point. That makes the red look like a lightning striking down from through the white cloud that is the rest of her hair. And just below the bangs of that white shine two deep, sky blue eyes. Yuki´s frame is rather petite. She is somewhat short and very slim, almost meager. She is not very curvacious either. While Yuki is not completely flat, its not too far of a leap. Her human body is not particularly sporty, too. She has almost no physical strength and a very lackluster stamina. She is quick on her feet, but due to the lack of stamina, that doesnt do much for her. And to top all of those things off, she is not very good at fine motor skills. In terms of clothings, Yuki seems to have found a clear preference. After quite a bit of time digging through different styles, no matter the direction, be it vintage, hipster, classic ,[...], she has selected a few kinds of items that she likes most. While the individual pieces of clothing may change, there is a general pattern to the category of clothing Yuki wears. For her upper body, Yuki almost always wears something shoulder-free. Be it just a shirt or top, or even a shoulder-free pullover worn above a just as shoulder-free shirt. Next, Yuki has found herself to love wearing skirts with leggins, knee-socks or a pantyhose below. The length of the skirts varies, but they are oftenly around knee-long. Lastly, she usually wears ballerina´s for shoes. While the color pattern of most her clothes is not limited to certain colors, the leggins/kneesocks/pantyhose is usually black. [/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] Yuki is first of all a quiet person. That is not meant in a way where she shys away from interactions, its not being an introvert or having trouble talking to people. She just does not say a lot, unless she feels that she has something to say. Though, in a way, that might be an impairment, since that means, she does not do well chitchatting. Social interactions with Yuki are very unique. She will silently look at you, if she likes you, smile at you happily. If you talk to her, she replies. If she likes you a lot, she will even attempt at chitchat. Even though her conversational skills are very lackluster, Yuki is still a person that can understand and respect a persons feelings. Yuki doesn´t do too well with jokes or sarcasm. She just flat out misses them. She takes what you say for serious, whatever it may be. That leaves her confused a lot, if people come at her with jokes, straight up lies or sarcastic bursts. However, that makes her surprise you every now and then herself. Since she knows what jokes are, what sarcasm is, she just struggles to tell them apart from whats not one, she will go ahead and use both those things herself. Not very well, granted, but still, it comes oftenly unexpected and that has some comical potential in itself. What Yuki loves to do the most is learning. She is a very smart and quick witted woman and is curious by nature. She wants to find out, to understand, to learn. If she can, everything there is to learn. Therefore, most of her time is spent reading books, or researching the internet about anything she has found interesting. Yuki tries to approach things with logic and knowledge, while still doing her best to scheme emotions and feelings into it as well, when planning with other people. Due to that, she is able to come up with solutions for many problems relatively fast. The woman has one major struggle. Authority. Yuki does not do well when somebody is in charge that is clearly below her intellectual level. She tries to make things efficient. If her superior decides for things that are clearly not the best choice, Yuki will try to convince them how it could be done better. Sadly, superiors oftenly don´t like being told they did things wrong and even less like being told what to do by their underlings. That makes Yuki clash with those that outrank her in whatever hirarchy there currently is. Further, she is not very good at sharing her troubles. She tries to handle everything by herself, can´t admit to not know something or to be unable to do something. If something stresses her or makes her uneasy, whatever it might be. She will keep it burried until it gets too much, until she breaks down and everything spills. While her struggle with authorities can have her build up quite a bit of frustration, the thing Yuki can handle the worst is failure. She wants, no she needs to succeed in whatever she does, otherwise it gnaws away at her. A failure can be a lot of things in her eyes. Even being asked something and then not knowing the answer weighs heavily on the woman.[/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] When Yunaseth first came to this world, she made quite the fool of herself. She hates to admit to it, but she did not quite grasp her situation immediatly. Instead, she found the first library very soon and made... Well quite the scene, acting as if she still was a goddess, before she realized her powers would just not take effect. When she did, she very quietly and very much ashamed of herself left the building. Then, she started to search for another library, soon finding one and acting as "normal" as she could. Getting information was the priority and that she did. Oh boy, how she did. The more she started to get a grasp of her situation, the more she made very big eyes. Yunaseth took the only steps that seemed logical. She took a fake identity, starting to behave as if she was a normal citizen of the world. She got herself an ID, taking the official name of Yuki Narishima. Further, she helped those gods that had fled with her to get the first steps in as well. She was quickly able to tell they were not going to go back to their world soon, so she figured it didnt make sense to wait for it and it would be better to just get settled here to have a good base right from the getgo. That was also what she tried to make the other gods understand. She was even able to convince some of them to move into a apartment with her, as that would be very efficient, financally. Soon after she had learned a bit more about the world, she made herself very familiar with the fashion of it. She found it a key, as a core point of blinding in was to look like people from the world. With that newly aquired knowledge, she was able to also get herself a job at a clothes store. Nothing too fancy, but an urban store that mostly sold to teens and those in their early twenties. Yuki was good at her job. By now, she would surely have been promoted at least once. HOwever, her and the assistant manager just don´t get along. As her superior keeps choosing inefficient ways to handle things around the store, the manager not having time to take care of things, her and the assistant manager kept getting into arguements. Though she couldnt be fired either, she was too good at understanding customers and getting them to buy things they never knew they wanted, making them believe they actually NEEDED them. It wasnt manipulation, it was just quick thinking and understanding, really. And there were patterns, certain kinds of people wanted certain things. Easily learned for somebody like Yuki. Besides her job, Yuki soon picked up something else. College. As a science major, she strived for two things. A better job, where her intellect was less... Unchallenged... As well as gaining more knowledge about this world. They seemed so much more advanced in what they knew. Things Yuki had never even heard of. She was greedy, greedy to learn, to understand. And as the year passed, she was more and more starting to want to read HER name in one of those books, having made SOME contribution to to the achievements of this world. [/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText] In the world of Terra Sancta, there were many gods. Demonic ones, bringing chaos and fear to people. Divine ones, that cared for people, at least pretended to, making them follow them, submit to their will. There were heroes, rising up to those gods, trying to free people from their grasp. Though, Yunaseth, the Seeker of Wisdom, was never quite fitting to any of those three. While she was classified as a demonic goddess, she was not interested in chaos, nor in bringing fear or making people bow to her will. As the name implied, Yunaseth was striving for knowledge, wisdom. She was a collector, her goods were informations. Many people looked up to her, saw her as an oracle. People brought her offerings, hoping to gain her attention and getting answer to questions that were usually left unanswered. Yunaseth however became known as a demonic goddess due to the way she accquired what she wanted. And that was by any means necessary. Big libraries of all races and lands were left in ruins, robbed of all their contains and left in a pile of scraps and corpses. Yunaseth cared not for the lives of mortals, all she wanted was what they had gathered through centuries, through generations of meaningless individuals. Sometimes, she marveled at the things those little ants could do over the course of enough time. [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] [/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] [/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] [/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

Fear Fates · Dec 19, 2018

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url( https://i.pinimg.com/originals/70/30/74/703074094e7293daef04cbd48f812654.jpg ); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Nakamura Itsuki [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] Zodiark, God of all Evils [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] Before you is a young man who at first seems naive and foolish. Until meet his eyes, ones of which that tells a different story. Although his appearance is that of a young adult in their 20s, his eyes tell you of a man who experience hardship and age. Yet something else was within his eyes that keeps him moving without fail. This may draw either a sense of admiration or you could pity this man. Whatever the case is, you see a name "Nakaruma Itsuki" pinned on their Marine blue Whalemart apron. The rest of this man can describe as physically fit and seemly energetic. In your head your guess their height must be around 5'8" (~ 172.72 centimeters). He has short auburn hair and golden-brown eyes. Without the work apron wrapped around his body you see he sports a long-sleeve baseball jersey T-shirt with blue slim jeans. Along that he wears these white and dark grey tennis shoes that are comfortable. Despite his liveliness, his presence is unremarkable compared to most other people. He's is like a ghost in comparison to your own or anyone else for that matter. There's nothing grand about this person you can take note of besides his eyes and his busy stature. Ultimately is it must be either luck or coincidence that you found Nakaruma. [/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] Nakamura is a cordial individual but one stubborn to a fault. His adamant will ensures he doesn't give up on any problem he takes on. Back in Terra he had faced many dangers both physically and psychologically on a daily basis. Thus in order to endure all the hardships he had faced, it was natural he learned how to not back down and solve problems head on. Aside from his stubbornness, Naka mostly keeps to himself and always maintains a friendly attitude to even the most abrasive of personalities. To him anyone that isn't a god that is trying to kill him is generally preferable and he would prefer it that way. That or Naka may or may not have developed masochistic tendencies to cope with his past experiences. Naka is Ascetic and doesn't have a need of material luxury. He rather prefer the neccessitis like food, water, and clothing to wear. Like on Terra he's journeys around all over that world and never stays in one place for too long. Naka can enjoy these comforts if they are available to him but doesn't desire for the brief satisfaction that doesn't benefit him in the long run. Nakka's current life in the new world is treating him well. Yet in this world full of complex feelings and mortals expressing themselves, Nakka is disconnected from these emotions. It is difficult for him to understand others for at the time before he never interacted with anyone deeply. Naka as well had never got the chance to understand a mortal's sentiment for all the dangers he face and ones that follows him. Thus he never stopped for once to truly see the trivial yet important emotions and the deep connections one would have. However this may be the chance learn such but it will be a long ways to go but this may be one of the only chance Naka may get. But for now feigning his understanding of emotions is what he can do. [/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] A hero's blade blessed to rid the evils and curses of Zodiark. Striking a wound that nearly took the life of the God of all Evils yet the stubborn god refuse to die and open a portal to a new world. There he ended up on the streets exhausted and pressed on. Check himself he doesn't have the mark of the curses and evils he one bare. Instead a scar that stretches across his torso made by the hero's blade he had fought recently. But Zod notices something about the place he was in and for once in his life, what he saw amazed him. Before him was a city of lights and buildings touching the skies. Zodiark at first was dazzled by this sudden change of scene as he look at the lights that filled the streets and the illuminate night sky. With this newfound curiosity he strolled the streets, intrested in what new world he's in as it is filled with mortals in cloths he never seen. A culture with their own language and inventions beyond the norm that he knows. To Zod this was a great day (or night) for to be alive... Until he was almost arrested during his celebration by the local law enforcement. However in some twisted turns of events someone came to Zod. The one who came to Zod's side was a priest of a local church named Father Kotomine who explained to the police that Zod was a foreigner under his care and brought him in to his church. There Zod got help from the staff in the church and manage to get an ID with a new name. He calls himself "Nakamura Itsuki", and with his new name he landed himself a job at a super market. He works to provide money to the church he's currently living in and help around with maintenance and cooking. Naka also studied the world's culture and history to compare his knowledge of Terra and on earth. He also gets along with another resident in the church named Monte. From there one, Nakamura dedicated his time to help others as usually like the Terra but without any gods to cause disdain to him or others. Though one thing Zod knows if he's in this new world, there will be others. [/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText] In ages pass in Terra Sancta lies a village dwelling in the great emerald plains. Within this village an event took place where one individual became the object of disdained and scorn for community. The priesthood picked a young man to carry all of the worlds evil within him. They took him and brutally cut the man to pieces in ritual fashion as the village watch and focus their hate onto the scapegoat they have made. Burying his remains on top of the hill and erecting a symbol of the vessel of evil as it watches over the village. The years have passed that very day as well as the village with it's remains. The god "Zodiark" was born from the very earth the man who was sacrificed was buried as he arisen from the dirt. Embedded within his skin are the evil and curses of the now empty village snaking around his body like a tattoo. Upon his wake Zodiark walked the face of Terra for a unmemorable time. From there on stories of Zodiark spawned with varies tales of horror and awe. Though majority of it only tells of his evil and curses corruption the faithful followers of the both divine and demonic gods. Making them unfaithful to their god and inspire them to rebel against them. In turn the gods warn the rest of their faithful followers about the wandering god and to be remain vigilant against the corruption he may instill. Thus animosity grew as only stories of Zodiark's evil spread throughout Terra Sancta. Then soon after action was taken. The gods sealed Zodiark away where his evil can't touch Terra ever again. Thus the title of God of all Evils was settled and remembered throughout both the mortal realm and world of the gods. Like the village that made him, he is once again buried and left to fade in obscurity. Forgotten he was as Zodiark's curses free him from his prison as he secluded himself from the rest of Terra to only watch the events unfold from the shadows of history. He remained at this lost city until one day a hero appeared to challenge him. Both Zodiark and the hero fought for for several days before the hero landed a near fatal blow on the God of all Evils. Out of desperation or by pure instinct, Zod open a portal to an unknown realm and fell through it. Not before the hero who was fighting Zod chased after him and jumped into the unstable portal as it collapses. The two we're never seen again on Terra. [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] Most gods who know of Zodiark are at odds with him. Due to either the stories of his infamy or personally see him as a threat to their followers. Though another reason would be the curses he bares can threaten the livelihood and divinity one would have. Thus Zodiark has many unwanted enemies more so than allies. An unnamed hero of the other gods fought and nearly beaten Zod. Then they pursues Zod and chased after him through the portal to the new world. Their where about is unknown to Zod. [/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] Through Zodiark's travels, he have encountered numerous individuals who for once aren't hostile to Zod. Many of them were mortals who do worship the gods or some who doubt the tales of Zod. Zodiark does have friends who are gods. They're two gods who personally who saw pass the fabricated stories made to antagonize him. One of the two gods was a goddess that befriended Zodiark after he saved her followers from a disastrous event. This was Zodiark's first friend that wasn't a god that didn't hate him. The other was a Demon god shrouded in mystery. He knew of Zodiark's strife and commended him for all he had been through. Giving him a location to a lost city to take refuge should he ever need it. This god terrifies Zodiark for reason only he knows and one who he really doesn't want to make enemies with. Along the way Zodiark meet a hero who he had friendly chat with and had a conversation touching on subjects about life, the nature of the divinity, and which has bigger sword. During this conversation the hero gained insights to the gods that antaginized Zod and for Zod his opinions of heroes changed. [/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] On Earth Zod became Nakaurama Itsuki thanks to the help of a christian priest named Father Kotomine. The priest provided Nakaruma a home and food, even getting him a job at a super market. In turn Nakaurama return to pay for the kindness to him by donating some of his money to the church and helping the priest out whenever he can. Nakaruma is also cordial to those he meets. Finding that the environment and the people are generally a lot better than Terra and doesn't want to be hated at the very least by these people. Church- Monte Cristo- Nakaruma has a odd friendship with the man wrapped with bandages. Both he and Monte are living in the church and getting along well except certain incidents. Due to the stubborn nature that both posses, they both argue over some trivial things. While it isn't a serious thing both's own ideals may conflict with each other such as how to wipe a window. Naka promotes the technique of circle motion to wipe but Monte advocates for wiping from one end to the other. This of course isn't the first but a case of many other incidents that is usually calls for the aid of Father Kotomine to put the two bone head's quarrel to rest. Both aren't aware of each other's previous world's status. [/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

ChazGhost · Dec 19, 2018

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url( https://i.pinimg.com/236x/a6/a8/41/a6a841fce876b9c574c1694be6429488--anime-male-hot-anime.jpg ); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Ban Gōrudo [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] The Master Thief and Trickster [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] Amongst a crowd of people, you'll find many people, businessmen, school kids, young adults just listening to music and ignoring others, and so many other types of people. Amongst those you'd think we're more into their music than the world around them, there is one who just uses the look as a way to help his "craft". On further notice, you can see the man almost always smirking in a confident way. While he tries to look like just your average young adult you can notice there is more than meets the eye with the man. But before you know what that is he's gone... with your wallet. That's because the master thief Ban got it. [/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] Ban is a chill and calm man who always try to see the silver lining of everything. By silver line I mean he tries to see a way to make a profit in every scenario. Unlike many of the other heroes, Ban is more of an anti-hero who while he did want to help humanity, he was mainly interested in a large number of riches he could "acquire" after the gods were defeated then their death itself. Being a master thief and trickster, Ben knows how to read a scene, and does his best to stay unnoticed and act like he's part of the crowd. Which works better or worse, depending on what scene he's trying to blend into. When not blending into a scene, he may try to smooth talk others. Behind all the acts he puts up to gain something or thieving way Ban is a truly kind person. While he enjoys having spending money, he also gives these funds to the poor and unfortunate. He doesn't let many people know about this in the world, however, not even those he's helping. He's afraid if they knew the money they were getting was stolen they wouldn't use it. So Ban hides this from almost everyone except a few close allies in the new world. Sadly though, because he keeps this secret many people think he just a greedy thief and trickster. So once people know who he is, the thief part that is, they, of course, distrust him at the best and hate him at the worse. This leads him to lie to others about where his money comes from. Ben has a pile of lies for the good and because of this. These lies have also lead Ban fearing telling others real details about himself. So he either avoids telling others about himself or lies even more. Another con of this is that Ban has a harder time getting new friends in this new world. In the end, while Ban is a thief, he is at least a thief with a secret heart of gold. Even if he'll never show it. [/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] When Ban arrived in this new world, he was of course taken back from the drastic change to his surroundings and that no one was speaking a familiar tongue. Ban made his way to an area he who hoped would allow him to take a breath, a dark alley. With his previous profession, he felt at home in the dark alleys, which served to help him get his barring in the new world. After some time getting a grasp of the situation, Ban figured out he did feel as fast or as strong as he did before. But even more strikingly, he figured out he was losing magical power fast, and he didn't have too much, to begin with. At least the most important thing Ban had in his arsenal wasn't going away, his skills and knowledge. With those, he soon found that while the new world was a lot different it was similar in some respects, those being how easily fooled people were and how easy it was to steal from them. While there was a learning curve like learning a new language and picking up what this culture was like, Ban was able to pick up as he went. And once he figured out those things he was able to have a more stable living for himself, through his trade and even pick. He even found a few connections, to get a fake ID and paperwork for himself. After so many nights of living in dingy motels and barely sleeping in alleys Ban was able to get a proper apartment for himself. With a home base secured and money is only a little of a problem for a man if thieving skills Ban could now focus on the bigger picture, finding a way back home and finding other heroes and possibly the gods who also entered this world. He figured they may have done some research themselves and could be his ticket back home and to the riches of the now abandoned home of the gods. So at the closing of his first year Ban now had a home and a goal. What awaited him now would be anyone's guess. [/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText] When there is ever war, there are those who suffer that never seen the front line or were just too close to it. These are the peasants and the poor. These people are forgotten when kings, rulers, and even heroes at times focus on their goal with no care for the cost that others would have to pay. But does not mean no one cares. It also does not mean the rulers don't pay for selfish wars. They pay with every gold stolen by the thieves guild. Ban was adopted and raised by the guild members after his village was destroyed by during a large battle between demons and the king's men. Ban took quickly to the skills of a thief and became the youngest man to ever become a full member of the guild. Ban enjoyed the trade, from the challenge of stealing gold from a noble to then give that gold to those who couldn't afford bread under that nobles rule. That was the way of the thieves guild, take from the rich and give to the poor. Though this task became much harder at times went on as the nobles became more aware of the guild. This is when Ban came up with a plan to get enough money to continue their efforts. This plan was to steal from the gods! The gods had lifetimes to obtain and stockpile many artifacts. So Ban figured he could steal them and fund the guild for many years to come. The only problem was that a single thief wouldn't be able to do this. So Ban decided to play the long game and started helping heroes fight against the forces of the gods. He hoped, by getting their trust, he'd be able to go with them when they take on the gods and he would be to sneak off to the god's personal treasure hordes. It some time to get that point, and along the way, he meant some ally he could call friends and other he'd preferred to never talk to again. Years later Ban was finally about to pull the heist of the century after he and other heroes defeat a god. But destiny had other plans for theft as when the gods fled into a portal, it became unstable and began sucking things into it, including Ban... [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] N/A (Will be edited once Ban gets one. Let me know if you want to be his archnemeses.) [/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] Yuji Kuroda: One of the few heroes Ban respected. He wasn't as boring or self-righteous as many heroes were, so Ban was happy to be to see Yuji once more in the new world. If he could be stranded on a random world with anyone, Yuji would have a solid place in the top twenty-five. [/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] [/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

The Hero · Dec 19, 2018

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url( https://i.pinimg.com/originals/2a/6b/0a/2a6b0aa443923d3e9a94c9447b2c5657.jpg ); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Kikkoman Yama [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] Fervor's Seeker, ærugo [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] How does one describe the feeling when acquainting themselves with Yama? Well, it's similar to how you meet any other person. First, you roam your eyes up and down his being. Standing slightly above Japan's average male height at 5'9 (~175cm), you perhaps feel a sense of approval or jealousy in the back of your mind, depending on your own height. Despite this, there isn't a sense of hostility or haughtiness in his stature. His shoulders are stooped in what seems like submission or politeness. He's obviously not there to interrogate you about your troubles. But his hands are never in his pockets, they're always in your field of vision, reaching out to help. Next, you notice his peculiar clothing. A man's status could easily be inferred through his choice of apparel. You ask why he wears Chinese clothing in urban Tokyo, Japan? Well, that's explained by the various spices wafting off of him, little threads springing out and small, almost unnoticeable, patches in his clothing that emphasize its use. You get the sense that he works for a Chinese restaurant as either a waiter or a chef. He's a working man, but he's fallen on hard times. While it may be obvious that he's worked in his clothes, it's equally as obvious that he wears his uniform as his casual clothes as well. Because under the spices and sauces, there's a familiar, earthy smell similar to dusty, asphalt on a burning day. The scent isn't bad by any means. One may even say it's comforting, disarming perhaps. Finally, your eyes rest on his face. You can tell the tribulations one has faced by the weariness of one's facade. And you see there are no cracks in his mask, you see no mask. His smoldering, golden eyes have a sharp looked dulled by experience yet enhanced by his tan skin. Thin lips used to a tight-lipped smile but unfamiliar to an open, hearty laugh. Once in a while, you'll see him blow a stray strand of brown hair out of his eyes. His hair was a mix between kept and wild like a horse's mane. Overall though, his face has a youthful glow, inviting to the elderly and naive. This man's appearance is an enclosing, deep hug. [/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] Yama is typically described as mature and charming. There is a warmth in his behavior that bewitches and ensnares one into revealing their deepest desires and passions. Perhaps it's how he carries himself at a comfortable distance. He doesn't act so familiar to someone where they fear that telling him their secrets will make him shun them; and, he doesn't feel so distant that telling him secrets would be completely inappropriate and awkward. He's like a flickering candle in an obscure night: not bright enough to scare you but enough to make you feel confident where you're stepping. But there is a hidden coldness behind the dim candle, it ensnares you into trusting it enough to influence your direction. Once you start asking for his advice on how to live, Yama doesn't particularly care whether you come out alive or dead. He's there to watch your glee, despair, love and hate that comes with following his advice. The demon, now man, doesn't have your best hopes in mind when he allows his smooth, cryptic words to slide out. The only thing he has in mind is a glorious explosion of passion and emotion. Then, when you burn out and all that's left are burnt scraps, he'll toss you out like an obsolete toy. Although, being human has taught him some morality and humility. For the first time in his life, he's experienced hunger and desperation during his first weeks on Earth. He's realized that there are some people who he cannot betray oddly enough. There are some debts that even he cannot repay with a knife in the back. These people are far and few, but they exist and show that this foreign world is changing him. [/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] The moment Yama found himself in a wet, damp alleyway, he knew that he was no longer in Terra Sancta. He was in some bright neon world with nothing to his name but his tattered clothing. The magic and silver-tongue he had boasted was gone or at least so diminished that the effect was almost negligible. His life became worse as his ragged clothing attracted the attention of the police officers. They soon escorted him to be interrogated, but the interrogation fell through as Yama couldn't understand a word they said and vice versa. Eventually, the officers chalked Yama up to be delusional and threw him back onto the streets. Being manhandled by the officers was embarrassing to the demonic god, as a result, Yama took to sulking. He wandered days on end, overwhelming his senses with flashing colors and roaring, mechanical horses. His usually calm demeanor slowly cracked as a foreign gnawing speared at his stomach. His body felt sluggish, and he could barely drag his feet across the strange, gritty road. It didn't take much longer until he fully collapsed in front of a shabby, old food stand. The shamed deity would spend days battling dehydration, hunger, and fever until he finally woke up. Once again, he found himself in a foreign place. This time it was a moldy, cramped apartment with a dusty, old man sitting next to him. The dusty, old man would soon teach him what it meant to be a kind human, or he would have if he hadn't died weeks later. Instead, the old man lived long enough to teach him the basics of Japanese and give him a name. He also taught Yama how to cook, budget, haggle and run a business. It was a busy few weeks that resulted in deep, one-sided trust. A trust deep enough for the old man to give Yama his food cart after his death. The demonic god wasn't particularly devastated at the death, but he was frustrated, confused and wanted more. There was so much trust between them, and he couldn't do anything with it. There was no grand explosion of grief or joy. There was just a smoldering match finally dying out. It disgusted Yama to no end. He wanted closure, but there was none. After days of thinking, Kikkoman decided that he would make the food stand, the old man's pride and joy, a huge success. Then, when it gets popular enough, he'll tear it down and perverse it in some grand way. That will be his closure and goal in this world if he cannot return to the old one. Along the way, he met a few old enemies and allies, deciding to live with some of them. [/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText] A god's birth is shrouded in mystery. Are they born from the afterthought of some abstract being, a fortunate combination of atoms, or gained through some intensive training? Well, ÆRUGO's birth was a result of an idea, many ideas in actuality. A savage, grotesque tribe worshipped the god before he was even him. As the tribe's passion for their religion grew, ÆRUGO was born from their desires. He wasn't exactly as the tribe imagined he would be, but he was a powerful ally nonetheless. The savages' ferocity and fervor for destruction pleased ÆRUGO. But as they won victory upon victory, the corrupt deity became bored of his tribe. They had become complacent in their victory, and their initial emotions of fear, desire and greed dulled. In one night, he delighted in the confusion, betrayal, and grief caused by the death of the cult. There was an initial loss of strength; but instead of being frightened, the danger and freedom made him excited. If there was one thing he could learn from the uncouth savages, it was that war and battle were wonderful. Patriotism, romanticism, avarice, and lust were all present in war. War is a buffet, and the bigger the war the better the taste. ÆRUGO spent centuries setting up humanity for an extravagant war. He'd imitate divine gods and trick kingdoms and villages into believing they were meant for greatness. It did help that humans were inherently corrupt and vile beings. So by increasing the sectionalism and regional tensions in the world, he hoped for some catalyst to come and topple the pieces he set up. For there is nothing greater than one falling into misfortune believing they were the one at fault. Lo and behold, it wasn't a human to set things off but a demon. This demon had significantly more strength than ÆRUGO, but that didn't deter the deity from attempting to join the ranks. He wanted frontline seats to the mayhem that followed. It was absolutely sublime. There was so much chaos, order, life, death, joy, love, grief and hate that ÆRUGO would be full for millennia. But as the war raged on, once again ÆRUGO fell into a slump. The war became boring. It was the same small candles being extinguished one after the other. He wanted a bonfire to be suffocated and crushed, and this would come from either the death of a hero, demon king or divine deity. So when the hero showed up to his station, he may have allowed for them to pass easier than he should have. As godly as he was, he wasn't fast enough to reach the demon king's castle to watch the destined climax. It was quite infuriating when he arrived, and there wasn't a body or anybody at the castle. There was just a mild sense of confusion and hope. Everything he had already tasted before. Lifetimes spent were wasted in mere moments, and heavy despair set upon him. Tales tell of a hill expanse north of some obscure village where when one approached could feel the bottomless melancholy of a deity. It took a short few months to burn through a millenia of energy. Finally, ÆRUGO spent himself enough to fade into the greater conscious, just another passing thought into obscurity. He wished that there was a new world in which he could find a new thrill, a new hunt. This was when a slit widened on the barren field and swallowed him up. [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] [/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] [/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] [/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

Zerulu · Dec 20, 2018

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url( http://i48.tinypic.com/zmh8qd.jpg ); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Krum Kai [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] The King of Pleasure [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] Krum has scruffy hair that he barely takes any care for, which usually causes it to hang dormant on his head, only cutting it himself when it obstructs his sight. He has dark green eyes that compliments his pale skin; this may be for him barely venturing out into the great outdoors to get a tan of any sort. People have told Krum he looks in his 20s about, but people have thought Krum is a bit older than he is due to the tattoos that litter his arm. Most of them have no meaning and are purely for aesthetic effect whereas some do have sentimental meaning and value to him. Krum has no beauty marks and takes pride in his oddly smooth and clear skin, except for the various scars that litter up and down his back, that he does keep covered and barely shows anyone. Krum is an average male, standing at about 6'3 and only weighing about 65 at any given point, this supplements his quite skinny body build with bits of fitness to the point where he can endure some hits. Covering his body he usually wears a white singlet, with a yellow button-up shirt with only half the buttons done up and then a bright green windbreaker with a fur collar that comforts his neck As for his pants? Krum is never found wearing something that isn't his brown suit jeans with his favorite dragon themed silver buckle belt. His belt buckle wasn't where the fancy jewelry ended. However, Krum always had an elegant silver necklace in the shape of a sword and shield, a chain hanging off his belt and another silver chain on his wrist that hung just over a leather band on his wrist. People that have been in the company of Krum have reported it's like his looks radiate off him, almost like an aroma that enchants anyone that breathes it. Though this hasn't been scientifically proven, or proven at all as it's just a lie Krum made in an attempt to impress people, no one can deny the change of mood and atmosphere when Krum is in his or her presence. [/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] Krum has seemed to adapt to his mortal life quite well, his a light-hearted man who barely takes anything seriously unless he needs to, he also finds people to be too severe and people that can't take a joke or two as people who are toxic to be around and reflect poorly on their company. Due to this Krum gives off an immature vibe, almost someone that wasn't respectable to others even though he tried his hardest, it also doesn't help the fact that he has trouble picking up on social cues and body language. Other than this Krum has a massive case of FOMO, (Fear of Missing Out) this means he can't bear knowing others are out with each other while he can't be there, this is also coupled with his dread for isolation, or being alone. He despises this right down to his core, as he thinks if someone isn't with him he or she is most likely also having fun without him. This whole line of thinking leads to him to seem too attached to people, (SOs, Friends, Family) and also makes him look like his a narcissistic as he thinks there is nothing better anyone can be doing than being with him. Krum also sees showing too much emotion like defeat, sadness, grief and other feelings like that as a sign of weakness; this leads to him bottling up all his negative emotions and hiding them away behind a facade of happiness and courage, where he gets scared quite easily. Another thing he displeases is a confrontation, and he hates debates, discussions or arguments as he never seems to be any good at them, this leads to Krum lying or even twisting his own words to avoid stuff like this happening. All that said Krum wants to have a fun time, his a guy willing to put on a gentleman facade to please a girl, or a strong guy one depending on the situation. He always has a joke or pun for any case and has a good track record of putting smiles on the faces of people he encounters, usually girls as he is quite flirty by nature. [/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] Krum's first year there hasn't been what he exactly imagined it to be, opposed to lavish lakes and beautiful women it just seems to be busy roads and even more active women in Tokyo. When he first arrived many people took photos with him, he didn't entirely know why but maybe it was due to him wearing very minimal clothes with traditional body painting lining his body. Krum craved this attention until some Officers of the Law stopped him, they took him into the station for, 'indecency exposure in public.' Krum didn't understand what they were saying. It was like everyone was speaking gibberish. The law enforcers picked up that he was oblivious to the situation and didn't speak Japanese. So Krum was put into a special program where he started to learn basic Japanese, and it progressed from there, by the eight months he was almost fluent. Krum also adapted well to the culture there but didn't appreciate it that girls now had the power to reject him, back up in the Heavens he was quite literally praised, now his just a lowly mortal like the rest of these... mortals. Krum didn't take any items down from the Heavens, he barely even had any power as he was just an incubus. He knew he couldn't live a life without a woman by his side, as in this foreign place you could only have one primary lover and any extra lovers were frowned upon, this confused Krum, as he didn't like commitment, but now it was his time to adapt. A big culture shock also came from the fact he needed a job and a place to live, as well as money to buy or rent a place to live as well as buy food and more little things he was just handed back at home. So he started his study, he got a job at a dry cleaning place helping people clean their clothes, he hated doing things for someone else and hated the rules about no advances on customers and co-workers. Oh well, their loss. Right? As Krum started to budget his money he found a small run down cozy apartment that had two rooms he rented out for dirt cheap, he also decided to buy more clothes for himself. Krum also found out he couldn't last as long as he used to without food so buying ramen came rather high on his list of priorities. Krum still has the occasional run-in with law enforcement and every day learns a new law, like, 'Just because they don't see you take something doesn't mean you can just take it' or even crazier, 'After you rent the place you have to continue to pay, daylight robbery! All in all, Krum is doing quite well for himself. His sharp adaptability has gotten him a stable living situation, all he needs now is a partner and some friends to enjoy being around. [/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText] Krum didn't have one place he'd stay, his kind, the 'incubi' would go from place to place, like nomads. When they found a new place, they spread out like bats, finding refuge in inns, hotels, motels, whatever worked. That's when they started to seduce the women they'd flirt, offer gifts, do whatever that needed to be done so he could to get buddy-buddy with a chick, usually it worked, and they'd have a fun night before the incubi set out again the next night. Krum knew never to get emotionally attached to a girl, as being with a girl for the incubi was what they needed to live, it was their type of, 'Eating.' If a girl continued to refuse their advances, their power would spell, 'C U R S E' for the young lady. Mostly this curse was in the form of bad luck for an X amount of years; maybe their first child would die at birth or, if the incubi were very offended and wanted to get back at her, he would perform a dark ritual on her soul. This ritual would transfer her human soul into an animal, likely a rabbit, and do the reverse with the animal's and her human body. Usually, this spelled disaster as the animal soul can't handle the human body. The transfer often caused the body to mutate, turning it into wendigo and running into the forest or bushland. The human soul could handle a smaller animal's body though, but with all that free soul power usually, their consciousness would be floating in a dark void until their host animal dies. None of this was legal under Holy law, but incubi weren't allowed into the evil parts of the world, so they feasted on the innocent, some close encounters with Holy guards kept them on their feet and alert, but it wasn't until that one fateful night. The night the victim was a Holy Guard. She was off duty at the local bar enjoying some time alone with a drink when Krum arrived, she refused his advances over and over, even insulting him personally. Krum wasn't having any of it, he went out in the remote woods and captured a rabid dog to perform the Black Ritual, but something was wrong, it didn't work, she had some sorts of Holy shield around her, and she knew she was getting attacked. As the Guard followed the trace back to the ritual ground, Krum made his great escape. He leaped up from the ritual grounds and made a mad dash for the woods, but the Guard was persistent, she wouldn't just let him go. Krum had no choice, he had to make an emergency escape, he thought about different rituals, but the only one he could do so quickly was also the most dangerous. This was the ritual dubbed, "Summoning of The Dark Eye," or, that's what his clan called it. As he continued to run, he quickly recounted the crude process in his mind, engraving on a tree, blood of an innocent and finally the blood of the person doing the ritual. Krum was sure he had it down, so it was game time, he quickly made a left turn and found a tree that seemed a bit bigger than the trees around it, Krum immediately got to work. He first made the symbol of the Brimstone, or Leviathan Cross; it was easier to cut the engraving in with his knife. The innocent blood wouldn't be hard,and Krum still had the blood of the dead rabbit from the ritual before, so he smeared the blood that stained his left hand on the symbol. Lastly, he quickly cut his knife into his palm and placed it in the middle of the engraving, and just like that, the tree stump opened up like a doorway, it was now or never. Krum knew the risks but it was his only chance, he dove into the portal, half expecting death and half expecting entrapment in the eternal void, but as he opened his eyes he found himself in a new place, not like in the heavens. Krum was on Earth. [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] Incubi are a nomadic race who are usually condemned by everyone, even most of the Demonic Gods, and of course the Holy Gods by default. There are small sympathizer groups in each society that invite incubi in, but that is where it ends. Krum and the incubi didn't mind being hated for who they were, as they could easily blend with society as being an incubus wasn't precisely written on your forehead. [/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] Krum mostly trusted his brothers in a particular Incubi clan called, 'Pleasure's Kiss.' This clan adopted him while he was running solo, they took him in and treated him like their brother, ever since then Krum has been with them, learning and teaching. Krum couldn't think of what his life without them, and he wishes he never has too. [/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] Krum has developed a friendship with his Cultural teacher, Mr. Jung, a Korean teacher teaching him Japanese culture. Mr. Jung is usually the only person he associates with and communicates with regularly, as, for women he has hooked up with, nothing ever seemed to come out of it. [/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

labyrinthine · Dec 20, 2018

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://i.imgur.com/hz4IA9C.png); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: transparent; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Makoto Hikaru [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] Amon, Spawn of Greed[/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] She was a god. One of rapacity, chaos, and deception. Facing this woman, you'd think otherwise. She has a reddish ribbon tied into her milky white hair, which flows freely a little past her hips, framing her face which you then notice. You look at her strange ruby-colored eyes, soothing like a calm ocean. They're large and round. Trailing down from her eyes, her lips were curved into a small smile. It was barely noticeable, but it was there. And it was a sad one. Her face is only one amongst a huge number of people who scarcely exhibit emotion, and it often leaves a cold first impression to others. She's a wisp of a woman. Her skin is plump and snowy, often compared with satin or silk. Neither stocky nor scrawny, Hikaru has a dainty build, with a small yet elegant body. Hikaru never considered herself to be that much of an eye candy, as she didn't have the arc of a slender neck or the curves of an hourglass. Her height of 5'3" (~ 162 centimeters) is slightly above the average. Though looking healthy, she does not particularly participate or take interest in physical activities. Hikaru has a great posture, neither really showing a wind of pride nor a gust of inferiority. Hikaru's sense of fashion is somewhat clean and comfortable. She likes looking presentable most of the time, with her hair in the right place and style, choosing clothes that are well-tailored and fitted without unnecessary exposure. At work, she usually wears a light blue blouse dress with an apron over it, giving an "alice-in-wonderland" look. Hikaru is often seen with blue, knee-high socks and white flat boots. It isn't quite obvious by what she wears, but she was a god. Now, she's a coffee barista. [/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText]Hikaru generally has a calm and collected nature. At times, she appears as a person who does not convey emotion, leaving them to think of her as apathetic and exclusionary. Hikaru is well-aware of the situation, and puts effort into establishing more relationships. She does not bother provoking those who irritate her, however she will not hesitate to approach someone when she deems it necessary. She detests anything that she deems a little too childish as well as being compared with something close to a child, in view of the fact that she looks a lot younger than she claims she is. Bland persona aside, Hikaru is quite a curious individual. She has not quite adjusted with the new land beneath her feet. The simplest things always pique her interest, an aspect which, in the past, has led her to danger. In spite of that, Hikaru continues to be inquisitive. Her serene facade has never gotten in the way of her curiosity or humor, which tends to be a little dark and mocking but never inappropriate. She does not particularly pay attention on what people say about her, however when the topic is brought up, Hikaru is the type of person to blurt out something unrelated, wishing to change the topic. Aside from apparently being an isolent person, Hikaru is still somewhat bothered by the fact that she does not have that much of close friends. Her skills in the social world have proven themself to be quite futile. With a mind constantly working overtime with no pay, it was hard for her to sleep at night. She would stare at the crack in the door, thinking it was mocking her, saying, hey you, you've got no one. Her journey after banishment was not a good one, and she went through it alone. This is the cause of her strong sense of morality and empathy when faced with the poor as well as the overthinking personality underneath her usual shell. A notable attribute of Hikaru is her fixation on neatness, which is evident in the way she dresses. The single strand of hair on the floor and the narrowly detectable cobweb by the corner always made her scrunch her nose and knit her eyebrows together. For whatever reasons, she always itched to keep her materials clean and shiny, and her clothes perfectly ironed out without a speckle of discoloration. She'd perform actions in the most efficient way possible, mentally scolding herself if she ever makes sloppy actions. Incidentally, the former god retained her greed, but to a somewhat lesser degree. She would, at times, keep her food and money to herself. Hikaru's genuine generosity is limited to the people she relates with.[/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText]Amon woke up in a gloomy, foul-smelling place. She had been stripped of everything: her dignity, her gold, her glory, her robes of fine fabric were reduced to nothing but clothes of old rags. She stood up, her bare feet aching as they pitter-pattered against the rough pathway, between the walls of structures that were too high for her. The buildings were cramped together and towered over her, like trees of stone. When she took a glimpse of what was above, the roofs were so near together that she could only make out a small snippet of the dark sky. Garbage and all sorts of discarded materials surrounded her. She was on a completely different land. During her first days of constant wandering and marveling, Amon has made grave mistakes. One of them was standing in the middle of the road, demanding to get one of their cars, which Amon thought was a magical transportation method that could get her into different dimensions, due to lack of knowledge. Her actions led to her almost being arrested and contained in, perhaps, an asylum. The first weeks were the hardest for her. Her godly pride was instantly crushed when she found out her dream of reigning over mortals could never come true, along with the fact that her powers did not work in this new world. Months flew by and Amon still roamed the streets of Tokyo, unsure of where to go. Her only hope of survival was the people who were kind enough to give her a little food or currency. Amon developed a grudge against herself. Amon, Spawn of Greed, a demonic god, was now this woman on the streets, covered with dirt and mud and whatnot. She was completely in the mortals' mercy. Amon was a ball of mental and emotional mess. This grudge left as soon as it came. At one point, Amon sought to restore her identity or maybe get a new one. She'd walk her way to random places, asking for jobs although she was usually rejected for having no education whatsoever. Eventually, a store manager of a small Moonbucks branch offered her a deal: shelter and food, as long as Amon, who took the name of "Makoto Hikaru" would work for free. As skeptical as it may sound, Amon accepted the offer, desperate for a roof over her head. She was told she'd start off as a janitor, and her position would get higher if she was trustworthy and really wanted to get back on her feet. Sure enough, she took the job and actually loved cleaning. Hikaru wasn't sure if it was because of the experience she had with dirt, but she swore to herself she'd never stoop low again. Though having minimal pay, Hikaru is content with her current job: being a barista.[/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText]Amon was not always a god of greed. Her very being began a lengthy time ago, as something ancient, formless, and barely sentient. This emerging wisp of color existed, senseless and untouched by all. This tuft of life was the very soul of a large island on the face of Terra Sancta. The mortals inhabiting the island were full of life. The kingdoms were riots of color, and all were at peace. It might have remained so, had the world not been overturned by bloodshed. The Great War, as they would come to be known, brought an era of ache the world had never known. As beings across Terra Sancta began to experience a broad rangeof pain, torment, and loss, the wispstirred. The nothingness it had known for so long had been replaced by the mad sensation of chaos as the island, once vibrant with life, was now an island of evil. Its people were at constant war, clawing at each other's neck for scraps of resouce. The creature quivered with fear. Once the Great War escalated, the island's misery grew so extreme that the wisp felt as if it might explode. It drank in all of the island's greed, which it experienced as borderless glee. The feeling nourished the creature, and as time passed, it mutated into something more. The wisp twisted and turned. It screeched as its once vibrant prism of colors lost its hue, altered into an ugly pitch black. It wanted more of the sensation. It was greed. It became a god, a ravenous leech that fed on the fear and greed of the island. It presented itself to the people as a god, in the form of a human with hair as dark as her soul, and eyes a piercing red color. One that could manipulate the very own greed of the humans and conjure them into flame-like concentrations. Her people had a strong loathing for the demonic embodiment, who they called Amon, the Spawn of Greed. No one dared to challenge her, as terror overcame their hatred. She had everything she wanted. Soon, the people stopped charging at each other's throats. A revolution against Amon started, and the people's greed waned. Amon found herself growing desperate. Roaming other lands wasn't enough. Eventually, her power diminished and she was overthrown. Her whole being changed color once again, with her force completely being drained from her as she was being banished. She wanted everything. She had nothing. [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText]TBA[/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText]TBA[/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText]TBA[/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

Love of Cyanide · Dec 20, 2018

Move along jimbo, this is work in progress!
[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://i.imgur.com/lGHbn3D.jpg); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Itouki Eikichi [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] Ku Oneiro, King of Dreams [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] The bodacious and large red cape that surrounds him even during summer would be the first noticeable thing about Eikichi's diminutive figure. With a bob of hair that borders a deep green and black, his eyes with a similar tone of color. His face is round and childish, despite his age, not having any sort of signs saying that he's any older than some fifteen or so to his chagrin. Standing at a minute 5'3 feet(~1.6 Meters). His style of dress is less 'What looks good' more than, 'What makes me seem more adult?' which leads to him, simply looking like a prim and proper teen. Something like a deep green sweater worn over a pristine white dress shirt, his favorite brown and black striped tie to go alongside that; dress pants and leather shoes to finish the look off. ...However, with work being what he spends most of his days doing, he doesn't usually dress too boldly(if you don't count the large cape he has draped around him anyway. His normal atmosphere is that of an introverted child, though his words and eyes betray those expectations made by his slouch and lazy right eye. Furthermore, on closer inspection, he bears no physical burrs or marks, frame small and compact with fairly babyish hands soft to the touch. Nor does he have a particular amount of muscle anywhere on his body, seemingly one to enjoy staying in more than out. So, with what you'd find when talking to this one, is much different from what you could garner from first impressions. [/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] [/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] A puff of smokey air trailed across the air in front of a diminutive boy, that couldn't possibly be older than sixteen perhaps. Yet the blue police cap that was tapped down lightly onto his bob of green hair spoke otherwise. He was nursing a cup of a murky black liquid; The WcCoffee from the titular fast food chain, WcRonalds. Which would be a terrible idea due to the fact it gave a killer dose of diarrhea but that's for an hour into the future. A wrinkly yet strong hand pressed down on the boys head resulting in: "Guh! Mr. Enohara!" Half of said coffee was now all over his nose and the white top of the cup. Raucious laughter from the elder man, Enohara Jūzō, persisted for a moment before sobering up, holding some tissues out to the glaring police officer, "Sorry sorry, you just make it so easy Eikichi." Grumbling the younger man wiped at his nose and mouth, attempting to hide a partially amused smirk of his own. Even in teasing of himself, he couldn't help but find amusement in. He certainly wouldn't tell Jūzō however. That would lead to more teasing than what was already present. Tossing the tissue into a nearby bin, Eikichi leaned back onto the wall of their little police box. "Hey, Mr. Enohara?" The boy started as he swigged down some of the cooled down caffeine. "Yes my boy?" "...Do you have any recipes that are... cheap? Ish?" The man with whitening hair let his eyebrow raise, "Now, I can't tell if that's an insult or just a question." "Of course it isn't an insult, I've just had..." He huffed, "Additional expenditures? That. I was wondering if you had anything, since everything online and in books are..." He made a short gagging sound as he tapped his throat to get the message across. "Aaah~." Jūzō let out a long sound that was a mix of a sigh and bark of laughter, "I see, I see. So have ya finally got a girlfriend?" A cheeky grin to punctuate his excitement, his Kansei accent showing because of his quick remark. "No, no! I just bought some games!" He put a hand to his mouth, damn it, he got him. Jūzō chuckled deeply as he got another bullet to put into the clip called 'Banter ammo against Eikichi'. Damn it. "Well, I've got a few from back in my day when me and mah buds had to survive off of one daikon and a bag of rice." He began eliciting a groan from the smaller police officer. Not another one of his long winded stories... "Could you please write the recipes down onto paper?" Eikichi asked as nice as possible a half-genuine and half-'I swear to god' smile on his face. "Yes yes, oh how cruel of you." He shook his head suddenly changing from his jovial tone of voice, "Forcing an old man to do your bidding without payment. Truly the worst. How could I have taken you in back then?" Though the words were harsh the still light atmosphere belied the insinuation. "Knock it off old man, you're gonna give people the wrong idea." Eikichi remarked as he looked across the streets, which had no one thankfully, "But it'd be awesome if you could. Thanks." Another pat of his barely fitting hat, Jūzō shook his head, "The pleasure's mine. I dun' particularly care where ye came from but you're a bright kid so you ought to survive, yeah?" Tilting his head downwards, the childish police officer gave a sincere smile unbeknownst to Jūzō, "...Yeah, thanks gramps." "No problem, kid. None at all." [/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText] Sleep. It is an endless yet infinitely short period of which your heart slows and your mind stills. No sound, no people, no world. Then Dreams? Those are the colors of which your mind produces, the vibrant and bold. The heart racing and mind numbing. He, who rules Dreams, that is Ku Oneiros. A god nor hero was Ku, but a simple man. A farmer at first, the strength of a titan and wisdom of a dragon. The man who found the world so boring; yet sleep so enticing. Why? It is because of his dreams. Each he remembered and kept so dearly, the bright and vivid memories etched into his heart. From the capital and another state came war, bringing bandits that wished to take advantage of wartime. There, he found motivation. A thrill, pumping scalding blood through his brain. He pursued the attackers til they were no more, gathering a band of friends which he'd soon call his council. From the war, he fought, mourned, laughed, and swore. There, he found what he was lacking; A Dream. Something that seems so inconsequential yet brought the color which only sleep garnered into the life he lived. He knew of a dream that the entire world would be his, each and every person's dream for him to live and love. Bearing broad shoulders and muscles that outweighed even the giants, a cape lined with fur a deep crimson like the dawning sun. A grin that stretched a mile wide and fingers so broad. That was who became a king. Eventually, he became a 'Hero'. No, that wasn't what he wanted! He became a Hero called the King of Dreams. Yet, he only wished to purview those wonderful colors. Truthfully, when fighting off the Gods that threatened his kingdom, he could only be thankful that he was transported to a place where dreams could be viewed and interacted on tiny little boxes! ...However. Yes, however... Why did everything seem so large? [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] All that wished to take or oppose his kingdom: those that shared the sentiment of chasing dreams. Whether God, Devil, Man, they would become his enemies if they crossed that line. [/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] His closest companions were those that followed him when he was but a simple farmer. His most cherished companions... yet they grew so frail. Five, there were. Gerald of Honor; Truthfully, the closest, his best friend through dark times. Johannas the Witty; Great fun, in fact would certainly make a wonderful court jester if not for his wanderlust. Floga the Brave; Like crystal yet as hard as steel was this woman. A trusted ally on the battlefield. Sarkikos the Nameless; He insisted on that title for reasons unknown to Ku, yet was a great ally who could gather information on countries in weeks. Katakit the Immutable; The only thing that changed was his withering skin and age. Yet his will remains strong as ever. How are they doing? [/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] The kindly yet elderly man who works alongside him in their little police box, Enohara Jūzō. [/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

Terrabreak · Dec 20, 2018

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url( https://i.imgur.com/08FUVgz.png ); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Tsuda Takashi [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] Vaalbara, Primordial blood god [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] If your eyes happen to find a slender, young man whose facial expression doesn’t make it clear if he either wants to help, trick or attack you it’s probable you just met Takashi. Standing at the low height of 5.4 ft. (164 centimeters) the former deity carries a body that could hardly be considered worthy of the status he had back at Terra Sancta. His thin figure alongside the pale tone of his skin giving away an aura of weakness and the unkempt long black hair granting him a childish touch made people who watched him from a distance guess quite incorrectly the kind of person he was. It was only when they found themselves in front of that always present smile and those deep black eyes that one could truly see who he was; an energetic individual, a train at maximum speed without any kind of breaks to rely on. Surprisingly enough in contrast with his chaotic nature his sense of style is quite plain, often wearing white clothes and shirts without any kind of fancy design. After all, despite already spending one year in the modern era, the so called boring clothes of this world still caused interest in the god that for so many centuries went shirtless, only covered by a few furs and a multitude of different bone decorations. [/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] In the words of his closest co-worker the best way to shortly describe Takashi would be as “A man of actions, not words… unpredictable actions, that is”. As a god he didn’t have many desires besides doing whatever he felt like, whenever he felt like so when he adapted to this new world so did his ideas. The joy he felt running rampant without anyone to stop him turned into his hyperactive nature, the pride watching all the corpses of his enemies turned into his sense of achievement after making that man carrying a countless amount of files and papers trip. Aside from his sudden wishes to cause disarray Takashi is a friendly and social individual, always up for some small talk or drinking gatherings after work. At the office he’s well known for being efficient but unorganized so, if someone doesn’t think a report will be finished before the deadline, he is the first person they will look for. Sadly for him and his new life the traits of a chaotic god don’t change, regardless of which world he lives in. That alongside the problem of being an ancestral creature inhabiting a mortal body meant heavy taxes on the long run to his now human psyche. It was about 8 months after his arrival on earth when the problems began, starting with a creeping fear of death. In Terra Sancta his prison made him feel safe, that death for him would just force him early back into his slumber but now there was no place to fall back, it would truly be his end. The next symptom appeared as his usual antics were not enough anymore to satisfy his old violent instincts provoking sudden cravings for carnages alike the ones he caused on his old world. He managed to hold them in whenever they came but it was another constant burden on his shoulders; fighting to “keep himself human”. The former god was able to handle this uneasiness but he didn’t know that the thought able to horror him the most had yet to come. 365 days after arriving on earth, laying on his bed Tsuda realized the worst part of his freedom. It was boredom. Despite his millennial age the amount of days he had actually experienced was small, probably smaller than the amount he had spent on this new world. He knew that sooner or later this constant passing of the days would become monotonous to him and that was what he truly feared. Perhaps the embrace of death wasn’t as bad as he made it to be. Perhaps killing and drinking blood in this human body would prove to be rather fun. With all this angst and doubts in his mind Takashi was only sure of one thing; that he would do absolutely everything before accepting a life that didn’t entertain him. [/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] If anyone had been around that park in Tokyo very late into that night they would have seen a young man in a weird costume running and jumping around. Those were the first things Vaalbara did, test this strange body that was now his own. After getting on a huge group fight that night the morning quickly arrived and he was able to somewhat understand this new civilization just as fast. Being able to figure out in a short time what kind of human society was in front of him, a skill that he had used so many times throughout the centuries. Observing from the rooftop a few hours into that day he recognized them as a peaceful, organized and numerous “tribe” however he was unable to understand much else so he came up with a plan. After abandoning the grim decorations around his body and stealing a blanket from a sleeping homeless to use as some sort of cloak he awaited the night before going back to a certain alley behind a pub, the place where the fight took place last night. It took a few hours but finally the man he was looking for came through that backdoor; a bartender carrying two bags of trash, someone he just happened to help when he joined that brawl for fun. Back in Terra Sancta one of his abilities was the power to effortlessly take hold of his worshippers and control them as puppets so he should be able to at least influence this weak human who must feel grateful towards him. After using his powers they tried to start a conversation, something that ended in failure as they didn’t understand each other languages so the bartender managed to tell him with a gesture “wait big”, basically until his shift ended. This was the start of his relationship with the man named Kenji. Through the days Kenji attempted to talk and help Vaalbara before and after each shift at the pub, from telling him where he could shower and sleep to sneaking food to him whenever he could. After some time a vacant for a job at the back of the pub presented itself and Kenji was able to convince his boss that this weird, mute man he knew was perfect for the job. Now with an income and a much better understanding of this world his friend invited Vaalbara, now going by the name Takashi Tsuda, to move in with him. It took the former god a few weeks and another attempt to realize that his powers were worthless; at best they allowed people to understand his gestures a bit more. He assumed that his powers were spent after the first try and forgot about it, finding it too difficult to believe a human would help someone without any authority and expect nothing in return. The months went by in a flash; Takashi felt that he learned more and more each day. He became a technology fanatic, especially about computers after Kenji let him see his laptop. His obsession with them led to dedication and soon enough he was incredibly capable using them. The bartender saw this and decided to ask his mother to help him get a job at the place she worked, a telecommunications company. The former blood god was able to land in a bottom of the line desk job, gaining quick recognition from his coworkers because how fast he could finish different kind of templates and files, their disorder a small price to pay for the speed. One year after landing on this new world Takashi has now moved to his own apartment, giving his all each day at work alongside Tenma, his boss and mother of his good friend and Shinobu, his expressionless coworker who makes sure he doesn’t cause too much problems around the office. [/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText] He lost count of how many centuries had it been, only knew they were a lot. It all started when a nomadic tribe decided to use their last resort. Finally cornered by the people looking for their heads the tribe elders knew that their next morning would also be their last unless they went through with the grim plan. During the night the decision was taken and put into motion, the elderly and the sick were to be sacrificed, their blood and hearts gathered in a huge iron cooking pot. As soon as a single drop spilled from the full pot it all started and in the end no human being in that valley saw the sun rise again. This was the beginning of the cycle, for after running rampant throughout the valley he returned into his iron pot, waiting for the next time enough blood was offered inside those lands. As the ages passed he was summoned time and time again, sometimes it was by cultists, other times it was mages, even heroes paying the price with the blood of criminals in order to rid the land of such evil. They all met the same fate. After being summoned so many times the legends began, about the ancient god of blood sleeping in that valley and how his pact worked, how people would be spared by paying the blood price for the summon and staying out of his way and the horrible different ways he would kill or consume the rest. The legends spoke of the deity as a brutal beast caged in those lands waiting for the day it could break free and kill to its heart content so at a point when the great war was in favor of the divine gods their demonic counterparts decided to free this monster thinking that it would surely join their side. This was the time when his appearance was truly recorded, no more old myths or songs about a dog with seven heads or an anaconda with the wings of a bat for what was summoned by the twisted minions was a short and young man, his hair and eyes crimson like blood itself. His lower half was covered by the red tainted fur of different animals with everything above the waist naked besides the multiple bone decorations that looked like spikes coming out of his body; it was like a monster being held in a human vessel. Both sides were quite surprised with this and even more when the primordial god feasted on the demonic forces sent to release him, revealing himself not as a mad beast but as a sentient being quite content with its current situation. Watching how much the world change between each time he’s summoned is fun, living in this world for countless years must be boring. Waking up each time with unmatched strength and going back to sleep before that power fades away is fun, being free as a much weaker version of himself sounds boring. The iron pot was not only his prison but also his fortress, keeping his power at its peak and granting him safety when it wasn’t. This was his way of life, it had always been and he was content keeping it that way. [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] While Vaalbara has been responsible for the death of many heroes and even a demonic god, when the allies of either think about their enemies his name doesn’t appear on those lists. Despite being dangerous and impossible to control the fact that he’s sealed and only moves around his valley make him less of an enemy and more of a volcanic eruption naïve people or gods walk into. [/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] Hard for a secluded god with no interest in the Great War to have any allies. While he has been summoned many times without much thought put into it over the centuries there have been cultures that have chosen the valley to build their cities and Vaalbara as the god they worship. The deity accepts their offering like he does to everyone else but doesn’t concern himself much if they are wiped out since sooner or later more will come to take their place. Thanks to his protection this cultures are erased by either disease or natural disasters. [/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] Kenji is his first and greatest friend of this world. They used to spend a lot of time together but after leaving the pub and moving to his own place this has changed. They still hang out every now and then. Tenma, Kenji's mother, works as his boss while also treating him like another son. She proudly talks about him to people on other departments. Completely oblivious about Takashi’s mischiefs, either thinking they were caused by someone else or even by herself and her age is taking its toll. Shinobu is the coworker that hangs around with Takashi the most. With her always serious face she makes sure to stop his more violent or problematic ideas. Most people at their office are confused on how the most social or athletic people sooner or later get exhausted by Takashi’s hyperactive pace yet the always calm Shinobu doesn’t seem to mind it that much. [/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

Oddball · Dec 21, 2018

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url( https://i.pinimg.com/736x/1c/fc/c0/1cfcc0d093923c2e0790bff595d124bf--fallout-new-vegas-fallout-.jpg ); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Monty Cristo [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] The Hero of World's End [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] "Reality is oftentimes stranger than fiction... But in the end reality becomes the new norm..." The first thing you would think if you saw Monty sauntering down the streets was "Mummy." A man completely wrapped up in bandadges from head to toe... It's an unnerving sight to be sure... Or perhaps if you can perhaps see a glass half full instead, its pretty weird and funny sight. Monty stands at 6'0" towering over most people, despite his usually hunched back with head sinking lazily into his shoulders, and often strolls around with an awkward gait. He is usually clad in a white shirt, and a police vest which he wears proudly as a badge of his new occupation, giving him a somewhat plain aura. Aside from his curious bandages and his vest the only other notable things about him are his tired bagged eyes that peer out of his bandaged head and his finger tips which remain black and charred from an accident in a time long past. Strangely enough after looking at him for a time, the peculiarity suddenly begins to fade. The uniqueness quickly disappears and then after a time, you're no longer interested in the thin bandaged man looming overhead. For while his appearance seems to scream 'out of the ordinary' his mannerisms and body language quickly disarm any thoughts of ill-intent or malice. All that's left is just what looks to be an unfortunate man. [/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] Contrary to Monty's baffling appearance, the man remains a calm, easy-going, and if a bit endearing to whomever he meets. His sharp wit and charmingly blunt charisma can make him seem almost homely and nostalgic to those who grew up in warmer households. That is to be said however, he is not without his share of awkward quirks... Monty often plays the part of a fool concealing a focused mentality and unshakeable core of logical reasoning underneath his asinine off-hand jokes and wild bombastic gesticulations. It is not a rare sight to see him trying coax a person's true nature out by saying the most outrageous things. His experience can make him hard however, to those he deems to be similiar to him. The man takes himself for a mentor as an unofficial duty attempting to rectify and correct those he sees that stray from the righteous path and will be a harsh judge to those who willingly choose self-destruction against better judgement. His further involvement in long gone troubles from the past also give him an acute sense of awareness for the emotions of others and an almost crippling weakness to 'assisting' despite his own better judgement. Monty's heroic past also denotes a strong sense of will and purpose, which creates an unbreakable will that sometimes translates to him just being a stubborn ass. This also has created an inability to trust others to resolve issues and a mentality for self-sacrifice which he his prone to. Repeated self-destruction and pain has led to him being relatively numb to emotions and can find it hard to relate at times to those he cares about. It can sometimes be described as talking to a machine or a tool if you can see past the intricate and well-crafted persona that fits eeriely together like precision clockwork. Ultimately, Monty is man who has been accustomed to martyrdom. [/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] "Here upon lies the hero, decrepit and broken upon what was meant to be his most glorious hour... The Deities are defeated and the twilight of man has come to an end and a majestic dawn makes its arrival to take the place of the long night... But one of Terra Sancta's most beloved stalwart protectors is now left as dying cinders after a raging fire... We selfish mortals have used up the kindling that was your life to survive the harsh cold of winds under the moonless night, and for that we are eternally thankful." The prophets turned one by one to the burnt man lying on their altars, his face covered with shroud. "We are sorry... So sorry... Would that your life had been kinder... You deserved it, yet we used it up..." They all kneeled before the altar as the lead prophet said a few prayers to whatever god was left would listen. "...We cannot save you. Your life here was come to an end..." Villagers lined up to lay flowers upon the man lying on the altar as men and women lined up to stand vigil against the backdrop of a rising sun. "But Hero of World's End, your story is not yet over." The Lead prophet took off his hood. "There tell tales of a magnificent other world that can save lives on the brink of death... A kind world where violence lies far away, where war is not constant, and children can laugh freely... Would that world make you happy?" They began by lifting his feet and his head hoisting them above the crowd gathered to pay respects to the faceless champion. Countless hands took hold of the body passing it to the next as each head turned to the distorted portal lying at the end of the village. "Perhaps we are just pushing our own selfishness onto you again. But for what you've done, we shall never forget. You deserve happiness because this world will not give unto you any. We only hope that the next world can be kinder." And so with a final heave they threw their hero into the portal as many shed tears . ...That was the start of the Hero's new life on the other side. The body had been thrown into the portal landing right in front of a hospital, there had been no one around to witness the act but it was not long until one nurse found a half-dead man on their doorsteps. It took about a week until the hero found himself awake again inside a new world that bewildered him, lost and confused. It was a strange enigma, the medical staff at the time thought. A foreigner suddenly shows up into the hospital with no traces of an ID or any information on him and with such greivous injuries that indicated the man had survived being engulfed in fire. How strange indeed! For months, no one would come forth to claim the mysterious man who couldn't speak a lick of japanese until one day a Japanese-Christian priest showed up to take the man under his care. Father Kotomine, as it were, brought the former Hero to his church without asking any questions and taught him the Japanese language and more about the world. Wary at first the Hero didn't know what to think about this world, after a few months living like this became normal for him. He excelled in Japanese as he was an excellent learner soon becoming fluent, and then learning other languages such as English, Arabic, Filipino, and French. His curiosity of the world burgeoned into a gross study as he ravenously devoured any information regarding the new world he was in. It was only after half a year upon entering this world he had mastered the essentials he had recieved a nascent interest in literature and had become fascinated in reading many of the classics that this world had to offer. One of them being the Count of Monte Cristo by Alexandre Dumas a french book detailing the life of a good man who was falsely imprisoned and after escaping his bonds became a force of revenge against his conspiritors. The book fascinated him as it detailed the ideas of revenge, justice, power, and later redemption... 'Redemption?' He thought. 'Could I perhaps afford that unto myself?' And soon enough for admiration for this title, he adopted the name Monty Cristo as a playful homage to the book and also to stop curious people from asking his name all the time. Around eleven months later, he had finally become a patrol officer for the police. A goal that he had been pushing and working towards from the very beginning after the priest took him in; a way to repay the kindness this world had shown him and for the fact he hated being in debt to the priest. Unbeknownst to Monty however, achieving such a goal of being an officer of the law would have taken an average person of this world a minimum of five years or more, yet no one questioned his presence during the exams... Perhaps this was the priest's doing? Who knows. But for what its worth, Monty's new life had just begun. [/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText] There was nothing in the books or the official written records of the person called "The Hero of World's End", instead there were but mere whispers amongst the populace caught up in the terrors of the divine and terrible war between the gods and man. It was said that every fight between Heroes, the symbols of Hope for mortals, and Deities the old powers of the world, shook the the very firmament of the earth so much so, that each time a battle was waged, the nearby mortals had always thought that the world was coming to an end. The earth cracked, peaked, and sundered under the weight of massive power being unleashed, and indeed— it appeared as if Terra Sancta's time was coming to an abrupt apocalyptic end soon... "Would there be any world left for us to inherit even if we should win against the Deities!?" Voices shouted and clamored in tumultous discordance one after another. Yet despite for all their gripes, as soon as the aftermath of the great skirmishes came closing in, they had found themselves spared of the devastation, strangely enough. The cause of their ensured survivial they wondered... But when they crept out of their shelters and walls alike, there stood a figure alone amidst the fallen cadavers and the land split twain. A tall silhoutte with battered armor splattered in the blood of both enemies and comrades alike, a tattered cape billowing against cold winds, and mighty sword planted firmly upon the earth where he stood. This sight was seen countless times during the Great War to the lucky villages and towns who have survived. Nobody knew who the nameless knight was, and if he were even human, hero, or deity. It was only known that he had protected the mortals in their time of need. For the only memory of him was burned into the fortunate survivors of those destructive battles that signaled apocalypse was the sight of him standing triumphantly over "The End of the World". No one dared approached the figure, but silent gratitude was thrust upon him in the form of tales and stories that brought hope to the mortal side. "The Hero of World's End." They called him, a nameless mysterious knight that sheltered the defenseless and the weak from the wrath of the gods and their minions. A hero worth the tales that the bards had spun to the masses. It was said that during that time, mothers and fathers told their children to pray not for salvation but wait and hope for the "Hero of World's End" to come to deliver them from oblivion. So had the legend bloomed for the Hero that he achieved near mythical status near end of the war that the tales themselves became immortal and epics were being written symbolizing the tale of human valor and resistance in the time of the Great War. But just who was this Hero? Well, there is one tale that tells that the Hero was just another faceless soldier who enlisted and fought in those battles to protect those dearest to him; the memory of a wife and child engraved into his bones gave him strength. The soldier fought through grueling battle, after grueling battle hoping and praying to whomever would hear him that he should survive long enough to see the smile of his daughter's face on her eighth birthday. That was all he asked for as a soldier who fought even before the Great War against his fellow man. However, when the first disastrous fight between the of the combined might of the mortals and the deities took place, his unit, his home village, and his family were decimated with him being the only one left of the end of his entire world. It was then when the Hero vowed to never lose anything again and took up arms against the gods as a lone soldier, turned champion. Some variations of the tale say the soldier willingly decided to forsake his village instead for the ensured survival of an important capital city. More variations say that the soldier turned Hero was a product of the people's hopes and dreams formed from the despair and ruin that they endured. Others simply doubt the Hero existed at all. But what stood at the end of the legend was sacrifice and loss, and the hope and heartache that one feels when trying to build anew. [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] [/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] [/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] Odd friendship with Nakamura who is his fellow church freeloader. [/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

Pilgrim59 · Dec 21, 2018

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url( https://i.imgur.com/1kaCFWt.jpg ); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Yuji Kuroda [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] Otto, The White Wolf [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] Yuji is an average young man, whose presence is voided among the crowd, like a gray man. He stands at 5 ft. 9 in. (175cm), and has a tendency to slouch forward. Yuji's appearance resembles the studious individuals that spend most of their time inside, and lack the grace of an inviting host. As a result of his self-imposed confinement, his skin is paler than most. Despite his impressions of a shut-in, his rolled sleeves showcase the testament of his earnest exercise and work. Yuji's slender form is a result of his late-night hobbies, accompanied by his finite meals. While the man is well-built like most of his age, his nonchalant gestures and careful pacing shows an older gentleman in the guise of a teenager, especially when he is usually seen in his immaculate white shirt and tie. Yuji's uncommon taste for casual apparels gives him a gentleman-like impression to many. His silky white hair is like a waterfall of clouds that is fashionably secured by a black one-point ribbon. The foreign amber glints of his drowsy eyes keep strangers at bay. However, in his occasional oblivious glare into the distance, Yuji gives off an earnest aura of a lax individual. To those that wishes to address him, the first contact are always met with an apathetic tilt of his head, accompanied by his prolonged stare into their eyes. Despite his awkward scrutiny of strangers and tendency for disassociation, the lingering aroma of coffee and Indian spices on his garment generally puts his peers at ease. [/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] General Description: Yuji is a reserved and quiet personnel of interest. He tends to let his actions speak for him, and the foreseen aftermath that follows. As a man of varied interests, Yuji generally dwells within his own thoughts and only address others when needed, albeit too honest at times. While Yuji is able to read the mood of others, the countless hours of spending his pastimes in solitude only serve to shape his indiscretion in the arts of human relations. Although his initial demeanor may be neglectful or often stoic, the man can show much affection for those around him, albeit undisclosed via his unspoken feelings. While he is capable of martial engagements, Yuji tends to settle the matter at hand with words before committing himself to a fight. He is generally dismissive of subjugation by force or will, and prefers the strength of individual liberty. Notable Habits: Yuji is commonly drawn to the sight of flowers and plants like a bee, as well as books, while easily rattled by loud noises. He is less likely to be seen in a busy district and more likely to be found at night where the noises would not unnerve his peripheral awareness. As far as insecurities are concerned, Yuji dislikes riding the "iron serpent" (trains) and has a considerable contempt for "light magic" (flash cameras). Yuji's delayed, and often times passive reactions are to conceal the wounds that he had sustained prior to arriving on Earth. As such, Yuji is less likely to extend or raise his arm above his head. The man has a small bonsai pot in his room, of which he has taken the liberty to take care of daily. He keeps a close eye on it as if it was his sacred weapon, and attends to it with great detail. He often talks about it with his colleagues and close acquaintances. Yuji is considered a clean freak by many, always micromanaging his shared apartment's conditions, keeping it immaculate. This is also applicable at work, as he tends to be behind the counter, keeping a close eye on any spots he finds. Flaws: While Yuji is a man of reason and logic, he can and will assert his own ideals when the circumstances prompted him to do so. He is solemn in his behaviors and generally has a serious facade, making him less tactful when it comes to confronting with issues regarding emotions. This goes hand-in-hand with his control-freak tendencies when it comes to being hygienic and neat, marking his hypocrisy when it comes to individual liberties. His stoic ways keeps him from impractical practices and as such, Yuji prefers to be practical and follows most things by the book only when needed, while prioritizing the means over the ends. This makes him passive in most situation, calculating the risks and gains, and does not follow up on initiatives prompted by his peers until he deems it necessary. But despite his calm and collected attitude, he suffers from complex thoughts and is constantly in conflict internally. He takes little pride in his work, and is generally dismissive of compliments, making him a semi-cynical person. Although he is a good-nature person, he sacrifices his own needs for the common cause, making him a martyrdom-driven character. Although Yuji is given his humanity again, he has yet to cope with the sudden loss of his powers, making him quite vulnerable when his weaknesses are addressed. Despite his justification for common sense, Yuji is wary of deities as a whole, and will display extreme erratic emotions when under duress or stress. [/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] Upon his arrival, the White Wolf was met by a multitude of outlandish folks that harassed him with light magic (flashes from cameras) everywhere he went, due to his apparel and unrecognizable language. From the awe-inspiring sight of glass castles (skyscrapers) to the fast moving iron serpents (trains) that circled above him was overwhelming. It would take a few hours for the knight to simply navigate his way out of a grocery store, accompanied by the numerous distractions that came his way. Being an avid reader that he was, the knight took it upon himself to spend days after days deciphering the language, before he was able to communicate with others, albeit similar to a foreigner with a broken accent. As he continued his exploration of the never-ending city, the White Wolf had felt the dwindling surge of power inside of him since his arrival in the strange new world, and had to rely on his physical strength to pull through days on end without food, before ultimately collapsing out of exhaustion. He was then taken in by a friendly homeless person in the suburbs, where he spent a few months recycling trash for currencies. Even in a world that was vastly different from Terra Sancta, the societal hierarchy that segregated the rich from the poor was no different from that of the old world. During his time with the homeless community, the destitute knight have acquired much knowledge regarding the new world's principles and regulations. While the studious man became acquainted with his new life, he later re-affirmed his objective to make contact and neutralize the deities. But before he could set out on his journey, Otto established a list of things that he must accomplish before all else, in order to survive. He would then adopt the name Yuji Kuroda soon after his leave from the homeless shelter. Before long, Yuji had found a small cafe to work at, as he continues to frequent the bookstores and public libraries to obtain more knowledge. Although he was reluctant at first, Yuji ended up showing fondness for brewing coffee and the skills that came with it. Caught up in the trance, the White Wolf eventually relinquish his main objective altogether. As he tries to get his life together, a few familiar faces would begin to surface. For better or for worse, Yuji's life on Earth has just begun. [/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div]

[div class=mainText]

Terra Sancta Chronicles: The White Wolf

Hailing from a small rural village, Otto spent most of his life on the farm, and grew up in a mundane environment where tales of gods and epic battles were non-existent. While most were content with their life, Otto had regarded it as an uneventful chapter of his life. One day, he decided to run off and enlist in the army to see the outside world. Much to his disdain upon signing up, the impetuous farmer found himself tossed into the fires of combat, of which had dramatically changed his point of view over the course of his service. The exhaustion, the sight of blood and death accompanied him as he slowly redacted his faith in the gods that he had once believed in for deliverance. When tragedy befell his unit, the sole survivor of the carnage found himself in doubt of his cause. He was the only one that made it out, albeit sustaining a laceration to his shoulder. What had sparked his ideals of adventures and fighting for the cause of righteousness was slowly fading, as the young soldier dragged himself into the nearby ruins. It was in his dying hours, that the young patriot stumbled upon a destroyed library, laden with written knowledge of those that came before him. Unbeknownst to him, Otto would find his powers behind the pages of his new-found intrigues. As he accept his fate, Otto found no harm in flipping through an old book that he had found laying in front of him. The words written was comforting to him, as he continued to follow the story keenly, immersing himself in the engaging story. The tales of heroes and the immersive world that was simply scribbled down kept him awake, shying away from passing out with all his might. His old past had caught up with him, reminding him of a time when he would spend countless hours within his village's town hall reading and drowning himself in the immersions that the books would tell. He would eventually come across a distinct book that saves his life by mere chance. A magical grimoire, as some would call it, had healed his wounds. Over the course of his time in the library, Otto would obtain knowledge that assuredly taught him many deals of life and ultimately saves him from his loss of faith - in both himself and the cause of humanity. Otto came to a realization of his second chance at life, and reflected on it. Initial guilt and regret sets in, but as he ponders upon his resurrection, Otto looked beyond the broken glasses and stones, at the sight of the littered battlefield in the background. It was in the forgotten ruins of the ancient library, that he develops his intrigue in books, and re-affirmed his cause to continue the fight. A year would pass, before the man emerged from the ruined library. Over the long course of his refuge in the library, Otto had read all of the books that he could find, while his personal training had rewarded him mentally and physically. He eventually returned to the capital city and re-enlisted in the army as a simple foot soldier, when he caught news of an upcoming war that has yet to be waged. As Otto rejoined the ranks for the war that was to come between the coalition of heroes and the gods, he would go on to prove himself in battle. Putting his new found powers to the test, Otto braced himself for the storm and quickly rose through the ranks. He eventually became recognized by many throughout the years and established a name for himself as "The White Wolf" due to his immaculate white armor and wolf-like helmet. As the war rages on, the White Wolf had made friends and quickly found himself surrounded by a company of brave individuals, many of whom would see their fateful arrival in a new world, hot on the heels of the exiled Deities and their servants. [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] TBD [/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] Allies: Ban Gorudo (Ban):

ChazGhost A familiar face among strangers, Ban and Yuji fought side by side against the deities back in Terra Sancta. Although their lifestyle and motivations are disparate, the two share a common cause, a bond of camaraderie, and apartment rents. [/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] Moonbucks Coffee Shop: Yuki Narishima (Yunaseth):

The Fluffiest Floof Regular customer to his coffee shop, Yuki and Yuji are estranged acquaintances with a common understanding when it comes to books. While the two aren't close, they have developed a distant, but lax emotional space between themselves. Yuji usually borrows unused books from her, and have come to memorize her favorite drink orders. Her origins from Terra Sancta is unknown to him. Hikaru Makoto (Amon):

labyrinthine Hikaru is Yuji's co-worker. The two are generally on good terms, sharing only work-related conversations among them. Yuji often looks out for Hikaru and his colleagues, seeing to their job performances. Yuichiro Kuramoto (Calbian):

Skylord Nexus Yuji's other colleague. The two has a little competition between them at work, albeit mostly surrounding Yuki. Yuji keep tabs Yuichiro's work and is wary of him. (TBD) [/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

Skylord Nexus · Dec 21, 2018

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url( https://i.postimg.cc/QxSgG015/Akise-Aru-full-1038235.jpg ); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Yuichiro Kuramoto [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] Calbian, The Architect [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] Yuu stands at roughly 5 foot 6 with pale skin. His eyes are a piercing crimson colour which, along with his skin and messy white hair, makes him look like a vampire. This fact is only accentuated by his handsomeness, which attracts the eyes of women. Despite being much older, the ex-god looks to be in his late teens to early twenties. He also has a piercing in his left ear, an ornate black cross which he always has on and seems to have an emotional connection to. Yuu's face is not his only asset however, as his somewhat toned body mixed with his occasionally flirtatious attitude truly makes his a teenage heart-throb. The god finds some amusement in this as it provides him a pleasant change of pace from how mortals reacted to him in Terra Sancta. He can always be found wearing the same outfit: a plane, white shirt, a black tie left loose around his neck, and a light blue jacket over them, along with black trousers and shoes. This clothing choice cumulates to create a look that would make most people think Yuu was a student at the local high school, which can sometimes lead to confusion about his age. [/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] Yuichiro has a very flamboyant personality, and will tend to use a lot of arm gestures while talking. This attitude can be both a blessing and a curse for him however, as he will offten hide negative emotions behind jokes and witty remarks. This results in him bottling his emotions up instead of talking to people about it. When talking with someone alone Yuu will often circle them, much like a vulture would; this comes from a habit he developed whilest he was a god, he would often circle mortals and invade their personal space, using words and action to strike fear into them before ridding himself of them, a job he found himself doing more of as he began to lose control of the populous. This did however help him become extremely skilled at reading people, most specifically, what they cared about most, as well as what made them the most scared. Despite having good understanding of people, as well as a flamboyate attitue, Yuu is suprisingly awkward in social situations which involve lots of people. This creates anxiety within him which causes his emotions to act up, this in turn seems to bolster his personality even further causing him to begin acting purely on impulse. An unfortunate combination with this, is the gods lack of morals; this lacking of a moral compass generally results in Yuu failing to understand other peoples emotions, or even failing to see people as people at all. This generally makes Yuu a master of saying the wrong thing, and the wrong time. This isn't help by the fact that Yuu struggles to understand the people of Earth due to the differences between them, and the people of Terra Sancta. This is due to the different views mortals had of him in the two worlds; on Terra the mortals all feared and respected him due to his great power and vast intellect, however on Earth it was different. On Earth he was just like everyone else, not powerful, and whilst still highly intelligent, most of the knowledge applied to this new world which makes the god feel inadequate and useless. A positive side of Yuu's short comings however, is that his mind set causes him to treat all people equally, for better or for worse, as he sees them all as equally beneath him. This being said, the god can recognise superior traits, or as he would say "usefulness" within people. Yuu is also genuinely kind to people he likes and will stand with them to the best of his ability. Yuu's greatest fear is not being in control, this comes from an eternity of having unlimited control and being able to predict his enemies moves. Not being in control can have a similar effect to how the god reacts in a crowd, he will begin to act purely of impulse, without giving the consequences any thought. This can cause him to act recklessly and put himself and others in danger. [/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] When Calbian arrived on Earth he had been immediately surpirsed by his surroundings; tall buildings raising high with neon lights and colourful signs, and yet also so bland and devoid of life. As a creator of great monuments and buildings he had set out to correct this horrendous sight in the only way he knew how: to destroy it all, and rebuild from the ashes. To his dismay however, he was not able to accomplish this task, he would try again and again, accomplishing nothing but the judgemental stares of those around him. He would then proceed to skulk off to a coffee shop where he discovered a wonderous and energising elixir named coffee. The god would go on to spend most of the day in the coffee shop, and whilst he was unable to purchase anything because of something called 'money' he found a strange fascination with watching the mortals go about their business. What was most perplexing to him however was the different mood those mortals seemed to have, they all seemed much happier than his mortals back on Terra Sancta. Through these observations, Calbian was able to ascertain some useful information, Firstly: He realised that he was going to need money to buy things instead of just taking them. Secondly: He was going to need a job, which in turn required some form of identification. Finally: He seemed to be very popular with females; it wasn't important, it just inflated his ego. Calbian, or rather Yuichiro Kuramoto now, would go on to find employment in the small coffee shop he had spent his first mortal day in. By all accounts Yuu was an exemplary worker, good with people and well organised, in fact the shop saw a slight increase in female customers since Yuu had began work. He now lived in the same home as Yunaseth, or as she was now known: Yuki, helping to pay for the accommodation. In truth the whole situation had turned out quite well, he had a place to stay, and had money he could save, and on top of that, he defiantly found Yuki to be one of the more agreeable gods from Terra Sancta. [/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText] Calbian had most certainly earned his place as a demonic god in Terra Sancta, the people feared his wrath, yet were equally drawn in my his honeyed words and silver tongue. There was no doubt however, that his lands were spectacular, great monuments painting the landscape, dwarfed only by the exquisite, towering cities and castles which rose like mountains from the ground. His people however were not so thrilled to live in such magnificent works of art, as their creator was cruel and fickle, and when he had become bored of his art, he would destroy it, along with everyone inside. Those who survived would then be rounded up to add to the work force of the next monument their God's mind have conceived. Things were different from Calbians' view however; he was merely using the tools at his disposal to accomplish his goals, he was the sculptor, and the mortals his chisel, and in reality he believed he did all the hard work. The mortals would construct what he wished, and he would use his power to 'complete' it, whether that meant creating towering statues, or intricate murals. He was also a 'benevolent' ruler, and allowed the mortals to live in these exquisite works of art; he would even allow the hardest worker and their family to come and live within Elysium, his great, perfect, floating City. Though the god was not just an artist, he was also a collector or many things, from weapons and magical artefacts, to statues and clothing, anything remotely artisan. He would use these to adorn Elysium, or rather his grand citadel which towered in the centre of the city. [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] Will be added when sorted. [/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] Will be added when sorted. [/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] Will be added when sorted. [/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

The Fluffiest Floof · Dec 22, 2018

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://srv2.imgonline.com.ua/result_img/imgonline-com-ua-twotoone-xta9OIijIr4D.jpg); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Iyama Midori [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] Maelia, the Banner of Silver [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] The first thing one notices about Midori is probably her size. She is rather tall for a woman and even more so for an asian. Standing at 5'8ft (176 cm) she is quite a lot above the average. But not only her size makes her stand out. The woman does not look asian at all, her features appear a lot more european. Her skin is pale and looks almost like porcellain. Her round face is complimented by her long, white hair, that reaches down to her back. Midori over all gives of a very elegant aura, but at the same time manages to appear incredibly casual and for some reason tired almost all the time. That elegance she gives off comes mostly from how she is always very groomed in appearance and has a very special kind of style when it comes to her clothing. It is usually dresses, that are a bit old-school, but not old enough to be outdated. Midori stands very straight and confident. She radiates a certain self-confidence and doesnt seem like the person to back down from something she means or believes in. At the same time, Midori manages to seem tired at every given moment. Mostly due to the fact that she keeps yawning. A lot. It almost seems chronical with her. [/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] Midori is an incredibly complex person. She has many parts that form her personality and that come into play either single or in combination to form this womans unique ways of responding to situations. That makes her very hard to predict, because she could respond to the same situation in different ways. There are a few things however, that remain consistent with her. The first to be mentioned here is her tiredness. Midori is seemingly always tired and can sleep in almost any situation, no matter where she is or how loud it is. It does not matter how much she has slept the last night or if she has done anything exhausting. If she exists, she is tired. Further, somewhat going along with that, Midori is lazy. While she doesnt slack off during her work, she is still a person to do as little work as possible to achieve a goal. And at home, she doesnt even bother with most things. She is the kind of person to eat soup with a fork, if that means getting around doing the dishes. Because of that, Midori actively tries to carry as little responsibilities as she can. Only if something is very important to her, she actually puts more effort into things than needed to barely be able to get it. Besides those two core parts of her, there are many facettes that dont always get to show. For example, Midori is a person that can take on a leading role very well and is able to radiate of a lot of authority. Most of the time however, that just seems like too much work and she doesnt really use that ability. That is the case for many of her talents, however. Oftenly, Midori is a very polite woman and tries to be kind to everyone, tries to make people smile. She seems to take most things light and if something bothers her, she seems to not give a lot of interest to it and shrug it off. Bad moods are rare to be seen with Midori. If something makes her sad or angry, she just pretends not to care. [/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] Midori, when first coming to this new world, was against expectation, relieved. While Midori was giving her fight on Terra Sancta her all, it was really exhausting and a huge load of responsibility, that the woman would´ve rather not carried. And with getting into a new world that she didnt know and where nobody knew her, she was rid of those responsibilities. Midori never intended on finding a way back to her original world. Due to the fact she was planning to get a new life in this world, Midori actually put effort into getting settled. In quick succession she got herself an ID, pretending to be a political refugee that had no papers. Then, she got herself a job as waitress in a restaurant that, while not being the most sophisticated place in the world, matched the elegance she radiated off. With the money coming in, an apartment, small but enough for the woman alone, was her next step.. When she had those things done, she just lived. Without any further goals, she just lived every day and enjoyed finally being as free as a being could be here. That was before she found her two new addictions, that would soon consume her time and her money. Energy drinks against her tiredness and video games. Once Midori had found those two things, she had found her cause. She spent all of her free time playing videogames and drank almost only energy drinks, that being her main source of liquid. Like that, most of her days went over. Midori made quite a few contacts with people through her gaming hobby. However, those remained online contacts. In real life, she had few relationships of any kind, besides coworkers. [/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText] Many men and women fought brave in the war against the gods. Many left their lives, many faced dire situations that seemed impossible to make it out off alive. But the people never gave up, kept fighting. And that was due to those heroes, that stood in the front rows, that motivated the people with their heroic presence and the name they made for themselves. And such a person was Maelia. The knight fought with the fire of dedication. She was known to be one of the bravest commanders humanity had ever found. With her armor of white and silver and the trusty blade, that could be recognized from far away, the woman was always at the very front of the frontier, acting not only as a machine of slaughter, but a beacon of hope to those around her. Many tales exist of her, many of them putting her in situations that no mortal could win and her still coming out victorious. Maelia never clarified which stories are true and which are not. That mystery only strengthened her legend and the power that people could draw from her presence alone. What was definetly true was her policy of "nobody is left behind". If she took the responsibility for men, she would carry it to her end and beyond. [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] [/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] [/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] [/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

The Hero · Dec 22, 2018

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url( https://i.imgur.com/PHEmH5B.png ); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Ito Mikazuchi [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] Generational Deity, Ferrum [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] As one stares upon Ito's visage, an aura of regality enthralls their senses, lulling them into subservience. Her irises twinkle with the color of the aristocracy, a rich, emerald green. The hue radiates with intelligence and mirth, a hope unperverted by the entanglement of lust, of avarice, and of envy. There is a surprising innocence which compels one to protect her. For who would desire the extinguishment of youth’s innocence? Yet with the simple glint of the eye, one’s veins run cold. The rich emerald turns into an ancient forest. There is something dangerous about how she looks at you. The forest’s roots slowly crawl around your legs, forcing you to your knees. For you are standing upon the paramount of pedigree, and you dare to stand above her. Now that you are on your knees, her initial height of 5’0 (~154cm) seems far above average. There are no weaknesses or flaws in her posture. Her shoulders are sturdy enough to support the lives of countless people. Her back was straight enough to resist all corruption. Her arms were gently ready at her sides to assist the needy. Her legs were rooted in tradition, upholding the truth and justice. Not a speck of dirt could be found on her clothing which commonly consisted of a three-piece suit. All gestures and actions permeated with order. You try staring back into her eyes, but they’re obscured by her blonde hair, shining with a platinum glint. This glint runs down the sides of her face, yet eventually flows into a red chain of beads that forms a ponytail. Even something as simple as a ponytail was enhanced by her aura and transformed into a lion’s mane. So as you take her whole appearance with your mortal eyes, you can’t help but feel inferior to her. But then the glint disappears, you feel the strength flow back into your knees, and the woman in front of you shrinks while a smirk on her face grows. [/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] Ito has a rather conflicted nature similar to a fractured personality yet still distinctly her. There are times when one could swear that she was bipolar or insane, but she is perfectly deliberate in all her actions. Being the leader of a kingdom, she has gained the tact to outmaneuver the gluttonous aristocracy and appease the volatile peasants; and, one of the best ways to outmaneuver an individual is to unbalance them and strike. This is one of the reasons why she may seem volatile in her personality. One side of her is the epitome of romanticized, medieval chivalry. The untouchable sense of honor and purity reserved for paladins. The sense of warmth from heartiness and boisterousness reserved for Arthur’s knights. The loving sense of consideration and fealty reserved for bards’ songs. All of these factors converge to attract females from all walks of life, making her a popular request for women with money. Then, she has a personality more like a typical woman who wasn’t allowed to be a child. On her days off, she can be commonly seen skipping down the streets of Tokyo in a whimsical fashion. When she isn’t training, she’s found tasting all the new foods of the foreign world. She especially likes this Chinese food stand that changes location every day. It’s like a game trying to find it. But beneath her capricious behavior, she is constantly in a state of anxiety. Her very being relied on finding and subduing Fervor’s Seeker. [/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] Being from a line of royalty and raised to be a leader, Ito was able to adapt quite well to the new world around her. Her foreign look with her blonde hair and green eyes actually benefitted her as people were more likely to speak slowly or assist her. They most likely thought that she was an odd looking tourist. Learning the language wasn’t too difficult, Ito was used to learning new languages for when she had to go on diplomatic missions. But, being a foreigner with no official accolades to put on her resume made finding legal work quite difficult. Her search for work took her to the more risque parts of Japan called the red light district. She was surrounded by a den of sin; but if she needed to get her hands dirty to find Yama, she will do anything. Her foreign, androgynous looks quickly attracted countless recruiters, but she turned many of them down. They looked at her like prey which she despised. It wasn’t until an amateur recruiter with a slight stutter came up to her did she finally agree to try out being a host. The former goddess was actually quite good at being a host. Apparently many women enjoyed her youthful looks and wanted to pamper her in return for compliments and other services. She of course never performed any explicit services, but her behavior was quite odd even to herself. Finally, she had the capital to search for Yama in this world. [/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText] The tale of this god dates back to the infancy of the Fervor Seeker's presence. Already seized with lethargy, he planned the upmost exhilarating idea: his own near-death experience. But being so young, he hadn't encountered any fearsome foes capable enough to give him that thrill. So, he decided to create his own enemy. Choosing an obscure, simple tribe, the demonic god sowed the seeds of his demise. It was quite a simple process in the end but took some thought. Humans had the highest growth potential among all beings that the god knew of, but they suffered from terribly short lifespans. Of course, it wouldn't be too hard to simply extend the lifespan of one mortal, but that would be destroying the beauty of mortality. Like a firework, humanity was meant to soar and burn with intense, scorching heat. They were meant to reach towards the heavens but fall within fingertips' width away. Fervor's Seeker wanted to preserve the beauty in futility while also allowing one to grow without bounds. After some contemplation, a decision was made. The demonic god would grant the tribe's chief a fraction of his strength and a promise of prosperity. In return, the chief would focus solely on fostering their newfound godhood and guarantee at least one child of the same blood. Then, as the new god stagnated and staled, ÆRUGO would reap what he had sowed. Extracting the power and experience from their lifeless form, he would implant it into their child to start anew. This would result in an endless cycle of inheritance with the end result being the near death of Fervor's seeker. Tribes turned to villages, villages to towns, towns to cities, and cities to kingdoms. Knowledge was gained, rewritten and lost with time. Cultures were lost to the ages or absorbed into another. Yet, there was a bloodline that never wavered in its progress. Steadily, sometimes exponentially and sometimes logarithmically, the power that started as a fraction grew into its own identity. Now, we come to the current reincarnation of Ferrum. The handling of the transfer was done abnormally cruelly this time around. One could attribute this by the slow progress of the Seeker's plans, but he was in a foul mood. The next generation was just born when he approached the current king, an especially poor performing individual. Truly a valiant effort was made to live long enough to see his daughter grow up, but he was a failure for a reason. His death was swift, physically painless, and brought no joy to the Seeker. The king was just another step to a process he was getting tired with. Extracting the essence for the final time, since it has become so foreign that it would be difficult to manipulate it after a successful generation, he forced it into the newborn child. If the child survived, she would already be greater than her ancestors; and if she died, it would be of no consequence to Fervor's Seeker. He was growing tired of this toy and yearned for a new one. Well, the child did survive and with an intense hatred for ÆRUGO. She was never given a proper name and was revered as Ferrum since she could walk, and she could walk quite early in her life. As soon as the newborn child recovered from the influx of strength, she could walk and speak. This progress did not stop there. She learned and evolved constantly from day one; so that when the Great War came, she was as strong and possibly stronger than the engorged ÆRUGO. She would never find out. When she followed the hero to the campaign lead by ÆRUGO, he was absent. It was the first time she shed tears, for it felt that everything she was raised for was torn from her hands. In her despair, she killed countless people in a blind rage and was banished from her kingdom. This just allowed her to continue the hunt for the Seeker since his body was unaccounted for after the war. Eventually, she tracked him down to a remote village but was once again too late. She watched as his body was absorbed into the ground by an odd portal. Praying to some abstract being, the god hoped with all her being to be sent to the same place as ÆRUGO, so that she may kill him and bring the story to a close. [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] [/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] [/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] [/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

Lexielai · Dec 22, 2018

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://i.imgur.com/si4u7nN.jpg); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Kobayashi Ryota [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] Satan [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] “Who is this bored-looking guy? And why is he just staring off into space? Is he lost or something?” That’s the impression most people get of Ryota Kobayashi, a young man with a flawlessly lazy appearance. His hair is left in a messy heap, some parts sticking out in places, as if he has never heard of a brush. The same could be said for his clothes, such as his half-assed tie and eternally unbuttoned collar. More bizarrely, his eyes are a mismatched pair of gold and teal. Those two colors are already a rarity, so their combination is a striking mix. They are often the quality which draws onlookers to spare him a second glance, and thereupon be ensnared by his strangely confident presence. Despite owning a completely average look, Ryota stands with a tall posture and moves with authority. Occasionally, he’s even been mistaken as an owner or manager simply because of the confidence in his step, as if all the world is held within his hand. It is a confidence which reminds people of a king. But that would be ridiculous—no king would dress so haphazardly. It must just be your imagination. [/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] Ryota is an earnest, straightforward young man with a dry sense of humor. Although his temper sometimes runs hot, he generally has a calm, even nonchalant disposition. Ryota is often seen as lazy or carefree because of his seemingly-indifferent attitude and apathy towards outward appearances, but he is actually driven by intense ambition. There was once a time when Ryota called himself a Demon King, and fostered ambitions of world domination. Although he no longer holds his title, his lust and pride continue to burn bright. His experience is also the source of the inner confidence which reverberates through his body, visible in every step he makes. It, however, has grown more and more fragile. Ryota once took pride in his strength and influence, rivalling or surpassing that of any of his contemporaries. Now those are gone, and all that’s left are the shattered shards of the dream that he continues clinging onto. Now he instead sources his confidence in his work ethic, and exemplary performance in his career. Ryota considers his conquest of the workforce as baby steps towards his eventual return to power. In the meantime, he has found himself growing fond of the little achievements he has made since venturing into this new world. However, Ryota sometimes contemplates whether or not he is really achieving anything. It is a difficult thought, and one that stings, but it is possible that he is simply stuck in the past and chasing an impossible dream. Ryota tries to evaluate such feelings seriously, even if they are unpleasant, because he aims to be straightforward with both other people and himself. The origins of this personal philosophy lay in his fall. In Terra Sancta, his manipulations and lies came back to bite him, while the earnest feelings of his enemies became strong enough to defeat him. As such, in an act of surprising humility, Ryota decided to try to be honest with his feelings and with other people in order to emulate the Heroes who proved superior. It is difficult, sometimes, to confront such ephemeral things so readily; to handle the shame and humiliation of admitting defeat. Yet all the same, his demonic pride pushes him to see his commitments through. Even if he falls back on old habits sometimes, even if he stumbles, Ryota earnestly desires to become someone stronger—and if he has to motivate himself with dreams of reclaiming his throne, then so be it. [/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] The first few months after Satan’s arrival were some of the most difficult that he had experienced in his long life. The influence, magic, and power he commanded as the Demon King had fled him, leaving a weak mortal vessel behind. It was all he could manage to preserve the tiny speck of magical energy that he carried with him, yet even that threatened to disperse at any moment. For the first time in a long time, ever since he was a mere minion, Satan had nothing. Nothing except his lingering dreams and the burning spirit to reclaim the world that rightfully belonged to him. Sitting one night upon the roof, he pondered his present circumstances and the events which led to them. He had been humiliated and beaten, by a mortal nonetheless. All his plans, schemes, and years of hard work had been crushed and swept away in less than a year, as if they had never been. It stung. It really did. Part of him still cursed the meddling Heroes who had gotten in the way, but another part had learned something from weeks of toil as an ordinary human. To his surprise, he began enjoying the little accomplishments he made and the paychecks he received for his effort. He began to understand the motivations and goals which drove mortals, however minor they were compared to his lofty ambitions. In the end, they were not so different from demons. Both sought to find a place in their society and worked hard to achieve their dreams. They each had philosophies and individuals they cared for; desires and quirks and darker qualities. It suddenly struck him that he had blinded himself to the mortals who he had lorded over, never once considering them as anything other than objects or tools. He began wondering: did he fall because of their meddling? Or did the fault lie with himself? No matter the reality, choosing to believe the latter was at least something he could act on. The earnest passions of his mortal enemies had proved more powerful than he could have ever dreamed, enough to even rival him. Had he really chosen the correct path? Was his way—the way of the devil—really right? Pondering these things, Satan chose to live a new way of life. Thus, Kobayashi Ryota was born. [/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText] The Demon King. There was no entity whose name was more whispered than that of the Devil, the Demon King who commanded the most fearsome demon army in Terra Sancta. Once a small and pathetic minion, he had clawed and manipulated his way into power until he earned the name Satan—the title passed on to the lord of demonkind. He dreamed of a world where demons did not need to live in fear of angels; where mortals would attend to their every whim. It was a paradise for his people, one only imaginable by the naive. Nonetheless, bit by bit, it became reality. First, he would do what no demon had ever done before: unite the squabbling domains of demonkind. Cunning and ruthless, he dismantled the powers of his enemies and forced their subjugation under his rule. With each new Demon God he defeated and recruited, his army and influence grew. Soon enough, Satan became the master of Hell. And so his lust and ambition turned towards the crown jewel of Terra Sancta, the ideal home for his people. He invaded without warning, and started a Great War. For many years, the Divine Gods pushed back against his advance, but his ambitions were relentless. Bit by bit, they began to lose territory and mortal followers. Over many years, the Divine Gods were eventually forced onto the backfoot and began to retreat themselves. His victory was nigh. That was when She arrived. They called her a Hero, a Queen of Flames. He believed that the fall of his Demon General in the West to this so-called Hero was merely a fluke. After all, his war had been prolonged for many years, and was full of unpredictable variables. It was inevitable that there would be some setbacks along the way. Satan regretted not taking her, or her heroic allies, more seriously after his armies to the North and South also fell. Now he was on the defensive, and running out of time. With one final push, he and his remaining Demon Generals were confronted by the Heroes at his castle, and defeated. He fled, vowing to return with an even greater force and conquer Terra Sancta. Even drifting through time and space, sent flying into a strange realm, his final cry rang throughout Terra Sancta, drowned out by the celebratory cheers of the people who had defeated the tyrant once and for all. [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] The Queen of Flames was one of Satan’s most prominent adversaries, and one of the heroic party who ultimately defeated him at his last stand. [/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] ÆRUGO was one of Satan’s trusted advisors and Demon Generals, and his dedicated strategist. [/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] Satan has acquainted himself with many of his former demon allies or demon contemporaries in this new realm. [/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

Acethekidd · Dec 23, 2018

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url( https://i.pinimg.com/originals/73/1b/d4/731bd46934c345169a3be8403817815c.jpg ); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Mirai Asako [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] Anemone, The Mistress Of Nature [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] Candy brown eyes, long soft Auburn hair, and peachy pale skin with a consistent blush on both of her flat cheeks are the features that really stand out when you first meet Mirai. She actually can't tame her Auburn colored hair sometimes, so she tends to keep it up in the ponytail and toss a simple little hair piece in her hair from time to time. As for her pretty brown, they always seem to sparkle whenever she's in a good mood, but will lose their color when she's really upset about something. Another thing that stands out about Mirai is her small size. The Goddess is a shorty, standing at grand 5'3 in height. Thanks to her size,she's often picked on and teased, being a such an easy target and all. Mirai is also super slight and almost anyone can lift her without and problem at all. Despite being so short, her body is overall good. No major scars or battle wounds. Very fit,very well overall As for her clothing, She wears simple cloths. Her signature outfit is a tan/yellowish shirt with with a light pink bow, red/orange thin long sleeve shirt, a dark grey/blue skirt with light blue stripes, pink shoes and long dark grey socks. Mirai prefers to wear skirts and simple shirts, but she will wear jeans or shorts. She doesn't dress like a complete girly girl, a few cute little graphic t-shirts from time to time. When she's out and about, she'll carry a little cross-body purse with her. Mirai doesn't really do accessories. A hair clip, maybe a necklace and bracelet...nothing to flashy [/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] Mirai is a really timid and clumsy girl, who can easily get spooked by almost anything. There are tims when she become a little(more like very shy) and easly will break under pressure when she's around to many people. Mirai tries her best to make a first impression , but often fail. Whenever she feel like she's about to crack, Mirai try to excuse her self so she can chill out. Despite her timid nature Mirai one of the sweetest people around...However, she's not really not the best when it comes to standing up for her self Thats right, she'll let people run over her. Mirai prefers if no one is angry with her, besides, one of her biggest policies is always keep others happy and help them if needed,even if that means being stepped on so be it...she doesn't really have the confidence to fight back since shes more of a lover then a fighter. She haves to the power to, but shes kinda afraid of her new found powers. Maybe if Mirai meets the right person, she'll gain a little more confidence to fight for her self It's true that she's shy and all, but she is most defiantly fit to be the mistress of nature...kinda. Mirai is caring, kind, and humble, smart, but there are some things she does need to work on. One of those things is her self esteem Overall, Mirai is a nice girl to get know and since she arrived on earth, she started to come out her shell a little more. She also accepted who she became and pushes her self to become a better person. Thankfully Mirai is more bubbly and active [/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] It was a strange arrival. The new appointed goddess of nature opened her eyes when she felt the gentle touch of her white tiger (now cat companion) Atlas. Mirai was surprised to see that she was laying in a bed of hay located in a dark room it seem. The sound of different kinds of animals could be heard and their smell rushed through nostrils. Mirai had questioned Atlas about their whereabouts, but he was just as confused she Then, a bright light appeared a few feet in front her and revealed a young brown haired boy. At first he didn't see her, but after seeing the horses gathered, he deiced to go check out the situation and saw that Mirai was talking to the animals? It was odd, but he deiced to question Mirai. Of course she answered back, saying that she was from a place called the great divine forest and all that good jazz. He went along with it, answering the questions she had for him. After about ten minutes of talking, the boy was worried about the girl and went to take her to meet his family, a family of farmers. Everyone thought she was a little odd, but the youngest of the family,a girl name Mika was interested in the world she came from and wanted to know more. What next for her? The family of farmers had let Mirai stay with them as long as she liked. They saw how good she was with the animals and crops, being impressed by her skill. As time went on, she begin to learn more about the earth's customs, how the humans here lived day by day and even if she liked the farm, her new earth family, it was time for her to move on sooner or later after five years pasted and After thinking about it, Mirai thought it was time for her to get out on her own and with the help of the farmers, she able to move into a small apartment in the city. Now, she works in the local pet store [/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText] "The great divine forest shelters the great divine oak. The oak holds a mysterious power that could be dangerous if fallen into the wrong hands. They said that the oak has been around since the beginning of time. If the tree's power falls into the wrong hands...the whole forest will be corrupted and...the worst will happen. I was appointed to rule this forest and the creatures in it. So long as im around...i will protect everyone and everything here." Anemone was only a few months old when a demon god had invaded the village she lived in. The god was hungry for the secrets that the village kept about the great divine forest and it's ruler ,Inius. Although she didn't want to leave him, Anemone's mother left her father to fight the demons to only die by their hands. She was told to go Divine Alter with Anemone, but she had other plans Three days after the attack, She made it to the alter and prayed to Inius that he would come and take Anemone. It was silent, there was no reply. Anemone's stayed with her until she to pasted away as well. A few hours later, a tall majestic equine beast with a long white mane appeared with a slivered eyed white tiger appeared before the two. The two creatures where revealed to be Inius the god of nature and his advisor Atlas. Inius ordered Atlas to take the two back to the forest where Anemone's mother was to be buried and where Anemone her self would be raised as his own. Atlas was confused why he took interest in this outsider, but simply obeyed him. Inius had raised Anemone to be a fine young lady. At first they didn't trust her since she was an outsider, but her loving nature gained the trust and respect of those who lived in the forest. Yes, life was good for her until the same events from many years ago repeated her self. The demon god that destroyed her village manged to enter the divine forest Anemone could only watch the battle of the forest happen. Inius and this demon god where locked in a intense battle for a long time, until finally the battle ended. Both the demon god and Inius where severally injured. The demon god and his fleet where forced to retreat, However Inius wasn't so lucky although they manged to save the forest. His wounds was to great to heal, so before he died, Inius pasted his powers to Anemone. She was then given the title as mistress of nature. Anemone wasn't ready for this responsibility, But she had to do what she had to do " Here, take my power and with it, protect the forest and those who live here. My little Anemone, there is no need to worry..i'll still be here with you." [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] since demons basically ruin her life, she's not to found of them. In fact, shes scared of them [/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText] Fromer god of nature and her advisor a slivered eyed white tiger name Atlas. He's there to look after her and guide her. [/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] So far, only Atlas who was turn into a sliver eyed white cat [/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

Elenion Aura · Dec 23, 2018

[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; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 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: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 100%; width: 100%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; 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: flex-start; align-items: center; align-content: flex-start; [/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(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] 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=hexDivider] width: 90%; min-height: 10px; margin: auto; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); flex: 3 0 auto; z-index: 4; [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--profileContainerColor); border-right: 0px solid var(--profileContainerBorderColor); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: var(--profileImagePosition); background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 200px; justify-content: flex-end; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterInfoBox maxWidth=1200px] justify-content: center; [/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); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; 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: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); text-align: center; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=image] position: relative; display: block; box-sizing: border-box; padding: 0px; margin: 10px; border: 2px solid var(--headerColor); background: var(--headerColor); background-position: center center; background-repeat: no-repeat; background-size: contain; float: right; [/class] [class name=image maxWidth=1200px] padding: 0px; float: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 300%; 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 400 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.88em; --mainTextColor: #EFEFE7; --headerFont: 'Staatliches', sansserif; --headerColor: #EFEFE7; --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #182121; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(239, 239, 231, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #182121; --nameHeight: 10%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://s1.zerochan.net/Tae.Seob.Sin.600.2405610.jpg); --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileImagePosition: center center; --profileContainerColor: #182121; --profileContainerBorderColor: #EFEFE7; --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: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(https://i.imgur.com/awY9J1H.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 1; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"]

Lexielai [/div] [/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Earth Persona [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Terra Sancta Persona [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Relationships [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Heike Tsurayuki [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] Venerable God of Culture, Music, and the Arts [/div] [/div] [/div] [/div] [div class="infoContainer two"] [div class="scrollBox"] [div class=mainHeader]Appearance[/div] [div class=mainSubheader][/div] [div class=mainText] To see the full measure of a man, some would say to look no further than at how he presents himself. Elegant, graceful, and poised, the man comports himself at most times with a straight - but never stiff - posture, a soft, friendly face, and an exquisitely maintained raiment, chosen meticulously from a well-stocked wardrobe. Inhumanly - some might say divinely - beautiful, the man's features appear as if etched with finesse by an artist's loving hands. He is tall (186 cm) and slender, and his fingers move with a deftness and a surety that belies the many millennia of experience that guide them. Blue-eyed and blond-haired, he sports quite a striking façade, and as such his looks were very often the subject of great interest among his courtiers (he may have had a hand in this). He moves with the sure-footed poise of a trained dancer, never a step - or a hair - out of place. The man dresses himself with a certain gentlemanly, typically formal style, but he does occasionally wear more casual, leisurely outfits, typically when he is relaxing at home, wearing his spectacles, the presence of which may or may not be entirely decorative. The man's oft somber face animates vividly in the presence of art - especially his own.[/div] [div class=mainHeader style="margin-top: 10px;"]Demeanor[/div] [div class=mainSubheader][/div] [div class=mainText] Heike Tsurayuki is a man of exquisite taste (a fact which has plagued him in light of his recent banishment, and subsequent financial ruin). He has always had an eye for the finer things, some would say the finest things, in life. Lavish garments, epicurean delights, untold pleasures few mortals could imagine. And for most of his long existence, he has never wanted for any of it. Because of this, many of the people who encounter him might say he is, to put it gently... Out of touch. Heike has always possessed a well-developed flair for the dramatic, and as his divine prerogative suggests, is a frequent patron, critic, and creator of the arts. He has written tragedies and comedies, penned moonlit sonatas and wrought with his mind works of art so vast and varied that Heike himself can scarcely remember them all. And when he grew tired of creating, Heike held court and bid his courtiers to make art in his image and for his pleasure. It was the highest honor to have made something, anything, which caught their lord's eye. But with that honor came a danger. For their's was a jealous and a fickle lord, and to invoke something which did not, in some way, venerate works that he himself had created would invite harsh scrutiny and, in rare cases, terrible retribution. As a newly minted mortal, Heike's more erratic personality quirks more often and more visibly bubble to the surface, albeit briefly. He is prone to wild fits of fancy, bordering on mania, or may sink into a pseudo-depression at the slightest inconvenience. He is an avid consumer of alcohol, and heavily favors red wines. Heike holds himself in very high esteem, as one of the (former) Divine Gods and a creator of beauty. His is a pure sort of narcissism, a divine vanity which extends to those things (objects and individuals) he believes he had a hand in sculpting. He thinks very little of mortals outside of his social circles (of which he is, as a rule, the epicenter) and harbors them no ill will. But he is a notorious holder of grudges, over slights both real and fabricated by his wheeling vice of a mind. The thought that he could be ousted, or beaten at his own game, is to him both hilarious and sobering. Since his fall, Heike's once supreme and lofty sense of self-worth has been hopelessly diminished, and has in the year since grappled with a nigh overwhelming sense of loss for his old kingdom, and all that went with it into oblivion... And following his failure in that first earthly theatre, the man, who was once the Patron God of Minstrel and Bard alike, is hesitant to even lay a finger on an instrument, or to set his mind toward the thought of creating art of any kind, for fear of the possibility of failure. Neither does he partake of the mortal culture; the walls of his apartment are bare, dull, and white, with no decoration to liven them... To fill the hole left within him, Heike has allowed artistry to be usurped by alcohol. He has taken to the bottle (of wine; reds are his favorite), frequently and in excess, and often to the point of obscene drunkenness, a state that is very much ill befitting one who had, at one time, shined so brilliantly. [/div] [div class=mainHeader style="margin-top: 10px;"]Arrival[/div] [div class=mainSubheader][/div] [div class=mainText] Heike's arrival to this plane was decidedly not glamorous. He was marooned by some sort of cosmic irony in, of all places, a theatre. The type which occasionally invited members of the audience to show off their skill with an instrument of their choice. As it so happened, this was one such occasion. Heike remembered thinking to himself then that this world, like the one he'd left behind, would soon be eating out of his palm. They would gaze upon him with awe, and despair at his beauty, and the wonders of his song. And it was almost so. From the first note struck, Heike could feel the eyes of the crowd upon him, their attention wrapped up in his presence. He let his fingers linger over the strings, drawing out the note beyond the threshold of containment before dazzling all who listened with a display of inhuman finesse. Yes, this was it. The crescendo neared. He could feel their breath, hinged in their miserable throats, enraptured, losing themselves within him. Then, it happened. It was something which, in his whole, long life, he had never experienced. Divine hands do not falter. But, just then, just as he was about to bring it all to a glorious conclusion, his fingers slipped. The note dropped. In panic, his hands working feverishly of their own devious accord, he flubbed the next chord, and the one after, until the whole piece was a ruination, a cataclysmic failure. The shock of the crowd gave way to a murmur, which gave way to bitter, haughty laughter. A cacophony of it struck him like a blow. Inflamed and incensed, he fled into the earthly night. In the alley, he stared into his hands. They were trembling. This... Cursed form. This... crude, imperfect flesh! He loathed it. Somehow, some way, he would return himself to glory. He must. In time, and in spite of himself, he grew slowly accustomed to the faults and shortcomings of this mortal vessel. As well as this new world of his. He even landed a job. It, like so much of what he was being forced to endure lately, was less than he could have hoped for. A position as a substitute band instructor for a local Tokyo high school. The previous instructor, he was informed, was on medical leave for an indeterminate amount of time. The principal's expectations were abysmally low. It was his job to, essentially, play babysitter. But that simply would not do. If he could not return from whence he came, then he would make this place his, and all would love him for it... One high school band class at a time. [/div] [/div] [/div] [div class="infoContainer three"] [div class="scrollBox"] [div class=mainHeader]A Tale of Gods and Heroes[/div] [div class=mainSubheader][/div] [div class=mainText] The court was in full swing today. Courtiers and servants mulled about the Great Hall, its walls draped in blue and gold trappings, as was the flavor of the evening. As pleased the lord of the house. Everything was in its right place, because it was he who placed it. Everything moved the way he willed it to; everyone danced to the music of his own making. He sat, as was his way, at the head of a raised dais, flanked on either side by the favored of the court, whose rankings changed hands and shuffled along with his whims, like leaves in the wind, blowing one way one moment, and another the next. Performers congregated below him, each one - though an individual - served as an expression, and an extension, of his own divine vision. He cast a bored glance over them, recognizing each one and the piece of him that they had chosen to emulate. So uninspired, he thought to himself, his head lolling against his hand. Then, from the corner of his eye, he spotted her. Aita, a favored performer among his court, was ringed by courtiers, some of whom had their hands clasped in front of their mouth. Whether that was out of amazement or horror he could not say. He cared not. Only Aita, whose timid figure and soft, mousy voice had found a space among them, and had, from time to time, even managed to impress him with her work, held his full attention now. Her performance was utterly sublime, and she knew it, too. Shimmering as she moved, fluid like a river, from one stance to the next, she dazzled every eye that she had dared to look upon her, mortal and god alike, with this audacious display of individuality. When she was finished, breathless, she bowed and was met by the sound of an empty hall. The courtiers and fellow performers had fallen deathly quiet. No applause. He had never seen anything quite like what she had done tonight. The silence, at last, was broken, by the sound of her lord's clapping. "Bravo, my dear." As if on cue, the audience erupted with praise. Many shouted their accolades. Cheers rang out. "Aita, Aita, Aita!" Of those present in that moment, not a single voice was silent. Their lord had shown his approval, and what was good enough for their lord was, certainly, good enough for them. He silenced them all with a wave of his hand. With the same hand, he beckoned Aita forward. "Approach me," he said. Humbly, and with cheeks flushed from exertion, she bowed and came as she was bid, prostrating herself before him like a common servant. "We can forego the pretenses this time. I know you don't mean it." A flash of confusion. She looked as if she were about to speak. He cut her off with a sharp gesture. "Come! Rise, and join me. Here." He motioned to the seat by his side. Currently occupied. A simple, sidelong glance was all it took to send the courtier, gracefully, away to join the masses below. A bit shaken, Aita ascended the steps of the dais and took the now vacated seat beside him. "You honor me, m'lord." Her head was still bowed, and she spoke like a commoner. He frowned, his brow knit tightly in confusion. "I'm afraid it's quite the other way around." All throughout the Hall, there was silence. Performances and conversations had halted. All eyes faced the dais. "You honored me, and the whole court, with your performance tonight. What do you call that?" He asked of her, in a voice that spoke of imminent danger, like how a leopard might speak to a field mouse caught between his paws. Aita knew better than to answer, so her lord continued. "Surely, this is what you wanted. Why else would you mock me in my own Hall?" When this time she looked as if she would open her mouth to speak, he raised a bitter hand and the music began playing again. Different from the music from before. Darker, more sinister. Like the footsteps of dread. Some of the faces from the audience were alight with recognition, some giddy with anticipation. One face among all of them was white, as if all the color had bled out of her. Their lord's face was, above all else, calm, composed. Serene, even. "Can you hear that, my dear? This requiem..." He took a deep breath, his eyes half-lidded, savoring this moment as the music swelled. "It plays for you." Among the members of the God of Music's court, none were so renowned, or so beloved, as the Divine God of Prophecy. And none loved him so much as the Great Artist himself. They were, the two of them, perfect and as one. But the Prophetic God had grown world-weary, as his visions showed him only pain, and death, and the great loss which was to come. So that, when the end inevitably came, the Divine Prophet elected to stay behind. Knowing, as one who knows all things does, that his Muse would choose to stay on his behalf, instead spirited him away through the Portal while he slept (a deep, dreamless sleep brought on by an elixir of his own design), ushering his beloved across realities, to live on in a new realm filled with nigh limitless possibility. [/div] [/div] [/div] [div class="infoContainer four"] [div class="scrollBox"] [div class=mainHeader]Archnemeses (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText]Demons are vile, a stain to be cleansed so that his divine aria may ring out all the clearer. Mortals and Heroes are (he believed) beneath his attention. [/div] [div class=mainHeader style="margin-top: 10px;"]Allies and Servants (Terra Sancta)[/div] [div class=mainSubheader][/div] [div class=mainText]As a Divine God, Heike holds his fellow Divine in some regard, inasmuch as they are his peers, of a sort. Heike held court frequently prior to his fall, and was often thronged with courtiers, attendants, and socialites of the highest caliber.[/div] [div class=mainHeader style="margin-top: 10px;"]Friendships and Relationships (Earth)[/div] [div class=mainSubheader][/div] [div class=mainText] On earth, Heike's social circles are considerably sparser, and not nearly as glamorous. [/div] [/div] [/div] [/div] [/div][/div] [/div][/div][/div]

Fantasy Small Gods Character Sheet

Cal Bear

Cal Bear

Floof, truly the fluffiest

So I started blasting.

The Phantom Hexblade

Hapless Savior

The Real

i would if i could

Hot Blooded Writer

Guilty as charged

The Only Thing Real is Nothing

Ardent Advocate of the Ausrufung

Dabbler in the Dark Arts

Floof, truly the fluffiest

Hapless Savior

Cal Bear

Ready to set the world on fire?

Two Thousand Club

Users who are viewing this thread

Similar threads