<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Cinzel|Cinzel+Decorative');
.pfor {display: none;}

body, a, a:hover {cursor: url(http://www.cursor.cc/cursor/870/46/cursor.png), auto;}

#profile { background-color: transparent; border: 0px; }

body{
background-color: #000000; /*--- BACKGROUND COLOR ---*/
font-family: 'Cinzel Decorative', cursive;
transition: all .5s ease-in-out;
}

::-webkit-scrollbar-thumb:vertical{
width: 1px;
background-color: transparent;
}

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

::selection {
background: transparent; /*-- HIGHLIGHT BACKGROUND COLOR --*/
color: #000; /*-- HIGHLIGHT FONT COLOR --*/
}

::-moz-selection {
background: transparent; /*-- HIGHLIGHT BACKGROUND COLOR --*/
color: #000; /*-- HIGHLIGHT FONT COLOR --*/
}


/*--- CREDIT, PLEASE DON'T REMOVE. ---*/

.credit{
position: fixed;
bottom: 0px;
right: 0px;
height: 25px;
width: 25px;
font-family: 'hind';
font-size: 10px;
color: #eee;
text-align: center;
overflow: hidden;
}


/*
 e J
 c
 i
 u e c i uic ceJ
 J c i u e c u J
 e i u J c J e
 c u J e i eJuic
 c i J e c u c
 i u e ic i J e i u
 ice eJ i u Jui ice

*/



/*---- RENDER NOTE: It has an animation which changes the opacity, giving it a fade-in, and fade-out appearance. ----*/

.render{
position: fixed;
left: 0px;
bottom: 0px;
height: 90%;
width: 600px;
background-image: url('https://i.pinimg.com/564x/bc/6f/f8/bc6ff8ce544d1fb2dbd8c39a9fd09dfd.jpg'); /*--- RENDER IMAGE LINK ---*/
background-repeat: no-repeat;
background-position: center left;
opacity: .7; /*---OPACITY--*/

/*--- DELETE THIS SECTION IF YOU DON'T WANT THE FADE
START v ---*/
animation-duration: 6s;
animation-name: fade;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-direction: alternate;
/*--- END ^ ---*/

}

@keyframes fade {
 0% {
opacity: .7;
 }

100%{
opacity: .2;
 }
}




/*--- NAME/NAVI/MUSIC PLAYER ---*/

.name{
position: fixed;
bottom: 300px;
left: 600px;
width: 400px;
height: 30px;
text-align: left;
font-family: 'Cinzel Decorative', cursive;
font-size: 40px;
word-spacing: -20px;
color: #c7c6c6; /*--- NAME COLOR ---*/
text-shadow: 0px 0px 1px #000; /*--- NAME TEXT SHADOW ---*/
line-height: 32px;
border-bottom: 1px dotted #b8b7bc; /*--- NAME BORDER BOTTOM ---*/
}

.subtitle{
position: fixed;
bottom: 383px;
left: 560px;
width: 400px;
height: 15px;
line-height: 15px;
font-family: 'Cinzel', serif;
font-size: 12px;
text-transform: uppercase;
text-align: right;
color: #83828a; /*--- SUBTITLE TEXT COLOR ---*/
}


.navi{
position: fixed;
bottom: 283px;
left: 600px;
width: 400px;
height: 20px;
text-align: center;
}

.navi a{
display: inline-block;
height: 5px;
width: 110px;
margin-left: 5px;
margin-right: 5px;
background-color: #c7c6c6; /*--- NAVI BACKGROUND COLOR ---*/
box-shadow: 0px 0px 1px #000; /*--- NAVI BOX SHADOW ---*/
text-decoration: none;
transition: .9s linear;
}


.navi a:hover{
box-shadow: 0px 0px 10px transparent; /*--- NAVI BOX SHADOW HOVER ---*/
transition: .9s linear;
}

.navi a:active{
box-shadow: 0px 0px 10px #fff;
transition: .1s linear;
}



/*-- TEXT BOXES --*/


.con{
}

.topbox{
position: fixed;
bottom: 360px;
left: 600px;
height: 130px;
width: 360px;
padding: 10px;
border: 5px solid #000; /*-- TOP BOX BORDER --*/
outline: 1px solid #fff; /*-- TOP BOX OUTLINE --*/
background-color: #fff; /*-- TOP BOX BACKGROUND --*/
text-align: justify;
overflow: auto;
opacity: 0;
z-index: 0;
transition: .7s linear;
}

.con:target .topbox{
opacity: 1;
z-index: 1;
transition: .7s linear;
}

.bottombox{
position: fixed;
bottom: 60px;
left: 600px;
height: 175px;
width: 360px;
padding: 10px;
border: 5px solid #000; /*-- BOTTOM BOX BORDER --*/
outline: 1px solid #fff; /*-- BOTTOM BOX OUTLINE --*/
background-color: #fff; /*-- BOTTOM BOX BACKGROUND --*/
text-align: justify;
overflow: auto;
opacity: 0;
z-index: 0;
transition: .7s linear;
}

.con:target .bottombox{
opacity: 1;
z-index: 1;
transition: .7s linear;
}


.tallbox{
position: fixed;
bottom: 65px;
left: 1030px;
height: 420px;
width: 300px;
padding: 10px;
border: 5px solid #000; /*-- TALL BOX BORDER --*/
outline: 1px solid #fff; /*-- TALL BOX OUTLINE --*/
background-color: #fff; /*-- TALL BOX BACKGROUND --*/
text-align: justify;
overflow: auto;
opacity: 0;
z-index: 0;
transition: .7s linear;
}

.con:target .tallbox{
opacity: 1;
z-index: 1;
transition: .7s linear;
}

.txt{
font-family: 'Cinzel', serif;
font-size: 10px;
color: #000; /*--- BOX FONT COLOR ---*/
}

h1{
font-family: 'Cinzel', serif;
font-size: 20px;
text-align: center;
letter-spacing: -1px;
margin: 0px;
}

a{
text-decoration: none;
font-family:'Amiko';
font-weight: 700;
text-transform: small caps;
color: #83828a; /*--- TEXT LINK FONT COLOR ---*/
}

</style>
<div class="top"></div><div class="bottom"></div>

<div class="render"></div>

<div class="name">Gabriel

</div>
</div>

<div class="navi">
<a href="#one"></a>
<a href="#two"></a>
<a href="#"></a>
</div>

<div class="subtitle"><img src="https://d1v8u1ev1s9e4n.cloudfront.net/56c2a41a5ccacf496502455a" height=100px>
Mouth of the LORD
</div>


<div class="con" id="one">
<div class="topbox"><div class="txt">

<h1>

About </h1>

Name. <font style="float:right; font-weight: bold;">Name.</font><br>
Age. <font style="float:right; font-weight: bold;">Age.</font><br>
Gender. <font style="float:right; font-weight: bold;">Gender.</font><br>
Status. <font style="float:right; font-weight: bold;">Status.</font><br>
Sexuality. <font style="float:right; font-weight: bold;">Sexuality.</font><br>
Location. <font style="float:right; font-weight: bold;">Location.</font><br>
Species. <font style="float:right; font-weight: bold;">Species.</font><br>
Occupation. <font style="float:right; font-weight: bold;">Occupation.</font><br>


</div></div>
<div class="bottombox"><div class="txt">

<h1>ooc</h1>
<br>
<br>
eat some dicks


</div></div>
<div class="tallbox"><div class="txt">

<h1>Behold, I was shapen in iniquity; and in sin did my mother conceive me.<br><br>- Psalms 51:5</h1>
<br><br>
<img src="http://pa1.narvii.com/6597/ca804c9c0436bc87b51beef1bcf95d052176b9e6_hq.gif" width=300>

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


<div class="con" id="two">
<div class="topbox"><div class="txt">

<h1><img src="https://i.imgur.com/YcOo4i8.jpg" height=130px>

</div></div>
<div class="bottombox"><div class="txt">

<h1>KNOWN</h1><center><br><br>
<a href="PROFILE" target="_blank">NAME</a> <br>
<a href="PROFILE" target="_blank">NAME</a> <br>
<a href="PROFILE" target="_blank">NAME</a> <br>
<a href="PROFILE" target="_blank">NAME</a> <br>
<a href="PROFILE" target="_blank">NAME</a> <br>
<a href="PROFILE" target="_blank">NAME</a> <br>


</div></div>
<div class="tallbox"><div class="txt">

<img src="https://i.imgur.com/j8iuoFy.jpg" width=300px height=420><br><br>






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



<div class="credit" title="Created by 100% Juice">@</a>