shazam

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Bangers|Unica+One');

	 .pfor {display: none; visibility: hidden;}
	#profile {background-color:;}
	#profile {border:;}
	body
	{overflow-x:hidden;
	background-image:
	url('');
	background-size:cover;
	background-repeat:repeat;
	background-position:;
	background-attachment: fixed;
	background-color:#feff54;
	font: 0px arial;
	color: black;}
	#profile {background-color: transparent;
	border:0px;
	}

	::-webkit-scrollbar {
	width: 5px;
	height: 0px;
	background:;
	}

	::-webkit-scrollbar-thumb {
	background-color:#fff;
	border:1px solid #ef1c25;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	}

	::selection {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
	}

	a {color:#feff54;
	text-shadow: 1px 0px 0px #ef1c25,
	0px 1px 0px #ef1c25,
	-1px 0px 0px #ef1c25,
	0px -1px 0px #ef1c25;
	text-decoration: none;
	transition: 1.5s;
	}

	a:hover {color: #ef1c25;
	text-shadow: 1px 0px 0px #feff54,
	0px 1px 0px #feff54,
	-1px 0px 0px #feff54,
	0px -1px 0px #feff54;
	text-decoration: none;
	transition: 1.5s;
	}

	b {
	background-color:#ef1c25;
	color:#fff;
	padding:1px;
	line-height:16px;
	}

	i {
	font-family:georgia;
	text-transform:lowercase;
	}

	u {
	text-decoration:none;
	border-bottom:1px dotted #ef1c25;
	}

	*{cursor: url('http://cur.cursors-4u.net/nature/nat-11/nat1010.cur'), default;
	}

	#bg {
	position:fixed;
	background-image:
	url('https://i.imgur.com/U2SPxH5.jpg');
	background-size:100px;
	background-repeat:no-repeat;
	background-position:top center;
	background-attachment: absolute;
	background-color:#ef1c25;
	border:2px solid #fff;
	width:350px;
	height:100px;
	left:570px;
	bottom:8px;
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
	}

	@keyframes fadein {
    	from {
	bottom:-300px;
	transition: .1s;
 	}
    	to {
	bottom:8px;
	transition: .1s;
 	}}

	@-moz-keyframes fadein {
    	from {
	bottom:-300px;
	transition: .1s;
 	}
    	to {
	bottom:8px;
	transition: .1s;
 	}}

	@-webkit-keyframes fadein {
    	from {
	bottom:-300px;
	transition: .1s;
 	}
    	to {
	bottom:8px;
	transition: .1s;
 	}}

	@-ms-keyframes fadein {
    	from {
	bottom:-300px;
	transition: .1s;
 	}
    	to {
	bottom:8px;
	transition: .1s;
 	}}

	@-o-keyframes fadein {
    	from {
	bottom:-300px;
	transition: .1s;
 	}
    	to {
	bottom:8px;
	transition: .1s;
 	}}

	#batson {
	position:absolute;
	left:-37px;
	top:-55px;
	}

	#shazam {
	position:absolute;
	right:-85px;
	top:-110px;
	}

	.info {
	position:absolute;
	background-color:#fff;
	color:#ef1c25;
	font-family: 'Unica One', cursive;
	font-size:14px;
	line-height:14px;
	text-align:justify;
	text-transform:uppercase;
	padding:10px;
	width:210px;
	height:60px;
	overflow:auto;
	left:55px;
	top:200px;
	opacity:.0;
	z-index:9;
	transition: 1.5s;
	}

	.info:target {
	top:10px;
	opacity:.9;
	transition: 1.5s;
	}

	.info img {
	width:50px;
	transition: 1.5s;
	border:2px solid #feff54;
	}

	.info img:hover {
	transition: 1.5s;
	border:2px solid #ef1c25;
	}

	#navi{
	position:absolute;
	width:1px;
	text-align:center;
	left:35px;
	top:8.5px;
	}

	#navi a{
	display:inline-block;
	background-color:#feff54;
 	padding-top: 5px;
 	margin-top: 2px;
	width:13px;
	height:13px;
	transition: 1.5s;
	}

	#navi a:hover{
	background-color:#fff;
	transition: 1.5s;
	}

	h1 {
	border-left:20px solid #ef1c25;
	border-right:20px solid #ef1c25;
	font-family: 'Bangers', cursive;
	font-size:20px;
	text-align:center;
	margin: 0px 5px 5px;
	}

	h2 {
	background-color:#ef1c25;
	color:#fff;
	font-size:14px;
	text-align:center;
	margin: 0px 5px 5px;
	}

 .friends {
 display: block;
 text-align: center;
 background-color: #ef1c25;
 color: #feff54;
 padding-top: 5px;
 margin-top: 2px;
 text-decoration:none;
 transition:all 1s ease-out;
 -o-transition:all 1s ease-in-out;
 -moz-transition:all 1s ease-in-out;
 -webkit-transition:all 1s ease-in-out;
 }

 .friends:hover {
 color: #ef1c25;
 background-color: #feff54;
 transition:all 1s ease-out;
 -o-transition:all 1s ease-in-out;
 -moz-transition:all 1s ease-in-out;
 -webkit-transition:all 1s ease-in-out;
 }

	#title-bg {
	position:absolute;
	color:transparent;
	text-shadow: 1px 0px 0px #fff,
	0px 1px 0px #fff,
	-1px 0px 0px #fff,
	0px -1px 0px #fff;
	font-family: 'Bangers', cursive;
	font-size:90px;
	text-align:left;
	width:600px;
	left:25px;
	top:-75px;
	}

	#title {
	position:absolute;
	background-image:
	url('https://i.imgur.com/sOec87n.jpg');
	background-size:500px;
	background-repeat:no-repeat;
	background-position:-130% 30%;
	background-attachment:absolute;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	color:transparent;
	font-family: 'Bangers', cursive;
	font-size:90px;
	text-align:left;
	width:600px;
	left:25px;
	top:-75px;
	}

    #bubble {
    position:absolute;
    background-color:#ef1c25;
    border-radius:200px;
    width:70px;
    height:70px;
    left:130px;
    top:0px;
    }

    #arrow {
    position:absolute;
    color:#ef1c25;
    font-size:50px;
    left:-20px;
    top:10px;
    }

    #music-note {
    position:absolute;
    left:20px;
    top:22px;
    }

    #music-note img {
    width:27px;
    }
