KHEMIA [WIP]

<style type="text/css">
@import url(//fonts.googleapis.com/css?family=Oleo+Script|Allura|Overlock|Permanent+Marker|Rancho|Bebas+Neue|Grenze+Gotisch);

body {
background-color: transparent;
background-image: linear-gradient(to bottom right, #000 , #211313, #523A3A, #603E2A);
background-position: bottom;
background-size: 100%;
background-repeat:no-repeat;
}

#profile {
position: fixed;
left: 0px;,
right: 0px;
top: 0px;
bottom: 0px;
}

#overlay {
background: url('');
z-index: -1;
position: fixed;
 background-size: 100%;
background-repeat: no-repeat;
left: 0px; top: 0px; right: 0px; bottom: 0px;
}

::-webkit-scrollbar-track {background-color:;}
::-webkit-scrollbar-thumb {background-color:;}
::-webkit-scrollbar {width:0px;height:0px;}

#tab1 {
position: fixed;
z-index: 6;
background-color: transparent;
left: 64.1vw;
bottom: 65.8vh;
height: 60px;
width: 60px;
background-image: url('https://i.gifer.com/Z92e.gif');
background-repeat: no-repeat;
background-size: 100%;
opacity: 1;
}

#tab2 {
position: fixed;
z-index: 6;
background-color: transparent;
left: 64.7vw;
bottom: 50.8vh;
height: 60px;
width: 60px;
background-image: url('https://i.gifer.com/Z92e.gif');
background-repeat: no-repeat;
background-size: 100%;
opacity: 1;
}

#tab3 {
position: fixed;
z-index: 6;
background-color: transparent;
left: 62vw;
bottom: 34vh;
height: 60px;
width: 60px;
background-image: url('https://i.gifer.com/Z92e.gif');
background-repeat: no-repeat;
background-size: 100%;
opacity: 1;
}

#tab4 {
position: fixed;
z-index: 6;
background-color: transparent;
left: 54vw;
bottom: 23.1vh;
height: 60px;
width: 60px;
background-image: url('https://i.gifer.com/Z92e.gif');
background-repeat: no-repeat;
background-size: 100%;
opacity: 1;

}

#render1 {
position: absolute;
z-index: 5;
left: 35vw;
bottom: 0vh;
height: 98.5vh;
width: 33vw;
background-color: transparent;
background-image: url('http://i.picpar.com/ydPe.png');
opacity: 1;
background-size: 100%;
background-repeat: no-repeat;
}

#name {
position: absolute;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
bottom: 79vh;
left: 9.7vw;
font-size: 120px;
letter-spacing: 2px;
background-image: url('https://img1.picmix.com/output/stamp/thumb/2/2/5/1/1581522_bf3fa.gif');
font-family: 'Permanent Marker';
background-color: #523A3A;
-webkit-text-stroke: 3px #211313;
z-index: 4;
opacity: 1;
}

#container {
position: absolute;
z-index: 2;
left: 9.7vw;
bottom: 6.7vh;
width: 80vw;
height: 75vh;
border-right: 4px solid #6C3C3C;
border-bottom: 4px solid #6C3C3C;
border-left: 4px solid #211313;
border-top: 4px solid #211313;
background-color: #914D4A;
background-image: linear-gradient(to top right, #000 , #211313, #523A3A, #6C3C3C);
opacity: 0.95;
}

#tree {
position: absolute;
left: 9.7vw;
bottom: 0.6vh;
height: 300px;
width: 400px;
background-image: url('https://i.pinimg.com/originals/8f/62/07/8f6207b1b601abfe8147f701c5b53fdf.png');
background-color: transparent;
opacity: 1;
background-size: 100%;
background-repeat: no-repeat;
z-index: 4;
}

