Kefka style

@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');

@import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative:400,700,900');

body{
background: repeating-linear-gradient(
  45deg,
  #a21b1f,
  #a21b1f 100px,
  #aaa872 100px,
  #aaa872 200px
);
overflow:hidden;

}


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



#overlay{
background-image:url(https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png);
width:100%;
height:100%;
z-index:1;
position:absolute;
top:0px;
left:0px;
}

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

#kefkalaugh a{
background-image:url(https://im-01.gifer.com/4EUj.gif);
background-size:100%;
background-repeat:no-repeat;
display:block;
width:60px;
height:100px;
transition:1s;
}

#kefkalaugh a:hover{
filter:drop-shadow(0px 0px 10px #fff);
}

#oocbox{
background-image:url(https://i.imgur.com/MJ6pOeU.png);
width:500px;
height:200px;
background-size:100%;
z-index:10;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
#ooc{
padding:5px;
width:430px;
height:100px;
background-color:transparent;
font-family: 'Press Start 2P', cursive;
font-size:9pt;
padding:10px;
overflow:auto;
margin-top:30px;
margin-left:25px;
border-radius:5px;
color:#fff;
text-shadow:2px 2px 0px #000;
}

h1{
font-family: 'Press Start 2P', cursive;
font-size:12pt;
color:#fff;
text-shadow:2px 2px 0px #000;
text-align:left;
margin-top:-5px;
}


#backgroundbox{
width:850px;
height:600px;
background-image:url(https://i.imgur.com/jU10u3p.png);
background-size:100%;
position:absolute;
top:50%;
left:50%;
z-index:0;
margin-top:-300px;
margin-left:-425px;
border-radius:50px;
opacity:0;
box-shadow:0px 0px 10px 0px #000;
}

#image{
background-image:url(https://i.imgur.com/7ZbVk8O.png);
background-size:100%;
width:400px;
height:600px;
background-repeat:no-repeat;
position:absolute;
left:0px;
top:0px;
margin-top:100px;
margin-left:-200px;
z-index:10;
}

#box1{
background-image:url(https://i.imgur.com/rAOTuwe.png);
background-size:100%;
width:210px;
height:352px;
background-repeat:no-repeat;
position:absolute;
left:50%;
top:50%;
margin-top:-80px;
margin-left:-130px;
box-shadow:0px 0px 20px 0px #000;
}

#info1{
width:190px;
height:332px;
padding:5px;
border:solid #fff;
background-color:#222;
opacity:0;
margin-top:4px;
margin-left:4px;
transition:1s;
font-family: 'Cinzel Decorative', cursive;
font-size:9pt;
color:#fff;
overflow:auto;
}

#box1:hover #info1{
opacity:.8;
}



#box2{
background-image:url(https://i.imgur.com/IhB4JUG.png);
background-size:100%;
width:250px;
height:352px;
background-repeat:no-repeat;
position:absolute;
left:50%;
top:50%;
margin-top:-80px;
margin-left:100px;
box-shadow:0px 0px 20px 0px #000;
}

#info2{
width:230px;
height:332px;
padding:5px;
border:solid #fff;
background-color:#222;
opacity:0;
margin-top:4px;
margin-left:4px;
transition:1s;
font-family: 'Cinzel Decorative', cursive;
font-size:9pt;
color:#fff;
overflow:auto;
}

#box2:hover #info2{
opacity:.8;
}


#box3{
background-image:url(https://i.imgur.com/EZZQ7yD.png);
background-size:100%;
width:600px;
height:125px;
background-repeat:no-repeat;
position:absolute;
left:50%;
top:50%;
margin-top:-220px;
margin-left:-250px;
box-shadow:0px 0px 20px 0px #000;
}

#info3{
width:580px;
height:102.5px;
padding:5px;
border:solid #fff;
background-color:#222;
opacity:0;
margin-top:4px;
margin-left:4px;
transition:1s;
overflow:auto;
}


#box3:hover #info3{
opacity:.8;
}

