Eden De Lupus

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Amatica+SC);
@import url(https://fonts.googleapis.com/css?family=Satisfy);
@import url(https://fonts.googleapis.com/css?family=Italianno);
@import url(https://fonts.googleapis.com/css?family=Caveat);
@import url(https://fonts.googleapis.com/css?family=Farsan);


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

body {
background-image: url("http://i.imgur.com/ZAk5WyL.jpg");
background-repeat:repeat;
background-color: #000;
background-size: 100% 100%;
background-position: bottom left;
margin: 0;
}

#backgroundline {
background-image:url("");
background-size: 200px 200px;
background-color: #000;
border-bottom: 6px silver double;
opacity:0.8;
height: 8%;
left: 0%;
position: fixed;
top: 0%;
width: 100%;
box-shadow:
0 0 0 0px hsl(200, 30%, 20%),
0px 0px 10px white;}

#backgroundline2 {
background-image:url("");
background-size: 200px 200px;
background-color: #000;
border-top: 6px silver double;
opacity:0.8;
height: 8%;
left: 0%;
position: fixed;
bottom: 0%;
width: 100%;
box-shadow:
0 0 0 0px hsl(200, 30%, 20%),
0px 0px 10px white;}

#name{
 position: fixed;
 z-index:2;
 left: 1%;
 top: -0.5vh;
 color: #7B1313;
 text-shadow: -0.1vw 0.1vw 0.1vw #fff;
 font-family: amatica sc;
 font-size: 3vw;
font-weight:bold;
 letter-spacing: 0.5vw;
 opacity:0;
 -webkit-animation:namefade 2.5s 1;
 animation:namefade 2.5s 1;
 animation-delay:1s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:1s;
 -webkit-animation-fill-mode:forwards;
}

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

#name2{
 position: fixed;
 z-index:2;
right: 1%;
bottom: 1vh;
 color: #7B1313;
 text-shadow: -0.1vw 0.1vw 0.1vw #fff;
 font-family: amatica sc;
 font-size: 2.5vw;
font-weight:bold;
 letter-spacing: 0.1vw;
 opacity:0;
 -webkit-animation:namefade 2.5s 1;
 animation:namefade 2.5s 1;
 animation-delay:3s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:3s;
 -webkit-animation-fill-mode:forwards;
}

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


.eden {
z-index: -1;
position: absolute;
border: 3px groove #960019;
background-color: #000;
font-family: Farsan;
font-size: 18px;
padding: 4px;
color: #ccc;
height:40%;
top:30%;
left: 28%;
width: 40%;
line-height:19px;
overflow: auto;
opacity: 0;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.eden:target {
z-index: 10;
opacity: 1;
position: absolute;
top: 30%;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

#buttons {
 z-index:2;
 margin: 0;
 padding: 0;
 width: 30.5vw;
 background-color: transparent;
 position: fixed;
 top: 1%;
 right: 1%;
 overflow: auto;
 font-family:Caveat;
 opacity:1;
 font-weight:;
}
#buttons a {
 display: inline;
 color: #417343;
 padding: 5px;
 font-size: 4.5vh;
 padding: 0.5vh 0.5vh 0.5vh 0.5vh;
 text-decoration: none;
}
#buttons a:hover{
 color:#ccc;
 font-size: 4.5vh;
}

#buttons2 {
 z-index:2;
 margin: 0;
 padding: 0;
 width: 30.5vw;
 background-color: transparent;
 position: fixed;
 bottom: 1%;
 left: 0%;
 overflow: auto;
 font-family:Caveat;
 opacity:1;
 font-weight:;
}
#buttons2 a {
 display: inline;
 color: #417343;
 padding: 5px;
 font-size: 4.5vh;
 padding: 0.5vh 0.5vh 0.5vh 0.5vh;
 text-decoration: none;
}
#buttons2 a:hover{
 color:#ccc;
 font-size: 4.5vh;
}


h1{
letter-spacing:2px;
margin:0px;
color:#7B1313;
font-size:22px;
text-align:center;
margin-top:5px;
margin-bottom:10px;
 text-shadow: -0.1vw 0.1vw 0.1vw #000;
 font-family: amatica sc;
 font-size: 3.9vh;
}


b, strong { color: #C1BE30}

a {
color: #457136;
text-decoration: none;
}
a:active, a:link, a:visited {
color: #DBE27C;
text-decoration: none;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
a:hover {
color: #457136;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
transition-duration:0.5s;
}

.circle{
border-radius:150px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
}

.circle:hover{
border-radius:150px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -o-transform: rotate(0deg);
}


</style>
<div id="backgroundline"></div>
<div id="backgroundline2"></div>
<div id="name">
Paradise of Predators.
</div>
<div id="name2">
Sancutuary of Strays.
</div>

<div id="buttons">
<center>
<a href="#01">Introduction</a>
<a href="#02">Backstory</a>
<a href="#03">Grounds</a>
<a href="#04">Plots</a>
</center>
</div>

<div id="buttons2">
<center>
<a href="#05">Members</a>
<a href="#06">Duties</a>
<a href="#07">Rules</a>
<a href="#08">Updates</a>
</center>
</div>


<div id="01" class="eden">
<h1>Header</h1>
words <b>Bold</b> <i>italics</i> <a href="link.com" target="_blank">Link</a>

</div>

<div id="02" class="eden">
<h1>Header</h1>
words
</div>

<div id="03" class="eden">
<h1>Header</h1>
words
</div>

<div id="04" class="eden">
<h1>Plots</h1>
Words

<br><br>
<h1>Events</h1>
words
</div>

<div id="05" class="eden">
<h1>People</h1>
<center>
<a target="_blank" href="https://roleplay.chat/profile.php?user=Name here" target="_blank"><img src="http://i.imgur.com/3gQ4he1.jpg" height="100" width="100" align="left"></a> - Name -<br> Description <br><br><br>

<a href="profile.php?user=Name here" target="_blank"><img src="http://i.imgur.com/3gQ4he1.jpg" height="100" width="100" align="right"></a> - Name -<br> Description <br><br><br>

<a target="_blank" href="https://roleplay.chat/profile.php?user=Name here" target="_blank"><img src="http://i.imgur.com/3gQ4he1.jpg" height="100" width="100" align="left"></a> - Name -<br> Description <br><br><br>

<a href="profile.php?user=Name here" target="_blank"><img src="http://i.imgur.com/3gQ4he1.jpg" height="100" width="100" align="right"></a> - Name -<br> Description <br><br><br>

<a target="_blank" href="https://roleplay.chat/profile.php?user=Name here" target="_blank"><img src="http://i.imgur.com/3gQ4he1.jpg" height="100" width="100" align="left"></a> - Name -<br> Description <br><br><br>

<a href="profile.php?user=Name here" target="_blank"><img src="http://i.imgur.com/3gQ4he1.jpg" height="100" width="100" align="right"></a> - Name -<br> Description <br><br><br>

</center>
</div>

<div id="06" class="eden">
<h1>Header</h1>
words
</div>

<div id="07" class="eden">
<h1>Header</h1>
words
</div>

<div id="08" class="eden">
<h1>Header</h1>
words
</div>