Hadephobia

<style>
@import url('https://fonts.googleapis.com/css?family=Modern+Antiqua');
@import url('https://fonts.googleapis.com/css?family=Uncial+Antiqua');
 body{
 background-color:#624450;
 overflow:hidden;

 }

::-webkit-scrollbar
{
    width:0px;
    background-color: transparent;
}


 #sealleft{
 background-image:url(http://i.picpar.com/cA4c.png);
 background-size:100%;
 width:300px;
 height:600px;
 background-repeat:no-repeat;
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-300px;
 margin-left:-300px;
 opacity:1;
z-index:10;
 }

 #sealright{
 background-image:url(https://i.imgur.com/z6W0v08.png);
 background-size:100%;
 width:300px;
 height:600px;
 background-repeat:no-repeat;
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-300px;
 margin-left:-50px;
 opacity:1;
z-index:10;
 }

 #seal{
 width:200px;
 height:200px;
 position:absolute;
 top:50%;
 right:50%;
 margin-top:-100px;
 margin-left:-100px;
 opacity:1;
z-index:15;
 }

 #seal a{
 width:250px;
 height:250px;
 background-image:url(https://i.imgur.com/atT4enr.png);
 background-size:100%;
 background-repeat:no-repeat;
 display:block;
 margin-top:-100px;
 margin-left:65px;
 transition:1s;
 }

 #seal a:hover{
 filter:drop-shadow(0px 0px 10px #973d3d);
 -webkit-animation: rumble .5s infinite linear;
 }

 @-webkit-keyframes rumble {
 0% {-webkit-transform: rotate(0deg);}
 20% {-webkit-transform: translate(2px, 0px) rotate(-1deg);}
 40% {-webkit-transform: translate(1px, -1px) rotate(1deg);}
 60% {-webkit-transform: translate(-1px, -2px) rotate(0deg);}
 80% {-webkit-transform: translate(1px, 1px) rotate(1deg);}
 100% {-webkit-transform: translate(2px, -1px) rotate(-1deg);}
}

#backgroundmenu{
width:700px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-350px;
z-index:0;
opacity:0;
}

#frame{
background-image:url(https://i.imgur.com/iDUyaiF.png);
width:950px;
height:6000px;
background-size:100%;
background-repeat:no-repeat;
margin-top:-110px;
margin-left:-128px;
}

#wingright{
 background-image:urL(https://i.imgur.com/FXwtq0J.png);
background-size:100%;
background-repeat:no-repeat;
 width:350px;
 height:900px;
 position:absolute;
 top:50%;
 left:50%;
 margin-left:350px;
 margin-top:-400px;
 z-index:0;
 transform:rotate(60deg) translate(-170px,200px);
opacity:0;
}



#wingleft{
 background-image:urL(https://i.imgur.com/tdbpslJ.png);
background-size:100%;
background-repeat:no-repeat;
 width:350px;
 height:900px;
 position:absolute;
 top:50%;
 left:50%;
 margin-left:-670px;
 margin-top:-400px;
 z-index:0;
 transform:rotate(-60deg) translate(200px,200px);
opacity:0;
}

#image{
background-image:url(https://cdn.discordapp.com/attachments/307335438396555264/357994430718017536/thing2_copy.png);
background-size:contain;
background-repeat:no-repeat;
width:400px;
height:600px;
filter:drop-shadow(0px 0px 10px #fff);
margin-left:750px;
opacity:0;
}

#boxbackground{
height:230px;
width:600px;
position:absolute;
top:100px;
left:50px;
}

#navi {
 opacity:1;
 position:absolute;
 display:inline;
 height:230px;
 width:76px;
 left:50%;
 top:50%;
 font-family:tall;
 color:#000;
 float:center;
 z-index:99;
 margin-top:-150px;
 margin-left:-28px;
transition:all 1s ease-in;
transition-delay:999999s;

 }

#navi a {
 opacity:1;
 display:inline-block;
 width:0px;
 height:0px;
 background-color:transparent;
margin-left:-5px;
transition:1s;
}

#navi a:hover{
filter:drop-shadow(0px 0px 5px #fff) brightness(100%);

}

