HENRY LIM [DONE]

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Josefin+Slab|Niconne|Lobster+Two|Poiret+One|Crushed');

body {
background-color: white;
background-image: url('http://avante.biz/wp-content/uploads/Wallpapers-Light-Blue/Wallpapers-Light-Blue-046.jpg');
background-position: center;
background-size: 100%;
background-repeat:no-repeat;
}

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

::-webkit-scrollbar-track {
background-color:;
}

::-webkit-scrollbar-thumb {
background-color:;
}

::-webkit-scrollbar {
width:0px;
height:0px;
}

#container {
position: absolute;
left: 11.5%;
top: 5.5%;
height: 500px;
width: 980px;
border: 3px solid #71A0D6;
background: #7FAFDF;
box-shadow: 0px 0px 9px 9px #5882BC;
background-image: url('');
background-size: 8%;
background-repeat: repeat;
border-radius: 1%;
}

#icon {
position: absolute;
z-index: 1;
left: 9px;
top: 9px;
height: 150px;
width: 150px;
border: 2px solid #71A0D6;
background: #7FAFDF;
box-shadow: 0px 0px 2px 2px #5882BC;
background-image: url('https://pbs.twimg.com/media/D_3JBpDWwAEBMHm.jpg');
background-size: 100%;
background-repeat: no-repeat;
border-radius: 3%;
}

#box1 {
position: absolute;
z-index: 1;
left: 175px;
top: 9px;
border: 1px dotted #71A0D6;
background: #C1DFF7;
height: 142px;
width: 296px;
border-radius: 3%;
padding: 5px;
overflow-y: auto;
font-family: 'Poiret One';
font-size: 10.5px;
color: #3c6091;
line-height: 15px;
box-shadow: 0px 0px 3px 2px #5882BC;
background-image: url('https://www.freepnglogos.com/uploads/cloud-png/white-big-cloud-png-27.png');
background-size: 100%;
background-repeat: no-repeat;
background-position: bottom right;
}

#box2 {
position: absolute;
z-index: 1;
left: 9px;
top: 174px;
border: 1px dotted #71A0D6;
background: #C1DFF7;
height: 140px;
width: 462.5px;
border-radius: 3%;
padding: 5px;
overflow-y: auto;
font-family: 'Poiret One';
font-size: 10.5px;
color: #3c6091;
line-height: 15px;
box-shadow: 0px 0px 3px 2px #5882BC;
background-image: url('https://www.transparenttextures.com/patterns/green-dust-and-scratches.png');
}

#box3 {
position: absolute;
z-index: 1;
right: 9px;
top: 104px;
border: 1px dotted #71A0D6;
background: #C1DFF7;
height: 210px;
width: 462.5px;
border-radius: 3%;
padding: 5px;
overflow-y: auto;
font-family: 'Poiret One';
font-size: 10.5px;
color: #3c6091;
line-height: 15px;
box-shadow: 0px 0px 3px 2px #5882BC;
background-image: url('https://www.transparenttextures.com/patterns/green-dust-and-scratches.png');
}

#tinycon {
position: absolute;
z-index: 2;
left: 435px;
top: 193px;
background-image: url('https://cdn140.picsart.com/268979874001211.png?type=webp&to=min&r=640');
background-size: 100%;
border-radius: 50%;
height: 100px;
width: 100px;
border: 6px solid #71A0D6;
box-shadow: 0px 0px 6px 6px #5882BC;
}

#tinycon:hover {
opacity: 0;
}

#randobar {
position: absolute;
z-index: 3;
left: 9px;
top: 340px;
width: 960px;
border: 1px solid #4676b8;
background: #4676b8;
background-image: url('https://i.gifer.com/3klZ.gif');
background-size: 6.7%;
background-repeat: repeat;
height: 118px;
box-shadow: 0px 0px 3px 3px #5882BC;
}

#title {
position: absolute;
right: 5px;
top: -25px;
height: 800px;
width: 470px;
background-image: url('https://i.ibb.co/W3DHkZN/HENRY-TITLE.png');
background-size: 100%;
background-repeat: no-repeat;
}

