Tarot

<style type="text/css">

@import url(https://fonts.googleapis.com/css?family=Italianno);
@import url(https://fonts.googleapis.com/css?family=IM+Fell+English+SC);
@import url(https://fonts.googleapis.com/css?family=Cinzel+Decorative);

body{
background-size: 100% 100%;
background-color:#000;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
background-image:url(http://i.imgur.com/6WSccB0.png);}

::-webkit-scrollbar { width: 2px; }

::-webkit-scrollbar-track { border-radius: 2px; background-color: transparent; }

::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #transparent; }

#image {
	position:fixed;
	left:0;
	bottom:0;
	opacity:.0;
	-webkit-animation: fade 8s 1s;
	animation: fade 8s 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	 }

	@-webkit-keyframes fade{
	from{
	opacity:.0;
	}
	to{
	opacity:1.0;
	}}
#image img{
 height: 100%;
}

.boxie {
background-color: #;
border: 1px solid #;
color: #771196;
text-shadow: 0 0 0.9em #;
font-size: 16px;
font-weight:bold;
font-family: IM Fell English SC;
height: 320px;
left: 43%;
opacity: 0;
overflow: auto;
padding: 5px;
position: fixed;
text-align: left;
top: 305px;
width: 461px;
-webkit-transition: all 2.5s ease-in-out;
transition: all 2.5s ease-in-out;
}
.boxie:target {
background-color: #;
border: 1px solid #;
height: 450px;
left: 43%;
opacity: 1;
overflow: auto;
padding: 5px;
position: fixed;
top: 20%;
width: 400px;
z-index: 40;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotateY(-360deg);
transform: rotateY-360deg);
}

#nav a, #nav a:link, #nav a:visited {
display:block;
background: #;
background-size: 100% 100%;
background-color:#;
background-image:url(http://i.imgur.com/Lja16aY.gif);
background-position: center;
background-repeat:no-repeat;
color: #000;
height: 80px;
width:55px;
margin-left:0px;
margin-top:0px;
padding:0px;
 opacity:0;
 -webkit-animation: fade 8s 1s;
	animation: fade 8s 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
-webkit-transition: all 2.5s ease-in-out;
transition: all 2.5s ease-in-out;}

@keyframes buttonfade{
from{opacity:0;}
to{opacity:1;}
}

#nav a:active, #nav a:hover {
display:block;
height: 80px;
width:55px;
padding:0px;
text-decoration:none;
background: #;
background-size: 100% 100%;
background-color:#;
background-image:url(http://i.imgur.com/Lja16aY.gif);
background-position: center;
background-repeat:no-repeat;
color: #fff;
margin-left:0px;
margin-top:0px;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotateX(-360deg);
transform: rotateX(-360deg);
}
.button{
position:absolute;
width:80px;
background:;
height:80px;
overflow:hidden;
}


h1{
 color: #ccc;
 text-shadow: -0.2vw 0.2vw 0.2vw #;
 font-family: Italianno;
 font-size: 25px;
 letter-spacing: 0.5vw;
 text-align: center;}

b {
font-family:'Cinzel Decorative';
color:#fff;
font-size: 15px;
}

a {
 color: #D798BD;
 font-family: IM Fell English SC;
 font-size: 16px;
 text-decoration: none;
 transition: all 0.8s ease-in-out;
 -moz-transition: all 0.8s ease-in-out;
 -webkit-transition: all 0.8s ease-in-out;}
a:hover {
 color: #fff;
 text-decoration: none;
 transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -webkit-transition: all 0.4s ease-in-out;}

#credit{ position: fixed; right: 10px; bottom: 0px; font-family: Arail; font-variant: normal; font-weight: normal; font-size: 15px; color: #ccc;z-index:1;}

</style>
<div id="credit">
Layout © <a href="profile.php?user=Pachi" target="_blank">Pachi</a>
</div>

<div id="image">
<img src="http://i.imgur.com/zuO3s9f.png">
</div>

<div id="nav">
<div class="button" style="top:67%; left:20%;"> <a href="#1"></a> </div>
<div class="button" style="top:60%; left:24%;"> <a href="#2"></a> </div>
<div class="button" style="top:55%; left:28%;"> <a href="#3"></a> </div>
<div class="button" style="top:60%; left:32%;"> <a href="#4"></a> </div>
<div class="button" style="top:67%; left:36%;"> <a href="#reset"></a> </div>
</div>

<div id="1" class="boxie">
<h1>Header</h1>
<b>Bold</b> <i>Italics</i> <a href="profile.php?user=" target="_blank">Link</a>. Words

</div>

<div id="2" class="boxie">
words
</div>

<div id="3" class="boxie">
words

</div>

<div id="4" class="boxie">
words

</div>