#one, #two {
height:230px;
width:260px;
position:absolute;
top:0px;
left:0px;
opacity:0;
z-index:0;
color:#fff;
overflow:auto;
font-family: 'Modern Antiqua', cursive;
font-size:10pt;
}

#three, #four {
height:230px;
width:260px;
position:absolute;
left:335px;
top:0px;
opacity:0;
z-index:0;
color:#fff;
overflow:auto;
font-family: 'Modern Antiqua', cursive;
font-size:10pt;
}

h1{
font-family: 'Uncial Antiqua', cursive;
font-size:20pt;
color:#fff;
margin-top:0px;
margin-bottom:0px;
text-align:center;
}

b{
color:silver;
text-shadow: 0.5px 0.5px black;
}

a{
text-decoration:none;
color:#dadada;
transition:1s;
}

a:hover{
color:gold;
}

#blanket:target #sealleft{
 margin-left:-550px;
 opacity:0;
 transition:2s;
z-index:0;
}

#blanket:target #sealright{
 margin-left:250px;
 opacity:0;
 transition:2s;
z-index:0;

}

#blanket:target #seal{
 opacity:0;
 transition:2s;
z-index:0;

}

#blanket:target #backgroundmenu{
 opacity:1;
 transition:2s;
z-index:99;

}


#blanket:target #image{
 opacity:1;
 transition:2s;
transition-delay:2s;

}
#blanket:target #wingleft{
 transform:rotate(0deg) translate(0px,0px);
opacity:1;
transition:1s;
transition-delay:1s;

}

#blanket:target #wingright{
 transform:rotate(0deg) translate(0px,0px);
opacity:1;
transition:1s;
transition-delay:1s;

}


#blanket1:target #sealleft{
 margin-left:-550px;
 opacity:0;
 transition:2s;
z-index:0;
}

#blanket1:target #sealright{
 margin-left:250px;
 opacity:0;
 transition:2s;
z-index:0;

}

#blanket1:target #seal{
 opacity:0;
 transition:2s;
z-index:0;

}

#blanket1:target #backgroundmenu{
 opacity:1;
 transition:2s;
z-index:99;

}


#blanket1:target #image{
 opacity:1;
 transition:2s;
transition-delay:2s;

}
#blanket1:target #wingleft{
 transform:rotate(0deg) translate(0px,0px);
opacity:1;
transition:1s;
transition-delay:1s;

}

#blanket1:target #wingright{
 transform:rotate(0deg) translate(0px,0px);
opacity:1;
transition:1s;
transition-delay:1s;

}

#blanket1:target #one{
 opacity:1;
 transition:1s;

z-index:99;
}
#blanket1:target #two{
 opacity:0;
 transition:1s;

}
#blanket1:target #three{
 opacity:1;
transition:1s;
z-index:99;
}
#blanket1:target #four{
opacity:0;
transition:1s;

}


#blanket2:target #sealleft{
 margin-left:-550px;
 opacity:0;
 transition:2s;
z-index:0;
}

#blanket2:target #sealright{
 margin-left:250px;
 opacity:0;
 transition:2s;
z-index:0;

}

#blanket2:target #seal{
 opacity:0;
 transition:2s;
z-index:0;

}

#blanket2:target #backgroundmenu{
 opacity:1;
 transition:2s;
z-index:99;

}


#blanket2:target #image{
 opacity:1;
 transition:2s;
transition-delay:2s;

}
#blanket2:target #wingleft{
 transform:rotate(0deg) translate(0px,0px);
opacity:1;
transition:1s;
transition-delay:1s;

}

#blanket2:target #wingright{
 transform:rotate(0deg) translate(0px,0px);
opacity:1;
transition:1s;
transition-delay:1s;

}

#blanket2:target #one{
 opacity:0;
 transition:1s;
}
#blanket2:target #two{
 opacity:1;
 transition:1s;
z-index:99;
}
#blanket2:target #three{
 opacity:1;
transition:1s;
z-index:99;
}
#blanket2:target #four{
opacity:0;
transition:1s;

}

