Hati

<style>

@import url('https://fonts.googleapis.com/css?family=Great+Vibes&display=swap');

.knockout {
 background: url(https://i.imgur.com/oqyv2vp.gif);
background-position:bottom center;
 color: black;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 font-weight: bold;
 font-size: 60px;
font-family: 'Great Vibes', cursive;
 width: 600px;
 margin: 30px -100;
 text-align: center;


}

.fire{ background: url(https://i.imgur.com/pw8X0yd.gif);
background-position:bottom center;
background-size:contain;
mix-blend-mode: screen;}


/* unvisited link */
a:link {
 color: #FFF; text-decoration: none;
}

/* visited link */
a:visited {
 color: #fff; text-decoration: none;
}

/* mouse over link */
a:hover {
 color: #fff; text-decoration: none;
}

/* selected link */
a:active {
 color: blue; text-decoration: none;
}

/* width */
::-webkit-scrollbar {
 width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
 box-shadow: inset 0 0 5px black;
 border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
 background: transparent;
 box-shadow: inset 0 0 5px red;
 border-radius: 10px;
}
body{background-image:url('https://i.imgur.com/Smwku35.png');background-color:#000;background-size:100%;background-repeat:no-repeat;background-position:center left;}

.op-tbl .ooc{font-style:italic;font-size:8px;}
.op-tbl p{padding:2px 0px;margin:0px;text-indent:35px;	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #F50,
		-1px 1px 0 #F00,
		1px 1px 0 #700;
}
.op-tbl b{color:#CBCACA;letter-spacing:-.2px;text-shadow:#435743 1px 1px 0;}
.op-tbl{background-color:#transparent;background-image:url('');background-position:top center;background-repeat:no-repeat;border:2px solid #transparent;font-family:georgia, serif;font-size:12px;color:#fc0;letter-spacing:.4px;word-spacing:.3px;line-height:15px;width:450px;text-align:justify;height:400px;}
.op-tbl-border{width:454px;border:1px solid #transparent; position: absolute;overflow-y:auto;overflow-x:hidden;
 right: 150px; top:0;}
.op-tbl .inner{margin:40px 10px 10px 10px;padding:10px;background-color: rgba(0, 0, 0, 0.4);border:1px solid #000;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;}</style>



<div class="op-tbl-border"><div class="knockout"><center>Hati</br></center></div>
<div class="op-tbl">
<div class="inner">
<p class="ooc">
Do not approach ICly. Do not be a brat. Golden rule applies.
</p>
<p>
Black elder dragon cloaked in flame, another product of experimental neural link technology.<p>
Golden mane and pitch black wings. He invokes the image of the beast who devours the sun. An infernal beast.
</p></div></div></div>