ｅｎｅｍｙ

<style>

::-webkit-scrollbar {
 display: none;
}

@font-face {
 font-family: "Harukaze";
 src: url('https://dl.dropboxusercontent.com/s/o4e80k78fqs2k43/Another%20Danger%20Slanted%20-%20Demo.otf?dl=0');
 format("truetype");
}

a {
text-decoration: none;
}

body {
background: black
}

.pic {
 position: absolute;
 bottom: 50px;
 left: 50%;
 transform: translate(-50%, 0%);
 background-image: url('https://i.imgur.com/uzMra6f.jpg');
 height: 520px;
 width: 350px;
 background-size: 400px;
 background-position: -30px 0px;
 border: solid 10px black;
 z-index: 1;
 filter: grayscale(50%);
}

.box {
 position: absolute;
 bottom: 50px;
 left: 50%;
 transform: translate(-65%, -10%);
 background-color: #7a0000;
 height: 500px;
 width: 320px;
}

.words {
 overflow: auto;
 padding: 25px;
 position: absolute;
 bottom: 50px;
 left: 50%;
 transform: translate(50%, 10%);
 height: 200px;
 width: 150px;
 background-color: black;
 background-image: url("https://www.transparenttextures.com/patterns/pinstriped-suit.png");
 opacity: 0.7;
 z-index: 1;
 outline: dashed 1px #7a0000;
 outline-offset: -3px;
 color: white;
 font-family: 'Montserrat', sans-serif;
 font-size: 10px;
 line-height: 2;
 transition: ease-in-out 1s;
 opacity: 0;
}

.words:target {
 opacity: 0.8;
 z-index: 2;
}

.title { /*position will appear differently, check rpc for correct position*/
 padding: 25px;
 position: absolute;
 bottom: 500px;
 left: 50%;
 transform: translate(-50%, 0%);
 font-family: 'Harukaze';
 font-size: 70px;
 letter-spacing: 15;
 background: linear-gradient(#7a0000, #000);
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 z-index: 2;
 filter: drop-shadow(0px 0px 1px white);
}

.corner {
 position: absolute;
 bottom: 550px;
 left: 50%;
 transform: translate(110%, 0%);
 height: 100px;
 width: 100px;
 border-top: solid 1px white;
 border-right: solid 1px white;
 z-index: 1;
 opacity: 0.3;
}

.corner2 {
 position: absolute;
 bottom: 55px;
 left: 50%;
 transform: translate(-230%, 10%);
 height: 100px;
 width: 100px;
 border-bottom: solid 1px white;
 border-left: solid 1px white;
 z-index: 1;
 opacity: 0.3;
}

.tab {
 padding: 10px;
 position: absolute;
 bottom: 290px;
 left: 50%;
 transform: translate(75%, 0%);
 height: 10px;
 width: 100px;
 background-color: black;
 background-image: url("https://www.transparenttextures.com/patterns/pinstriped-suit.png");
 opacity: 0.7;
 outline: dashed 1px #7a0000;
 outline-offset: -3px;
 z-index: 0;
 color: white;
 font-family: 'Montserrat', sans-serif;
 font-size: 11px;
 text-align: right;
 transition: ease-in-out 1.5s;
}

.tab2 {
 padding: 10px;
 position: absolute;
 bottom: 325px;
 left: 50%;
 transform: translate(75%, 0%);
 height: 10px;
 width: 100px;
 background-color: black;
 background-image: url("https://www.transparenttextures.com/patterns/pinstriped-suit.png");
 opacity: 0.7;
 outline: dashed 1px #7a0000;
 outline-offset: -3px;
 z-index: 0;
 color: white;
 font-family: 'Montserrat', sans-serif;
 font-size: 11px;
 text-align: right;
 transition: ease-in-out 1.5s;
}

.tab3 {
 padding: 10px;
 position: absolute;
 bottom: 360px;
 left: 50%;
 transform: translate(75%, -0%);
 height: 10px;
 width: 100px;
 background-color: black;
 background-image: url("https://www.transparenttextures.com/patterns/pinstriped-suit.png");
 opacity: 0.7;
 outline: dashed 1px #7a0000;
 outline-offset: -3px;
 z-index: 0;
 color: white;
 font-family: 'Montserrat', sans-serif;
 font-size: 11px;
 text-align: right;
 transition: ease-in-out 1.5s;
}

.tab4 {
 padding: 10px;
 position: absolute;
 bottom: 395px;
 left: 50%;
 transform: translate(75%, -0%);
 height: 10px;
 width: 100px;
 background-color: black;
 background-image: url("https://www.transparenttextures.com/patterns/pinstriped-suit.png");
 opacity: 0.7;
 outline: dashed 1px #7a0000;
 outline-offset: -3px;
 z-index: 0;
 color: white;
 font-family: 'Montserrat', sans-serif;
 font-size: 11px;
 text-align: right;
 transition: ease-in-out 1.5s;
}

.tab:hover {
 position: absolute;
 left: 50%;
 transform: translate(150%, 0%);
}

.tab2:hover {
 position: absolute;
 left: 50%;
 transform: translate(150%, 0%);
}

.tab3:hover {
 position: absolute;
 left: 50%;
 transform: translate(150%, 0%);
}

.tab4:hover {
 position: absolute;
 left: 50%;
 transform: translate(150%, -0%);
}

.credit {
 position:absolute;
 bottom:0px;
 left:5px;
 height:60px;
 width:60px;
 opacity: .7;
 background-image: url('https://i.imgur.com/67eVLlq.png');
 background-position: center;
 background-size: cover
}

</style>

<div class="pic"></div>
<div class="box"></div>

<div class="title"><b>JACKDAW</b></div>

<div class="corner"></div>
<div class="corner2"></div>

<a class='tab' href='#1'><font style="float:left">DOSSIER</font> 1.</a>
<a class='tab2' href='#2'><font style="float:left">HISTORY</font> 2.</a>
<a class='tab3' href='#3'><font style="float:left">FRIENDS</font> 3.</a>
<a class='tab4' href='#4'><font style="float:left">O.O.C</font> 4.</a>

<div class="words" id="1">


STAT<font style="float:right">HERE</font><br>
STAT<font style="float:right">HERE</font><br>
STAT<font style="float:right">HERE</font><br>
STAT<font style="float:right">HERE</font><br>
STAT<font style="float:right">HERE</font><br>
STAT<font style="float:right">HERE</font><br>
STAT<font style="float:right">HERE</font><br>
STAT<font style="float:right">HERE</font><br>
STAT<font style="float:right">HERE</font><br>
STAT<font style="float:right">HERE</font><br>
</div>

<div class="words" id="2"> test </div>

<div class="words" id="3">test two</div>

<div class="words" id="4">
<b>001.</b> ooc here.<br>
<b>002.</b> black lives matter.<br>
<b>003.</b> acab.<br>
<b>004.</b> ooc here.<br>
<b>005.</b> ooc.<br>
</div>

<a href="https://roleplay.chat/profile.php?user=wife"><div class="credit"></div></a>