helaine/hex girl's profile

<style>
@import url('https://fonts.googleapis.com/css?family=Courier');
@import url('https://fonts.googleapis.com/css?family=IM+Fell+English+SC|Open+Sans+Condensed:300');
@import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative|Cormorant+Unicase|Unica+One');
@import url('https://fonts.googleapis.com/css?family=Georgia');


	::-webkit-scrollbar {
	background-color:transparent;
	width: 5px; }

	::-webkit-scrollbar-track { border-radius: 0px; background-color: transparent; }
	::-webkit-scrollbar-thumb { border-radius: 0px; background-color: #E02C1D; }

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

	.pfor{display:none; overflow: hidden;}

	#profile{
 background-color:transparent;
 border:none;}

 *{cursor: url('https://i.imgur.com/HhFMgBK.png'), default;}

	.fix{
	 position:fixed;
	 bottom:0px;
	 left:40%;
	 }

/*------» leviosa «------*/ /*------» leviosa «------*/ /*------» leviosa «------*/

#float {
	background-color: transparent;
	height: 500px;
	left: 46%;
	position: fixed;
	top: -20px;
	width: 390px;
	z-index: 2;
	}

@keyframes bounce{
 0% {top: 30px;}
 50% {top: 50px;}
 100% {top: 30px;}
 }
@-webkit-keyframes bounce {
 0% {top: 30px;}
 50% {top: 50px;}
 100% {top: 30px;}
 }

.float-img-bg{
 background-attachment: absolute;
 background-color: transparent;
 background-repeat: no-repeat;
 background-image: url('https://i.imgur.com/wIhW5bF.png');
 width: 211px; height: 217px;
 position: absolute;
 left: 0px;
 top: 512px;
 z-index: 211;
 padding: 9px;

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;}

 .float-img-bg:hover {
 filter: blur(10px);
 opacity: 0;
 transition: .5s;
 }

 .border{
 border-radius: 80%;
 border: 2px solid #E02C1D;
 }


/*------» picture «------*/ /*------» picture «------*/ /*------» picture «------*/

#pic {position: absolute; left: -200px; bottom: -30px;
opacity: .0; transition: 1s;}

#paras {position: absolute; left: 115px; bottom: 291px;
opacity: .0; transition: 1s;}


/*------» titleHELAINE «------*/ /*------» titleHELAINE «------*/ /*------» titleHELAINE «------*/

#title {
position:absolute; color:#e35058;
width:250px; left:-30px;
top:430px; text-align:center;
font-family:'Cinzel Decorative', cursive;
font-size:38px;
line-height:25px;
opacity:.0; transition: 1s;}


/*------» subtitle «------*/ /*------» subtitle «------*/ /*------» subtitle «------*/

#subtitle {
position:absolute; color:#e35058;
width:310px; left:-30px;
top:480px; text-align:center;
font-family:'Cinzel Decorative', cursive;
font-size:16px;
line-height:25px;
opacity:.0; transition: 1s;}


/*------» magic «------*/ /*------» magic «------*/ /*------» magic «------*/

#magic {
position:absolute; color:#e35058;
width:270px; left:-10px;
top:530px; text-align:center;
font-family:'Georgia';
font-size:13px;
line-height:25px;
opacity:.0; transition: 1s;}

#magic2 {
position:absolute; color:#e35058;
width:380px; left:-85px;
top:615px; text-align:center;
font-family:'Georgia';
font-size:12px;
line-height:25px;
opacity:.0; transition: 1s;}


/*------» potions «------*/ /*------» potions «------*/ /*------» potions «------*/

#container {
position:absolute;
left:430px; bottom:30px;
opacity:.0; transition: .5s;}

body:hover #pic {opacity:1.0; transition-delay: .5s;}
body:hover #paras {opacity:1.0; transition-delay: .5s;}
body:hover #container {opacity:1.0; transition-delay: .5s;}
body:hover #title {opacity:1.0; transition-delay: .5s;}
body:hover #subtitle {opacity:1.0; transition-delay: .5s;}
body:hover #magic {opacity:1.0; transition-delay: .5s;}
body:hover #magic2 {opacity:1.0; transition-delay: .5s;}


/*------» spells «------*/ /*------» spells «------*/ /*------» spells «------*/

a[data-tooltip] {
  position: relative;
}
a[data-tooltip]::before,
a[data-tooltip]::after {
  position: absolute;
  display: none;
  opacity: 0.80;
}
a[data-tooltip]::before {
  content: attr(data-tooltip);
  background: #918181;
  color: #fff;
  font-family: 'cinzel decorative', cursive;
  padding: 2px;
  border-radius: 5px;
  white-space: nowrap;
  text-decoration: none;
}
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="left"]::before {
  top: -25%;
  right: 100%;
  margin-right: 10px;
}
a[data-tooltip][data-placement="left"]::after {
  border-left-color: #ff6d52;
  border-right: none;
  top: 50%;
  right: 100%;
  margin-top: -6px;
  margin-right: 4px;
}


u {
text-decoration:none;
color:#e35058;
font-family: 'Cinzel Decorative', cursive; font-size: 19px;
line-height:25px;
padding:1px;
}

b {color: #fda69c;
text-decoration: none;
font-family: 'Georgia', sans-serif; font-size: 14px;
text-shadow: 1px 0px 0px #e8a9bb,
	0px 1px 0px #ecdde1,
	-1px 0px 0px #ecdde1,
	0px -1px 0px #ecdde1;
}

i {color: #fda69c;
text-decoration: none;
font-family: 'Georgia', sans-serif; font-size: 12px;
}

s {color: #fff;
text-decoration: none;
background-color:#f96557;
font-family: 'Cinzel Decorative', cursive; font-size: 28px;
color:#e9e7e6;
line-height:25px;
padding:3px;
}
</style>
<body>
<div id="float">
<div class="float-img-bg">
<span class="float-img">
	</div>

 <div id="title">
	Helaine Desmarais
 </div>

 <div id="subtitle">
 of Desmarais Apothecary
 </div>

 <div id="magic">
 <b>“</b> <u>A</u> witch <i>always</i> knows when <b>bad news</b> <font style="float:right;">blesses her house. <b>”</b></font>
 </div>

 <div id="magic2">
 <s>T</s> he Apothecary has never been one location, but rather a number of industrious hex maniacs and aroma ladies. The first step inside is marked by the jingle of chimes; then, the sharp yet soothing scents of lavender and patchouli hit you. Wooden shelves line the walls, bearing delicate glass bottles or potions; wicker baskets hang from hooks, filled to the brim with herbs fresh and dry. And in the hutches behind the counter? Rare stones, mysterious powders, and even the occasional gem or disc may be found...

 <br><br>
 <img src="https://i.imgur.com/a3tgajn.png">
 <img src="https://i.imgur.com/DSF4x4Z.png">
 <img src="https://i.imgur.com/AzewwjR.png">
 <img src="https://i.imgur.com/LxjJqG7.png">

 <br>
 <small><i>Pokémon RP preferred; DMs reserved for friends & plot development.</i></small>
 </div>

 </div>


<div id="container">
 <div id="pic">
 <img src="https://i.imgur.com/0X3WHKZ.png" height="528">
 </div>

 <div id="paras">
 <small><a data-tooltip="“Enzo”; lv31">
 <img src="https://i.imgur.com/V8ALQmF.png">
 </a></small>
 </div>
</div>
</body>