smitten

function tooltip() {
    var title = $(this).attr("title");
    $(this).removeAttr("title");

    this.TooltipMessage = $("<div/>", {class: "tooltipMessage", style: "display: none;"});
    this.TooltipMessage.html("<span>" + title + "</span>");
    $("body").append(this.TooltipMessage);


    if ($(this).hasClass("tooltipLeft")) {
        this.TooltipMessage.addClass("left");
    }

    $(this).hover(tooltipFadeIn, tooltipFadeOut);
    $(this).mousemove(tooltipMousemove);
}

function tooltipFadeIn() {
    this.TooltipMessage.stop(true, false).fadeIn();
}

function tooltipFadeOut() {
    this.TooltipMessage.stop(true, false).fadeOut();
}

function tooltipMousemove(e) {
    var offset = {
        left: e.pageX,
        top: e.pageY + 5
    };

    if (this.TooltipMessage.hasClass("left")) {
        offset.left -= this.TooltipMessage.width() + 10;
    } else {
        offset.left -= 100;

    }
    this.TooltipMessage.offset(offset);
}

$(function (e) {
    $(".tooltip").each(tooltip);
});

 window.onload = function() {
    document.addEventListener("contextmenu", function(e){
      e.preventDefault();
    }, false);
    document.addEventListener("keydown", function(e) {
    //document.onkeydown = function(e) {
      // "I" key
      if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
        disabledEvent(e);
      }
      // "J" key
      if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
        disabledEvent(e);
      }
      // "S" key + macOS
      if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
        disabledEvent(e);
      }
      // "U" key
      if (e.ctrlKey && e.keyCode == 85) {
        disabledEvent(e);
      }
      // "F12" key
      if (event.keyCode == 123) {
        disabledEvent(e);
      }
    }, false);
    function disabledEvent(e){
      if (e.stopPropagation){
        e.stopPropagation();
      } else if (window.event){
        window.event.cancelBubble = true;
      }
      e.preventDefault();
      return false;
    }};

$("img").mousedown(function(){
    return false;
});

-----------------------------------------------------------------------------------------------

@import url('https://fonts.googleapis.com/css?family=Cookie|Pacifico');
@import url('https://fonts.googleapis.com/css?family=Mukta|Overpass|Quicksand|Ubuntu');
@import url('https://fonts.googleapis.com/css?family=Didact+Gothic|Gamja+Flower|Jua|Muli|Tenali+Ramakrishna');

body{
background-image:url('https://www.transparenttextures.com/patterns/wet-snow.png');
background-color: #FFC3E2;
background-repeat:repeat;
overflow:auto;
}

::-webkit-scrollbar {display: none}

h1{
color:#0028BF;
font-family: 'Pacifico', sans-serif;
}

hr {
	border:0;
	margin-bottom:5px;
	width:90%;
	height:1px;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background-color:#000;
	}
a{
color:#FFF
 filter: drop-shadow(.1vh .1vh .1vh #FF80D4);
text-decoration: none;

}

b{
color:#FFF;
 filter: drop-shadow(.1vh .1vh .1vh #FF80D4);
}

.hlw img {
top: 40vh;
left: 20vh;
 position: absolute;
 height: 60vh;
width:60vh;
overflow:auto;
 filter: drop-shadow(.5vh .5vh .5vh #C2A3FF);

 }

.warn img {
top: 60vh;
left: 10vh;
 position: absolute;
 height: 10vh;
width:25vh;
overflow:auto;
border-style: solid;
border-color:#FFF;
 }

.aaa img {
top: 40vh;
left: 10vh;
 position: absolute;
 height: 12vh;
width:23vh;
overflow:auto;
border-style: solid;
border-color:#FFF;
 }

.bbb img {
top: 80vh;
left: 10vh;
 position: absolute;
 height: 12vh;
width:25vh;
overflow:auto;
border-style: solid;
border-color:#FFF;
 }

.stats {
	position:absolute;
	padding: 1px;
	font-family: 'Text';
	font-size:20px;
	color:#CAADFF;
	text-align:justify;
font-weight:bold;
	line-height:24px;
	height:20vh;
	width:41vh;
	left:80vh;
	top: 65vh;
overflow: auto;
 filter: drop-shadow(.1vh .1vh .1vh #FFF);
	}


.title{
color:#FF80D4;
font-family: 'Title';
font-size:30vh;
top:15vh;
width:50vh;
left:12vh;
position: absolute;
z-index:5;
letter-spacing:.5px;
 filter: drop-shadow(.1vh .1vh .1vh #FFF);
}

.credit {
 overflow:hidden;
 position:fixed;
 text-align:justify;
 bottom:2vh;
 right:2vh;
 height:5vh;
 width:5vh;
 padding:0vh;
 opacity: .8;
 background-image: url('https://i.imgur.com/Ldl49Wz.png');
 background-position:top center;
 background-attachment: absolute;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;}

div.tooltipMessage {
 z-index: 600;
 position: absolute;
 width: 220px;
 font-family: verdana;
 font-variant: small-caps;
 font-size: 10px;
 text-align: justify;
}

div.tooltipMessage > span {
 display: inline-block;
 background: #E9C7FF;
 padding: 4px 5px;
 color: #FFF;
 border: 1px solid #FFF;
 border-radius: 5px;
}
div.tooltipMessage.left > span {
 float: right;
}


@font-face {
 font-family: "Title";
 src: url('https://dl.dropboxusercontent.com/s/fjjqzhvpr9f1yri/Coaster%20Quake%20-%20Personal%20Use.otf?dl=0');
 format("truetype");
}

@font-face {
 font-family: "Text";
 src: url('https://dl.dropboxusercontent.com/s/zt2iqlfadpbdy5n/better_phoenix_sample%5B1%5D.ttf?dl=0');
 format("truetype");
}

-------------------------------------------------------------------------------------------------------------

<div class="title">mara!</div>

<div class="hlw">
<img src="https://i.imgur.com/UZCoQdU.png">
</div>

<div class="warn">
<img src="https://i.imgur.com/t4GUgPJ.png">
</div>

<div class="aaa">
<img src="https://i.imgur.com/JtOrSfE.png">
</div>

<div class="bbb">
<img src="https://i.imgur.com/Fn0JJII.png">
</div>


<div class="stats">
succubaby ❤<br>
bubbly but bratty<br>
placeholder<br><br><a class="tooltip" href="https://roleplay.chat/profile.php?user=Smitten" title="Friend here... Eventually!"><b>★</b></a>
</div>