WIP - Brianna/Vexx

<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Inconsolata|Roboto|Montserrat&display=swap');
@font-face { font-family: "coco"; src: url('https://dl.dropboxusercontent.com/s/an7gqt732m1u90r/Cocogoose%20Pro-trial.ttf') ;}
@font-face{font-family:"night";src:url('https://static.tumblr.com/it5srtk/1yeorxbk2/nightingale_sample.ttf');}
@font-face { font-family: "silkscreen"; src: url('https://dl.dropbox.com/s/l0frac4d7bz3zx6/silkscreen.ttf'); }
@font-face {font-family: 'crepes';src:url('https://dl.dropboxusercontent.com/s/fz3agvx5xyxj023/Coves%20Light.otf');}

body {overflow-x:hidden; background-image: linear-gradient(#D0C5BF, #94A1A3); overflow:hidden;}

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

::selection {color: #fff; background: #8B6D62;}

b {color:#A1BDC5; text-decoration:none; font-family:'coco', sans-serif; text-transform:lowercase; font-size:12px;}

i {color:#564C49; text-decoration:none; font-family:'Inconsolata', sans-serif; text-transform:lowercase; letter-spacing:3px; font-size:12px;}

u {color:#564C49; text-decoration:none; font-family:'Inconsolata', sans-serif; text-transform:lowercase; letter-spacing:3px; font-size:12px;}

s {color:#564C49; text-decoration:none; font-family:'Inconsolata', sans-serif; text-transform:lowercase; letter-spacing:3px; font-size:12px;}

h1 {padding:5px; border-bottom:1px solid #8B6D62; color: #CF9988; text-decoration: none; font-family: 'night', sans-serif; text-transform:lowercase; font-size:15px; letter-spacing:1;}

h2 {padding:5px; margin-top:-10px; margin-bottom:10px; color: #CF9988; text-decoration: none; font-family: 'crepes', sans-serif; text-transform:uppercase; text-align:right; font-size:12px; letter-spacing:1;}

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

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

.mainimg {overflow:hidden; position:absolute; bottom:0px; left:0px; height:604px; width:350px; opacity:1; background-color: transparent; background-image: url('https://i.imgur.com/HCnUwQE.jpg'); background-size: 150%; background-repeat: no-repeat; background-attachment: absolute; background-repeat: no-repeat; background-position: -80px 0px;}

.topper {overflow:hidden; position:absolute; top:0px; right:0px; height:230px; width:245px; opacity:1; z-index:10; background-color: transparent; background-image: url('https://i.imgur.com/sthWO1Y.jpg'); background-size: 100%; background-repeat: no-repeat; background-attachment: absolute; background-repeat: no-repeat;}

#container {position:absolute; bottom: 50px; left:100px; height:604px; width:604px; background:#fff; border:10px solid #fff;}

#info {border-top-left-radius:40px; border:5px solid #fff; background-color:#fff; text-align:left; color: #000; font-family: 'silkscreen', Arial, sans-serif; font-size:8px; text-transform:uppercase; position: absolute; bottom:5px; left:20px; width:280px; height:150px; line-height:8px; padding:10px; overflow:auto; z-index:100;}

.navbar {position: absolute; left: 360px; top: 374px; z-index: 3000; opacity: 1; }

.link1 {position: absolute; left: 15px; border-radius: 50%; height: 15px; width: 15px; filter: drop-shadow( 0px 0px 2px #fff);}
.link1:hover {transform: rotate(0deg);}

.link2 {position: absolute; left: 125px; height: 15px; width: 15px; filter: drop-shadow( 0px 0px 2px #fff);}
.link2:hover {transform: rotate(0deg);}

.link3 {position: absolute; top: 110px; left: 15px; height: 15px; width: 15px; filter: drop-shadow( 0px 0px 2px #fff);}
.link3:hover {transform: rotate(0deg);}

.link4 {position: absolute; top: 110px; left: 125px; height: 15px; width: 15px; filter: drop-shadow( 0px 0px 2px #fff);}
.link4:hover {transform: rotate(0deg);}

.abox, .abox2 {background-image: url(background-color: #100b2e; background-image: url('https://www.transparenttextures.com/patterns/checkered-pattern.png'); box-shadow:1px 1px 10px #000; text-transform: uppercase; text-align: left; color: #fff; font-size:8px; font-family: calibri, sans-serif; position: absolute; width:220; height:250; left: 60px; bottom: 0px; 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;}


</style>

<div id="bitch" oncontextmenu="return false;">

<div id="container">
<div class="mainimg"></div>
<div class="topper"></div>

<div class="navbar">
<a class="link1" href="#1" title= "stats"><img src= "https://i.imgur.com/SNoIGDA.jpg?1"></a>
<a class="link2" href="#2" title= "head canons"><img src= "https://i.imgur.com/H0IAHCA.jpg?1"></a>
<a class="link3" href="#3" title= "ooc"><img src= "https://i.imgur.com/yMVCBWf.jpg?1"></a>
<a class="link4" href="#4" title= "reset"><img src= "https://i.imgur.com/35cfK2p.jpg?1"></a>
</div>

<div id="1" class="slide">
<div class="abox1">
<h1>statistics</h1>
<font style=float:left><b>Name</b> </font> <font style=float:right>Mathias Halvorsen.</font><br>
<font style=float:left><b>Alias</b> </font> <font style=float:right>Branch.</font><br>
<font style=float:left><b>Gender</b> </font> <font style=float:right>Male.</font><br>
<font style=float:left><b>Height</b> </font> <font style=float:right>7'0".</font><br>
<font style=float:left><b>Weight</b> </font> <font style=float:right>275 lbs.</font><br>
<font style=float:left><b>Occupation</b> </font> <font style=float:right>Mercenary.</font><br>
<font style=float:left><b>Orientation</b> </font> <font style=float:right>Heterosexual.</font><br>
<font style=float:left><b>M. Status</b> </font> <font style=float:right>Single.</font><br>
</div></div>

<div id="2" class="slide">
<div class="abox2">
<h1>title 2 here</h1>
<h2>I know what they desire..</h2>
words here.
</div></div>

<div id="3" class="slide">
<div class="abox3">
<h1>title 3 here</h1>
<h2>I know what they desire..</h2>
words here.
</div></div>

</div>
</div>