JIN [GIFT]

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Forum|Lobster+Two|Pirata+One|Courgette|Satisfy|Cookie|Bebas+Neue');

body {
background-color: #AC0E00;
background-image: url('https://images.unsplash.com/photo-1542601098-8fc114e148e2?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHw%3D&w=1000&q=80');
background-position: center;
background-size: 100%;
background-repeat:repeat;
}

#diamond {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}

::-webkit-scrollbar-track {
background-color:;
}

::-webkit-scrollbar-thumb {
background-color:;
}

::-webkit-scrollbar {
width:0px;
height:0px;
}

#overlay {
position: fixed;
z-index: -1;
background-image: url('https://media0.giphy.com/media/Kfrq2V2A7wODGMdEXQ/giphy.gif');
background-repeat: repeat;
background-size: 10%;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}

#container {
position: absolute;
right: 1%;
bottom: 1%;
height: 529px;
width: 1200px;
border: 1px solid #505D66;
background-color: #2D2F2E;
background-image: url('https://www.transparenttextures.com/patterns/fresh-snow.png');
background-size: 10%;
background-repeat: repeat;
box-shadow: 0px 0px 7px 7px #2A2A2A;
}

#render {
position: absolute;
z-index: 3;
left: -1px;
bottom: 0px;
height: 530px;
width: 442px;
background-image: url('https://www.pngkit.com/png/full/132-1328127_got7-jackson-and-jackson-wang-image-jackson-wang.png');
background-size: 80%;
background-repeat: no-repeat;
filter: grayscale(40%);
}

#title {
position: absolute;
z-index: 2;
right: 309px;
bottom: -96px;
height: 185px;
width: 550px;
background-image: url('https://i.ibb.co/SmFjBbF/Diamond-Title.png');
background-size: 100%;
background-repeat: no-repeat;
}

#moon {
position: absolute;
z-index: 2;
left: 334px;
bottom: 25px;
width: 70px;
height: 70px;
border-radius: 50%;
box-shadow: -15px -15px 0 0 black;
}

#crown {
position: absolute;
z-index: 2;
left: 90px;
top: -105px;
height: 105px;
width: 149px;
background-image: url('https://www.freeiconspng.com/uploads/black-crown-png-16.png');
background-size: 100%;
background-repeat: no-repeat;
transform: rotate(0deg);
opacity: 0.75;
}

#gif1 {
position: absolute;
z-index: 1;
right: 8px;
bottom: 8px;
height: 150px;
width: 300px;
opacity: 0.75;
background-image: url('https://pa1.narvii.com/7161/b6297dfde3a325494bb08d692f62c318d0d38ab9r1-540-280_hq.gif');
border: 1px solid #505D66;
background-position: top;
box-shadow: 0px 0px 3px 3px #2A2A2A;
background-size: 100%;
background-repeat: no-repeat;
transform: skew(0deg);
}

#gif1:hover {
background-image: url('https://64.media.tumblr.com/96f4b1dbc38b6faebe2cca24ae9a0ffc/983bf0a7fe5b5cdc-55/s400x600/33a13cf40e794a68a81cd83860a1b2f7e27de459.gif');
background-size: 110%;
}

#iconr {
position: absolute;
right: 8px;
bottom: 180px;
height: 70px;
width: 70px;
border-radius: 50%;
border: 4px solid #505D66;
box-shadow: 0px 0px 3px 3px #2A2A2A;
background-image: url('https://i.pinimg.com/originals/cc/63/54/cc6354c8b8c503c91dc16fd09f704ecf.jpg');
background-size: 100%;
background-repeat: no-repeat;
}

#mid {
position: absolute;
right: 123px;
bottom: 180px;
height: 70px;
width: 70px;
border-radius: 0%;
border: 4px solid #505D66;
box-shadow: 0px 0px 3px 3px #2A2A2A;
background-image: url('https://p.favim.com/orig/2018/09/16/got7-psd-jackson-wang-Favim.com-6305925.jpg');
background-size: 100%;
background-repeat: no-repeat;

}

