nym code

<style type="text/css">
@import url(//fonts.googleapis.com/css?family=Bebas Neue);
@import url(//fonts.googleapis.com/css?family=Courgette);
@import url(//fonts.googleapis.com/css?family=Oswald);
@import url(//fonts.googleapis.com/css?family=Comfortaa);
@import url(//fonts.googleapis.com/css?family=Poppins);
@import url(//fonts.googleapis.com/css?family=Sedgwick+Ave);
@import url(//fonts.googleapis.com/css?family=Pathway+Gothic+One);


/*body*/
body{
 background-color: #2b2e34;
 background: linear-gradient(-45deg, #9C0000, #000, #000);
 background-size: 400% 400%;
 -webkit-animation: Gradient 15s ease infinite;
 -moz-animation: Gradient 15s ease infinite;
 animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
 0% {
 background-position: 0% 50%
 }
 50% {
 background-position: 100% 50%
 }
 100% {
 background-position: 0% 50%
 }
}

@-moz-keyframes Gradient {
 0% {
 background-position: 0% 50%
 }
 50% {
 background-position: 100% 50%
 }
 100% {
 background-position: 0% 50%
 }
}

@keyframes Gradient {
 0% {
 background-position: 0% 50%
 }
 50% {
 background-position: 100% 50%
 }
 100% {
 background-position: 0% 50%
 }
}

body, a {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur819.cur), auto;}


b, strong {color:#fff font-family: Comfortaa; font-size: 15px;line-height: 15px; font-weight: bold;
 text-shadow: 1px 0px 0px #000,
 -1px 1px 0px #000,
 0px 0px 0px #000,
 0px -1px 0px #000,
 0px 0px 1px #000;
}

i, em {color:#000; font-family: Sedgwick Ave; font-size:15px;}

/*scroll*/
::-webkit-scrollbar {
 width: 5px;
 height: 0px;
 background:;
 }

 ::-webkit-scrollbar-thumb {
 background-color: #7eb2ca;
 -webkit-border-radius: 10px;
 border-radius: 10px;
z-index: 999;
 }



#nym img{
position: fixed;
max-width: auto;
max-height: 80%;
top:12%;
left: 27.5%;
z-index: 6;
}


#background img{
position: absolute;
width: 100%;
height:100%;
top:0px;
left: 0px;
z-index: 2;
}

/*navigation*/
#navi {
 position: fixed;
 left:35%;
 top:87%;
 text-align:center;
 color: white;
 width: 50vw;
 height: 20px;
 padding:5px;
 line-height:7px;
 z-index: 6;
display: inline-block;
 float: left;
 }

 #navi a:link, #navi a:visited {
 text-decoration:none;
 font-weight:normal !important;
 padding:5px;
 top: 10px;
 margin-left: 20px;
 width: 2px;
height: 2px;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 background-color: #fff;
 float: left;
 }

 #navi a:hover {
 background-color:#9c0000;
 text-decoration:none;
 float: left;
 }

/*content*/
.box {
 position: fixed;
 width: 20.6vw;
 height:34vh;
 top: 52.5%;
 left: 30.4%;
 padding: 5px;
 font-size: 15px;
 line-height: 13px;
 text-align: center;
font-family: 'Oswald';
 color: #db0000;
 overflow: auto;
 opacity: 0;
 transition: all 0.7s ease-in-out;
 -webkit-transition: all 0.7s ease-in-out;
 -moz-transition: all 0.7s ease-in-out;
 -o-transition: all 0.7s ease-in-out;
 -ms-transition: all 0.7s ease-in-out;
 z-index:2;
 }

 .box:target {
 top: 52.5%;
 left: 30.4%;
 overflow: auto;
background-color: #transparent;
 opacity: 1;
 transition: all 0.7s ease-in-out;
 -webkit-transition: all 0.7s ease-in-out;
 -moz-transition: all 0.7s ease-in-out;
 -o-transition: all 0.7s ease-in-out;
 -ms-transition: all 0.7s ease-in-out;
 z-index:8;
 }

/*tables*/
td.one{
 width: 261px;
 font-family: Comfortaa;
 font-size: 15px;
 text-align: left;
 word-spacing: 1px;
 letter-spacing: 0px;
 line-height: 9px;
 font-weight: bold;
 color: #000;
 text-shadow: 1px 0px 0px #9c0000,
 -1px 1px 0px #9c0000,
 0px 0px 0px #000,
 0px -1px 0px #000,
 0px 0px 1px #999;
}

 td.two{
 width: 261px;
 font-family: Oswald;
 font-size: 15px;
 text-align: right;
 word-spacing: 1px;
 letter-spacing: 0px;
 line-height: 9px;
 color: #db0000;
 }

/*link*/
a:link,a:active,a:visited {
 color: #000;
 font-family: courgette;
 font-size: 15px;
 line-height: 10px;
 letter-spacing: 0px;
 display: ;
 font-weight: bold;
 margin-bottom: px;
 word-spacing: 0px;
 text-transform: none;
 text-align: center;
 text-decoration: none;
 transition: all .3s ease-in-out;
 -webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -o-transition: all .3s ease-in-out;
 -ms-transition: all .3s ease-in-out;
 z-index: 7;
 }

 a:hover {
 color: #9C0000;
text-shadow: 1px 0px 0px #fff,
 0px 1px 0px #fff,
 -1px 0px 0px #fff,
 0px -1px 0px #fff,
 0px 0px 20px #fff;
 font-family: courgette;
 font-size: 12px;
 line-height: 10px;
 letter-spacing: 0px;
 display: ;
 font-weight: bold;
 margin-bottom: px;
 word-spacing: 0px;
 text-align: center;
 text-decoration: none;
 transition: all .3s ease-in-out;
 -webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -o-transition: all .3s ease-in-out;
 -ms-transition: all .3s ease-in-out;
}

</style>
<div id="nym">
<img src="http://i.picpar.com/g1Zc.png">
</div><div id="background">

<div id="navi">
 <a href="#one"></a>
 <a href="#two"></a>
<a href="#three"></a>
<a href="#four"></a>
</div>

<div id="one" class="box">
 <table><br>
 <tr><td class="one">
Name:
 </td><td class="two">
<b>Nymphadora</b><p>
 </td></tr><tr>



<tr><td class="one">
Species:
 </td><td class="two">
<span title=""><b>Absol Gijinka</b><p>
 </td></tr><tr>

 <tr><td class="one">
Occupation:
 </td><td class="two">
<b>Soothsayer</b><p>
 </td></tr><tr>

 <tr><td class="one">
Marital Status:
 </td><td class="two">
<a target="_blank" href="https://roleplay.chat/profile.php?user=Shuriken">Swept up by the sands.</a><p>
 </td></tr><tr>

 <tr><td class="one">
Nature:
 </td><td class="two">
<b>Lonely</b><p>
 </td></tr><tr>

<tr><td class="one">
Ability:
 </td><td class="two">
<b>Justified</b><p>
 </td></tr><tr>


<tr><td class="one">
Held Item:
 </td><td class="two">
<b>Dread Plate</b><p>
 </td></tr><tr>

<tr><td class="one">
Capture Status:
 </td><td class="two">
<span title="Trained in the arcane arts by a strange
young witch that can only be described
as an insufferable know it all.
Released after her training was complete."> <b>Wild</b><p>
 </td></tr><tr>

<tr><td class="one">
Move Set:
 </td><td class="two">
<span title="[Dark Pulse, Night Slash, Thunder Wave, Future Sight, Perish Song, Shadow Claw]"> <b>Hover*</b>
 </td></tr><tr>
</table>
 </div>

 <div id="two" class="box">
<b>History</b><p>
<i><center><p><br><br><br><br>Legends of yesteryear speak in hushed tones of evil beings<p> that sacrificed the lives of their loved ones in order to slip into<p> the skin of an animal. These witches corrupt the world<p> around them, bringing bad omens and discord wherever they<p> tread. They assume their feral forms to avoid persecution or to<p> hunt for their tribes, often twisting ancient magic into dark<p> ceremonies so that they may further their motivations.</i>


 </div>
 <div id="four" class="box"><p><b>OOC</b><p>
<i>EST. Typist has a tendency to AFK a lot because she has the<br> attention span of a rodent.<p>Discord for the illest of course.<p> Will take your drama and turn it into trash cubes.<Br><br><br>
<a target="_blank" href="https://www.youtube.com/watch?v=9bQFUH4BDIU&feature=youtu.be&t=1">Theme: Danny Elfman - Fireside Dance</a>

<br><br><br>This profile was commissioned for </i><b>Nymphadora</b><i> only. <p>Steal any part of it and I'll personally turn you into a matchbox. Good talk.<p> Created by <i>Vaeldra</i> with the dopest codes I ever smoked.
 </div>

<div id="three" class="box">
<center><p></i><b><u>Fantastic Beasts and Where to Find Them</u></b>
<p><span title="The silver lining in my clouds."><a target="_blank" href="https://roleplay.chat/profile.php?user=Shuriken">The Prince.</a><br>
<p><span title="My dear ptichka. You have much to learn on your journey."><a target="_blank" href="https://roleplay.chat/profile.php?user=Zorua ">The Little Vixen.</a><br>
<p><span title="A sweet pupper what mauled me in an alley."><a target="_blank" href="https://roleplay.chat/profile.php?user=0079 ">The Hound.</a><br>
<p><span title="A restless knight, drawn to the morbid and melancholy of the afterlife to defend the downtrodden."><a target="_blank" href="https://roleplay.chat/profile.php?user=durengard">The Dame.</a><br>
<p><span title="We really have got to stop meeting like this."><a target="_blank" href="https://roleplay.chat/profile.php?user=krookodile">The Grump.</a><br>
<p><span title="A curious Milotic, quite adept in the art of the waltz."><a target="_blank" href="https://roleplay.chat/profile.php?user=Bach ">The Sea Serpent.</a>
<p><span title="The worst part of holding the memories is not the pain. It's the loneliness of it."><a target="_blank" href="https://roleplay.chat/profile.php?user=voltaire ">The Spider.</a>
<p><span title="Madame, bear in mind that princes govern all things - save the wind."><a target="_blank" href="https://roleplay.chat/profile.php?user=dartrix ">The Head Bird.</a>
<p><span title=""><a target="_blank" href="https://roleplay.chat/profile.php?user=Shiny+Drapion ">The Menthol Addict.</a><br>
<p><b><u>Famous Witches and Wizards</u></b>
<p><span title="A little bird that fluttered into my heart one day."><a target="_blank" href="https://roleplay.chat/profile.php?user=Amylia ">The Young Doctor.</a>

 </div>