#blanket3:target #sealleft{
 margin-left:-550px;
 opacity:0;
 transition:2s;
z-index:0;
}

#blanket3:target #sealright{
 margin-left:250px;
 opacity:0;
 transition:2s;
z-index:0;

}

#blanket3:target #seal{
 opacity:0;
 transition:2s;
z-index:0;

}

#blanket3:target #backgroundmenu{
 opacity:1;
 transition:2s;
z-index:99;

}


#blanket3:target #image{
 opacity:1;
 transition:2s;
transition-delay:2s;

}
#blanket3:target #wingleft{
 transform:rotate(0deg) translate(0px,0px);
opacity:1;
transition:1s;
transition-delay:1s;

}

#blanket3:target #wingright{
 transform:rotate(0deg) translate(0px,0px);
opacity:1;
transition:1s;
transition-delay:1s;

}

#blanket3:target #one{
 opacity:1;
 transition:1s;
z-index:99;
}
#blanket3:target #two{
 opacity:0;
 transition:1s;
}
#blanket3:target #three{
 opacity:1;
transition:1s;
z-index:99;
}
#blanket3:target #four{
opacity:0;
transition:1s;

}

#blanket4:target #sealleft{
 margin-left:-550px;
 opacity:0;
 transition:2s;
z-index:0;
}

#blanket4:target #sealright{
 margin-left:250px;
 opacity:0;
 transition:2s;
z-index:0;

}

#blanket4:target #seal{
 opacity:0;
 transition:2s;
z-index:0;

}

#blanket4:target #backgroundmenu{
 opacity:1;
 transition:2s;
z-index:99;

}


#blanket4:target #image{
 opacity:1;
 transition:2s;
transition-delay:2s;

}
#blanket4:target #wingleft{
 transform:rotate(0deg) translate(0px,0px);
opacity:1;
transition:1s;
transition-delay:1s;

}

#blanket4:target #wingright{
 transform:rotate(0deg) translate(0px,0px);
opacity:1;
transition:1s;
transition-delay:1s;

}

#blanket4:target #one{
 opacity:1;
 transition:1s;
z-index:99;
}
#blanket4:target #two{
 opacity:0;
 transition:1s;
}
#blanket4:target #three{
 opacity:0;
transition:1s;

}
#blanket4:target #four{
opacity:1;
transition:1s;
z-index:99;
}







</style>
<div id="blanket"><div id="blanket1"><div id="blanket2"><div id="blanket3"><div id="blanket4">
<div id="sealleft"></div>
<div id="sealright"></div>
<div id="seal"><a href="#blanket"></a></div>
<div id="backgroundmenu"><div id="frame"><div id="image"></div></div><div id="boxbackground">
<div id="navi">
<a href="#blanket1"> <img src="https://i.imgur.com/MtSDGmd.png" width="60" height="60"></a> <br>
<a href="#blanket2"> <img src="https://i.imgur.com/DtJ838B.png" width="60" height="60"></a> <br>
<a href="#blanket3"> <img src="https://i.imgur.com/se9B6B8.png" width="60" height="60"></a> <br>
<a href="#blanket4"> <img src="https://i.imgur.com/T6SaQYd.png" width="60" height="60"></a> <br>

</div>
<div id="one"><h1>Stats</h1>
<span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
<span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
<span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
<span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
<span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
<span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
<span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
<span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>



</div>

<div id="two"><h1>Thing</h1>
This is where you write stuff second

</div>

<div id="three"><h1>OOC</h1>
<b>00</b> This profile was made by <a href="https://roleplay.chat/profile.php?user=Hound+of+Tindalos">The Hound of Tindalos</a> PM him or send him a RPC mail for paid comissions!<br>
<b>00</b><br>
<b>00</b><br>
<b>00</b><br>
<b>00</b><br>
<b>00</b><br>
<b>00</b><br>
<b>00</b><br>
<b>00</b><br>
<b>00</b><br>





</div>

<div id="four"><h1>Thing3</h1>
This is where you write stuff as well!!!!

</div>


</div></div>
<div id="wingright"></div>
<div id="wingleft"></div>