Clouds

@import url('https://fonts.googleapis.com/css?family=Charmonman|Kaushan+Script|Old+Standard+TT');

/*
PLEASE DO NOT REMOVE THIS CREDIT
DO NOT REMOVE THE CREDIT AT THE BOTTOM EITHER!
CREATOR: GREEN BEAN
There is a Javascript at the base that prevents right click. Do not remove it.
*/



body {
 background: #e3eded;
 background-image: url("https://i.imgur.com/zXG57sd.jpg");
 background-repeat: repeat;
 background-size: 100% 100%;
 background-position: bottom right;
overflow: hidden;
}


 .seal{
position:absolute;
top: 25%;
left: 25%;
width: 70%;
height: 270px;
overflow:hidden;
z-index:20;
}

 .far{
width: 70%;
height: 270px;
overflow:auto;
}

 .goon{
color: #6D0A3A;
font-size:14px;
text-align:justify;
line-height:15px;
font-family: 'Old Standard TT', serif;
letter-spacing:0.3px;
margin: 5px;
}
a.gone:link, a.gone:active, a.gone:visited{
font-family: 'Kaushan Script', cursive;
text-transform: uppercase;
text-decoration: none;
font-size: 24px;
line-height: 24px;
letter-spacing: -1px;
color: #634051;
margin-right:12px;
z-index:10;
}

a.gone:hover{
text-shadow:-4px 0px 0px #232a68;
}

b {
color: #;
font-weight:bold;
letter-spacing: 1px;
}

i{
color:#634051;
font-style:italic;
}

u{
font-style:italic;
text-decoration:noneunderline;
}

a:active, a:link, a:visited{
color:#3D1126;
text-decoration:underline;
}

a:hover{
cursor:all-scroll;
color:#634051;
text-decoration:line-through;
}

