venom's profile (wip)

<style>
@import url('https://fonts.googleapis.com/css?family=Cardo|Cinzel+Decorative|IM+Fell+English+SC|Italianno|Jim+Nightshade|Karla|Source+Serif+Pro|Zeyada');
@import url('https://fonts.googleapis.com/css?family=Georgia');


.pfor{ display:none; background-color:transparent; }
  body {background:url('') top left fixed repeat;
  background-color:#fff;
  overflow:hidden; }

#profile{ border:0px; background-color:transparent; }
*{cursor:url('https://i.imgur.com/8QmAMfq.png'), default; }

   ::-webkit-scrollbar { width:5px; height:0px;
   background:; }
   ::-webkit-scrollbar-thumb { background-color:#dbd3d2;
   border:1px solid #dbd3d2;
   -webkit-border-radius:10px; border-radius:10px; }


	body{
 background-color: transparent;
	background-position:right top; background-image: url("");
	background-repeat: repeat; background-attachment:fixed; background-size: repeat}


    #name{
	height:100px; width:400px;
	top:-15px; left:45px;
    background-color:#;
	   color:#d2c4c1;
	   font-family:'italianno', cursive;
	   font-size:65px;
	letter-spacing:1px;
	text-transform:; text-align:justify;
	margin: 0px 5px 0px; padding:px;
    box-shadow: inset 0px 0px 20px #,
	0px 0px 20px #;
	position:absolute;
	float:left; overflow:auto;
	opacity:.0; transition: 1s;
    filter: blur(0px); opacity:1.0; transition: 1s; }

    #titles{ position:absolute;
	width:400px; height:43px;
	left:40px; top:35px;
	background-color:transparent;
	color:#ccbcb8;
	font-family:'IM Fell English SC';
	font-size:11px;
	line-height:15px;
	letter-spacing:1px;
	text-transform:uppercase; text-align:justify;
	padding:13px; float:left;

	overflow:auto; opacity:.0; transition: 1s;
    filter: blur(0px); opacity:1.0; transition: 1s; }


#opening{ position:fixed; width:100%; height:100%; left:150px; bottom:150px; }

   #opening-img { position:absolute;
   background-image:url('https://i.imgur.com/w5zFJ4E.png');
   background-position:0% 20%; background-size:443px;
   background-attachment: absolute;
   background-repeat:no-repeat;
   height:617px; width:443px;
   bottom:-200px; left:25px;
   filter: blur(0px); opacity:1.0; transition: 1s; }

   #opening-img2 { position:absolute;
   background-image:url('https://i.imgur.com/6dyLWnV.png');
   background-position:0% 20%; background-size:430px;
   background-attachment: absolute;
   background-repeat:no-repeat;
   height:617px; width:430px;
   bottom:-100px; left:25px;
   filter: blur(1px); opacity:1.0; transition: 1s;
    animation: bounce 3.25s infinite;
   -o-animation: bounce 3.25s infinite;
   -moz-animation:bounce 3.25s infinite;
   -webkit-animation: bounce 3.25s infinite;
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.8s ease-out;
   }
   @keyframes bounce{
   0% {top: 30px;}
   50% {top: 50px;}
   100% {top: 30px;}
   }
@-webkit-keyframes bounce {
 0% {top: 30px;}
 50% {top: 50px;}
 100% {top: 30px;}
 }

#ooc{ position:absolute;
width:400px; height:43px;
left:40px; bottom:80px;
background-color:transparent;
color:#ccbcb8;
font-family:'IM Fell English SC';
font-size:10px;
line-height:15px;
letter-spacing:1px;
text-transform:uppercase; text-align:justify;
padding:13px; float:left;
overflow:auto; opacity:.0; transition: 1s;
filter: blur(0px); opacity:1.0; transition: 1s; }

   body:hover #music { opacity:1.0; transition-delay: 1.5s; }


#container{ position:absolute; left:-405px; bottom:130px; opacity:.0; transition: 1s; }
   body:hover #container { filter: blur(0px); opacity:1.0; transition-delay: 1s; }


#stats{ position:absolute;
width:190px; height:160px;
left:280px; bottom:35px;
background-color:transparent;
   color:#a08f8d;
   font-family:'cardo';
   font-size:12px;
   line-height:21px;
letter-spacing:1px;
text-transform:; text-align:justify;
padding:13px; float:left;
border-top:1px dotted #a08f8d;
overflow:auto; opacity:.0; transition: 1s;  }
	body:hover #stats { opacity:1.0; transition-delay:1s; }


#blurb{ position:absolute;
width:190px; height:213px;
left:280px; bottom:-193px;
background-color:transparent;
   color:#a08f8d;
   font-family:'cardo';
   font-size:12px;
   line-height:18px;
letter-spacing:1px;
text-transform:; text-align:justify;
padding:13px; float:left;
border-top:1px dotted #a08f8d;
border-bottom:1px dotted #a08f8d;
overflow:auto; opacity:.0; transition: 1s;  }
	body:hover #blurb { opacity:1.0; transition-delay:1s; }


#headcanons{ position:absolute;
width:190px; height:250px;
left:875px; bottom:-55px;
background-color:transparent;
   color:#a08f8d;
   font-family:'cardo';
   font-size:12px;
   line-height:21px;
