Good / Abel

<style>

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

body {background-image: linear-gradient(180deg, #AFCBE0, #CCDBE2, #D2DDDF, #BFCCD2);}

i {font-style: normal; font-family: 'Kristi', cursive; font-size: 130px; color: #EFF4F8; margin-right: 20px; margin-left: 10px; line-height: 45px;}
a.box {transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;}
a.box:hover {transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;}
a {text-decoration: none; color: #EAF2F5; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out}
a:hover {color: #828C95; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out}

.container {position: fixed;
height: 100px;
width: 100px;
left: 480px;
bottom: 60px;
}

.image {position: absolute;
background: url('https://i.pinimg.com/564x/db/d0/79/dbd079c59d06bb35769ef571e862a250.jpg') no-repeat;
background-size: 510px;
background-position: -10px 0px;
height: 640px;
width: 500px;
left: 0px;
bottom: 0px;
border: 3px solid #EAF2F5;
box-shadow: 0px 0px 50px #828C95;
}

.text {position: absolute;
font-family: 'Unica One', cursive;
font-size: 12px;
color: #828C95;
text-align: justify;
height: 500px;
width: 372px;
left: 61px;
bottom: 53px;
opacity: 0;
transition:all .9s ease-in-out;
-webkit-transition:all .9s ease-in-out;
-o-transition:all .9s ease-in-out;
-moz-transition:all .9s ease-in-out;
}
.text:hover {opacity: 1;
transition:all .9s ease-in-out;
-webkit-transition:all .9s ease-in-out;
-o-transition:all .9s ease-in-out;
-moz-transition:all .9s ease-in-out;}

.tab1 {position: absolute;
background: #E1F0F5;
height: 20px;
width: 20px;
border-radius: 100%;
left: 390px;
bottom: 30px;
box-shadow: 0px 0px 10px #E1F0F5;
}

.tab2 {position: absolute;
background: #E1F0F5;
height: 20px;
width: 20px;
border-radius: 100%;
left: 420px;
bottom: 30px;
box-shadow: 0px 0px 10px #E1F0F5;
}

a.box span {position:absolute;
bottom: 5%;
right: 56%;
margin:auto;
display:none;
padding:5px;
z-index:100;
}

a.box:hover span {position: fixed;
background: #C2CDCF;
display:inline;
font-family: 'Unica One', cursive;
font-size: 11px;
color: #EAF2F5;
border: 3px solid #EAF2F5;
opacity: 0.9;
width: 307px;
text-align:justify;
left: 537px;
bottom: 72px;
}

.coder {position: absolute;
font-family: 'Unica One', cursive;
font-size: 13px;
color: #EAF2F5;
text-align: center;
height: 100px;
width: 372px;
left: 70px;
bottom: -120px;
}

</style>

<div class="container">
<div class="image"></div>

<div class="text">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<font style="float:left"><i>abel</i></font>
A young man of friendly, cheerful disposition. He seems to be nothing out of the ordinary save for being perfectly <b>angelic</b>.
</div>

<a target="_blank" href="https://imgur.com/a/o1np7gY" class="box"><div class="tab1"><span><center><br>Click for Gallery<br><br></center></span></div></a>
<a class="box"><div class="tab2"><span>Always open to interaction! main/dm, approach in character. character development, adventure, and exploration. slice of life and modern fantasy preferred. no drama zone. ic =/= ooc.</span></div></a>

<div class="coder"><a target="_blank" href="https://roleplay.chat/profile.php?user=words">coded by words</a>