#ooc {
position: absolute;
z-index: 4;
left: 62.2vw;
bottom: 11.1vh;
background-color: #000;
overflow-y: auto;
background-image: url('');
background-size: 100%;
background-repeat: no-repeat;
background-position: center, bottom;
border-left: 2px solid #6C3C3C;
border-bottom: 2px solid #6C3C3C;
border-right: 2px solid #211313;
border-top: 2px solid #211313;
background-color: #54393E;
color: #FBDBC6;
height: 31.6vh;
width: 25vw;
font-size: 11px;
font-family: 'Overlock';
opacity: 0.9
padding: 7px;
padding-left: 3px;
padding-right: 3px;
line-height: 13px;
}

#dossier {
position: absolute;
z-index: 4;
left: 68.2vw;
bottom: 47vh;
background-color: #000;
overflow-y: auto;
background-image: url('');
border-left: 2px solid #6C3C3C;
border-bottom: 2px solid #6C3C3C;
border-right: 2px solid #211313;
border-top: 2px solid #211313;
background-color: #54393E;
color: #F9B284;
height: 31.6vh;
width: 19vw;
font-size: 11px;
line-height: 13px;
font-family: 'Overlock';
opacity: 0.9
padding: 7px;
padding-left: 3px;
padding-right: 3px;
}

#connections {
position: absolute;
z-index: 4;
left: 12.2vw;
bottom: 47vh;
background-color: #000;
overflow-y: auto;
background-image: url('');
border-right: 2px solid #6C3C3C;
border-bottom: 2px solid #6C3C3C;
border-top: 2px solid #211313;
border-left: 2px solid #211313;
background-color: #54393E;
color: #F9B284;
text-align: center;
height: 31.6vh;
width: 22vw;
font-size: 14px;
line-height: 13px;
font-family: 'Rancho';
opacity: 0.9
padding: 7px;
padding-left: 3px;
padding-right: 3px;
}

.imgbox {
width: 3vw;
height: 5vh;
margin: 1px;
float: center;
margin-top: 1px;
margin-bottom: 1px;
background-color: #000;
border-left: 2px solid #6C3C3C;
border-top: 2px solid #6C3C3C;
border-bottom: 2px solid #211313;
border-right: 2px solid #211313;
background-color: #54393E;
}

.imgbox:hover {
filter: grayscale(40%);
opacity: 0.8;
}

h1 {
font-family: 'Oleo Script';
font-size: 20px;
color: #965841;
text-align: left;
background-color: #432A2E;
background-image: url('https://www.transparenttextures.com/patterns/black-linen.png');
line-height: 14px;
margin-top: 4px;
margin-bottom: 0px;
margin-left: 1px;
margin-right: 1px;
}

h2 {
font-family: 'Oleo Script';
font-size: 20px;
color: #965841;
text-align: right;
background-color: #432A2E;
background-image: url('https://www.transparenttextures.com/patterns/black-linen.png');
line-height: 14px;
margin-top: 4px;
margin-bottom: 0px;
margin-left: 1px;
margin-right: 1px;
}

h3 {
font-family: 'Bebas Neue';
font-size: 12px;
color: #E2895F;
text-transform: uppercase;
letter-spacing: 2px;
 border-top: 1px dotted #000;
text-align: left;
margin-right: 3px;
margin-left: 3px;
line-height: 14px;
margin-top: 0px;
margin-bottom: 3px;
}

h4 {
font-family: 'Bebas Neue';
font-size: 12px;
color: #E2895F;
text-transform: uppercase;
letter-spacing: 2px;
 border-top: 1px dotted #000;
text-align: right;
margin-right: 3px;
margin-left: 3px;
line-height: 14px;
margin-top: 0px;
margin-bottom: 3px;
}

b {
font-family: 'Grenze Gotisch';
color: #855144;
font-size: 13px;
}

a {
font-family: 'Overlock';
font-size: 11px;
text-decoration: none;
color: #EDA550;
}

a:hover {
text-decoration: underline;
color: orange;
}

