KYLE 2

<style>

@import url('//fonts.googleapis.com/css?family=Permanent Marker');
@import url('//fonts.googleapis.com/css?family=Teko');

::-webkit-scrollbar {width: 1px; height: 1px; background: #; }
::-webkit-scrollbar-thumb { background-color:#000; border-radius:5px;}

a:link, a:visited, a:active{color: #431961; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; font-family:'Teko';font-weight:bold;text-shadow:1px 1px 0px #fff;letter-spacing:1px;text-decoration:none;}

a:hover { color: #000; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; }

h1 {color: #402E3C;text-align: center;font-family:'Permanent Marker', sans-serif;font-size: 25px;line-height:20px;}

i {color:#402E3C;font-style: italic;}
b {color:#402E3C;font-weight: bold;}

body{overflow:hidden;background-image:url(https://www.transparenttextures.com/patterns/brick-wall-dark.png);background-color:#875963;}

.Kyle{position:absolute;background-image:url(http://i.picpar.com/hVAe.png);background-size:100%;width:440px;height:660px;left:0px;bottom:0px;opacity:1;z-index:2;}

.Kyle2{position:absolute;background-image:url(http://i.picpar.com/8eBe.png);background-size:100%;width:200px;height:290px;left:570px;bottom:0px;opacity:1;z-index:2;}

.box{position:absolute;width:370px;height:430px;left:245px;bottom:0px;background-color:#F2E0E8;opacity:1;z-index:1;border-radius:5px;box-shadow: 15px 15px 0px #C8A4C3;border-top:2px solid #B535A3;}

.holder{position:absolute;}

.maintext {position:fixed;background-color:#E8CAD9;border:2px solid #855964;box-shadow:3px 3px 2px #666;width:200px;height:380px;left:380px;bottom:20px;opacity:0;z-index:1;line-height:18px;font-family:'Teko';font-size:16px;color:#000;overflow-y:scroll;padding:5px;border-radius:10px;}
.maintext:target {transition: all 1s ease-out;-webkit-transition: all 1s ease-out;-moz-transition: all 1s ease-out;-ms-transition: all 1s ease-out;-o-transition: all 1s ease-out;transition: all 1s ease-out;z-index:10;opacity:1;}

.navbar {Position:absolute;width:150px; height:30px;left:400px;bottom:10px;z-index:10;opacity:1;text-align:center;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}

.nav1 {background-color:#432E3D;box-shadow:1px 1px 0px #C8A4C3;position:absolute;left:0px;bottom:0px;width:20px;height:20px;z-index:10;border-radius:100%;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}.nav1:hover {background-color:#DB5559;box-shadow:1px 1px 0px #000;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}

.nav2 {background-color:#432E3D;box-shadow:1px 1px 0px #C8A4C3;position:absolute;left:50px;bottom:0px;width:20px;height:20px;z-index:10;border-radius:100%;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}.nav2:hover {background-color:#DB5559;box-shadow:1px 1px 0px #000;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}

.nav3 {background-color:#432E3D;box-shadow:1px 1px 0px #C8A4C3;position:absolute;left:100px;bottom:0px;width:20px;height:20px;z-index:10;border-radius:100%;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}.nav3:hover {background-color:#DB5559;box-shadow:1px 1px 0px #000;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}

.nav4 {background-color:#432E3D;box-shadow:1px 1px 0px #C8A4C3;position:absolute;left:150px;bottom:0px;width:20px;height:20px;z-index:10;border-radius:100%;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}.nav4:hover {background-color:#DB5559;box-shadow:1px 1px 0px #000;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}


.title{position:absolute;color:#EFD3C1;font-size:40px;font-family:'Permanent Marker';left:320px;bottom:425px;opacity:1;z-index:4;text-shadow: 2px 0 0 #402E3D, -2px 0 0 #402E3D, 0 2px 0 #402E3D, 0 -2px 0 #402E3D, 1px 1px #402E3D, -1px -1px 0 #402E3D, 1px -1px 0 #402E3D, -1px 1px 0 #402E3D;}

.title2{position:absolute;color:#;font-size:51px;font-family:'Notable';left:10px;bottom:425px;opacity:1;z-index:3;}

.title3{position:absolute;color:#000;font-size:51px;font-family:'Notable';left:10px;bottom:425px;opacity:1;z-index:2;text-shadow:3px 4px 3px #000;}

.credit{bottom:0px;left:1250px;width: 70px;height: 85px;opacity: 1;position: fixed;}
</style>
<div class="title">Kyle - "Alpha"</div>

<div class="kyle"></div>
<div class="kyle2"></div>

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

<div class="holder">
<div id="01" class="maintext">
<h1>Information</h1>

this is normal text
<i>italics</i> - <b>bold</b><bR>
<a href="" target="_Blank">This is a link</a><br>
</div>

<div id="02" class="maintext">
<h1>Extras</h1>

</div>

<div id="03" class="maintext">
<h1>OOC</h1>

</div>

</div>



<div class="navbar">
<a class="nav1" href="#01"></a><a class="nav2" href="#02"></a><a class="nav3" href="#03"></a><a class="nav4" href="#04"></a><a class="nav5" href="#05"></a></div>


<div class="credit"><a target="_blank" href="https://roleplay.chat/profile.php?user=ReverieStyles" target="_blank"><img src="https://i.imgur.com/fgKTyd3.png" width="100%"></a>