SAPHIR CODE [GIFT]

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

body {
background-color: #AC0E00;
background-image: url('https://ak.picdn.net/shutterstock/videos/1010739512/thumb/1.jpg');
background-position: center;
background-size: 100%;
background-repeat:repeat;
}

#saphir {
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;
}

#container {
position: absolute;
left: 9.5%;
top: 11.5%;
height: 460px;
width: 1100px;
border: 4px solid #010059;
box-shadow: 0px 0px 10px 10px #0623AB;
background-color: #010059;
background-image: url('https://i.ibb.co/xsdy7Cp/planet.png');
background-size: 15%;
background-repeat: repeat;
}

#render {
position: absolute;
z-index: 1;
bottom: -154px;
left: -75px;
background-image: url('https://i.ibb.co/GPLx5gH/Kai-EXO.png');
background-size: 100%;
background-repeat: no-repeat;
height: 660px;
width: 340px;
}

#icon1 {
position: absolute;
z-index: 1;
right: -50px;
top: 10px;
height: 120px;
width: 120px;
border-radius: 50%;
border: 4px solid #010059;
box-shadow: 0px 0px 10px 10px #0623AB;
background-image: url('https://pbs.twimg.com/media/Cj-WsGbXAAADd0J.jpg');
background-repeat: no-repeat;
background-size: 100%;
}

#icon2 {
position: absolute;
z-index: 1;
right: -50px;
top: 166px;
height: 120px;
width: 120px;
border-radius: 50%;
border: 4px solid #010059;
box-shadow: 0px 0px 10px 10px #0623AB;
background-image: url('https://pbs.twimg.com/media/EnJaRG4XMAEjLfC.jpg');
background-repeat: no-repeat;
background-size: 149%;
background-position: center;
}

#icon3 {
position: absolute;
z-index: 1;
right: -50px;
bottom: 10px;
height: 120px;
width: 120px;
border-radius: 50%;
border: 4px solid #010059;
box-shadow: 0px 0px 10px 10px #0623AB;
background-image: url('https://data.whicdn.com/images/348966943/original.jpg');
background-repeat: no-repeat;
background-size: 133%;
background-position: center;
}

#title {
position: absolute;
z-index: 2;
left: 190px;
bottom: -70px;
height: 140px;
width: 500px;
background-image: url('https://i.ibb.co/vhqkDBB/Saphir-Title.png');
background-repeat: no-repeat;
background-size: 100%;
}

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

#ooc {
position: absolute;
z-index: 2;
bottom: 10px;
left: 730px;
height: 150px;
width: 250px;
background-color: #000;
border: 2px solid #010059;
box-shadow: 0px 0px 4px 4px #0623AB;
padding: 5px;
overflow-y: auto;
font-family: 'Marck Script';
color: #fff;
font-size: 12px;
line-height: 16px;
}

#dropgif {
position: absolute;
z-index: 1;
opacity: 0.6;
left: 550px;
bottom: 55px;
height: 150px;
width: 250px;
border: 2px solid #010059;
box-shadow: 0px 0px 4px 4px #0623AB;
background-image: url('https://i.gifer.com/Tepu.gif');
background-repeat: no-repeat;
background-size: 100%;
}

#dropgif:hover {
background-image: url('https://64.media.tumblr.com/4906ea9a3e47ff021ded516d8b4825d2/420085a69c868dd0-d5/s500x750/d9bd49666fd48df17dfcbae86ccbbc91a8910e28.gif');
background-size: 100%;
background-repeat: no-repeat;
}

#lgif {
position: absolute;
z-index: 1;
opacity: 0.6;
left: 212px;
bottom: 7px;
width: 292px;
height: 155px;
border: 2px solid #010059;
box-shadow: 0px 0px 4px 4px #0623AB;
background-image: url('https://i.pinimg.com/originals/24/c0/19/24c019208a5c0389acb166997005cda7.gif');
background-repeat: no-repeat;
background-size: 100%;
transform: skew(-10deg);
}

#lgif:hover {
background-image: url('https://media4.giphy.com/media/PuBvLz7913crK/giphy.gif');
background-size: 100%;
background-repeat: no-repeat;
}


#rinfo {
position: absolute;
z-index: 1;
left: 730px;
width: 250px;
height: 204px;
bottom: 230px;
border: 2px solid #010059;
box-shadow: 0px 0px 4px 4px #0623AB;
padding: 5px;
overflow-y: auto;
background-color: #000;
font-family: 'Marck Script';
color: #fff;
font-size: 12px;
line-height: 16px;
}

p::first-letter {
font-size: 230%;
font-family: 'Lobster Two';
color: #0623AB;
float: left;
margin-right: 2px;
margin-top: -6px;
}

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

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

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