#tab1 {
position: absolute;
z-index: 1;
left: 9px;
bottom: 9px;
height: 13px;
width: 300px;
border: 1px solid #71A0D6;
background: #71A0D6;
box-shadow: 0px 0px 3px 3px #5882BC;
}

#tab1:hover {
background: #4676b8;
transform: skew(10deg);
}

#tab2 {
position: absolute;
z-index: 1;
left: 339px;
bottom: 9px;
height: 13px;
width: 300px;
border: 1px solid #71A0D6;
background: #71A0D6;
box-shadow: 0px 0px 3px 3px #5882BC;
}

#tab2:hover {
background: #4676b8;
transform: skew(10deg);
}

#tab3 {
position: absolute;
z-index: 1;
right: 9px;
bottom: 9px;
height: 13px;
width: 300px;
border: 1px solid #71A0D6;
background: #71A0D6;
box-shadow: 0px 0px 3px 3px #5882BC;
}

#tab3:hover {
background: #4676b8;
transform: skew(10deg);
}

b {
color: #fff;
font-family: 'Crushed';
text-shadow: 0px 0px 3px #3d6099;
font-size: 10px;
}

a {
font-family: 'Niconne';
font-size: 11px;
color: #b5b479;
letter-spacing: 0.5px;
text-decoration: none;
}

a:hover {
opacity: 0.8;
-webkit-transition: opacity 0.7s linear;
 -webkit-transition: all 0.6s ease-out;
 -moz-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}

h1 {
font-family: 'Lobster Two';
font-size: 25px;
color: #C1DFF7;
text-align: center;
background-color: #4676b8;
line-height: 20px;
margin-top: 1px;
margin-bottom: 5px;
letter-spacing: 1px;
background-size: 20%;
background-repeat: repeat;
background-image: url('https://img1.picmix.com/output/stamp/normal/4/8/4/7/1777484_8803b.gif');
text-shadow: 0px 0px 15px #fff;
}

.friend {
width: 65px;
height:41px;
opacity: 1;
border: 1px dashed #71A0D6;
border-Radius: 10%;
margin-right: 1px;
margin-top: 4px;
margin-bottom:-5px;
opacity: 0.8;
-webkit-transition: opacity 0.7s linear;
 -webkit-transition: all 0.6s ease-out;
 -moz-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}

.friend:hover {
opacity: 0.7;
border: 1px dashed white;
margin-right: 1px;
margin-top: 4px;
margin-bottom:-5px;
-webkit-transition: opacity 0.7s linear;
 -webkit-transition: all 0.6s ease-out;
 -moz-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}

