NOSFERATU

<style>

body {background: linear-gradient(#08030A, #452C30);}
::-webkit-scrollbar {display:none}

h1 {font-size: 15px; font-style: italic; letter-spacing: 2px;}
a {text-decoration: none; color: #744140;}
a:hover {color: #452C30;}

.image {position: fixed;
background: url('https://i.pinimg.com/originals/98/34/ed/9834ed4a86b08dd8c49ae5fd3cb9c57a.jpg') no-repeat;
background-size: 410px;
background-position: -35px 0px;
height: 500px;
width: 325px;
margin: auto;
left: 0px;
right: 0px;
bottom: 100px;
box-shadow: 0px 0px 50px #08030A;
}

.name {position: absolute;
font-family: Ancient;
font-size: 25px;
color: #452C30;
font-style: italic;
letter-spacing: 15px;
left: 66px;
bottom: -40px;
text-shadow: 0px 0px 10px #08030A;
}

.vamptab {position: absolute;
font-family: Ancient;
font-size: 14px;
color: #08030A;
padding: 3px;
text-align: center;
font-variant: small-caps;
letter-spacing: 2px;
left: 65px;
bottom: -70px;
border: 1px solid #452C30;
}
.vamptab:hover {color: #452C30;}

.authortab {position: absolute;
font-family: Ancient;
font-size: 14px;
color: #08030A;
padding: 3px;
text-align: center;
font-variant: small-caps;
letter-spacing: 2px;
width: 90px;
left: 170px;
bottom: -70px;
border: 1px solid #452C30;
}
.authortab:hover {color: #452C30;}

#vampire, #author {position: absolute;
overflow: auto;
padding: 15px;
background: #08030A;
font-family: Ancient;
font-size: 13px;
color: #452C30;
text-align: justify;
line-height: 15px;
letter-spacing: 0px;
height: 100px;
width: 210px;
left: 40px;
bottom: 40px;
opacity: 0;
border: 1px solid #23121A;
transition:all .7s ease-in-out;
-webkit-transition:all .7s ease-in-out;
-o-transition:all .7s ease-in-out;
-moz-transition:all .7s ease-in-out;
}
#vampire:target, #author:target {opacity: 1;
z-index: 999;
transition:all .7s ease-in-out;
-webkit-transition:all .7s ease-in-out;
-o-transition:all .7s ease-in-out;
-moz-transition:all .7s ease-in-out;
}

.coder {position: fixed;
font-family: Ancient;
font-size: 10px;
color: #08030A;
padding: 3px;
font-variant: small-caps;
letter-spacing: 2px;
right: 10px;
bottom: 10px;
}

</style>

<link href="https://www.themonster.xyz/styles/fancy-fonts.css" rel="stylesheet">

<div class="image">
<div class="name">nosferatu</div>
<a href="#vampire"><div class="vamptab">the vampire</div></a>
<a href="#author"><div class="authortab">the author</div></a>

<div id="vampire">
<h1>hello,</h1>
Hello. This is where you'd write a little something about your character. The box scrolls, so write as little or as much as you would want. <br><br>
<h1>separation,</h1>
I'd suggest adding a little comma at the end of the headers if you make them, just so... y'know. So it looks fancy.
<br><br><center><b><a href="#">x</a></b></center>
</div>

<div id="author">
<h1>some stuff here,</h1>
This is where you'd be putting your out of character rules. Style it all fancy-like and shit.
<br><br><center><b><a href="#">x</a></b></center>
</div>

</div>

<div class="coder"><a href="https://roleplay.chat/profile.php?user=words">WORDS</a></div>