i {
color: #DE7C31;
}



</style>

<div id="profile" oncontextmenu="return false;">
<div id="overlay"></div>
<div id="render1"></div>
<div id="container"></div>
<div id="tree"></div>
<div id="name">Khemia</div>
<a href="#2"><div id="tab1"></div></a>
<a href="#3"><div id="tab2"></div></a>
<a href="#4"><div id="tab3"></div></a>
<a href="#1"><div id="tab4"></div></a>
<div id="ooc">
<h2>Out of Character</h2><h3>Separate Heading!</h3>
<B>00.</B> This code was created by <a href="https//roleplay.chat/profile.php?user=Sailor+Chuu" target="_blank">Chuu</a> for Khemia's exclusive use! Do <i>not</i> steal and alter, we'll know. Bits of code were borrowed from <a href="https://roleplay.chat/profile.php?user=Knight">Knight</a> for the Connections tab, and then heavily modified. P.S. the fireballs are tabs!<br>
<B>01.</B> OC line one.<br>
<B>02.</B> OC line two.<br>

</div>

<div id="connections">
<h1>Connections</h1><h4>Sub-Heading</h4>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>
<a href="" target="_blank"><img src="https://data.whicdn.com/images/307817007/original.gif" class="imgbox"></a>


</div>

<div id="dossier">
<div style="height: 31.3vh; overflow-y:hidden;">
<a name="1"></a>
<div style="height: 31.3vh; overflow: auto;">
<div style="margin: 0 auto; width: 23.5em;">
<h2>Statistics</h2><h3>Sub-Header</h3>
<B>Name:</B> <font style=float:right>Text.</font><br>
<B>Nickname(s):</B> <font style=float:right>Text.</font><br>
<B>Alias:</B> <font style=float:right>Text.</font><br>
<B>Age:</b> <font style=float:right>Text.</font><br>
<B>D.o.B.:</b> <font style=float:right>Text.</font><br>
<b>Zodiac:</b> <font style=float:right>Text.</font><br>
<B>P.o.B.:</b> <font style=float:right>Text.</font><br>
<B>Gender:</b> <font style=float:right>Female.</font><br>
<B>Species:</b> <font style=float:right>Human.</font><br>
<B>Orientation:</b> <font style=float:right>Text.</font><br>
<B>Marital:</B> <font style=float:right>Text.</font><br>
<B>Alignment:</b> <font style=float:right>Text.</font><br>
<B>Occupation:</b> <font style=float:right>Text.</font><br>
<B>Partner:</B> <font style=float:right><a target="_blank" href="https://roleplay.chat/profile.php?user=" target="_blank">Text</a>.</font>
<h1>Appearance</h1><h4>Sub-Header</h4>
<B>Hair Color:</b> <font style=float:right>Brunette.</font><br>
<B>Eye Color:</B> <font style=float:right>Blue.</font><br>
<B>Skin Tone:</b> <font style=float:right>Cream.</font><br>
<B>Height:</b> <font style=float:right>5'0".</font><br>
<B>Weight:</b> <font style=float:right>110 lbs.</font><br>
<B>Build:</b> <font style=float:right>Text.</font><br>
<B>Blood Type:</b> <font style=float:right>Text.</font>
</div></div>


<a name="2"></a>
<div style="height: 31.6vh; overflow: auto;">
<div style="margin: 0 auto; width: 23.5em;">
<h1>Words</h1><h4>Sub-Header</h4>

</div></div>

<a name="3"></a>
<div style="height: 31.6vh; overflow: auto;">
<div style="margin: 0 auto; width: 23.5em;">
<h2>Words</h2><h3>Sub-Header</h3>

</div></div>

<a name="4"></a>
<div style="height: 31.6vh; overflow: auto;">
<div style="margin: 0 auto; width: 23.5em;">
<h1>Final Header</h1><h4>Sub-Header</h4>

</div></div></div></div>