Code Vici Quad

<style>
/*
======== !! IMPORTANT !! DO NOT REMOVE ANY PART OF THIS SECTION =========

Author: Elle
For: Vici [RPC Profile]
Text type: CSS/HTML
SOURCE: https://pastebin.com/raw/92vbJB4m -
*/
 @import url('https://fonts.googleapis.com/css?family=Amatic+SC|Great+Vibes|Pacifico|Satisfy|Dancing+Script');

 ::-webkit-scrollbar{width:0.3vh;height:0.3vh;}
 ::-webkit-scrollbar-thumb{border-radius:0;background:#000;}
 ::-webkit-scrollbar-track{border-radius:0;background:transparent;}

 body {
   background-image: url('https://s-media-cache-ak0.pinimg.com/736x/d2/c0/2f/d2c02f8cbad58e3596959d05dcce4282.jpg');
 }

 #sheet {
   position: fixed;
   height: 100%;
   width: 100%;
   top: 0%;
   bottom: 0%;
   left: 0%;
   right: 0%;
   background: rgba(0,0,0,0.15);
 }

/* Amatic SC = information ; Great Vibes = quotes ; Pacifico = h1? ; Satisy = links probs */

 #center {
   position: fixed;
   height: 90%;
   width: 100%;
   left: 0%;
   top: 5%;
   background: transparent;
 }

 #quote1 {
   position: absolute;
   height: 70%;
   width: 30%;
   left: 5%;
   text-align: center;
   font-family: 'Great Vibes';
   font-size: 7vh;
   transition-duration: 1s;
 }

  #quote2 {
   position: absolute;
   height: 70%;
   width: 30%;
   right: 5%;
   text-align: center;
   font-family: 'Great Vibes';
   font-size: 7vh;
   transition-duration: 1s;
 }

 #center:hover #quote1, #center:hover #quote2 {
   opacity: 0;
   transition-duration: 1s;
 }

 #box1 {
   position: absolute;
   background: rgba(0,0,0,0.6);
   height: 70%;
   width: 20%;
   border-radius: 5%;
   top: 15%;
   right: 40%;
   transition-duration: 1.5s;
   opacity: 0;
   font-family: 'Amatic SC';
   color:#fff;
   padding: 5px;
   font-size: 2.5vh;
   overflow: auto;
 }

 #center:hover #box1 {
   opacity: 1;
   right: 1%;
   transition-duration: 1.5s;
 }

 #box2 {
   position: absolute;
   background: rgba(0,0,0,0.6);
   height: 70%;
   width: 50%;
   border-radius: 5%;
   top: 15%;
   right: 25%;
   transition-duration: 1.5s;
   font-family: 'Amatic SC';
   opacity: 0;
   font-size: 2.7vh;
   padding: 5px;
 }

 #center:hover #box2 {
   opacity: 1;
   transition-duration: 1.5s;
 }

 #img {
   position: absolute;
   height: 100%;
   width: 15%;
   top: 0%;
   right: 45%;
   transition-duration: 1.5s;
   background: transparent;
 }

 #center:hover #img {
   right: 83%;
   transition-duration: 1.5s;
 }

 #host{height:100%;width:100%;overflow:hidden;}

 #stats, #bio, #ooc {height:100%;width:100%;overflow:auto;color:#fff;}

 h1{font-family:'Dancing Script';font-size:4vh;text-decoration:underline;}

 a{font-family:'Satisfy';text-decoration:none;color:#f09eff;transition-duration:1s;}

 a:hover{font-size:110%;transition-duration:1s;}

 .r{float:right;}

 b{color:#95c1f4;}

 #navigation {
   position: absolute;
   height: 40%;
   width: 2.5%;
   background: transparent;
   right: 22%;
   top: 30%;
 }

 #nav1 {
   position: absolute;
   height: 10%;
   width: 80%;
   top: 20%;
   background: rgba(0,0,0,0.6);
   border: 3px solid;
   border-color: rgba(0,0,0,0.9);
   opacity: 0;
   transition-duration: 1s;
 }

  #nav2 {
    position: absolute;
    height: 10%;
    width: 80%;
    top: 50%;
    background: rgba(0,0,0,0.6);
    border: 3px solid;
    border-color: rgba(0,0,0,0.9);
    opacity: 0;
    transition-duration: 1s;
  }

  #nav3 {
    position: absolute;
    height: 10%;
    width: 80%;
    top: 80%;
    background: rgba(0,0,0,0.6);
    border: 3px solid;
    border-color: rgba(0,0,0,0.9);
    opacity: 0;
    transition-duration: 1s;
  }

  #center:hover #nav1, #center:hover #nav2, #center:hover #nav3{opacity:1;transition-duration: 0.5s;}

  #nav1:hover, #nav2:hover, #nav3:hover{
    border-radius: 100%;
    transition-duration: 0.5s;
    transform: rotate(360deg);
    border-color: rgba(0,0,0,0.6);
    background: rgba(0,0,0,0.9);
  }

 /* Credit. please don't remove! */

 #credit {
   position: absolute;
   background: rgba(0,0,0,0.4);
   border-left: rgb(255,255,255);
   font-family: 'Amatic SC';
   font-size: 2.3vh;
   padding: 3px;
   bottom: 5%;
   left: 3%;
 }

