vivi

@import url('https://fonts.googleapis.com/css?family=Poor+Story|Spicy+Rice');


body {
     background-image: url("https://i.imgur.com/1aSFAU3.png");
  background-repeat: repeat;
  background-size: 100% 100%;
  background-position: bottom right;
    width: 100%;
    height: 100%;
  margin: 0px;
  overflow: hidden;
}

 #credit {
position: fixed;
bottom: 20px;
right: 20px;
background-color: transparent;
}

.words{
pointer-events:none;
position:absolute;
z-index:100;
height:14%;
width:35%;
Bottom:5%;
left:10%;
font-family: 'Spicy Rice', cursive;
font-size: 4.5vw;
color:#FFF;
background-image:url(https://i.imgur.com/v9FSnud.gif);
background-size:100%;
background-repeat:no-repeat;
background-position:center;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-stroke-width: 3px;
-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;
}

h1{
font-family:'Spicy Rice', cursive;

color: #ffffff;
font-size:20px;
line-height:27px;
padding: 0px 3px 0px 0px;
border-bottom: 1px solid #ffffff;
}

 .right{
position:absolute;
top:-22px;
left:140px;
font-family: 'Spicy Rice', cursive;
text-transform: uppercase;
text-decoration: none;
font-size: 24px;
line-height: 24px;
letter-spacing: -1px;
color: #ffe650;
}

 .spooky{
position:absolute;
top:30px;
left:60px;
width:330px;
height: 250px;
overflow:hidden;
z-index:20;
}

 .far{
width:330px;
height: 300px;
overflow:auto;
}

 .tell{
color:#dfeff1;
font-size:14px;
text-align:justify;
line-height:14px;
font-family:cambria;
letter-spacing:0.3px;
margin: 5px;
}

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;
}


::-webkit-scrollbar {width: 3px;}
::-webkit-scrollbar-thumb:vertical {
height: 10px;background-color: #D98878;}
::-webkit-scrollbar-thumb:horizontal {
height: 10px;background-color: #D98878;border: 0px ;width: 15px;}


#sparkle{
width:700px;
height: 400px;
background:#17253d;
border-radius: 50px 100px 100px 50px;
z-index: 4;
opacity: 0.70;
filter: alpha(opacity=70);
}


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


}





.lovely {
pointer-events:none;
position: absolute;
bottom: 0%;
right: 25%;
z-index: 6;

}

.lovely2 {
position: absolute;
bottom: -50px;
left: 10%;
z-index: 6;
opacity: 1.00;
filter: alpha(opacity=100);
}



.you{
position:absolute;
margin:auto;
top: -2%;
left: -2%;
width: 100px;
height: 100px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 97;
}

a.dream:link, a.dream:active, a.dream:visited{
display: block;
float: left;
width: 35px;
height: 35px;
margin: 1px;
background-color:#FFE3D8;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
}

a.dream:hover{
background-color:#FFFDCD;
box-shadow: 0px 0px 5px #999;
}

.floating3{
 float: bottom-left;
 -webkit-animation-name: Floatingx;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-name: Floating;
 -moz-animation-duration: 0.5s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: ease-in-out;
 margin-right: 0px;
 margin-bottom: 100px;
 z-index:343;

}

@-webkit-keyframes Floatingx{
 from {-webkit-transform:translate(0, 0px);}
 65% {-webkit-transform:translate(0, 15px);}
 to {-webkit-transform: translate(0, -0px); }
}

table {
 margin-top:-9px;
 width: 100%;
 margin-left:-2px;
 background-color: transparent;
 border-collapse: collapse;}

td {
 font-size: 11px;
 letter-spacing: 1px;
 height: 100px;
 overflow: auto;}

#rel img {
 margin:8px;
 border:5px solid #fff; /* relationships icon border color */
 width:50px;
 height:50px;
 padding:4px;
 -webkit-transition:all 0.3s ease-out;
 -moz-transition:all 0.3s ease-out;
 transition:all 0.3s ease-out;}

#rel:hover img {
 border:5px solid #529ecc; /* relationships icon border hover color */
 -webkit-transition:all 0.3s ease-out;
 -moz-transition:all 0.3s ease-out;
 transition:all 0.3s ease-out;}