</style>

<div id="bg">
<div id="title-bg">
shazam!
</div>
<div id="title">
shazam!
</div>


<div id="batson">
<img src="https://i.imgur.com/UqW7PzC.png">
</div>
<div id="shazam">
<img src="https://i.imgur.com/Xznhv5z.png">
<div id="bubble">
<div id="arrow">
◄
</div>

<div id="music-note">
<img src="http://i.imgur.com/r6klgBG.gif">
</div>

<div id="music-player">
<Div style="margin-top:4px;">
<audio controls style="opacity: 0; width:100px; margin-top:20px; margin-left:20px;">
<source src="http://k003.kiwi6.com/hotlink/bofog8t17c/POWER.mp3">
</audio>
</div>
</div>
</div>

</div>

<div id="navi">

<a href="#one"></a>

<a href="#two"></a>

<a href="#three"></a>

<a href="#four"></a>
</div>


<div id="one" class="info">
<h1>this is a header</h1>
<h2>this is another header</h2>
i use this <font style=float:right>for stats</font>
<br>

<li>and i use this for ooc.</li>

<br>
<center>
<b>beware</b> <i>the man</i> <u>who speaks</u> <a href="" target="_blank">in hands</a>
<br>
<img src="https://i.imgur.com/egLDr6i.jpg">
<br>
 <a href="" target="_blank" class="friends">link</a>
</center>

</div>

<div id="two" class="info">

2

</div>

<div id="three" class="info">

3

</div>

<div id="four" class="info">

4

</div>

</div>