Yandere profile

<style>

@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Lobster');

  body {
background-color:#000;
overflow:hidden;
}

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

#backgroundmenu{
 width:600px;
 height:400px;
 background-color:transparent;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-300px;
transition:1s;
transition-delay:99999999s;
background-image:url(#);
background-size:30px;
}

body:hover #backgroundmenu{
background-color:#8d905b;
 transition-delay:4s;
 animation: turn-off 0.55s linear ;
background-size:30px;
box-shadow:0px 0px 50px 0px #ffddb8;
}

#line1{
 background-color:#fff;
 height:2px;
 width:0px;
 transition:1s;
 transition-delay:99999999s;
 z-index:99;
}

body:hover #line1{
 width:600px;
  transition-delay:0s;
}

#line3{
 background-color:#fff;
 height:2px;
 width:0px;
 transition:1s;
 transition-delay:99999999s;
 position:absolute;
 bottom:0px;
 right:0px;
  z-index:99;
}

body:hover #line3{
 width:600px;
  transition-delay:2s;
}

#line2{
background-color:#fff;
 height:0px;
 width:2px;
 position:absolute;
 transition:1s;
 transition-delay:99999999s;
 right:0px;
 top:0px;
  z-index:99;
}

body:hover #line2{
 height:400px;
  transition-delay:1s;
}

#line4{
background-color:#fff;
 height:0px;
 width:2px;
 position:absolute;
 transition:1s;
 transition-delay:99999999s;
 left:0px;
 bottom:0px;
  z-index:99;
}

body:hover #line4{
 height:400px;
  transition-delay:3s;
}

#image{
 background-image:url(https://cdn.discordapp.com/attachments/234066061547274240/364515336034189312/11b4428553204f7281e79ec55bba2bbf5fbc6c1a_s2_n2.png);
 background-size:contain;
 width:300px;
 height:370px;
 background-repeat:no-repeat;
 position:absolute;
 top:30px;
 right:100px;
 transition:2s;
 opacity:0;
 transition-delay:9999999999s;
 z-index:98;
}

body:hover #image{
  right:-55px;
  opacity:1;
  transition-delay:5s;
}

#x{
  width:0px;
  height:100px;
  background-color:#ff9f14;
  position:absolute;
  top:50%;
  margin-top:-50px;
  transition:1s;
  background-image:url(https://www.transparenttextures.com/patterns/graphy-dark.png);
  background-size:30px;
  background-position:105px 100px;
  opacity:1;
   transition-delay:99999999s;
}

body:hover #x{
 width:600px;
 transition-delay:5s;
}

#y{
 width:100px;
 height:0px;
  background-color:#ff9f14;
  position:absolute;
  left:50%;
  margin-left:-50px;
  top:2px;
  z-index:0;
  transition:1s;
  background-image:url(https://www.transparenttextures.com/patterns/graphy-dark.png);
  background-size:30px;
   opacity:;
    transition-delay:9999999999s;
}

body:hover #y{
 height:398px;
  transition-delay:5s;
}

h1{
 font-family: 'Lobster', cursive;
font-size:50pt;
font-weight:bold;
color:#fff;
position:absolute;
top:50%;
left:50%;
margin-top:-260px;
margin-left:-400px;
z-index:10;
background-position:0px -100px;
 -webkit-text-stroke: px white;
z-index:999;
transform:rotate(-10deg);
text-shadow: 1px 1px 0 white,
                2px 2px 0 white,
                3px 3px 0 white,
                4px 4px 0 white,
                5px 5px 0 white
                ;
 opacity:0;
transition:1s;
transition-delay:9999999999s;
}

body:hover h1{
  opacity:1;
  transition-delay:5s;
}

h2{
   font-family: 'Lobster', cursive;
font-size:50pt;
font-weight:bold;
color:#fff;
position:absolute;
top:50%;
left:50%;
margin-top:-260px;
margin-left:-400px;
z-index:10;
background-position:0px -100px;
 -webkit-text-stroke: px white;
z-index:1000;
background: url('http://www.freewebs.com/kcdi/f%20100.jpg') ;
background-size:100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
background-position:0px -70px;
transform:rotate(-10deg);
  opacity:0;
  transition:1s;
transition-delay:9999999999s;
}

body:hover h2{
  opacity:1;
  transition-delay:5s;
}

h3{
font-family: 'Lobster', cursive;
color:#fff;
margin-top:10px;
margin-bottom:0px;
font-size:30pt;
border-bottom:solid 5px #fff;
text-align:center;
}

