Tarot fix?

<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;
        -moz-animation: fade 8s 1s;
        -ms-animation: fade 8s 1s;
        -o-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: #7D88C7;
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;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-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;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
-o-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;
-moz-animation: fade 8s 1s;
-ms-animation: fade 8s 1s;
-o-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;
-moz-transition: all 2.5s ease-in-out;
-ms-transition: all 2.5s ease-in-out;
-o-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;
-ms-transition-duration: 0.25s;
-o-trainsition-duration: 0.25s;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotateX(-360deg);
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
-o-transform: rotateY(-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>They're singing our song, my dear.</h1>

⧉ Tarot Rosencratz. <i>Known by most.</i><br><br>

⧉ Unknown. <i>Said to be over two centuries years old.</i><br><br>

⧉ <a href="" title="An Arriviste is a Grand Sorcerer who has obtained true mastery over a certain property or element. In most cases, they ascend to the state of an Arriviste when they have become a medium for the property they have become attuned with. In most cases, the Arriviste's counter part will manifest in the state that said property is. These counter-parts are their own entity, but an extension of the Grand Sorcerer's ability to manipulate said property or element.">Arriviste.</a><br><br>

⧉ Open-Sexuality. <i>Any will do. Has a fondness for those that are petite and those that are thick.</i><br><br>

⧉ Event Horizon Store-Owner. <i>A store that sells mythological, paranormal, and supernatural weapons. Sort of like an antique store for weapon junkies and ghost/demon/whatever hunters.</i><br><br>

⧉ Blackwater, England. <i>Somewhere within the mountains, where a main who has gone mad and existed for more than two centuries resides.</i><br><br>





</div>

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

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

</div>

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

<h1>Have you ever walked outside to smell the rain?</h1>

<b>Bold</b> <i>Italics</i> <a href="profile.php?user=" target="_blank">Link</a>. Words<br><br>

⧉ Tarot and his Conductor do not care about what you want. All he cares about is that you enjoy yourself when writing or talking with him. Tarot and his Conductor are people-pleasers. So, they really do care about what you want, as long as drama is not a part of it. Save that for roleplay.<br><br>

⧉ Tarot and his Conductor often write paragraphs and up for serious interactions. Anything less will more than likely be for idle banter or bullshittery. They are also prone to being IC unless the use of ⧉ is in effect at the end of something that is being said. That being said, they are more PM Friendly and Post-Friendly than when it comes to roleplaying. They are not against roleplaying in main, however.<br><br>

⧉ Tarot can be used for any form of a setting if planning is required. He is mainly for anything of the fantasy variety, but slice of life can be just as easily done. As for the question of clean versus dirty for being desired, either or is welcomed as well. Long-terms being preferred over Short-terms, but not entirely against.<br><br>

⧉ Tarot and his Conductor do use Skype. Discord is a very iffy thing to the both of them. He might convert to it when enough people complain about how wonderful it is.<br><br>

⧉ More will be added as time goes on.<br><br>

</div>