</style>
<div id="sheet"></div>
<div id="center">
  <div id="quote1"><center><br><br><br><br>Insert some fancy quote here<br>Boi</center></div>
  <div id="quote2"><center><br><br><br><br>Insert some cute quote here<br>Girl</center></div>
  <div id="img"><img src="http://i.picpar.com/BFmc.png" style="height: 100%;"></div>
  <div id="box1">
    <center><h1>Siblings</h1></center>
    <a href="URL HERE">.quad1</a>.kaela.quote<br>
    <a href="URL HERE">.quad2</a>.mema.quote<br>
    <a href="URL HERE">.quad3</a>.who.quote<br>
    <center><h1>Friends</h1></center>
    <a href="URL HERE">.name</a>.info.quote<br>
    <a href="URL HERE">.name</a>.info.quote<br>
    <a href="URL HERE">.name</a>.info.quote<br>
    <a href="URL HERE">.name</a>.info.quote<br>
    <a href="URL HERE">.name</a>.info.quote<br>
    <a href="URL HERE">.name</a>.info.quote<br>
    <a href="URL HERE">.name</a>.info.quote<br>
    <a href="URL HERE">.name</a>.info.quote<br>
    <a href="URL HERE">.name</a>.info.quote<br>
  </div>
  <div id="box2">
    <div id="host">
      <div id="stats">
        <center><h1>Stats</h1></center>
        <font style="font-size:3vh;">
        <b>Name</b><div class="r">Vici Muliercula</div><br>
        <b>Moniker</b><div class="r">V</div><br>
        <b>Gender</b><div class="r">Female</div><br>
        <b>Age</b><div class="r">20 y.o.</div><br>
        <b>Species</b><div class="r">Nekomimi</div><br>
        <b>Persona</b><div class="r">Sassy, Tsundere AF</div><br>
        <b>Height</b><div class="r">5'1</div><br>
        <b>Weight</b><div class="r">102 lbs</div><br>
        <b>Marital Status</b><div class="r">Single</div><br>
        <b>Orientation</b><div class="r">Demisexual</div><br>
        </font>
      </div>
      <div id="bio">
        <center><h1>Biography</h1>
          .Work.In.Progress.<br>
          Come back later.
        </center>
      </div>
      <div id="ooc">
        <center><h1>Out Of Character</h1></center>
        <b>ღ</b> In-room approach is your best bet.<br>
        <b>ღ</b> Smut is earned.<br>
        <b>ღ</b> I reserve the right to make you disappear [or ignore you, whichever is convenient].<br>
        <b>ღ</b> I'm actually friendlier than my character.<br>
        <b>ღ</b> PM Picky.<br>
        <b>ღ</b> No profile = immediate no.<br>
        <b>ღ</b> Better be ready to dish what you serve.<br>
        <b>ღ</b> LT is preferred.<br>
        <b>ღ</b> Planned or impromptu. Doesn't matter.<br>
        <center><h1>Typist Information</h1></center>
        <b>ღ</b> Femme AF Binch<br>
        <b>ღ</b> 20 y.o.<br>
      </div>
    </div>
  </div>
  <div id="navigation">
    <a href="#stats"><div id="nav1"></div></a>
    <a href="#bio"><div id="nav2"></div></a>
    <a href="#ooc"><div id="nav3"></div></a>
  </div>
</div>
<!-- CREDIT. PLEASE DON'T REMOVE -->
<div id="credit">
  &copy; <a href="https://www.themonster.xyz/" target="_blank">The Monster</a> Send RPC mail to <b>Deum</b> for inquiries~
</div>
<script src="https://www.themonster.xyz/profiles/Addons/free.js"></script>