#gem1 {
position: absolute;
z-index: 1;
left: 812px;
bottom: 183px;
height: 40px;
width: 40px;
background-color: transparent;
background-image: url('https://thumbs.gfycat.com/ThickInsecureLark-size_restricted.gif');
background-repeat: no-repeat;
background-size: 100%;
}

#gem2 {
position: absolute;
z-index: 1;
left: 882px;
bottom: 183px;
height: 40px;
width: 40px;
background-color: transparent;
background-image: url('https://thumbs.gfycat.com/ThickInsecureLark-size_restricted.gif');
background-repeat: no-repeat;
background-size: 100%;
}

#gem3 {
position: absolute;
z-index: 1;
left: 952px;
bottom: 183px;
height: 40px;
width: 40px;
background-color: transparent;
background-image: url('https://thumbs.gfycat.com/ThickInsecureLark-size_restricted.gif');
background-repeat: no-repeat;
background-size: 100%;
}

#quote1 {
position: absolute;
top: 20px;
left: 185px;
height: 80px;
width: 530px;
background-image: url('https://i.ibb.co/JtrBnbR/saph-quote-1.png');
background-repeat: no-repeat;
background-size: 93%;
}

#quote2 {
position: absolute;
top: 108px;
left: 165px;
height: 80px;
width: 530px;
background-image: url('https://i.ibb.co/kMDK1rX/saph-quote-2.png');
background-repeat: no-repeat;
background-size: 93%;
}

#quote3 {
position: absolute;
top: 190px;
left: 225px;
height: 80px;
width: 530px;
background-image: url('https://i.ibb.co/8BckpvT/saph-quote-3.png');
background-repeat: no-repeat;
background-size: 93%;
}

#quote4 {
position: absolute;
top: 260px;
left: 230px;
height: 80px;
width: 300px;
background-image: url('https://i.ibb.co/yRGhczH/saph-quote-4.png');
background-repeat: no-repeat;
background-size: 93%;
}

h1 {
font-family: 'Cookie';
font-size: 20px;
background-color: #040069;
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: 3px;
letter-spacing: 2px;
margin-bottom: 0px;
}

h2 {
font-family: 'Bebas Neue';
font-size: 12px;
text-align: right;
color: #BBFFF9;
border-top: 1px dotted #040069;
margin-top: 0px;
letter-spacing: 2px;
margin-bottom: 4px;
}

</style>
<div id="saphir" oncontextmenu="return false;">
<div id="container">
<div id="render"></div>
<div id="title"></div>
<a href="#2"><div id="gem1"></div></a>
<a href="#3"><div id="gem2"></div></a>
<a href="#1"><div id="gem3"></div></a>
<div id="icon1"></div>
<div id="icon2"></div>
<div id="icon3"></div>
<div id="moon"></div>
<div id="dropgif"></div>
<div id="lgif"></div>
<div id="quote1"></div>
<div id="quote2"></div>
<div id="quote3"></div>
<div id="quote4"></div>
<div id="ooc">
<h1>Out of Character</h1><h2>Typist Notes.</h2>
<b>00.</B> Coded by <a href="https://roleplay.chat/profile.php?user=Sailor+Chuu" target="_blank">Chuu</a> for Saphir's use only! Do not steal this code.<br>
<B>01.</B> OOC here.<br>
<B>02.</B> OOC some more.
</div>
<div id="rinfo">
<div style="height: 204px; overflow: hidden;">
<a name="1"></a>
<div style="height: 204px; overflow-y: auto;">
<div style="margin: 0 auto; width: 20.7em;">
<h1>Statistics</h1><h2>Sleeping Prince.</h2>
<b>Name:</B> <font style=float:right>Stat.</font><br>
<B>Hangul:</B> <font style=float:right>Stat.</font><br>
<B>Meaning:</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>Greek 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>Queen:</B> <font style=float:right><a target="_blank" href="https://roleplay.chat/profile.php?user=" target="_blank">Unknown</a>.</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><a title="">Stat</a>.</font><br>
<B>Residence:</B> <font style=float:right>Crystaia City, CA, U.S.A.</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>

<a name="2"></a>
<div style="height: 204px; overflow-y: auto;">
<div style="margin: 0 auto; width: 20.7em;">
<h1>Alter Ego</h1><h2>Dangerous Gem.</h2>

</div></div>

<a name="3"></a>
<div style="height: 204px; overflow-y: auto;">
<div style="margin: 0 auto; width: 20.7em;">
<h1>Headcanons</h1><h2>Beginning Anew.</h2>

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

</div>