h1 {
font-family: 'Charmonman', cursive;
size: 40px;
text-align:center;
letter-spacing: 7px;
border-bottom: 0px solid #ffffff;}
::-webkit-scrollbar {width: 3px;}
::-webkit-scrollbar-thumb:vertical {
height: 10px;background-color: #4F104F;}
::-webkit-scrollbar-thumb:horizontal {
height: 10px;background-color: #4F104F;border: 0px ;width: 15px;}

  .glisten{
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;}




  #fangs{
width: 400px;
height: 520px;
background: #transparent;
background-image: url("https://i.imgur.com/U4s82MC.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: bottom left;
z-index: 4;
animation: ruby 3s 1;
-webkit-animation: ruby 3s 1;
}







 .navi{
position: absolute;
bottom: 36%;
right: 26%;
width: 50px;
z-index:99;
 animation: ruby 3s 1;
 -webkit-animation: ruby 3s 1;
}
 #credit {
position: fixed;
bottom: 20px;
right: 20px;
background-color: transparent;
 animation: ruby 3s 1;
 -webkit-animation: ruby 3s 1;
}

@keyframes ruby{
 from{
 right: -50%;
 opacity: 0;
 }
}

@-webkit-keyframes ruby{
 from{
 right: -50%;
 opacity: 0;
 }
}

.portrait {
pointer-events:none;
position: absolute;
top: 0px;
left: 0px;
width: 50%;
height: 95%;
background: url(https://i.imgur.com/7mOFHQ7.png);
background-size: 50%;
background-repeat: no-repeat;
z-index: 20;
animation: ruby 3s 1;
-webkit-animation: ruby 3s 1;
}


.wordy{
position:absolute;
z-index:4;
height:14%;
width:35%;
top:15%;
right:20%;
font-family:'Kaushan Script', cursive;
font-size: 4.5vw;
color:#FFF;
background-image:url(https://i.imgur.com/UBSm5j9.gif);
background-size:100%;
background-repeat:no-repeat;
background-position:center;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #371432;
-ms-transform: rotate(13deg);
-webkit-transform: rotate(13deg);
transform: rotate(13deg);
 animation: ruby 3s 1;
 -webkit-animation: ruby 3s 1;
}

.navflower {
pointer-events:none;
position: absolute;
top: 2%;
left: 20%;
width: 100%;
height: 100%;
background: url(https://i.imgur.com/pZjbvh0.png);
background-size: 100%;
background-repeat: no-repeat;
z-index: 4;
animation: ruby 3s 1;
-webkit-animation: ruby 3s 1;
}


#crystals {
 position:fixed;
 top:0;
 left:0;
 width:480px;
 height:100%;
}
@-webkit-keyframes bg-crystal001 {  100%    {background-position: 0px 900px;}}
@-moz-keyframes bg-crystal001 {     100%    {background-position: 0px 900px;}}
@-o-keyframes bg-crystal001 {       100%    {background-position: 0px 900px;}}
@keyframes bg-crystal001 {          100%    {background-position: 0px 900px;}}



#crystals .crystal_01 {
 position:absolute;
 width:100%;
 height:100%;
 background:url(https://i.imgur.com/85u3G2k.png)repeat-y;
    -webkit-animation: bg-crystal001 30s infinite;
    -moz-animation: bg-crystal001 30s infinite;
    -o-animation: bg-crystal001 30s infinite;
    animation: bg-crystal001 30s infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}
@-webkit-keyframes bg-crystal002 {  100%    {background-position: 0px 900px;}}
@-moz-keyframes bg-crystal002 {     100%    {background-position: 0px 900px;}}
@-o-keyframes bg-crystal002 {       100%    {background-position: 0px 900px;}}
@keyframes bg-crystal002 {          100%    {background-position: 0px 900px;}}
#crystals .crystal_02 {
 position:absolute;
 width:100%;
 height:100%;
 background:url(https://i.imgur.com/hJCIWGm.png)repeat-y;
    -webkit-animation: bg-crystal002 60s infinite;
    -moz-animation: bg-crystal002 60s infinite;
    -o-animation: bg-crystal002 60s infinite;
    animation: bg-crystal002 60s infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}
@-webkit-keyframes bg-crystal003 {  100%    {background-position: 0px -1200px;}}
@-moz-keyframes bg-crystal003 {     100%    {background-position: 0px -1200px;}}
@-o-keyframes bg-crystal003 {       100%    {background-position: 0px -1200px;}}
@keyframes bg-crystal003 {          100%    {background-position: 0px -1200px;}}
#crystals .crystal_03 {
 position:absolute;
 width:100%;
 height:100%;
 left:50%;
 margin-left:-180px;
    background:url(https://i.imgur.com/urVL6Zq.png)repeat-y;
    -webkit-animation: bg-crystal003 90s infinite;
    -moz-animation: bg-crystal003 90s infinite;
    -o-animation: bg-crystal003 90s infinite;
    animation: bg-crystal003 90s infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

#worldCrystals {
 position:fixed;
 top:150px;
 left:0;
 width:100%;
 height:520px;
}
#worldCrystals .crystal_01 {
 position:absolute;
 width:100%;
 height:100%;
 background:url(https://i.imgur.com/tqJGxNK.png)no-repeat -500px 0px;
}
@-webkit-keyframes bg-crystal004 {  100%    {background-position: 1198px 0px;}}
@-moz-keyframes bg-crystal004 {     100%    {background-position: 1198px 0px;}}
@-o-keyframes bg-crystal004 {       100%    {background-position: 1198px 0px;}}
@keyframes bg-crystal004 {          100%    {background-position: 1198px 0px;}}
#worldCrystals .crystal_02 {
 position:absolute;
 width:100%;
 height:100%;
 background:url(https://i.imgur.com/ZClBZjA.png)repeat-x;
    -webkit-animation: bg-crystal004 60s infinite;
    -moz-animation: bg-crystal004 60s infinite;
    -o-animation: bg-crystal004 60s infinite;
    animation: bg-crystal004 60s infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}
@-webkit-keyframes bg-crystal005 {  100%    {background-position: 1086px 0px;}}
@-moz-keyframes bg-crystal005 {     100%    {background-position: 1086px 0px;}}
@-o-keyframes bg-crystal005 {       100%    {background-position: 1086px 0px;}}
@keyframes bg-crystal005 {          100%    {background-position: 1086px 0px;}}
#worldCrystals .crystal_03 {
 position:absolute;
 width:100%;
 height:100%;
 left:50%;
 margin-left:-180px;
    background:url(https://i.imgur.com/hdqRX1V.png)repeat-x;
    -webkit-animation: bg-crystal005 90s infinite;
    -moz-animation: bg-crystal005 90s infinite;
    -o-animation: bg-crystal005 90s infinite;
    animation: bg-crystal005 90s infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

_______

<div id="container">
<div id="worldCrystals">
<div class="crystal_01"></div>
<div class="crystal_02"></div>
<div class="crystal_03"></div>
</div>
<div id="crystals">
<div class="crystal_01"></div>
<div class="crystal_02"></div>
<div class="crystal_03"></div>
</div>
<div class="navi">
<a href="#hello" class="gone"><font size="24">✛</font></a><Br><Br>
 <a href="#my" class="gone"><font size="24">✜</font></a><Br><BR>
<a href="#dearest" class="gone"><font size="24">✛</font></a><br><Br>
 <a href="#servant" class="gone"><font size="24">✜</font></a>
</div>
<div id="fangs" class="glisten"><div class="navflower">
</div>

<div class="seal">

<div id="hello" class="far"><div class="goon">

<h1>Tab 1</h1>
<font style="float:left"><b>✦Stat✦</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>✦Stat✦</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>✦Stat✦</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>✦Stat✦</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>✦Stat✦</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>✦Stat✦</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>✦Stat✦</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>✦Stat✦</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>✦Stat✦</b></font>
<font style="float:right">Stat</font><br><Br><br>

<b>BOLD</b> <i>ITALICS</i> <Strike>STRIKE</Strike> <a href="" target="_blank" title="link stuff.">LINK</a>
</div></div>
<div id="my" class="far"><div class="goon">
<h1>Tab 2</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel sapien odio. Maecenas tincidunt lacus tempus commodo vehicula. Sed dignissim vulputate lorem vel eleifend. Curabitur laoreet vitae diam quis auctor. Aliquam laoreet at nulla quis pellentesque. Ut pharetra rhoncus efficitur. Proin non elementum erat, tristique ultricies sem. Vestibulum et orci sem. Donec ut velit neque. Pellentesque bibendum auctor urna sit amet semper. Quisque auctor sed libero a malesuada. Donec efficitur malesuada tincidunt. Suspendisse feugiat turpis ut ornare pretium.</p>

<p>Pellentesque tincidunt, orci sed sagittis suscipit, erat dui consequat ligula, vitae posuere enim quam nec velit. Quisque at ex et orci finibus semper. Aenean iaculis, tortor eu ultrices sollicitudin, leo sapien sagittis enim, nec commodo diam quam vel magna. Nulla facilisi. Nunc vitae cursus est, quis aliquet justo. Aenean erat lacus, elementum sit amet aliquam eget, sodales nec risus. Donec odio est, feugiat et gravida non, imperdiet ac eros. Aenean ligula turpis, volutpat vel ex nec, fringilla sollicitudin purus. Quisque consectetur sapien et tincidunt efficitur. Aenean ultrices iaculis ipsum, fringilla suscipit ante euismod et. Praesent placerat ante metus, et aliquet mauris feugiat ac. Nullam in ante consequat ex congue ultrices. Etiam eget iaculis libero. Proin ac tempus lectus. Nam volutpat porttitor congue.</p>

<p>Vivamus sed rutrum nisl. Fusce rutrum eros non risus cursus porta. Vivamus quis bibendum enim. Maecenas semper finibus consequat. Mauris id augue eget turpis blandit porta. Morbi bibendum mollis convallis. Sed congue, ligula eget feugiat sagittis, felis risus ultrices est, quis venenatis turpis neque a mi. Praesent at porta diam. Pellentesque luctus ante sed sodales ultricies.</p>

<p>Phasellus pharetra leo sed justo sodales tristique congue nec nisl. Sed eu purus ac nulla vestibulum finibus in vitae leo. Pellentesque ornare iaculis vestibulum. Phasellus ultrices ut tortor ac dictum. Nam venenatis tempor mauris. Phasellus at rutrum mi, quis lobortis lorem. Integer imperdiet, magna a bibendum dapibus, erat purus convallis libero, ac dapibus diam neque quis mi.</p>

<p>Etiam at quam in turpis mollis aliquam. Donec rutrum consequat mi. Aliquam ultrices tempus porttitor. Cras lobortis massa eget blandit ultrices. Donec risus lacus, facilisis fermentum dui eget, rutrum tristique justo. Duis feugiat felis ut nibh egestas mollis. Sed pellentesque, nisi et finibus volutpat, orci metus molestie mi, sodales finibus ex odio vel elit. Curabitur nec eros vitae quam gravida luctus id vitae justo. Donec elementum dolor mi, eu accumsan ante laoreet ac.</p>

</div></div>
<div id="dearest" class="far"><div class="goon">
<h1>Tab3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut iaculis dolor. Maecenas finibus mauris ipsum, ac posuere elit blandit sit amet. In posuere rhoncus massa. Vivamus diam odio, vulputate eleifend ultrices at, dignissim vitae ligula. Morbi bibendum dui quis nibh feugiat accumsan. Integer non finibus tortor, id volutpat nisi. Ut lectus massa, condimentum sit amet quam nec, efficitur consectetur orci. Morbi ipsum ex, vestibulum id eros non, volutpat sodales dui. Sed rhoncus ac nulla eget consectetur. Integer consectetur maximus augue. Ut consectetur varius massa nec tempor. Integer nec neque commodo, sollicitudin nisl vitae, tincidunt arcu.</p>

<p>Maecenas non mauris dapibus, lacinia sapien tempus, lacinia nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce interdum pellentesque sem, quis molestie ipsum accumsan quis. Duis sit amet interdum velit. Quisque volutpat blandit odio at gravida. Phasellus eu orci at est venenatis lobortis eu ut urna. Aliquam nisi purus, posuere et vehicula ac, consequat ut justo. Mauris tellus mi, convallis sit amet nunc sed, interdum condimentum nisi. Praesent in tellus neque. Aliquam tempor leo in magna ornare gravida. Nulla dictum purus non lacus ultricies, eu facilisis quam maximus.</p>
</div></div>


<div id="servant" class="far"><div class="goon">
<h1>Rules</h1>
▪ OOC.<br>
▪ OOC.<br>
▪ OOC.<br>
▪ OOC.<br>
▪ OOC.<br>
▪ OOC.<br>

</div></div></div>
 </div></div></div></div></div>
<div class="portrait">
</div>

 <div class="wordy">
place holder
</div>


</div>
<div id="credit">
<a target="_blank" href="https://roleplay.chat/profile.php?user=Green+Bean" target="_blank" title="Code was created by Green Bean Do NOT touch, this Please! If you want a code just mail Green Bean directly. She will gladly hook you up. With some freebies or cheapo comissions."><img src="https://i.imgur.com/uP9E5Pz.png" height="90px"></a></div>

<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 //Disable full page
 $("body").on("contextmenu",function(e){
 return false;
 });

 //Disable part of page
 $("#id").on("contextmenu",function(e){
 return false;
 });
});
</script>
<script type="text/javascript">
$(document).ready(function () {
 //Disable cut copy paste
 $('body').bind('cut copy paste', function (e) {
 e.preventDefault();
 });

 //Disable mouse right click
 $("body").on("contextmenu",function(e){
 return false;
 });
});
</script>