diff --git a/chara-pages/03-Lionheart b/chara-pages/03-Lionheart
new file mode 100644
index 0000000..937d57b
--- /dev/null
+++ b/chara-pages/03-Lionheart
@@ -0,0 +1,1335 @@
+<!-----------------------------------------------------------------------
+Character Page [03]: Lionheart
+Made by glenthemes
+
+Initial release: 2018/02/09
+Last updated: 2019/02/02
+ 
+TERMS OF USE:
+1) Do not remove the theme credit.
+2) Do not repost/redistribute my themes.
+3) Do not take parts of the code and use it as your own.
+4) Do not use my themes as a base code.
+5) Do not mix my themes together.
+
+For customization help, please visit:
+//glenthemes.tumblr.com/lionheart
+
+Please respect theme makers and stick to my Terms. Enjoy.
+------------------------------------------------------------------------>
+ 
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+ 
+<head>
+ 
+<title>{Title}</title>
+ 
+<link rel="shortcut icon" href="{Favicon}">
+
+<!--------------------JAVASCRIPTS-------------------->
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+<script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
+<script>
+(function($){
+$(document).ready(function(){
+$("a[title]").style_my_tooltips({
+tip_follows_cursor:true,
+tip_delay_time:120,
+tip_fade_speed:120,
+attribute:"title"
+});
+});
+})(jQuery);
+</script>
+ 
+<link href="//fonts.googleapis.com/css?family=Karla|Quicksand|Playfair+Display|Nunito|Rajdhani:400,500|Montserrat:300,400,500" rel="stylesheet">
+
+<link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
+
+<link href="//static.tumblr.com/gtjt4bo/JMXp40ccf/smoke.min.css" rel="stylesheet">
+
+<link href="//static.tumblr.com/gtjt4bo/WBJp40bor/library.css" rel="stylesheet">
+
+<script src="//static.tumblr.com/gtjt4bo/VfIp3v58k/winter.js"></script>
+
+<script src="//static.tumblr.com/2pnwama/KGQp3tjff/fire.js"></script>
+ 
+<!-------------------------------------------------------------------->
+ 
+<style type="text/css">
+ 
+/*--------------------TOOLTIPS--------------------*/
+
+#s-m-t-tooltip {
+    padding:5px 10px;
+    margin:26px 9px 0px 15px;
+    background-color:#222; /* tooltip background color */
+    border-radius:5px; /* rounded tooltip */
+    font-family:Quicksand;font-weight:bold;
+    font-size:9px;
+    letter-spacing:1.3px;
+    text-transform:uppercase;
+    color:#ddd; /* tooltip text color */
+    z-index:99999999999999999999999999998!important;
+    max-width:40vw;
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    -o-transition: all 0.3s ease-in-out;
+}
+ 
+/*--------------------TUMBLR CONTROLS--------------------*/
+
+iframe#tumblr_controls, .iframe-controls--desktop {
+    top:3px!important;
+    right:3px!important;
+    position:fixed!important;
+    opacity:0.6;
+    z-index:999999!important;
+    transition:0.3s ease-in-out;
+}
+ 
+iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
+    opacity:0.8;
+}
+ 
+/*--------------------DEFAULT SCROLLBAR--------------------*/
+
+::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+}
+ 
+::-webkit-scrollbar-thumb {
+    background-color: #ccc;
+}
+ 
+::-webkit-scrollbar-track {
+    background-color: #333;
+}
+
+/*-----------------TEXT ON HIGHLIGHT-----------------*/
+
+::selection {
+    background:#333; /* text highlight background color */
+    color:#ddd; /* text highlight color */
+}
+
+::-moz-selection {
+    background:#333; /* text highlight background color */
+    color:#ddd; /* text highlight color */
+}
+
+/*--------------------BASICS--------------------*/
+
+body {
+    background-color:#fdfdfd; /* background color */
+    background-image:url('//static.tumblr.com/c0a4e7cc4f5c2882a7779a37b63132bf/2pnwama/qAaoy90vm/tumblr_static_c7ybwm57sv4k0s0kswccgoss0.png');
+    /* background image of your screen */
+    background-attachment:fixed;
+    background-repeat:repeat;
+    color:#999;
+    font-family:karla;
+    line-height:1.6em;
+    font-size:12px;
+}
+
+a {
+    text-decoration:none;
+    -webkit-transition: all 0.4s ease-in-out;
+    -moz-transition: all 0.4s ease-in-out;
+    -o-transition: all 0.4s ease-in-out;
+}
+
+/*--------------------CONTAINER--------------------*/
+#main {
+    position:fixed;
+    display:flex;
+    top:50%;
+    left:50%;
+    transform:translate(-50%,-50%);
+    width:calc((440px * 16 / 9) + 50px);
+    height:440px;
+    border:1px solid #f3f3f3; /* main container border */
+    box-shadow: 0px 0px 45px 0px rgba(0,0,0,0.045); /* main container shadow */
+}
+
+/*--------------------LEFT BAR--------------------*/
+
+#strip {
+    width:calc(64px + 20px + 20px);
+    height:inherit;
+    overflow-y:auto;
+    overflow-x:hidden;
+    z-index:4;
+}
+
+#strip, .poop {
+    background-color:#f9f9f9; /* left bar background color */
+}
+
+#strip::-webkit-scrollbar {
+    width:9px;
+    height:9px;
+}
+ 
+#strip::-webkit-scrollbar-thumb {
+    background-color:#999; /* left bar scrollbar */
+    border:4px solid #f9f9f9; /* left bar scrollbar background */
+}
+ 
+#strip::-webkit-scrollbar-track {
+    background:#f9f9f9; /* left bar scrollbar background */
+}
+
+#sect {
+    margin-top:95px;
+    margin-bottom:9px;
+}
+
+.adj {margin-left:20px;}
+
+.face {
+    margin:10px 0px;
+    width:64px;height:64px;
+    border-radius:100%;
+    -moz-transition: all 0.3s;
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s;
+     -webkit-transition-timing-function: cubic-bezier(0.18, -0.25, 0.025, 1.85);
+    transition-timing-function: cubic-bezier(0.18, -0.25, 0.025, 1.85);
+    cursor:pointer;
+}
+
+.face:hover, .carrot:hover {transform:scale(1.1,1.1);}
+
+.carrot {
+    position:fixed;
+    margin-top:-55px;
+    -moz-transition: all 0.3s;
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s;
+     -webkit-transition-timing-function: cubic-bezier(0.18, -0.25, 0.025, 1.85);
+    transition-timing-function: cubic-bezier(0.18, -0.25, 0.025, 1.85);
+    cursor:pointer;
+    z-index:5;
+}
+
+.poop {
+    position:absolute;
+    bottom:100%;margin-bottom:-52px;
+    right:100%;margin-right:calc((-64px * 1.1) - 16.5px);
+    width:calc(64px * 1.1);height:52px;
+    z-index:4;
+}
+
+/* navigation button styling */
+.carrot .sf {
+    font-size:25px;
+    padding:21px 19px 14px 20px;
+    background-color:#222; /* button background color */
+    color:#ddd; /* button color */
+    border-radius:100%;
+}
+
+/*-----------------CHARACTER SECTION BASICS-----------------*/
+
+#silhouette {
+    width:470px;
+    height:inherit;
+    background-color:#f7f7f7; /* character section background color */
+    background-image:url('//38.media.tumblr.com/tumblr_lsdjv9k5E21r2gm7fo4_400.jpg'); /* character section background image */
+    background-repeat:repeat;
+    overflow:hidden;
+    position:relative;
+}
+
+/*--------------------HEIGHT CHART--------------------*/
+
+/* height chart vertical line */
+.pillar {
+    width:2px;
+    height:410px;
+    margin-top:18px;
+    margin-left:calc((35px / 2) - 1px);
+}
+
+/* height chart lines positioning */
+/* I recommend not to touch this but you can if you want */
+.six0 {margin-top:14px;}
+.five11 {margin-top:28px;}
+.five10 {margin-top:40px;}
+.five9 {margin-top:54px;}
+.five8 {margin-top:66px;}
+.five7 {margin-top:80px;}
+.five6 {margin-top:92px;}
+.five5 {margin-top:106px;}
+.five4 {margin-top:118px;}
+.five3 {margin-top:132px;}
+.five2 {margin-top:144px;}
+.five1 {margin-top:158px;}
+.five0 {margin-top:170px;}
+.four11 {margin-top:184px;}
+.four10 {margin-top:196px;}
+.four9 {margin-top:210px;}
+.four8 {margin-top:222px;}
+.four7 {margin-top:236px;}
+.four6 {margin-top:248px;}
+.four5 {margin-top:262px;}
+.four4 {margin-top:274px;}
+.four3 {margin-top:288px;}
+.four2 {margin-top:300px;}
+.four1 {margin-top:314px;}
+.four0 {margin-top:326px;}
+.three11 {margin-top:340px;}
+.three10 {margin-top:352px;}
+.three9 {margin-top:366px;}
+.three8 {margin-top:378px;}
+.three7 {margin-top:392px;}
+.three6 {margin-top:404px;}
+.three5 {margin-top:418px;}
+
+.mug, .pillar {
+    position:absolute;
+    background-color:#111; /* height chart bar color */
+}
+
+.mug:nth-of-type(odd) {
+    width:35px;
+    height:1px;
+}
+
+.mug:nth-of-type(even) {
+    width:50px;
+    height:2px;
+}
+
+/* 'even' height indicator text styling */
+.mug:nth-of-type(even)::after {
+    position:absolute;
+    left:100%;
+    margin-left:5px;
+    margin-top:-5px;
+    line-height:1em;
+    font-family:Rajdhani;
+    font-weight:500;letter-spacing:0.5px;
+    font-size:13px;
+    color:#555; /* even height text color */
+}
+
+/* height indicator text */
+/* NOTE: when typing inches, use 2 single apostrophes instead of 1 double */
+/* your text goes inside the double apostrophes " " */
+.five10::after {content:"5'10''";}
+.five8::after {content:"5'8''";}
+.five6::after {content:"5'6''";}
+.five4::after {content:"5'4''";}
+.five2::after {content:"5'2''";}
+.five0::after {content:"5'0''";}
+.four10::after {content:"4'10''";}
+.four8::after {content:"4'8''";}
+.four6::after {content:"4'6''";}
+.four4::after {content:"4'4''";}
+.four2::after {content:"4'2''";}
+.four0::after {content:"4'0''";}
+.three10::after {content:"3'10''";}
+.three8::after {content:"3'8''";}
+.three6::after {content:"3'6''";}
+
+/*--------------------CENTRAL CHARACTER IMAGES--------------------*/
+
+/* individual character image adjustments */
+/* this part is especially important if you're using the height chart too */
+/* I recommend NOT adding a width, bc the width is auto */
+/* follow the pattern to edit the height for character 5, for example */
+/* so you would start with .chara5 for that */
+.chara1 {
+    display:block; /* this line applies to .chara1 ONLY */
+    height:366px;
+}
+
+.chara2 {
+    height:378px;
+}
+
+.chara3 {
+    height:390px;
+}
+
+.chara4 {
+    height:382px;
+}
+
+/*--------------------CHARACTER LABELS--------------------*/
+
+/* label positioning */
+/* follow the pattern to edit the positioning for character 5, for example */
+/* so you would start with .label5 for that */
+.label1 {
+    display:block; /* this line applies to .label1 ONLY */
+    margin-left:327px;
+    margin-top:95px;
+}
+
+.label2 {
+    margin-left:317px;
+    margin-top:82px;
+}
+
+.label3 {
+    margin-left:320px;
+    margin-top:72px;
+}
+
+.label4 {
+    margin-left:325px;
+    margin-top:90px;
+}
+
+/* indicator line styling */
+.name-line {
+    position:absolute;
+    right:100%;
+    margin-right:-3px; /* repositioning from the right */
+    margin-top:40px; /* repositioning from the top */
+    transform-origin:0% 100%;
+    transform:rotate(-20deg); /* indicator line angle */
+    width:45px; /* indicator line width */
+    height:1px; /* indicator line height */
+    background-color:#222; /* indicator line color */
+}
+
+/* indicator circle (at the end of the line) */
+.name-line::before {
+    content:"";
+    position:absolute;
+    right:100%;
+    margin-right:-2px;
+    margin-top:-2px;
+    width:5px; /* indicator dot width */
+    height:5px; /* indicator dot height */
+    background-color:#222; /* indicator dot color */
+    border-radius:100%;
+}
+
+/* label's top text styling */
+.top-text {
+    padding:5px 10px;
+    background-color:#222; /* top label text background */
+    border-radius:5px 5px 0px 0px;
+    font-family:Rajdhani;
+    font-weight:500;letter-spacing:1px;
+    text-transform:uppercase;line-height:1.2em;
+    font-size:13px;
+    color:#ddd; /* top label text */
+}
+
+/* label's bottom text styling */
+.bot-text {
+    margin-top:0px;
+    padding:4px 10px;
+    background-color:#fff; /* bottom label text background */
+    border-radius:0px 0px 5px 5px;
+    font-family:Rajdhani;
+    border-right:2px solid #221; /* bottom label right border */
+    border-bottom:2px solid #221; /* bottom label bottom border */
+    border-left:2px solid #221; /* bottom label left border */
+    font-weight:500;letter-spacing:0.5px;
+    text-transform:uppercase;line-height:1.2em;
+    font-size:9px;
+    color:#444; /* bottom label text color */
+}
+
+/*--------------------STATISTICS TABLES--------------------*/
+
+/* table positioning */
+/* follow the pattern and edit the positioning for character 5, for example */
+/* so you would start with .stats5 for that */
+.stats1 {
+    display:block; /* this line applies to .stats1 ONLY */
+    margin-left:290px;
+    margin-top:200px;
+}
+
+.stats2 {
+    margin-left:295px;
+    margin-top:195px;
+}
+
+.stats3 {
+    margin-left:293px;
+    margin-top:180px;
+}
+
+.stats4 {
+    margin-left:298px;
+    margin-top:200px;
+}
+
+#allstat table {
+    border-collapse:separate;
+    border-spacing:10px 0;
+}
+
+/* statistics table text styling */
+#allstat tbody {
+    font-family:Quicksand;
+    font-weight:bold;text-transform:uppercase;
+    letter-spacing:1px;
+    font-size:9px;
+}
+
+/* first column styling */
+#allstat td:first-of-type {
+    text-align:right;
+    color:#bbb;
+}
+
+/* second column styling */
+#allstat td:last-of-type {
+    text-align:left;
+    color:#666;
+}
+
+/* green text styling */
+/* you don't HAVE to use this */
+/* you can also add your own color spans if you want */
+/* in the HTML, you apply the green text like this: <green>...</green> */
+#allstat green {
+    color:#27c08d;
+}
+
+/*--------------------METER BARS--------------------*/
+
+/* meter bars' positioning */
+/* follow the pattern to change character 5's bar placements, for example */
+/* so you would start with .barstuff5 for that */
+.barstuff1 {
+    display:block; /* this line applies to .barstuff1 ONLY */
+    margin-left:355px;
+    margin-top:330px;
+}
+
+.barstuff2 {
+    margin-left:355px;
+    margin-top:330px;
+}
+
+.barstuff3 {
+    margin-left:355px;
+    margin-top:330px;
+}
+
+.barstuff4 {
+    margin-left:355px;
+    margin-top:330px;
+}
+
+.barstat {
+    margin-bottom:10px;
+    min-width:85px; /* maximum width of bar elements */
+}
+
+.barstat:last-child {margin-bottom:0px;}
+
+/* meter bar title */
+.bartit {
+    margin-right:-5px;
+    text-align:right;
+    font-family:Quicksand;
+    font-weight:bold;text-transform:uppercase;
+    line-height:1.7em;letter-spacing:1px;
+    font-size:8px;
+    color:#666;
+}
+
+.barholder {
+    margin-top:3px;
+    text-align:right;
+}
+
+/* meter bar styling */
+.bar-fill, .bar-empty {
+    display:inline-block;
+    margin:0px 3px;
+    width:10px;
+    height:20px;
+    background-color:#22a092; /* DEFAULT color of all characters' filled bars */
+    transform-origin:0% 100%;
+    transform:skew(-20deg);
+}
+
+/* the following lines are individual characters' meter bars' styling */
+/* format: " .barstuff(number) .bar-fill " */
+.barstuff1 .bar-fill {
+    background-color:#22a092; /* color of filled bars for 1st character */
+}
+
+.barstuff2 .bar-fill {
+    background-color:#e8c8a8; /* color of filled bars for 2nd character */
+}
+
+.barstuff3 .bar-fill {
+    background-color:#9ad8e7; /* color of filled bars for 3rd character */
+}
+
+.barstuff4 .bar-fill {
+    background-color:#dd4445; /* color of filled bars for 4th character */
+}
+
+/* color of ALL CHARACTERS' empty bars */
+/* you can tailor empty bar colors to different characters if you want */
+/* like in the example above */
+.bar-empty {
+    background-color:#151515; /* color of all empty bars */
+}
+
+/*--------------------VERTICAL/SIDEWAYS TEXT-------------------*/
+
+/* vertical text positioning */
+#torch {
+    position:fixed;
+    top:50%;
+    transform:translateY(-50%);
+    margin-left:-308px;
+    width:100%;
+}
+
+/* vertical text styling */
+#vertical {
+    transform:rotate(-90deg);
+    font-family:Rajdhani;
+    font-size:14px;
+    text-transform:uppercase;
+    letter-spacing:1.5px;
+    text-align:center;
+    color:#666; /* vertical text color */
+}
+
+/* vertical text: bold */
+#vertical b {
+    font-family:montserrat;
+    font-weight:400;
+    font-size:11.5px;
+    letter-spacing:1px;
+    color:#444; /* vertical text bold color */
+}
+
+.line1 {display:block;}
+
+/*--------------------BIOGRAPHY SECTION--------------------*/
+
+#boba {
+    width:calc(100% - 104px - 470px);
+    height:inherit;
+    background-color:#fcfcfc; /* biography section background color */
+}
+
+#flavoring {padding:20px;}
+
+/* character title */
+#seaweed {
+    font-family:playfair display;
+    text-transform:uppercase;
+    line-height:1.15em;
+    font-size:25px;
+    color:#444; /* character title color */
+    border-left:1px solid black; /* character title left border */
+    padding-left:11px;
+    padding-bottom:3px;
+}
+
+.title1 {display:block;}
+
+/* main biography text */
+#fruit {
+    margin-top:15px;
+    max-height:273px;
+    padding-right:10px;
+    overflow:auto;
+    text-align:justify;
+    font-family:Nunito;
+    font-size:12px;
+    line-height:1.6em;
+}
+
+/* styling the FIRST LETTER of your biography text */
+#fruit:first-letter {
+    float:left;
+    margin-right:10px;
+    padding:9px 12px 12px 12px;
+    border:6px double #222;
+    font-family:playfair display;
+    text-transform:uppercase;
+    font-size:25px;
+    color:#222;
+}
+
+/* since the FIRST LETTER padding may not be the same for every letter, */
+/* you can create more styling for it */
+/* e.g.: if your character no. x bio starts with an I, it may be too thin */
+/* so style it beginning with ".tapiocax" like this: */
+/* replace x with the character no. */
+.tapiocax:first-letter {
+    float:left;
+    margin-right:10px;
+    padding:9px 8.5px 12px 9px; /* only this line (padding) changes */
+    /* to learn more about padding, go to this site: */
+    /* w3schools.com/css/tryit.asp?filename=trycss_padding_shorthand_4val */
+    border:6px double #222;
+    font-family:playfair display;
+    text-transform:uppercase;
+    font-size:25px;
+    color:#222;
+}
+
+#fruit p:last-child {margin-bottom:0px;}
+
+#fruit::-webkit-scrollbar {
+    width:9px;
+    height:9px;
+}
+ 
+#fruit::-webkit-scrollbar-thumb {
+    background-color:#888; /* biography section scrollbar itself */
+    border:4px solid #fcfcfc; /* biography section scrollbar background */
+}
+ 
+#fruit::-webkit-scrollbar-track {
+    background:#ddd; /* biography section scrollbar track */
+    border:4px solid #fcfcfc; /* biography section scrollbar background */
+}
+
+/* biography text link */
+#fruit a {
+    color:#222; /* biography link color */
+    border-bottom:0.5px solid #222; /* biography link border */
+}
+
+/* biography text link hover */
+#fruit a:hover {
+    color:#000; /* biography link color hover */
+    border-bottom:0.5px solid #000; /* biography link border hover */
+}
+
+.tapioca1 {display:block;}
+
+/* big link under bio text styling */
+#nav a {
+    margin-top:15px;
+    display:inline-block;
+    width:180px;
+    padding:12px 18px;
+    background-color:transparent; /* link under bio text: background color */
+    border:0.5px solid #888; /* link under bio text: border */
+    text-align: center;
+    font-family:montserrat;
+    font-weight:400;text-transform:uppercase;
+    letter-spacing:1.3px;line-height:1.6em;
+    font-size:9px;
+    color:#151515; /* link under bio text: link color */
+}
+
+#nav a:hover {
+    background-color:#151515; /* link under bio text: hover background color */
+    border:0.5px solid #151515; /* link under bio text: border hover */
+    color:#eee; /* link under bio text: link hover color */
+}
+
+.biglink1 {display:block;}
+
+/*--------------------POPUP NAVIGATION BOX--------------------*/
+
+#screen, #backing, #poppy {
+    display:none;
+    position:fixed;
+    top:50%;
+    left:50%;
+    transform:translate(-50%,-50%);
+}
+
+/* navigation box background panel overlay */
+#screen {
+    width:calc((440px * 16 / 9) + 50px);
+    height:440px;
+    background-color:#fff; /* overlay color */
+    opacity:0.825; /* overlay transparency */
+    z-index:9;
+}
+
+#backing {width:100vw;height:100vh;z-index:10;}
+
+/* navigation box */
+#poppy {
+    width:450px;
+    padding:20px;
+    background-color:#fdfdfd; /* navigation box background */
+    border:1px solid #eee; /* navigation box border */
+    z-index:11;
+}
+
+/* navigation box custom links */
+.clinks {margin-left:5px;}
+
+.clinks a {
+    display:inline-block;
+    margin:5px;
+    width:80px;
+    padding:6px 9px;
+    background-color:#fefefe; /* custom links background */
+    border:0.5px solid #ddd; /* custom links border */
+    text-align:center;
+    font-family:Quicksand;font-weight:bold;
+    text-transform:uppercase;letter-spacing:2px;
+    font-size:10px;
+    color:#444; /* custom links color */
+}
+
+.clinks a:hover {
+    background-color:#222; /* custom links background hover */
+    border:0.5px solid #222; /* custom links border hover */
+    color:#ddd; /* custom links color hover */
+}
+
+/* navigation box "close" button */
+.close {
+    margin-left:50%;
+    transform:translateX(-50%);
+    display:inline-block;
+    margin-top:10px;
+    padding:6px 20px;
+    background-color:transparent; /* close button background */
+    border:0.5px solid #888; /* close button border */
+    text-align:center;
+    font-family:montserrat;
+    font-weight:400;text-transform:uppercase;
+    letter-spacing:1.3px;line-height:1.6em;
+    font-size:9px;
+    color:#222; /* close button text color */
+    cursor:pointer;
+}
+
+/*--------------------PAGE CREDIT--------------------*/
+
+/* do not remove */
+/* you MAY edit the colors and stuff but do not make it any smaller */
+#please-respect-theme-makers a {
+    position:fixed;
+    z-index:999999;
+    padding:7px 9px;
+    background-color:#fdfdfd;
+    border:1px solid #f7f7f7;
+    bottom:0;margin-bottom:15px;
+    right:0;margin-right:15px;
+    font-family:karla;
+    text-transform:uppercase;
+    line-height:1em;
+    text-align:center;
+    font-size:9px;
+    letter-spacing:1.3px;
+    color:#888;
+}
+ 
+</style>
+ 
+</head>
+ 
+<body>
+<!----PLEASE DO NOT REMOVE THE THEME CREDIT---->
+<div id="please-respect-theme-makers"><a href="//glenthemes.tumblr.com" title="page by glenthemes">glenthemes</a></div>
+
+<!---------------------------------------------------------->
+
+<a class="out"><div id="backing"></div></a>
+<div id="screen"></div>
+<div id="poppy">
+    <div class="clinks">
+    
+    <!----YOUR CUSTOM LINKS GO HERE---->
+    <!----PLEASE DO NOT REMOVE THE THEME CREDIT LINK---->
+        <a href="/">index</a>
+        <a href="/ask">message</a>
+        <a href="/archive">archive</a>
+        <a href="//glenthemes.tumblr.com" title="page by glenthemes">credit</a>
+        <a href="/">link 1</a>
+        <a href="/">link 2</a>
+        <a href="/">link 3</a>
+        <a href="/">link 4</a>
+        <a href="/">link 5</a>
+        <a href="/">link 6</a>
+        <a href="/">link 7</a>
+        <a href="/">etc</a>
+        
+    </div><!--do not delete this line-->
+    
+    <!----CLOSE NAVIGATION BOX BUTTON---->
+    <a class="close">return</a>
+
+</div><!--do not delete this line-->
+
+<!---------------------------------------------------------->
+
+<div id="lettuce">
+<div id="main">
+<div id="strip">
+<div class="adj">
+
+    <!----NAVIGATION BUTTON TOOLTIP---->
+    <a class="open" title="navigate">
+    
+    <div class="carrot">
+    
+    <!----NAVIGATION BUTTON ICON---->
+    <!--to change the icon, go to this website:-->
+    <!--saturnthms.com/font-->
+    <!--and scroll down to "Filters"-->
+    <span class="sf sf-deck-o"></span>
+    
+    </div><div class="poop"></div></a><!--do not delete this line-->
+    
+    <div id="sect">
+    
+    <!----SIDEBAR CHARACTER ICONS---->
+    <!--icon size is 64px-->
+    <!--change the number in "round1" to the corresponding character number-->
+    <!--e.g.: change "round1" to "round5" if you are on your 5th character-->
+    <!--to add a new character, copy the following:-->
+    <!-- START COPY -->
+    <a class="round1" title="character 1 icon tooltip">
+    <img class="face" src="//68.media.tumblr.com/383e6a11bfb8f593ee2cb49f3bf86568/tumblr_oonpt6jtgz1utyy72o3_r2_250.png"></a>
+    <!-- END COPY -->
+    
+    <a class="round2" title="character 2 icon tooltip">
+    <img class="face" src="//68.media.tumblr.com/d55e4c4635f36fea1d5758ce3875549a/tumblr_oontrn6ozG1utyy72o3_r1_250.png"></a>
+    
+    <a class="round3" title="character 3 icon tooltip">
+    <img class="face" src="//68.media.tumblr.com/5ad068cc34e78550ec6dc7c64aa8288c/tumblr_ooo34tPzv61s4s960o1_r1_250.png"></a>
+    
+    <a class="round4" title="character 4 icon tooltip">
+    <img class="face" src="//68.media.tumblr.com/2929948940d94f1747f13b6bbb31eb13/tumblr_oonpt6jtgz1utyy72o6_250.png"></a>
+    
+    </div><!--sect--><!--do not delete this line-->
+</div><!--adj--><!--do not delete this line-->
+</div><!--strip--><!--do not delete this line-->
+
+<!---------------------------------------------------------->
+
+<div id="silhouette">
+    
+    <!----HEIGHT CHART---->
+    <!--you can delete all this if you don't want the height chart-->
+    <div class="mug five11"></div>
+    <div class="mug five10"></div>
+    <div class="mug five9"></div>
+    <div class="mug five8"></div>
+    <div class="mug five7"></div>
+    <div class="mug five6"></div>
+    <div class="mug five5"></div>
+    <div class="mug five4"></div>
+    <div class="mug five3"></div>
+    <div class="mug five2"></div>
+    <div class="mug five1"></div>
+    <div class="mug five0"></div>
+    <div class="mug four11"></div>
+    <div class="mug four10"></div>
+    <div class="mug four9"></div>
+    <div class="mug four8"></div>
+    <div class="mug four7"></div>
+    <div class="mug four6"></div>
+    <div class="mug four5"></div>
+    <div class="mug four4"></div>
+    <div class="mug four3"></div>
+    <div class="mug four2"></div>
+    <div class="mug four1"></div>
+    <div class="mug four0"></div>
+    <div class="mug three11"></div>
+    <div class="mug three10"></div>
+    <div class="mug three9"></div>
+    <div class="mug three8"></div>
+    <div class="mug three7"></div>
+    <div class="mug three6"></div>
+    <div class="mug three5"></div>
+    
+    <div class="pillar"></div><!--height chart end-->
+    
+<!---------------------------------------------------------->
+    
+    <div id="torch">
+    <div id="vertical">
+    
+    <!----VERTICAL/SIDEWAYS TEXT---->
+    <!--change the number in "line1" to the corresponding character no.-->
+    <!--e.g.: change "line1" to "line5" if on your 5th character-->
+    <!-- START COPY -->
+    <div class="line1">
+    <b>some bolded text:</b> some normal text for 1
+    </div>
+    <!--END COPY-->
+    
+    <div class="line2">
+    <b>some bolded text:</b> some normal text for 2
+    </div>
+    
+    <div class="line3">
+    <b>some bolded text:</b> some normal text for 3
+    </div>
+    
+    <div class="line4">
+    <b>some bolded text:</b> some normal text for 4
+    </div>
+        
+    </div><!--vertical--><!--do not delete this line-->
+    </div><!--torch--><!--do not delete this line-->
+    
+<!---------------------------------------------------------->
+
+    <div id="pics">
+    
+    <!----CENTRAL CHARACTER IMAGES---->
+    <!--change the number in "chara1" to the corresponding character number-->
+    <!--e.g.: change "chara1" to "chara5" if you are on your 5th character-->
+    <!-- START COPY -->
+    <img class="chara1" src="//78.media.tumblr.com/08e320e53552364eb34df1d907b2052a/tumblr_p3rfmrWWj51qg2f5co2_r2_1280.png">
+    <!-- END COPY -->
+    
+    <img class="chara2" src="//78.media.tumblr.com/b31f1123b3be54a25357667c22e5b317/tumblr_p3rfmrWWj51qg2f5co4_r1_1280.png">
+    
+    <img class="chara3" src="//78.media.tumblr.com/32b6a9467050356dd924ba8a0b0a9ca7/tumblr_p3rfmrWWj51qg2f5co1_r1_1280.png">
+    
+    <img class="chara4" src="//78.media.tumblr.com/3d82f90bf5b000c6c03d6af566b079f5/tumblr_p3rfmrWWj51qg2f5co3_r2_1280.png">
+    
+    </div><!--pics--><!--do not delete this line-->
+    
+<!---------------------------------------------------------->
+    
+    <div id="beam">
+    
+    <!----CHARACTER NAME LABELS---->
+    <!--change the number in "label1" to the corresponding character number-->
+    <!--e.g.: change "label1" to "label5" if you are on your 5th character-->
+    <!-- START COPY -->
+    <div class="label1">
+        <div class="name-line"></div>
+        <div class="top-text">a name</div>
+        <div class="bot-text">a subtitle</div>
+    </div>
+    <!-- END COPY -->
+    
+    <div class="label2">
+        <div class="name-line"></div>
+        <div class="top-text">a name</div>
+        <div class="bot-text">a subtitle</div>
+    </div>
+    
+    <div class="label3">
+        <div class="name-line"></div>
+        <div class="top-text">a name</div>
+        <div class="bot-text">a subtitle</div>
+    </div>
+    
+    <div class="label4">
+        <div class="name-line"></div>
+        <div class="top-text">a name</div>
+        <div class="bot-text">a subtitle</div>
+    </div>
+    
+    </div><!--beam--><!--do not delete this line-->
+    
+<!---------------------------------------------------------->
+    
+    <div id="allstat">
+    
+    <!----CHARACTER STATISTICS TABLES---->
+    <!--change the number in "stats1" to the corresponding character number-->
+    <!--e.g.: change "stats1" to "stats5" if you are on your 5th character-->
+    <!--everything between <tr> and </tr> is ONE ROW-->
+    <!-- START COPY -->
+    <div class="stats1"><table><tbody><!--table starts here-->
+    <tr>
+    <td>left text</td>
+    <td>right text</td>
+    </tr>
+    
+    <tr>
+    <td>left text</td>
+    <td>right text</td>
+    </tr>
+    
+    <tr>
+    <td>left text</td>
+    <td>right text</td>
+    </tr>
+    
+    <tr>
+    <td>left text</td>
+    <td><green>I'm green!</green></td>
+    </tr>
+    </tbody></table></div><!--table ends here-->
+    <!-- END COPY -->
+    
+    
+    <div class="stats2"><table><tbody><!--table starts here-->
+    <tr>
+    <td>left text</td>
+    <td>right text</td>
+    </tr>
+    
+    <tr>
+    <td>left text</td>
+    <td>right text</td>
+    </tr>
+    
+    <tr>
+    <td>left text</td>
+    <td>right text</td>
+    </tr>
+    
+    <tr>
+    <td>left text</td>
+    <td><green>I'm green!</green></td>
+    </tr>
+    </tbody></table></div><!--table ends here-->
+    
+    
+    <div class="stats3"><table><tbody><!--table starts here-->
+    <tr>
+    <td>left text</td>
+    <td>right text</td>
+    </tr>
+    
+    <tr>
+    <td>left text</td>
+    <td>right text</td>
+    </tr>
+    
+    <tr>
+    <td>left text</td>
+    <td>right text</td>
+    </tr>
+    
+    <tr>
+    <td>left text</td>
+    <td><green>I'm green!</green></td>
+    </tr>
+    </tbody></table></div><!--table ends here-->
+    
+    
+    <div class="stats4"><table><tbody><!--table starts here-->
+    <tr>
+    <td>left text</td>
+    <td>right text</td>
+    </tr>
+    
+    <tr>
+    <td>left text</td>
+    <td>right text</td>
+    </tr>
+    
+    <tr>
+    <td>left text</td>
+    <td>right text</td>
+    </tr>
+    
+    <tr>
+    <td>left text</td>
+    <td><green>I'm green!</green></td>
+    </tr>
+    </tbody></table></div><!--table ends here-->
+    
+    </div><!--allstat--><!--do not delete this line-->
+    
+<!---------------------------------------------------------->
+    
+    <div id="berry">
+    
+    <!----CHARACTER METAR BARS---->
+    <!--change the number in "barstuff1" to the corresponding character no.-->
+    <!--e.g.: change "barstuff1" to "barstuff5" if on your 5th character-->
+    <!-- START COPY -->
+    <div class="barstuff1"><!--START METER BARS-->
+        <div class="barstat"><!--start one row-->
+            <div class="bartit">meter label</div>
+            <div class="barholder">
+                <div class="bar-fill"></div>
+                <div class="bar-empty"></div>
+                <div class="bar-empty"></div>
+                <div class="bar-empty"></div>
+                <div class="bar-empty"></div>
+            </div>
+        </div><!--end one row-->
+    
+        <div class="barstat"><!--start another row-->
+            <div class="bartit">meter label</div>
+            <div class="barholder">
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+            </div>
+        </div><!--end another row-->
+    </div><!--END METER BARS-->
+    <!-- END COPY -->
+    
+    
+    
+    <div class="barstuff2"><!--START METER BARS-->
+        <div class="barstat"><!--start one row-->
+            <div class="bartit">meter label</div>
+            <div class="barholder">
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+            </div>
+        </div><!--end one row-->
+    
+        <div class="barstat"><!--start another row-->
+            <div class="bartit">meter label</div>
+            <div class="barholder">
+                <div class="bar-fill"></div>
+                <div class="bar-empty"></div>
+                <div class="bar-empty"></div>
+                <div class="bar-empty"></div>
+                <div class="bar-empty"></div>
+            </div>
+        </div><!--end another row-->
+    </div><!--END METER BARS-->
+    
+    
+    
+    <div class="barstuff3"><!--START METER BARS-->
+        <div class="barstat"><!--start one row-->
+            <div class="bartit">meter label</div>
+            <div class="barholder">
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+            </div>
+        </div><!--end one row-->
+    
+        <div class="barstat"><!--start another row-->
+            <div class="bartit">meter label</div>
+            <div class="barholder">
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-empty"></div>
+                <div class="bar-empty"></div>
+            </div>
+        </div><!--end another row-->
+    </div><!--END METER BARS-->
+    
+    
+    
+    <div class="barstuff4"><!--START METER BARS-->
+        <div class="barstat"><!--start one row-->
+            <div class="bartit">meter label</div>
+            <div class="barholder">
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-empty"></div>
+            </div>
+        </div><!--end one row-->
+    
+        <div class="barstat"><!--start another row-->
+            <div class="bartit">meter label</div>
+            <div class="barholder">
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-fill"></div>
+                <div class="bar-empty"></div>
+            </div>
+        </div><!--end another row-->
+    </div><!--END METER BARS-->
+    
+    
+    </div><!--berry--><!--do not delete this line-->
+    
+</div><!--silhouette--><!--do not delete this line-->
+
+<!---------------------------------------------------------->
+
+<div id="boba">
+    <div id="flavoring">
+    <div id="seaweed">
+    
+    <!----CHARACTER TITLES (RIGHT HAND SIDE)---->
+    <!--change the number in "title1" to the corresponding character no.-->
+    <!--e.g.: change "title1" to "title5" if on your 5th character-->
+    <!--you can use <br> for a line break-->
+    <!--I recommend only having TWO lines-->
+    
+        <div class="title1">character<br>one</div>
+        
+        <div class="title2">character<br>two</div>
+        
+        <div class="title3">character<br>three</div>
+        
+        <div class="title4">character<br>four</div>
+        
+    </div><!--seaweed--><!--do not delete this line-->
+    
+<!---------------------------------------------------------->
+    
+    <div id="fruit">
+    
+        <!----SIDEBAR CHARACTER ICONS---->
+        <!--change the no. in "tapioca1" to the corresponding character no.-->
+        <!--e.g.: change "tapioca1" to "tapioca5" if on your 5th character-->
+        
+        <div class="tapioca1">
+        Some text about how awesome character 1 is!
+        </div><!--end of the text area-->
+        
+        <div class="tapioca2">
+        Some text about how awesome character 2 is!
+        </div><!--end of the text area-->
+        
+        <div class="tapioca3">
+        Some text about how awesome character 3 is!
+        </div><!--end of the text area-->
+        
+        <div class="tapioca4">
+        Some text about how awesome character 4 is!
+        </div><!--end of the text area-->
+    
+    </div><!--fruit--><!--do not delete this line-->
+    
+<!---------------------------------------------------------->
+    
+    <div id="nav">
+    
+        <!----BIG LINK UNDER BIOGRAPHY---->
+        <!--change the no. in "biglink1" to the corresponding character no.-->
+        <!--e.g.: change "biglink1" to "biglink5" if on your 5th character-->
+        
+        <div class="biglink1">
+        <a href="/">character 1 link name »</a></div>
+        
+        <div class="biglink2">
+        <a href="/">character 2 link name »</a></div>
+        
+        <div class="biglink3">
+        <a href="/">character 3 link name »</a></div>
+        
+        <div class="biglink4">
+        <a href="/">character 4 link name »</a></div>
+    
+    </div><!--nav--><!--do not delete this line-->
+    </div><!--flavoring--><!--do not delete this line-->
+</div><!--boba--><!--do not delete this line-->
+
+</div><!--main--><!--do not delete this line-->
+</div><!--lettuce--><!--do not delete this line-->
+ 
+ 
+</body>
+
+</html>
\ No newline at end of file

left text	right text
left text	right text
left text	right text
left text	I'm green!