into the ocean

<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Cookie|Lobster+Two|Montserrat|Unica+One');

body
{overflow-x:hidden;
background-image:
url('https://www.transparenttextures.com/patterns/brushed-alum.png');
background-position: bottom right;
background-repeat: repeat;
background-attachment: fixed;
background-color:#4d6b75;
font: 0px arial;
color: black;}
#profile {background-color: transparent;
border:0px;
}

::-webkit-scrollbar-thumb:vertical {background-color:#21363d; height:3px; }
::-webkit-scrollbar { height:3px; width:3px; background-color:transparent; }

::selection {
color: #29272A;
background: #eee;
}

a {color: #23353d;
text-decoration: none;
text-transform:lowercase;
font-family: 'Lobster Two', sans-serif;
font-size:15px;
letter-spacing: 1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

a:hover {color: white;
text-decoration: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

b {
color:#21363d;
font-family: calibri, sans-serif;
text-transform: uppercase;
font-size:10px;
letter-spacing: 1;
}

em {
color:#21363d;
font-family: 'Lobster Two', cursive;
text-transform: lowercase;
font-size:15px;
letter-spacing: 1;
}

h2 {color:#d95e1c;
font-family: calibri, cursive;
text-transform: uppercase;
font-size:8px;
letter-spacing: 2;
}

h1 {
 padding:1px;
 margin-top: 30;
 margin-bottom: 10;
 padding-bottom: 10px;
 color:#4d6b75;
 font-size:40px;
 font-family: 'Cookie', sans-serif;
 text-transform:lowercase;
 letter-spacing: 1px;
 text-align:center;
 border-bottom: 1px solid #888;}

hr {
 border:0;
 margin-top:5px;
 margin-bottom:5px;
 width:90%;
 height:1px;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 background-color:#888;}

*{cursor: url('http://media.tumblr.com/7c3edb626c8cf9435c5c0b2d6acceffd/tumblr_inline_mh67v6xNXM1rdqsqf.png'), default;
}

#bitch{position:absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;}

 #credit {
    overflow:hidden;
    position:absolute;
    text-align:justify;
    bottom:0px;
    right:0px;
    height:60px;
    width:60px;
    padding:0px;
    opacity: .6;
    background-image: url('https://i.imgur.com/MH0XSqe.png');
    background-position:top center;
    background-attachment: absolute;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}

#container {
    position:absolute;
    top:45%;
    margin-top:-275px;
    left:50%;
    margin-left:-500px;
    margin-bottom: 20px;
    height:600px;
    width:1000px;
    background:#c5d0d4;
    border: 1px solid #031e29;
    box-shadow:1px 1px 3px #000;}

#top {
   background-color: #eee;
   border-bottom: 1px solid #031e29;
   position:absolute;
   width:100%;
   height:50px;
   left:0px;
   top:0px}

.links { width:980px; position:absolute; left:calc(50% - 55px ); top:20px;}
.links a { font-weight:bold; font: 12px 'Unica One'; letter-spacing:1.5px; width:190px; display:inline; text-transform:lowercase; color: #000; padding:24px;}
.links lc { color: #000; font-weight:bold; }

.abox {
   background-color: #eeedf0;
   text-transform: uppercase;
   text-align: center;
   color: #000;
   font-size:8px;
   font-family: calibri, sans-serif;
   position: absolute;
   width:300;
   height:500;
   left: 25px;
   top: 60px;
   letter-spacing:1px;
   line-height: 13px;
   padding: 10px;
   margin: 1px;
   overflow:auto;
   opacity: 1;
   z-index:1;}

.abox2 {
   background-color: #eeedf0;
   text-transform: uppercase;
   text-align: center;
   color: #000;
   font-size:8px;
   font-family: calibri, sans-serif;
   position: absolute;
   width:300;
   height:500;
   left: 25px;
   top: 60px;
   letter-spacing:1px;
   line-height: 13px;
   padding: 10px;
   margin: 1px;
   overflow:auto;
   opacity: 1;
   z-index:1;}

.slide {z-index: -1; opacity: 0;}

.slide:target {left: 0; opacity: 1; z-index: 1000;}

#sideimg {
    overflow:hidden;
    position:absolute;
    text-align:justify;
    margin-top:70px;
    right:25px;
    height:500px;
    width:250px;
    padding:0px;
    box-shadow:0px 0px 20px #4d6b75;
    background-image: url('https://78.media.tumblr.com/8bb1dcff4e94536b54869642d92c43c3/tumblr_oyi99zTtQ51rhfekio1_500.gif');
    background-position:center center;
    background-attachment: absolute;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}

#description {
   background-color: #eeedf0;
   text-transform: uppercase;
   text-align: center;
   color: #000;
   font-size:8px;
   font-family: calibri, sans-serif;
   position: absolute;
   width:300;
   height:500;
   left: 25px;
   top: 60px;
   letter-spacing:1px;
   line-height: 13px;
   padding: 10px;
   margin: 1px;
   overflow:auto;
   opacity: 1;
   z-index:1;}

.descimg {
   background-image: url('https://i.imgur.com/PoOJRr0.gif');
   background-position:center center;
   background-repeat:repeat;
   background-attachment:absolute;
   box-shadow:0px 0px 20px #4d6b75;
   border: 10px solid #21363d;
   border-radius: 100%;
   padding:40px;
   margin-top: 30px;
   margin-left: 70px;
   margin-bottom: 30px;
   width: 50px;
   height: 50px;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;}

#stats {
   background-color: #eeedf0;
   text-transform: uppercase;
   text-align: center;
   color: #000;
   font-size:8px;
   font-family: calibri, sans-serif;
   position: absolute;
   width:330;
   height:265;
   left: 360px;
   top: 60px;
   letter-spacing:1px;
   line-height: 13px;
   padding: 10px;
   margin: 1px;
   overflow:auto;
   opacity: 1;
   z-index:1;}

#ooc {
   background-color: #eeedf0;
   text-transform: uppercase;
   text-align: left;
   color: #000;
   font-size:8px;
   font-family: calibri, sans-serif;
   position: absolute;
   width:330;
   height:200;
   left: 360px;
   bottom: 18px;
   letter-spacing:1px;
   line-height: 13px;
   padding: 10px;
   margin: 1px;
   overflow:auto;
   opacity: 1;
   z-index:1;}

#tt { z-index: 10000; letter-spacing: 1; position: absolute; left: 25px; top: -5px; text-transform: lowercase; font-family: 'Lobster Two', sans-serif; font-size:50px;
 background: -webkit-linear-gradient(#ebebeb, #697a80, #11252b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}

</style>




<div id="bitch" oncontextmenu="return false;">
<a href= "https://roleplay.chat/profile.php?user=UFO" target="_blank"><div id= "credit"></div></a>

<div id= "container">
<div id= "tt">character name.</div>

<div id= "sideimg"></div>

<div id= "top">
<div class="links">
<a class="link1" href="#1" title="people"><lc>.01</lc> | friends & foes</a>
<a class="link2" href="#2" title="history"><lc> .02 </lc> | character history </a>
<a class="link3" href="#3" title="reset"><lc> .03 </lc> | reset</a>
</div>
</div>

<div id= "description">
<div class= "descimg"></div>
<h1>{ into the ocean.</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div id= "stats">
<h1>{ statistics.</h1>
<font style=float:left><b>stat</b> </font> <font style=float:right>info.</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info.</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info.</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info.</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info.</font><br>
<hr>
<font style=float:left><b>stat</b> </font> <font style=float:right>info.</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info.</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info.</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info.</font><br>
</div>

<div id= "ooc">
<h1>{ out of character.</h1>
<b>.01</b> | profile design by <a href= "https://roleplay.chat/profile.php?user=UFO" target="_blank">ufo @ rpc</a> for anyone to use. contact ufo for commissions or visit their pastebin!<br>
<b>.02</b> | ooc here.<br>
</div>

<div id="1" class="slide">
<div class="abox">
<h1>{ friends & foes.</h1>
<a target="_blank" href="">
<img style="border: 2px solid #4d6b75; height:50px; border-radius: 50%;" src="http://i.picpar.com/FVIc.png"></a>

<a target="_blank" href="">
<img style="border: 2px solid #4d6b75; height:50px; border-radius: 50%;" src="http://i.picpar.com/FVIc.png"></a>

<a target="_blank" href="">
<img style="border: 2px solid #4d6b75; height:50px; border-radius: 50%;" src="http://i.picpar.com/FVIc.png"></a>

<a target="_blank" href="">
<img style="border: 2px solid #4d6b75; height:50px; border-radius: 50%;" src="http://i.picpar.com/FVIc.png"></a>

<a target="_blank" href="">
<img style="border: 2px solid #4d6b75; height:50px; border-radius: 50%;" src="http://i.picpar.com/FVIc.png"></a>
</div></div>


<div id="2" class="slide">
<div class="abox2">
<h1>{ history.</h1>
words go here.
</div></div>
</div>

</div>