Code Nahia

<style>
/*
INVISIBLE CREDIT; PLEASE DON'T REMOVE

Author: Elle
For: Nahia [RPC Profile]
Text type: CSS/HTML
*/
@import url('https://fonts.googleapis.com/css?family=Aldrich|Amatica+SC|Press+Start+2P');

::-webkit-scrollbar {width: 0.3vw; height: 0.3vh;}
::-webkit-scrollbar-track {border-radius: 0px; background: transparent;}
::-webkit-scrollbar-thumb {border-radius: 0px; background: #8c1e3b;}

body{
  overflow: hidden;
  background: url('https://s-media-cache-ak0.pinimg.com/originals/26/39/1e/26391e0f1f9c35ab39898c27a3e63aba.jpg');
  background-size: cover;
}

#sheet {
  position: absolute;
  height: 97.7%;
  width: 98.7%;
  background: rgba(246,155,255,0.2);
  border-radius: 10px;
  z-index: -1;
}

img {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

h1 {
  font-family: 'Press Start 2P';
  font-size: 2.5vh;
  color: rgba(96,255,131,0.9);
  text-transform: uppercase;
}

#nav {
  position: fixed;
  height: 60.7%;
  width: 15%;
  left: 2%;
  bottom: 0%;
  top: 20%;
  border-radius: 10px;
  background: rgba(0,0,0,0.6);
}

a.fam {
  display: block;
  text-transform: uppercase;
  font-family: 'Press Start 2P';
  font-size: 2.5vh;
  padding: 30px;
  color: rgba(96, 255, 131, 0.5);
  border-radius: 10px;
  text-decoration: none;
  transition-duration: 1s;
}

a.fam:hover {
  background: rgba(0,0,0,0.7);
  color: rgba(96, 255, 131, 1);
  transition-duration: 1s;
}

@keyframes error{
  from{opacity:0.7;font-size: 2.3vh;}
  to{opacity:1;}
}

@-webkit-keyframes error{
  from{opacity:0.7;font-size:2.3vh;}
  to{opacity:1;}
}

a.bam {
  display: block;
  text-transform: uppercase;
  font-family: 'Press Start 2P';
  font-size: 2.5vh;
  padding: 30px;
  color: rgba(255,66,66, 0.5);
  border-radius: 10px;
  text-decoration: none;
  transition-duration: 1s;
  animation: error 0.5s 1;
  -webkit-animation: error 0.5s 1;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

a.bam:hover {
  background: rgba(0,0,0,0.7);
  color: rgba(255,66,66,1);
  transition-duration: 1s;
}

.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: transparent;
  height: 100%;
  width: 100%;
}

#content {
  position: fixed;
  height: 100%;
  width: 50%;
  background: transparent;
  left: 18%;
  top: 0%;
  bottom: 0%;
}

#box {
  position: absolute;
  overflow: auto;
  height: 75%;
  width: 100%;
  background: rgba(0,0,0,0.7);
  top: 10%;
  border-radius: 10px;
  padding: 15px;
  font-family: 'Aldrich';
  font-size: 3vh;
  color: rgba(96,255,131,0.9);
  opacity: 1;
  transition-duration: 1s;
}

#picnav {
  position: fixed;
  height: 5%;
  width: 20%;
  background: rgba(0,0,0,0.5);
  top: 79%;
  left: 74%;
  border-radius: 10px;
  padding: 5px;
  opacity: 1;
  transition-duration: 1s;
}

.blink {
  text-decoration: underline;
  float: left;
  animation: blink 0.5s 1;
  -webkit-animation: blink 0.5s 1;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

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

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

.r {float:right;}

a {
  font-family: 'Press Start 2P';
  font-size: 2vh;
  color: rgba(96,255,131,0.6);
  transition-duration: 1s;
}

a:hover {
  color: rgba(96,255,131,0.9);
  transition-duration: 1s;
}

#six {
  position: fixed;
  height: 65%;
  width: 25%;
  background: transparent;
  top: 10%;
  left: 71.5%;
  border-radius: 10px;
  border: 10px inset;
  border-color: rgba(0,0,0,0.5);
  transition-duration: 1.5s;
}

#host1, #host2 {
height: 100%;
width: 100%;
overflow:hidden;
}

#pic1, #pic2, #pic3, #pic4, #one, #two, #three, #four, #five {
height: 100%;
width: 100%;
}

#pic1:target, #pic2:target, #pic3:target, #pic4:target, #one:target, #two:target, #three:target, #four:target, #five:target {
animation: appear 0.5s 1;
-webkit-animation: appear 0.5s 1;
}

