Curtains Rise

<style>
/*
PLEASE DO NOT REMOVE THIS CREDIT
DO NOT REMOVE THE CREDIT AT THE BOTTOM EITHER!
CREATOR: BLINKY// Hakuno Kishinami
There is a Javascript at the base that prevents right click. Do not remove it. If you do not have Java you don't need to worry about it. But please do not remove it. You'll break the code.

*/


   @import url("https://fonts.googleapis.com/css?family=Voltaire|Abel");
::-webkit-scrollbar {
  width: 0.3vw;
  height: 0.3vw;
}
::-webkit-scrollbar-track {
  border-radius: 2px;
  background-color: cyan;
}
::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background-color: cornflowerblue;
}
body{background: #000;
background-image: url('http://www.texasmusicpickers.com/wp-content/uploads/2015/11/Spotlight.jpg');
background-size: cover;}
.doors {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
 }

.doors .key {
  position: absolute;
  top: 0%;
  width: 100%;
  color: yellow;
  z-index: 10;
  text-align: center;
  font-size: 48px;
  font-family: "Trebuchet MS";
  text-transform: uppercase;
  text-shadow: 5px 0 2px #000;
  transition: transform 2s ease-in-out;
}

.doors:hover .key {
  transform: scale(0);
}

.doors .left {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  box-shadow: 3px 0 4px #111;
  background-image: url("https://i.imgur.com/c3Je2XE.png");
  background-size: cover;
  background-repeat: no-repeat;
  transition: width 2s ease-in-out;
}
.doors .right {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  box-shadow: 3px 0 4px #111;
  background-image: url("https://i.imgur.com/c3Je2XE.png");
  background-size: cover;
  background-repeat: no-repeat;
  transform: scaleX(-1);
  transition: width 2s ease-in-out;
}

.doors:hover .left, .doors:hover .right {
  width: 5%;
}

.inner {
  width: 100%;
  height: 100%;
}

.image {
  border-radius: 50%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
.image:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}







#content {
  position: fixed;
  width: 100%;
  height: 70%;
  background: transparent;
  top: 15%;
  left: 0%;
  transition-duration: 1s;
}



@keyframes whoosh {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes whoosh {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


#pluto {
  position: fixed;
  height: 96%;
  width: 25%;
  background: transparent;
  left: 36.7%;
  transition-duration: 1s;
}

#content:hover #garnet {
  opacity: 1;
  left: 6%;
  transition-duration: 1.5s;
}

#content:hover #guarding {
  opacity: 1;
  right: 6%;
  transition-duration: 1.5s;
}

#garnet {
  position: absolute;
  overflow: auto;
  height: 92.5%;
  width: 25%;
  background: #161616;
  border-radius: 10px;
  border: 3px solid;
  border-color: #42d1f4;
  left: 35%;
  padding: 15px;
  opacity: 0;
  transition-duration: 1s;
  font-family: "Forum";
  font-size: 2.3vh;
  color: #eee;

}

#guarding {
  position: absolute;
  overflow: auto;
  height: 92.5%;
  width: 25%;
  background: #161616;
  border-radius: 10px;
  border: 3px solid;
  border-color: #42d1f4;
  right: 35%;
  padding: 15px;
  opacity: 0;
  transition-duration: 1s;
  font-family: "Forum";
  font-size: 2.3vh;
  color: #eee;
}

#gate,
#time {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

}

#leftbox,
#right {
  width: 100%;
  height: 100%;
  overflow: auto;

}
}

#leftbox:target,
#rightbox:target {
  animation: appear 1.5s 1;
  -webkit-animation: appear 1.5s 1;
}

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

@-webkit-keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

h1 {
font-family: century;
font-weight: normal;
line-height: 9px;
text-transform: uppercase;
text-align: center;
}

a {
  font-family: 'Voltaire', sans-serif;
  color: #42d1f4;
  text-decoration: none;
}

a:hover {
  color: #eee;
}

.hue {
  float: right;
}

.lovely {
position: fixed;
top: 20%;
Left: 40%;
right: 40%;
background-color: transparent;
z-index: -90; }
</style>


<div class="doors">
 <div class="key"><img src="https://i.imgur.com/MQfyM4n.png" height="500px" class="image"></div>
 <div class="left"></div>
 <div class="inner">
<div id="sheet"></div>
<div id="content">
 <div id="pluto">

 </div>

 <div id="garnet">
 <div id="gate">
 <div id="leftbox">
<center><h1>Stats</h1></center>
 <a>Stat</a> <div class="hue">Stat</div><br>
 <a>Stat</a> <div class="hue">Stat</div><br>
 <a>Stat</a> <div class="hue">Stat</div><br>
 <a>Stat</a> <div class="hue">Stat</div><br>
 <a>Stat</a> <div class="hue">Stat</div><br>
 <a>Stat</a> <div class="hue">Stat</div><br>
 <a>Stat</a> <div class="hue">Stat</div><br>
 <a>Stat</a> <div class="hue">Stat</div><br>
 <a>Stat</a> <div class="hue">Stat</div><br>
 <a>Stat</a> <div class="hue">Stat</div><br>