letter-spacing:1px;
text-transform:; text-align:justify;
padding:13px; float:left;
border-top:1px dotted #a08f8d;
overflow:auto; opacity:.0; transition: 1s;  }
	body:hover #headcanons { opacity:1.0; transition-delay:1s; }


#people{ position:absolute;
width:190px; height:110px;
left:875px; bottom:-193px;
background-color:transparent;
   color:#a08f8d;
   font-family:'cardo';
   font-size:12px;
   line-height:18px;
letter-spacing:1px;
text-transform:; text-align:justify;
padding:13px; float:left;
border-top:1px dotted #a08f8d;
border-bottom:1px dotted #a08f8d;
overflow:auto; opacity:.0; transition: 1s;  }
	body:hover #people { opacity:1.0; transition-delay:1s; }


h1 { position:absolute;
background-color:transparent;
   color:#ccbcb8;
   font-family:'Cinzel Decorative', cursive;
   font-size:14px;
   line-height:15px;
letter-spacing:1px;
text-decoration:none;
text-transform:uppercase; text-align:center;
padding:3px; }

	b{ color:#a08f8d;
	font-family:'teko';
	font-size:12px;
	letter-spacing:3px;
	line-height:18px;
	text-transform:uppercase;
	text-align:center;
	}

a {color:#a08f8d;
letter-spacing:1px;
line-height:18px;
text-decoration:none;
text-transform:;
 padding:1px; display:inline-block; }
 	a:hover {color:#a08f8d;
 	text-shadow: 0px -4px 3px #dbd3d2,
            0px 4px 3px #dbd3d2,
            0px 2px 2px #815761,
            0px -2px 2px #815761;
	text-decoration: none;
	transition: 1.2s;
	}

a[data-tooltip] { position: relative; }
a[data-tooltip]::before,
a[data-tooltip]::after { position: absolute;
 display: none;
 opacity: .9; }
a[data-tooltip]::before { content: attr(data-tooltip);
 background: #ccbcb8;
 color: #a08f8d;
 font-family:'teko'; font-size:14px;
 letter-spacing:1px; padding:2px;
 border-radius: 5px;  width:65px;
 text-decoration: none;
 box-shadow: 1px 0px 0px #d2cac9,
	0px 1px 0px #d2cac9,
	-1px 0px 0px #d2cac9,
	0px -1px 0px #d2cac9; }
a[data-tooltip]::after { width:0; height:0;
 border: 6px solid transparent;
 content: ''; }
a[data-tooltip]:hover::before,
a[data-tooltip]:hover::after {
 display: block; }
a[data-tooltip][data-placement="bottom"]::before {
  top: 100%; left: 0;
  margin-top: 10px; }
a[data-tooltip][data-placement="bottom"]::after {
  border-bottom-color: #ccbcb8;
  border-top: none;
  top: 100%;
  left: 10px;
  margin-top: 4px; }

u { position:absolute;
background-color:transparent;
   color:#ccbcb8;
   font-family:'Cinzel Decorative', cursive;
   font-size:11px;
   line-height:15px;
letter-spacing:1px;
border-bottom:1px dotted #bbb;
text-decoration:none;
text-transform:uppercase; text-align:justify;
padding:3px; }

</style>
<body>

 <div id="opening">
 <div id="opening-img">
 <div id="opening-img2"></div>

 <div id="name">
 <center> Ellana Lavellan </center>
 	</div>
 <div id="titles">
 <center>former inquisitor. holy stump of andraste. <br> dragon age: inquisition.</center>
 	</div>
 <div id="ooc">
 <center> tap or hover for full profile. </center>
 	</div>

 </div>


<div id="container">

 <div id="music-player">
<div style="margin-top:4px;">
<audio controls style="opacity:0; width:150px; margin-bottom:91px; margin-left:145px;" loop="">
<source src="https://dl.dropboxusercontent.com/s/n9ypdx293py3me6/DAI%20Tavern%20Songs.mp3?dl=0">
</audio>
</div>
</div>


 <div id="stats">
 <u>race:</u> <font style="float:right;">Dalish Elf</font><br>
 <u>age:</u> <font style="float:right;">early 30s</font><br>
 <u>height:</u> <font style="float:right;">5’04”</font><br>
 <u>class:</u> <font style="float:right;">Shapeshifter</font><br>
 <u>affiliation:</u> <font style="float:right;"><s>Inquisition</s></font><br>
 <font style="float:right;">Friends of Red Jenny</font><br>
 <font style="float:right;">Clan Lavellan</font>
 </div>

 <div id="blurb">
 Once the First of her Clan, Ellana retains a profound connection to the earth and all that depends on it — one that enhances her senses; reveals paths where most see none; and serves as an anchor for an otherwise unpredictable nature.
 <br> At the Well of Sorrows, she told Morrigan to fuck off and drank from the Well herself.

 </div>
 <div id="headcanons">

 ⚜ Recruited the Mages
<br>⚜ Supported Leliana as Divine
<br>⚜ Helped the Grey Wardens rebuild
<br>⚜ Reconciled Celene and Briala; recruited Florianne
<br>⚜ Spared the Chargers
<br>⚜ Defeated the Jaws of Hakkon
<br>⚜ Drank from the Well
<br>⚜ Disbanded the Inquisition
<br>⚜ Vowed to stop Solas

 </div>
 <div id="people">
 <center><i>TBA</i></center>

 </div>

 </div>
</body>