#iconl {
position: absolute;
right: 239px;
bottom: 180px;
height: 70px;
width: 70px;
border-radius: 50%;
border: 4px solid #505D66;
box-shadow: 0px 0px 3px 3px #2A2A2A;
background-image: url('https://data.whicdn.com/images/326187665/original.png');
background-size: 106%;
background-repeat: no-repeat;
}

#tab1 {
position: absolute;
z-index: 4;
left: 46px;
top: 14px;
height: 40px;
width: 40px;
background-image: url('https://thumbs.gfycat.com/SickGentleFluke-max-1mb.gif');
background-size: 100%;
background-repeat: no-repeat;
transform: rotate(-45deg);
}

#tab2 {
position: absolute;
z-index: 4;
left: 60px;
top: 94px;
height: 40px;
width: 40px;
background-image: url('https://thumbs.gfycat.com/SickGentleFluke-max-1mb.gif');
background-size: 100%;
background-repeat: no-repeat;
transform: rotate(-90deg);
}

#tab3 {
position: absolute;
z-index: 4;
left: 240px;
top: 14px;
height: 40px;
width: 40px;
background-image: url('https://thumbs.gfycat.com/SickGentleFluke-max-1mb.gif');
background-size: 100%;
background-repeat: no-repeat;
transform: rotate(45deg);
}

#tab4 {
position: absolute;
z-index: 4;
left: 250px;
top: 94px;
height: 40px;
width: 40px;
background-image: url('https://thumbs.gfycat.com/SickGentleFluke-max-1mb.gif');
background-size: 100%;
background-repeat: no-repeat;
transform: rotate(90deg);
}

#ooc {
position: absolute;
z-index: 1;
right: 8px;
bottom: 280px;
border: 1px solid #505D66;
box-shadow: 0px 0px 3px 3px #2A2A2A;
padding: 5px;
overflow-y: auto;
height: 228px;
width: 290px;
background: #363B3F;
font-family: 'Forum';
font-size: 12px;
line-height: 16.5px;
color: #fff;
}

#stat {
position: absolute;
z-index: 1;
right: 328px;
top: 8px;
border: 1px solid #505D66;
box-shadow: 0px 0px 3px 3px #2A2A2A;
padding: 5px;
overflow-y: auto;
height: 428px;
width: 190px;
background: #363B3F;
font-family: 'Forum';
font-size: 11px;
line-height: 17px;
color: #fff;
}

#bigasstriangle {
position: absolute;
z-index: 2;
right: 531px;
top: 8px;
width: 0;
height: 0;
border-top: 220px solid transparent;
border-right: 440px solid #505D66;
border-bottom: 220px solid transparent;
opacity: 1;
}

#topgif {
position: absolute;
z-index: 1;
right: 530px;
top: 8px;
height: 240px;
width: 370px;
border: 1px dashed #505D66;
background-image: url('https://25.media.tumblr.com/8f8a1a48b69ae147d334edad25564096/tumblr_mvp1bqaBGt1swwqebo1_500.gif');
opacity: 0.8;
box-shadow: 0px 0px 3px 3px #2A2A2A;
background-size: 120%;
background-repeat: no-repeat;
}

#bottomgif {
position: absolute;
z-index: 1;
right: 530px;
bottom: 81px;
height: 240px;
width: 370px;
border: 1px dashed #505D66;
background-image: url('https://25.media.tumblr.com/8f8a1a48b69ae147d334edad25564096/tumblr_mvp1bqaBGt1swwqebo1_500.gif');
opacity: 0.8;
box-shadow: 0px 0px 3px 3px #2A2A2A;
background-size: 120%;
background-repeat: no-repeat;
}

#mid:hover {
background-image: url('https://pa1.narvii.com/6476/870514a36dd3d8f958007f6ede8a3dcb3bb74e8b_hq.gif');
background-size: 225%;
background-position: center;
}

h1 {
font-family: 'Bebas Neue';
font-size: 20px;
background-color: #2B2B2A;
background-image: url('https://img1.picmix.com/output/stamp/thumb/9/6/4/6/1606469_f1f53.gif');
line-height: 20px;
background-size: 16%;
background-repeat: repeat;
color: #fff;
text-align: center;
margin-top: 0px;
letter-spacing: 2px;
margin-bottom: 4px;
}