#box:target {
opacity: 0;
transition-duration: 1s;
}

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

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


/* Edit as you will but please don't remove the credit */

  #credit {
position:fixed;
padding:5px;
font-family:Aldrich;
background:rgba(0,0,0,0.5);
font-size: 2vh;
bottom: 5%;
left:2%;
color: rgba(96, 255, 131, 0.5);
border-left: 5px solid;
border-color:rgba(255,66,66,0.5);
}

  a.cred {
font-size: 1.2vh;
animation:blink 2s 1;
-webkit-animation: blink 2s 1;
animation-iteration-count:infinite;
animation-direction:alternate;
text-decoration:none;
}

a.cred:hover{
color: rgba(255,66,66,0.5);
}


</style>
<div id="sheet"></div>
<div id="nav">
  <ul class="nav">
    <a href="#one" class="fam"><center>Stats</center></a><br>
    <a href="#two" class="fam"><center>Bio</center></a><br>
    <a href="#three" class="fam"><center>Connect</center></a>
    <a href="#four" class="fam"><center>OOC</center></a>
    <a href="#five" class="bam"><center>Error</center></a>
  </ul>
</div>
<div id="content">
<div id="box">
<div id="host1">
  <div id="one">
    <center><h1>Stats</h1></center><br><br>
    Name <div class="r">Nahia</div><br><br>
    Moniker <div class="r">Pixel, Pinky</div><br><br>
    Location <div class="r">C:\Program Files\Nahia</div><br><br>
    Species <div class="r">A.I. Program [nahia.exe]</div><br><br>
    Gender <div class="r">Appears female</div><br><br>
    Height <div class="r">5'1</div><br><br>
    Hair <div class="r">Pink</div><br><br>
    Eyes <div class="r">Varies</div><br><br>
  </div>
  <div id="two">
    <center><h1>Biography</h1></center><br><br>
    <div class="blink">></div>Work in Progress
  </div>
  <div id="three">
    <center><h1>Connections</h1></center><br><br>
    <div class="blink">></div>Friends, Acqauintances and other connections go here.
  </div>
  <div id="four">
    <center><h1>Out of character</h1></center><br><br>
    <div class="blink">></div>In room approach is your best bet.<br>
    <div class="blink">></div>What I do IC does not reflect on me OOC.<br>
    <div class="blink">></div>LT is adored. Basic knowledge of English is adored as well.<br>
    <div class="blink">></div>I reserve the right to refuse RP.<br>
    <div class="blink">></div>Being a dick to me means I get to be rude to you.<br>
    <div class="blink">></div>Quality over quantity just like story over smut.<br>
    <br><br>
    Color: #FF82F8
  </div>
  <div id="five">
    There was an error connecting to this page.<br>
    .<br>.<br>Attempting to reconnect.<br>.<br>.
    <br>Connection failed.<br>.<br>.<br>
    Please <a href="#box">restart</a>
    <br><br><br>
  </div>
</div>
</div>
</div>
<div id="picnav">
   <div class="picnav">
   <br>
     <center>
     <a href="#pic1">1</a>  -  <a href="#pic2">2</a> -  <a href="#pic3">3</a>  -  <a href="#pic4">4</a></center>
   </div>
</div>
<div id="six">
<div id="host2">
  <div id="pic1">
    <img src="https://s-media-cache-ak0.pinimg.com/564x/d0/82/57/d08257dd1c3b358cb88750915378e4c0.jpg" style="height:100%;width:100%">
  </div>
  <div id="pic2">
    <img src="https://s-media-cache-ak0.pinimg.com/564x/27/7e/86/277e86c4a626205972afa3f8f8197315.jpg" style="height:100%;width:100%">
  </div>
  <div id="pic3">
    <img src="https://s-media-cache-ak0.pinimg.com/564x/06/f0/f7/06f0f71490737353d7ae9bea63ae5d0e.jpg" style="height:100%;width:100%">
  </div>
  <div id="pic4">
    <img src="https://s-media-cache-ak0.pinimg.com/564x/0b/7d/5e/0b7d5ed02816de08877244d1c8b3a14a.jpg" style="height:100%;width:100%">
  </div>
</div>
</div>
<!-- Please don't remove the credit -->
<div id="credit"> &copy; <a href="https://www.themonster.xyz/" target="_blank">The Monster</a> Send RPC mail to <b>Deum</b> for inquiries~