<style>
 @import url('https://fonts.googleapis.com/css?family=Asul');

#credit{
 position: fixed;
 bottom: 0;
 right: 0;
 color: white;
 font-family: Asul;
 font-size: 2vh;
 z-index: 10;
 background: rgba(0,0,0,0.5);
}
#credit a{
 font-size: 2vh;
}

 body{
 background-color: #6FA155;
 }

 #background{
 position: fixed;
 z-index: 0;
 width: 100vw;
 height: 100vh;
 left: 0;
 bottom: 0;
 background-image: url('http://i.imgur.com/davuRwj.jpg');
 background-size: cover;
 pointer-events: none;
 }

 #image{
 position: fixed;
 right: 25vw;
 bottom: 0vh;
 z-index: 3;
 height: 100vh;
 pointer-events: none;
 }

 #image img{
 height: 100%;
 }

 #text{
 font-family: 'Asul';
 font-size: 1.9vw;
 color: #fff;
 position: fixed;
 left: 4vw;
 top: 13vh;
 width: 32vw;
 height: 80vh;
 z-index: 4;
 text-align: center;
 text-shadow:
 -1px -1px 0 #000,
 1px -1px 0 #000,
 -1px 1px 0 #000,
 1px 1px 0 #000;
 }

 hr{
 border: #38e4f7 solid 0.2vw;
 background-color: #38e4f7;
 }

a{
 font-family: 'Asul';
 color: #38e4f7 ;
 text-shadow:
 -1px -1px 0 #000,
 1px -1px 0 #000,
 -1px 1px 0 #000,
 1px 1px 0 #000;
 font-size: 1.5vw;
}

 table{
 width: 100%;
 font-family: 'Asul';
 color: white;
 text-shadow:
 -1px -1px 0 #000,
 1px -1px 0 #000,
 -1px 1px 0 #000,
 1px 1px 0 #000;
 font-size: 1.5vw;
 border-collapse: collapse;
}

tr:nth-child(even){
 background: rgba(0,0,0,0.5);
}

 .clouds {
position:fixed;
left:0;
bottom:0;
width:100%;
height:100%;
display:block;
overflow: visible;
pointer-events: none;
opacity: 1;
background:url('https://images.onlinelabels.com/images/clip-art/GDJ/Large%20Flock%20Of%20Birds%20Silhouette-263487.png');
background-size: contain;
z-index:1;

-webkit-animation:move-scrolling-front 200s linear infinite;
animation:move-scrolling-front 200s linear infinite;
}

@keyframes move-scrolling-front{
from{background-position:0% 0%}
to{background-position:900% 0%}
}
@-webkit-keyframes move-scrolling-front{
from{background-position:0% 0%}
to{background-position:900% 0%}
}

#player{
position: fixed;
z-index: 5;
top: 13vh;
left: 0px;
width: 40px;
height: 40px;
overflow:hidden;
}

#slice{
position: fixed;
z-index:4;
top: 13vh;
left: 0px;
width: 40px;
height: 40px;
}

#slice img{
 width: 100%;
}
</style>

<div id="text">
THE GREYWAREN<hr>
<table>
<tr>
<td>Name</td><td>Ronan Niall Lynch</td>
</tr>
<tr>
<td>Alias</td><td>The snake. Soldier boy. Kerah. The Greywaren.</td>
</tr>
<tr>
<td>Age</td><td>18</td>
</tr>
<tr>
<td>Height</td><td>6'2"</td>
</tr>
<tr>
<td>Occupation</td><td>Farmer</td>
</tr>
<tr>
<td>Orientation</td><td>Homosexual</td>
</tr>
<tr>
<td>Partner</td><td>Adam Parrish</td>
</tr>
<tr>
<td>Pet</td><td>Chainsaw (raven)</td>
</tr>
</table>
<hr>
<table>
<tr>
<td>Room and PM's welcome</td>
</tr>
<tr>
<td>Story over Smut</td>
</tr>
<tr>
<td>IC =/= OOC</td>
</tr>
<tr>
<td>3rd person, literate, paragraph</td>
</tr>
<tr>
<td><a href="http://theravenboys.wikia.com/wiki/Ronan_Lynch">Bastard</a></td>
</tr>
<tr>
<td>Chainsaw is his pet raven</td>
</tr>
</table>
</div>

<div class="clouds"></div>

<div id="clouds"></div>

<div id="background">
</div>

<div id="image">
<img src="http://i.picpar.com/zlTc.jpg">
</div>


<div id="credit">
Code by Aishurel! <a href="https://pastebin.com/edit/khvm8x8g">Please steal*</a>
</div>