#friend {
width:580px;
height:102.5px;
padding:5px;
display:block;
font-family: 'Cinzel Decorative', cursive;
font-size:11pt;
color:#fff;
float:left;
}

#friend a{
width:100px;
height:100px;
display:block;
float:left;
margin-right:10px;
}

 h2{
font-size:12pt;
color:#fff;
font-family: 'Cinzel Decorative', cursive;
margin-top:0px;
margin-bottom:5px;
text-align:center;
}

 h3{
font-size:12pt;
color:#fff;
font-family: 'Cinzel Decorative', cursive;
margin-top:0px;
margin-bottom:5px;
}

h4{
font-size:25pt;
font-family: 'Cinzel Decorative', cursive;
color:#000;
position:absolute;
bottom:0px;
left:0px;
margin-left:50px;
background: url(https://78.media.tumblr.com/0b0c41dbea61f63198467cd3a00bc664/tumblr_o2xw8rYcWs1tslewgo1_500.gif) ;
background-size:100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
z-index:99;
}

h5{
font-size:25pt;
font-family: 'Cinzel Decorative', cursive;
color:#000;
position:absolute;
bottom:0px;
left:0px;
margin-left:50px;
margin-bottom:45px;
z-index:5;
text-shadow:0px 0px 10px black;
}


.arrow-up a{
 width: 0;
 height: 0;
 border-top: 15px solid transparent;
 border-left: 15px solid white;

 border-bottom: 15px solid transparent;
 top:50%;
 left:50%;
 position:absolute;
 margin-top:330px;
 margin-left:220px;
 display:block;
 animation: blink 1s infinite linear;
 z-index:99;
}

@keyframes blink{
 to{opacity: .0;}
}

#god{
width:100px;
height:100px;
position:absolute;
z-index:99;
left:0px;
bottom:0px;
margin-bottom:320px;
margin-left:150px;
}

#god a{
background-image:url(https://i.imgur.com/cc1g2G5.png);
background-size:100%;
width:160px;
height:160px;
display:block;
transition:1s;
filter:drop-shadow(0px 0px 0px gold) grayscale(100%);
}

#god a:hover{
filter:drop-shadow(0px 0px 10px gold) grayscale(0%);
}

#sky{
background-image:url(https://cdn.discordapp.com/attachments/411746842590576661/419733766915883009/latest.png);
width:100%;
height:100%;
background-size:100%;
z-index:1;
position:absolute;
top:0px;
left:0px;
opacity:0;
}

#godkefka{
background-image:url(https://i.imgur.com/Zbau4jT.png);
background-repeat:no-repeat;
background-size:100%;
height:700px;
width:700px;
position:absolute;
top:50%;
left:50%;
margin-left:-350px;
margin-top:-1250px;
z-index:99;
opacity:1;
filter:drop-shadow(0px 0px 10px #000);
}

#typewriter{
position:absolute;
z-index:99;
color:#fff;

}

#blanket:target #kefkalaugh {
opacity:0;
transition:2s;
z-index:0;
}

#blanket:target #oocbox {
opacity:0;
transition:2s;
z-index:0;
}

#blanket:target #backgroundbox {
opacity:1;
transition:2s;
transition-delay:1s;
z-index:10;
}

#blanket:target #sky {
opacity:0;
transition:1s;
transition-delay:1s;
z-index:1;
}

#blanket:target #godkefka {
opacity:1;
transition:1s;
transition-delay:1s;
z-index:99;
}





#blanket2:target #kefkalaugh {
opacity:0;
transition:2s;
z-index:0;
}

#blanket2:target #oocbox {
opacity:0;
transition:2s;
z-index:0;
}

#blanket2:target #backgroundbox {
opacity:1;
transition:2s;
transition-delay:1s;
z-index:10;
}


#blanket2:target #sky{
opacity:1;
transition:2s;
z-index:98;
}

#blanket2:target #godkefka{
opacity:1;
transition:8s;
z-index:99;
margin-top:-400px;
}