</style>
<div id="quokka" oncontextmenu="return false;">
<div id="container">
<div id="title"></div>
<div id="icon"></div>
<div id="randobar"></div>
<div id="tinycon"></div>
<a href="#2"><div id="tab1"></div></a>
<a href="#3"><div id="tab2"></div></a>
<a href="#1"><div id="tab3"></div></a>
<div id="box1">
<h1>Statistics</h1>
<B>Name:</B> <font style=float:right>Henry Lim.</font><br>
<B>Nickname(s):</B> <font style=float:right>Squirrel Boy, Spazz.</font><br>
<B>Age:</B> <font style=float:right>20.</font><br>
<B>Birthdate:</B> <font style=float:right>March 14th.</font><br>
<B>Zodiac:</B> <font style=float:right>Pisces.</font><br>
<B>Birthplace:</B> <font style=float:right>Nimbasa City, CA.</font><br>
<B>Citizenship:</B> <font style=float:right>American.</font><br>
<B>Ethnicity:</B> <font style=float:right>Korean.</font><br>
<B>Species:</B> <font style=float:right>Human.</font><br>
<B>Classification:</B> <font style=float:right>Mage.</font><br>
<B>Orientation:</B> <font style=float:right>Homosexual.</font><br>
<B>Marital:</B> <font style=float:right>Single.</font><br>
<B>Occupation:</B> <font style=float:right>Magizoologist.</font><br>
<font style=float:right>Lecturer.</font><br>
<font style=float:right>Theoretical Thaumaturgist.</font><br>
<B>Alignment:</B> <font style=float:right>Good.</font><br>
<B>Affiliation:</B> <font style=float:right>Vidon Guild.</font><br>
<B>Hair Color:</B> <font style=float:right>Blonde.</font><br>
<B>Eye Color:</B> <font style=float:right>Brown.</font><br>
<B>Height:</B> <font style=float:right>5'7".</font><br>
<B>Build:</B> <font style=float:right>Petite.</font>
</div>
<div id="box2">
<h1>Out of Character</h1>
<B>00.</B> Coded by <a href="//roleplay.chat/profile.php?user=Sailor+Chuu">Chuu</a> for Henry Lim's exclusive use! Do not take, modify, or redistribute any aspect of this code. If you want something similar, shoot Chuu some mail. Hover over the tiny icon to reveal the words hidden behind it!<br>
<B>01.</B> Admin alt. :) We're currently not recruiting. However, should you still feel motivated to inquire, DM Channarong.<br>
<B>02.</B> PM-selective. I don't respond to random messages often, especially those that are sexually-driven. They make me uncomfortable.<br>
<B>03.</B> FC is <B>Han Jisung</B>, known by his stage name HAN, of Stray Kids. I am not playing him, but have taken some inspiration from his idol persona for the character.<br>
</div>
<div id="box3">
<div style="height: 210px; overflow-y: hidden;">
<a name="1"></a>
<div style="height: 210px; overflow: auto;">
<div style="margin: 0 auto; width: 43.8em;">
<h1>Magic Information</h1>
<B>Zoo Pal:</B> The user utilizes this form of embodiment to transform their body parts into that of animals, both natural and magical. They may choose to transform either some of their body parts or their entire body. Along with that, the user gains the abilities of the animal that they transform into, such as enhanced combat abilities or the ability to fly or swim. This ultimately offers them a good deal of versatility as the transformations can be used for both combat but also mundane purposes.
</div></div>

<a name="2"></a>
<div style="height: 210px; overflow: auto;">
<div style="margin: 0 auto; width: 43.8em;">
<h1>Headcanons</h1>
Words words words words words for weirdos, words. Words words words words words for weirdos, words. Words words words words words for weirdos, words. Words words words words words for weirdos, words. Words words words words words for weirdos, words.
</div></div>

<a name="3"></a>
<div style="height: 210px; overflow: auto;">
<div style="margin: 0 auto; width: 43.8em;">
<h1>Friends</h1>
<a href="//roleplay.chat/profile.php?user=Atticus+Elderwood" target="_blank"><img src="http://drinkwhen.ca/wp-content/uploads/2017/03/Horns-drinking-game.gif" title="Atticus." class="friend"></a>
<a href=" " target="_blank"><img src="https://data.whicdn.com/images/337046472/original.gif" title="Ducky." class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/9c2f7316bfde47dee69814e0070f30f8/5ea8e1f4301ca1cf-07/s400x600/c8f2853a4f489a93c2e094c12ed0485caa51c866.gif" title="Chan Jr." class="friend"></a>
<a href=" " target="_blank"><img src="https://i.pinimg.com/originals/e2/63/37/e26337d814ded2056eef377e91d77563.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://i.pinimg.com/originals/e2/63/37/e26337d814ded2056eef377e91d77563.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://i.pinimg.com/originals/e2/63/37/e26337d814ded2056eef377e91d77563.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://i.pinimg.com/originals/e2/63/37/e26337d814ded2056eef377e91d77563.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://i.pinimg.com/originals/e2/63/37/e26337d814ded2056eef377e91d77563.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://i.pinimg.com/originals/e2/63/37/e26337d814ded2056eef377e91d77563.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://i.pinimg.com/originals/e2/63/37/e26337d814ded2056eef377e91d77563.gif" title="Info here" class="friend"></a>
</div></div></div></div>

</div>
</div>