#background{
background-color:#8d905b;
border:solid 1px #fff;
width:250px;
height:350px;
position:absolute;
z-index:99;
top:25px;
left:15px;
box-shadow:2px 2px 30px 0px;
opacity:0;
transition:1s;
transition-delay:999999999s;
background-image:url(https://i.imgur.com/8dgZIh0.png);
background-size:70%;
background-repeat:no-repeat;
background-position:center;
}

body:hover #background{
 opacity:1;
 transition-delay:6s;

}

#one, #two, #three, #four{
  background-color:#8d905b;
border:solid 1px #fff;
width:240px;
height:340px;
  opacity:0;
  z-index:1;
position:absolute;
color:#fff;
font-family: 'Raleway', sans-serif;
font-size:10pt;
padding:5px;
overflow:auto;
}

#one:target,#two:target,#three:target,#four:target{
  opacity:1;
}

a{
text-decoration:none;
color:#dadada;
transition:1s;
}

a:hover{
color:gold;
}

#navi{
  width:50px;
  height:200px;
  position:absolute;
  background-color:transparent;
  top:50%;
  left:50%;
  z-index:999;
  margin-top:-100px;
  margin-left:-15px
}

#navi a {
  width:50px;
  height:50px;
  background-image:url('https://i.imgur.com/Zp5Um9o.png');
  background-size:100%;
  display:inline-block;
  -webkit-animation: monsterAnimation 1s infinite;
  animation: monsterAnimation 1s  infinite;
   -webkit-animation-timing-function: linear;
  -webkit-animation-play-state: paused;  /* Chrome, Safari, Opera */
  animation-play-state: paused;
   opacity:0;
   transition:1s;
   transition-delay:999999999s;

}

body:hover #navi a{
 opacity:1;
 transition-delay:6s;
}

#navi a:hover{
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

@keyframes monsterAnimation {
    100% { -webkit-transform:  rotate(360deg); }
}

.cssload-thecube {
  width: 73px;
	height: 73px;
	margin: 0 auto;
	margin-top: 49px;
	position: absolute;
  top:100px;
  left:250px;
	transform: rotateZ(45deg);
 opacity:1;
 transition:.5s;
 transition-delay:99999999s;
}

body:hover .cssload-thecube{
 opacity:0;
 transition-delay:4s;
}
.cssload-thecube .cssload-cube {
	position: relative;
	transform: rotateZ(45deg);

}
.cssload-thecube .cssload-cube {
	float: left;
	width: 50%;
	height: 50%;
	position: relative;
	transform: scale(1.1);

}
.cssload-thecube .cssload-cube:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	animation: cssload-fold-thecube 2.76s infinite linear both;

	transform-origin: 100% 100%;

}
.cssload-thecube .cssload-c2 {
	transform: scale(1.1) rotateZ(90deg);

}
.cssload-thecube .cssload-c3 {
	transform: scale(1.1) rotateZ(180deg);

}
.cssload-thecube .cssload-c4 {
	transform: scale(1.1) rotateZ(270deg);

}
.cssload-thecube .cssload-c2:before {
	animation-delay: 0.35s;

}
.cssload-thecube .cssload-c3:before {
	animation-delay: 0.69s;

}
.cssload-thecube .cssload-c4:before {
	animation-delay: 1.04s;

}



@keyframes cssload-fold-thecube {
	0%, 10% {
		transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}



</style>

<div id="backgroundmenu">
<h2>That's all Folks!</h2>
<h1>That's all Folks!</h1>
<div id="background">

<div id="one">
<h3>One</h3>
<br><span style="float: left; font-weight: bold;">Information</span> <span style="float: right; font-style: italic;">Stat</span>
</div>
<div id="two">
<h3>Two</h3>

</div>
<div id="three">
  <h3>Three</h3>

</div>
<div id="four">
  <h3>Four</h3>
 <b>00</b> This profile was made by the <a href="https://roleplay.chat/profile.php?user=Hound+of+Tindalos">Hound of Tindalos</a> send him a message or an rpc mail for comission inquiries.
</div>

</div>
<div id="navi">
  <a href="#one"></a><br>
   <a href="#two"></a><br>
   <a href="#three"></a><br>
   <a href="#four"></a><br>

</div>

<div id="x"></div>
<div id="y"></div>
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
<div id="line4"></div>
<div id="Image"></div>
 <div class="cssload-thecube">
  <div class="cssload-cube cssload-c1"></div>
  <div class="cssload-cube cssload-c2"></div>
	<div class="cssload-cube cssload-c4"></div>
	<div class="cssload-cube cssload-c3"></div>
</div>
</div>