b {
font-family: 'Pirata One';
color: #B1B8C0;
}

i {
font-family: 'Courgette';
color: #9AD6FA;
font-size: 10.5px;
}

a {
font-family: 'Satisfy';
text-decoration: none;
color: #000;
font-size: 11px;
}

a:hover {
color: yellow;
text-decoration: underline;
}

</style>
<div id="diamond" oncontextmenu="return false;">
<div id="overlay"></div>
<div id="container">
<div id="render"></div>
<div id="title"></div>
<div id="moon"></div>
<div id="crown"></div>
<div id="gif1"></div>
<div id="iconr"></div>
<div id="mid"></div>
<div id="iconl"></div>
<div id="bigasstriangle"></div>
<a href="#2"><div id="tab1"></div></a>
<a href="#3"><div id="tab2"></div></a>
<a href="#4"><div id="tab3"></div></a>
<a href="#1"><div id="tab4"></div></a>
<div id="topgif"></div>
<div id="bottomgif"></div>
<div id="stat">
<h1>Statistics</h1>
<b>Name:</B> <font style=float:right>Stat.</font><br>
<B>Hanzi:</B> <font style=float:right>Stat.</font><br>
<B>Gender:</B> <font style=float:right>Male (♂️).</font><br>
<B>D.o.B.:</B> <font style=float:right>Stat.</font><br>
<B>Age:</B> <font style=float:right>Stat.</font><br>
<B>Zodiac:</B> <font style=float:right>Stat.</font><br>
<B>Species:</B> <font style=float:right>Nemesis Humanoid.</font><br>
<B>Star System:</B> <font style=float:right>Stat.</font><br>
<B>P.o.B.:</B> <font style=float:right>Stat.</font><br>
<B>Nationality:</B> <font style=float:right>Stat.</font><br>
<B>Ethnicity:</B> <font style=float:right>Stat.</font><br>
<B>Sexuality:</b> <font style=float:right>Stat.</font><br>
<B>Marital:</B> <font style=float:right>Single.</font><br>
<B>Occupation:</b> <font style=float:right>Stat.</font><br>
<B>Residence:</B> <font style=float:right>Crystaia City.</font><br>
<B>Hair Color:</B> <font style=float:right>Stat.</font><br>
<B>Eye Color:</b> <font style=float:right>Stat.</font><br>
<B>Skin Tone:</B> <font style=float:right>Olive.</font><br>
<B>Hair Style:</B> <font style=float:right>Stat.</font><br>
<B>Height:</B> <font style=float:right>Stat.</font><br>
<B>Weight:</b> <font style=float:right>Stat.</font><br>
<B>Build:</b> <font style=float:right>Stat.</font><br>
<B>Blood Type:</B> <font style=float:right>Stat.</font><br>
<B>Scent:</B> <font style=float:right>Stat.</font></div>
<div id="ooc">
<div style="height: 228px; overflow: hidden;">
<a name="1"></a>
<div style="height: 228px; overflow-y: auto;">
<div style="margin: 0 auto; width: 24em;">
<h1>Out of Character</h1>
<B>00.</B> Coded by <a href="//roleplay.chat/profile.php?user=Sailor+Chuu" target="_blank">Chuu</a> for Zhou's use only. Do not steal!<br>
<B>01.</B> OOC text here.<br>
<B>02.</B> OOC text here.
</div></div>

<a name="2"></a>
<div style="height: 228px; overflow-y: auto;">
<div style="margin: 0 auto; width: 24em;">
<h1>Alter Ego</h1>
Testing text.
</div></div>

<a name="3"></a>
<div style="height: 228px; overflow-y: auto;">
<div style="margin: 0 auto; width: 24em;">
<h1>Headcanons</h1>
Testing text.
</div></div>

<a name="4"></a>
<div style="height: 228px; overflow-y: auto;">
<div style="margin: 0 auto; width: 24em;">
<h1>Connections</h1>
Testing text.
</div></div></div></div>
</div>