jz szy

<!DOCTYPE html>
<head>
<title>Kageyama</title>
</head>

<style>

body, a, a:hover {
cursor: url('https://i.imgur.com/w5mlnY9.png'), auto;
}

body {
background-color:#1C1E2A;
}

div.header {
background-image: url('https://i.imgur.com/ydyj5jP.jpg');
overflow:hidden;
width: 100%;
height:180px;
background-repeat: no-repeat;
background-size: cover;
background-position: left top;
border-style:solid;
border-width:0px 0px 5px 0px;
border-color:#383757;
}
div.suzuya {
width: 100%;
height:180px;
}
img.suzuya {
width:207px;
height:180px;
position:absolute;
margin-left:80%;
-webkit-transition:all .35s;
transition:all .35s;
}
img.suzuya:hover {
-webkit-filter: drop-shadow(3px 0px 0px rgba(255, 5, 9, 0.53)) drop-shadow(-3px 0px 0px rgba(5, 9, 255, 0.53));
filter: drop-shadow(3px 0px 0px rgba(255, 5, 9, 0.53)) drop-shadow(-3px 0px 0px rgba(5, 9, 255, 0.53));
}
p.quote {
font-family: 'Source Code Pro', monospace;
font-size: 12px;
color:white;
position:absolute;
margin-left: 50px;
margin-top:60px;
height:20px;
overflow:hidden;
text-align: right;
transition:all .5s;
line-height:20px;
}
p.quote:hover {
text-shadow: -2px -2px 1px rgba(255, 5, 9, 1), 2px 2px 1px rgba(5, 9, 255, 1);
height:40px;
}
div.marquee {
width:100%;
height:27px;
background-color:#383757;
font-family: 'Source Sans Pro', sans-serif;
font-size:16px;
color:white;
text-shadow: 0px 0px 1px #B61F32, 0px 0px 2px #B61F32, 0px 0px 3px #B61F32, 0px 0px 2px #B61F32, 0px 0px 2px #B61F32, 0px 0px 4px #B61F32;
letter-spacing: 1px;
}

.vertical-menu {
width: 150px;
margin-left: 100px;
margin-top: 80px;
}
.vertical-menu a {
color: white;
display: block;
padding: 12px;
text-decoration: none;
margin-top: 5px;
transition: all .7s;
-webkit-transition: all .7s;
text-align: center;
text-transform: uppercase;
font-size: 12px;
font-family: 'Quicksand', sans-serif;
font-weight:light;
letter-spacing: 3px;
opacity: .6
}
a.l1 {
background-color: #62768E;
}
a.l2 {
background-color: #62768E;
}
a.l3 {
background-color: #62768E;
}
a.credits {
background: rgb(28,30,42);
background: linear-gradient(0deg, rgba(28,30,42,1) 0%, rgba(98,118,142,1) 100%);
}
.vertical-menu a:hover {
opacity: 1;
background-color: #B61F32;
}
.vertical-menu a.active {
opacity:1;
background: rgb(28,30,42);
background: linear-gradient(180deg, rgba(28,30,42,1) 0%, rgba(98,118,142,1) 100%);
}

div.box1 {
overflow:hidden;
background-color: rgba(255, 255, 255, 0.8);
width: 300px;
height: 295px;
margin-top: -250px;
margin-left: 400px;
padding: 10px;
transition: all .5s;
-webkit-transition: all .5s;
display: inline-block;
box-shadow: -3px -3px 0px rgba(255, 10, 14, 0.5), 3px 3px 0px rgba(26, 10, 255, 0.5);
}
div.box1:hover {
background-color: rgba(255, 255, 255, 1);
}
p.tit1e {
font-family: 'Quicksand', sans-serif;
font-size: 16px;
color: #431D34;
border-width: 0px 0px 3px 0px;
border-style: solid;
border-color: #62768E;
margin-top: -3px;
padding: 0px 0px 2px 0px;
}
p.quotes {
font-family: 'Source Code Pro', monospace;
line-height: 13px;
font-size: 12px;
color: #B61F32;
text-align: justify;
margin-top:-5px;
}

div.invis {
width: 300px;
height: 295px;
padding: 10px;
display: inline-block;
margin-top:-350px;
margin-left: 50px;
}
img.bleh {
position: absolute;
width: 266px;
height: 195px;
margin-left: 9px;
}
img.bleh:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}

@keyframes shake {
    0% { transform: translate(1px, 0px); }
    10% { transform: translate(-1px, 0px); }
    20% { transform: translate(-3px, 0px); }
    30% { transform: translate(3px, 0x); }
    40% { transform: translate(1px, 0px); }
    50% { transform: translate(-1px,0px); }
    60% { transform: translate(-3px, 0px); }
    70% { transform: translate(3px, 0px); }
    80% { transform: translate(-1px, 0px); }
    90% { transform: translate(1px, 0px); }
    100% { transform: translate(1px, 0px); }
}
div.name {
width:300px;
height:80px;
box-shadow: -3px -3px 0px rgba(255, 10, 14, 0.5), 3px 3px 0px rgba(26, 10, 255, 0.5);
background-color: rgba(255, 255, 255, .8);
transition: all .5s;
-webkit-transition: all .5s;
position:absolute;
margin-top:195px;
margin-left:-10px;
padding: 10px 10px 17px 10px;
text-align: center;
text-transform: uppercase;
font-family: 'Poppins', sans-serif;
font-size: 16px;
color: #B61F32;
overflow:hidden;
}
div.name:hover {
background-color: rgba(255, 255, 255, 1);
}

p.nickname {
margin-top:0px;
-webkit-transition: all .5s;
transition: all .5s;
}
p.nickname:hover {
letter-spacing: 3px;
}

/* Tooltip container */
.tooltip {
margin-top:17px;
border-width: 0px 0px 3px 0px;
border-style:solid;
border-color: #B61F32;
-webkit-transition: all .5s;
transition: all .5s;
}
.tooltip:hover {
letter-spacing: 3px;
}
</style>

<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300" rel="stylesheet">

<body>
<div class="header"><div class="suzuya">
<img src="https://i.imgur.com/2uPyTGr.png" class="suzuya" />
<p class="quote">Why should I apologize for being a monster?<br>
Has anyone ever apologized for turning me into one?
</p>
</div>
</div>

<div class="marquee">
<marquee>+HOVER OVER OBJECTS IN HEADER</marquee>
</div>


<div class="vertical-menu">
  <a href="#" class="active">Home</a>
  <a href="#" class="l1">Link 1</a>
  <a href="#" class="l2">Link 2</a>
  <a href="#" class="l3">Link 3</a>
  <a href="https://www.marasites.com/?name=Kagayama" class="credits">Credits</a>
</div>

<div class="box1">
<p class="tit1e">NO SCROLL</p>
<p class="quotes">"Whether we die or not isn’t really that big a deal."<br><br>
"If an angelic being fell from the sky and tried to live in this world of ours, I think even they would commit many wrongs."<br><br>
"Now then, shall we play a game of chef? I will be the chef and you are the pig."<br><br>
"Try not to hate me too much, okay?"<br><br>
"You shouldn't turn your back on the enemy."
</p>
</div>

<div class="invis">
<img src="https://i.imgur.com/XxXDt8J.png" class="bleh" />
<div class="name">
<div class="tooltip" title="feed him!>o<">JUUZOU SUZUYA
</div>
<p class="nickname">XIII</p>
</div>
</div>

</body>

</html>