<h1>Relationships</h1><Br>
<div style="overflow: auto; width:100%; height:50%;"><font size="-1px"> <a target="_blank" href="Linkr">'Lovely' Assistant/Sister</a></font></div>





 </div>
 </div>
</div>


 <div id="guarding">
 <div id="time">
 <div id="rightbox">
<Center><h1>Personality</h1></center>

<div style="overflow: auto; width:100%; height:50%;"><font size="-1px"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae pharetra risus. Duis eget nisl nulla. Suspendisse non nunc vulputate, cursus orci non, iaculis dui. Sed fermentum iaculis sem. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend vehicula egestas. Cras elementum nulla eget tellus pellentesque semper. Cras scelerisque erat vel elit posuere, ac vulputate sapien rutrum. Nullam a fringilla enim. Cras sodales nunc magna, vitae sollicitudin dui feugiat non. Aliquam a aliquet dolor.</p>

<p>In hac habitasse platea dictumst. Curabitur eget imperdiet augue, vel dapibus leo. Etiam nec arcu sit amet nunc tincidunt auctor. Sed sit amet ultricies odio, nec laoreet justo. Mauris massa tortor, blandit et quam ac, viverra fermentum sem. Vestibulum porta est sapien, sit amet fermentum ante pulvinar sit amet. Etiam volutpat vitae lorem nec sollicitudin. Nunc venenatis volutpat blandit. Integer ut metus tempor, ultricies dolor vel, pharetra sapien. Morbi fermentum a lacus vitae hendrerit. Sed vel interdum lectus, vitae molestie risus.</p>

<p>Donec nec imperdiet nunc, in commodo quam. Aenean euismod aliquet commodo. Proin quis maximus odio. Pellentesque interdum erat libero, ac pulvinar justo rutrum ac. Etiam gravida, risus faucibus elementum maximus, odio nulla tincidunt neque, id aliquet velit purus vitae libero. Vivamus ac nunc ullamcorper ipsum tincidunt efficitur sit amet sed justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu bibendum magna. Fusce gravida ligula vel ipsum malesuada, eu molestie tortor luctus. Curabitur pellentesque ultricies varius. Pellentesque varius, augue vestibulum eleifend tincidunt, lectus felis porttitor sem, a facilisis mi nisl sit amet dui.</p>

<p>Duis feugiat orci vitae faucibus scelerisque. Mauris vulputate ligula non ex hendrerit tempus. Nam efficitur at lorem eget tincidunt. Donec scelerisque urna vel orci porta tristique. Duis nec nisi mauris. Nullam dolor ante, tempus quis bibendum sit amet, suscipit viverra turpis. Nullam eu nulla arcu. Donec non felis a augue lobortis pharetra. Praesent vehicula elementum nisi nec imperdiet. Nam nec libero dapibus, eleifend est et, pharetra eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc mauris velit, euismod fermentum augue et, ornare aliquam ipsum. Sed molestie lorem metus, maximus rutrum magna venenatis nec. Nunc posuere orci efficitur, lacinia ante a, aliquet urna.</p>
</font></div>

<center><h1>Rules/OOC</h1></center>
<div style="overflow: auto; width:100%; height:50%;"><font size="-2px">
✦ Rules<br>
✧ Rules<br>
✦ Rules<br>
✧ Rules<br>
✦ Rules<br>
✧ Rules<br>
✦ Rules<br>
✧ Rules<br>

</font></div>
 </div>

 </div>
 </div>
</div>
<div class="lovely">
<img src="https://i.imgur.com/7IDtObZ.png" height="80%"></div>


 <div class="right"></div>
</div>





<div style="position: fixed; bottom: 20px; left: 0px; background-color: transparent;">
<a target="_blank" href="https://roleplay.chat/profile.php?user=hakuno%20kishinami" target="_blank" title="Code was created by Blinky/Hakuno Kishinami. Do NOT touch. Please! If you want a copy or want it please ask. Mail them on Hakuno Kishinami."><img src="https://i.imgur.com/uP9E5Pz.png" height="10%"></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>

<div style="position: fixed; bottom: 20px; right: 0px; background-color: transparent;">
<a target="_blank" href="https://roleplay.chat/profile.php?user=Hakuno+Kishinami" target="_blank" title="Code was created by Blinky/Hakuno Kishinami. Do NOT touch. Please! If you want a copy or want it please ask. She will share. "><img src="https://i.imgur.com/n6pkfKn.png" height="10%"></a>