::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-thumb:vertical {
height: 10px;background-color: #ffe763;}
::-webkit-scrollbar-thumb:horizontal {
height: 10px;background-color: #ffe763;border: 0px ;width: 12px;}

------
#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(http://img.finalfantasyxiv.com/lds/promo/pc/global/images/world/what/crystal_01.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(http://img.finalfantasyxiv.com/lds/promo/pc/global/images/world/what/crystal_02.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(http://img.finalfantasyxiv.com/lds/promo/pc/global/images/world/what/crystal_03.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(http://img.finalfantasyxiv.com/lds/promo/pc/global/images/bg/world_cloud.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(http://img.finalfantasyxiv.com/lds/promo/pc/global/images/bg/world_crystal_01.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(http://img.finalfantasyxiv.com/lds/promo/pc/global/images/bg/world_crystal_02.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;
}
.container1 {
  margin: 0 auto;
  max-width: 55vh;
  position: relative;
}



--------
<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>
<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="lovely">
<img src="https://i.imgur.com/Phyv9Qy.gif" width="300px" class="floating3"></div>



<div id="sparkle" class="brightly">

<div class="you">
<a href="#we" class="dream"></a>
<a href="#have" class="dream"></a>
<a href="#noticed" class="dream"></a>
<a href="#youtoo" class="dream"></a>
</div>
<div class="spooky">
<div id="we" class="far"><div class="tell">

<h1>Stats</h1>

<font style="float:left"><b>➽Name</b></font>
<font style="float:right">Vivi Yukino</font><br>
<font style="float:left"><b>➽Age</b></font>
<font style="float:right">24</font><br>
<font style="float:left"><b>➽Gender</b></font>
<font style="float:right">♀ Female</font><br>
<font style="float:left"><b>➽Nationality</b></font>
<font style="float:right">Japanese-American</font><br>
<font style="float:left"><b>➽Race</b></font>
<font style="float:right">Human</font><br>
<font style="float:left"><b>➽Height + Weight</b></font>
<font style="float:right">xxxx・xxx</font><br>
<font style="float:left"><b>➽Hair + Eye </b></font>
<font style="float:right">Short Light Blue・Blue</font><br>
<font style="float:left"><b>➽Occupation</b></font>
<font style="float:right">xxx</font><br>
<font style="float:left"><b>➽Alignment</b></font>
<font style="float:right">xxx</font><br>
<font style="float:left"><b>➽Sexual Orientation</b></font>
<font style="float:right">xxx</font><br>
<font style="float:left"><b>➽Martial Status</b></font>
<font style="float:right">xxx</font><br>


<h1>Stuff</h1><br>
<br><br>

<BR><br><br>

</div></div>
<div id="have" class="far"><div class="tell">
<h1>Tab 3</h1><br>


<br><br>
</div></div>
<div id="noticed" class="far"><div class="tell">
<h1>Friends</h1>
<div id="rel"><a href="/"><img src="hxxx" /></a></div><div id="rel"><a href="/"><img src="xxx" /></a></div>
</div></div>




<div id="youtoo" class="far"><div class="tell">
<h1>Rules</h1>
♠ PM friendly 99.99% of the time.<br>
♠ No profile no roleplay.<Br>
♠ This code is mine. My work. Do not touch it.<br>
♠ Art is not mine. And will be removed upon request of the artist. <br>
♠ I can be as sweet as sugar or the biggest bitch you'll ever meet.<Br>
♠ Smut can happen. It's reserved for partner and or servant.<br>
♠ I play MY character not one you give me.<br>
♠ I am not obligated to do anything for you. I will be polite up until you are rude to me.<br>
♠ My lengths range from Short post one lining shit posts to Novella~ Often I mirror what I get but don't expect to be mirrored.<Br>
♠ Start with a post if you really want. But I can't promise I'll be up for responding.<Br>
♠ IC =/= OOC.<Br><br><Br>
</div></div></div>

<div class="words">
Vivi
</div><div class="lovely2">
<a target="_blank" href="xxx" target="_blank" title="xxxx"><img src="xxxx" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="xxx" target="_blank" title=" "><img src="xxx" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="xxx" target="_blank" title="xxxx"><img src="xxxx" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="xxx" target="_blank" title=" "><img src="xxx" class="circle" width="40" height="40" border="1px solid #000000" ></a>
</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></div>
</div>