kazuma

. = class
# = id

position: fixed;
bottom: 20px;
left: 0px;
background-color: transparent;
}
___________________________--
@import url('https://fonts.googleapis.com/css?family=Orbitron');
@import url('https://fonts.googleapis.com/css?family=Major+Mono+Display');
@import url('https://fonts.googleapis.com/css?family=Audiowide');


/*
PLEASE DO NOT REMOVE THIS CREDIT
DO NOT REMOVE THE CREDIT AT THE BOTTOM EITHER!
CREATOR: GREEN BEAN.
Please do not use this code as a base or any other code without asking Green Bean first.
This code created as a gift for Taros of RPC. My friend.  Please do not steal or tamper with.  Thank you.

*/


 body {
background-color: #000;
background-image: url("");
 background-position: center;
 background-repeat: repeat;
margin: 0px;
overflow: hidden;
}


  #navi{
position: fixed;
bottom: 5%;
left: 34%;
background-color: transparent;
z-index:99;
 animation: emerald 3s 1;
 -webkit-animation: emerald 3s 1;
}

 a.gone:link, a.gone:active, a.gone:visited{
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 24px;
line-height: 24px;
letter-spacing: -1px;
color: #39878b;
margin-right:12px;
z-index:10;
}

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

 .runes{
margin:auto;
width:340px;
height:230px;
overflow:hidden;
 }

 .strike{
width:340px;
height: 230px;
overflow:auto;
}

 .boundry{
color: #117788;
font-size:14px;
text-align:justify;
line-height:14px;
font-family: 'Audiowide', cursive;
letter-spacing:0.3px;
margin: 5px;
}


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

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

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

 a:active, a:link, a:visited{
color:#fff;
text-decoration:none;
}

 a:hover{
cursor:all-scroll;
color:#af9775;
}

 h1 {
font-family: 'Orbitron', sans-serif;
size: 40px;
text-align:center;
letter-spacing: 7px;
color:#579FAA;
text-shadow: 1px 1px #FFFFFF;
}
::-webkit-scrollbar {width: 3px;}
::-webkit-scrollbar-thumb:vertical {
height: 10px;background-color: #130f10;}
::-webkit-scrollbar-thumb:horizontal {
height: 10px;background-color: #D98878;border: 0px ;width: 15px;}

 .serpant{
overflow: hidden;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
 }


 #circle{
width: 430px;
height: 430px;
background: #transparent;
background-image: url("https://i.imgur.com/asX99Fq.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: bottom right;
z-index: 4;


}


#portrait {
pointer-events:none;
position: fixed;
bottom: 20px;
right: 0px;
background-color: transparent;
z-index: 2;
animation: emerald 3s 1;
 -webkit-animation: emerald 3s 1;
}





 #credit {
position: fixed;
bottom: 20px;
left: 0px;
background-color: transparent;
 animation: emerald 3s 1;
 -webkit-animation: emerald 3s 1;

}

.title{
position:absolute;
z-index:15;
height:14%;
width:35%;
top:30%;
left:5%;
font-family: 'Major Mono Display', monospace;
font-size: 4.5vw;
color:#FFF;
background-image:url(https://i.imgur.com/eAYGmr4.png);
background-size:100%;
background-repeat:no-repeat;
background-position:center;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #C8A87E;
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
 animation: emerald 3s 1;
 -webkit-animation: emerald 3s 1;

}

.magicalbarriers {
position: absolute;
margin: auto;
 top: 0;
bottom: 0;
left: 0;
right: 0;
 animation: emerald 3s 1;
 -webkit-animation: emerald 3s 1;

}

#magicalcircle {
background-image: url("https://i.imgur.com/rAlFVHX.png");
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
width: 600px;
height: 600px;
z-index: 4;
animation-name: spin;
animation-duration: 10000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
  /* transform: rotate(3deg); */
   /* transform: rotate(0.1rad);/ */
   /* transform: rotate(3grad); */
   /* transform: rotate(.01turn);  */
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}


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

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

---------------------------

<div class="title">

⋆magus⋆
</div>
<div id="navi">
<a href="#keepit" class="gone"><font size="24">⊗</font></a>
 <a href="#real" class="gone"><font size="24">⊕</font></a>
 <a href="#and" class="gone"><font size="24">⊕</font></a>
<a href="#strong" class="gone"><font size="24">⊗</font></a></div>
<div id="magicalcircle" class="magicalbarriers">
</div>

<div id="circle" class="serpant">

<br><br><br>
<br><br><div class="runes">
<div id="keepit" class="strike"><div class="boundry">

<h1>Stats</h1>
<font style="float:left"><b>Name:</b></font>
<font style="float:right">Kazuma Kval</font><br>
<font style="float:left"><b>Gender:</b></font>
<font style="float:right">Male</font><br>
<font style="float:left"><b>Species:</b></font>
<font style="float:right">Artificial Human</font><br>
<font style="float:left"><b>Sexuality</b></font>
<font style="float:right">Demiromantic/Pansexual</font><br>
<font style="float:left"><b>Weapon(s):</b></font>
<font style="float:right">Bali-song, Snake Chain</font><br>
<font style="float:left"><b>Hobbies:</b></font>
<font style="float:right">Reading, People Watching</font><br>
<font style="float:left"><b>Likes:</b></font>
<font style="float:right">Eggs, Books, Balance</font><br>
<font style="float:left"><b>Dislikes:</b></font>
<font style="float:right" size="-2"> Being used, being talked down to</font><br>


</div></div>

<div id="real" class="strike"><div class="boundry">
<h1>Rules</h1>
<li>OOC=/=IC</li>
<li>IRL > RP</li>
<li>This is my portrayal of Kazuma Kval keep that in mind k thanks</li>
<li>I tend to try and match my partners post length, I prefer paragraphs though.</li>
<li>Story > Smut</li>
<li>This profile is going to be updated.</li>
</div></div>
<div id="and" class="strike"><div class="boundry"><h1>Personality</h1><br>
 Kazuma is a soft spoken individual who always seems to be in the corner of a room alone. He has an aura of danger about him and at times just off his appearance can seem like a bad person but he is a genuinely kind and caring guy. Above all else though, through some of his life experiences Kazuma has learned how important keeping balance between the greater forces is, and he walks the line of Neutrality you can never be to sure who's side he is on.</div></div>
<div id="strong" class="strike"><div class="boundry">
<h1>Backstory</h1>
<p>Unlike most inhabitants of the forest who were lead there, Kazuma simply just.... appeared. If you ask where he is from he will simply respond "The Boundary". He seems to be far older than he looks, and the limits to his abilities seem to be undefined if they even exist at all. He doesn't hide things about his past, but so little is known about where he is from or who he actually is.</p>
 </div></div>



</div></div>

<div id="portrait">
<img src="https://i.imgur.com/evUT4Q5.gif" height="600px"></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></body>
<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>