Code Mema Quad

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

Author: Elle
For: ??? [RPC Profile]
Text type: CSS/HTML
SOURCE: https://pastebin.com/raw/rLhJUrZK -

*/
  @import url('https://fonts.googleapis.com/css?family=Amatic+SC|Great+Vibes|Pacifico|Satisfy|Dancing+Script');

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

 ::-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('http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/1195/full/baby-pink-pastel-tileable-patterns-16.jpg');
   background-size: 35%;
 }

 #sheet {
   position: absolute;
   height: 100%;
   width: 100%;
   background: rgba(0,0,0,0.15);
   top: 0%;
   left: 0%;
   z-index: -1;
 }

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

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

 #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;
   font-family: 'Amatic SC';
   color:#fff;
   padding: 5px;
   font-size: 2.7vh;
   border-radius: 8px;
   height: 91%;
   width: 15%;
   background: rgba(0,0,0,0.6);
   top: 5%;
   left: 42%;
   transition-duration: 1s;
   opacity: 0;
 }

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

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

 #center:hover #box1 {
   width: 38.5%;
   left: 1%;
   opacity: 1;
   transition-duration: 1s;
 }

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

 #center:hover #box2 {
   position: absolute;
   width: 36%;
   right: 1%;
   opacity: 1;
   transition-duration: 1s;
 }

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

  #center:hover #box3 {
    width: 36%;
    right: 1%;
    opacity: 1;
    transition-duration: 1s;
  }

  #navigation {
    position: absolute;
    background: transparent;
    top: 20%;
    left: 41.5%;
    height: 10%;
    width: 5%;
    font-size: 5vh;
    opacity: 0;
    transition-duration: 1s;
  }

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

  a.nav {
    color: rgba(0,0,0,0.8);
    text-decoration: none;
    transition-duration: 0.5s;
  }

  a.nav:hover {
    color: #fff;
    transition-duration: 0.5s;
    font-size: 100%;
  }

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

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

   /* 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: 2%;
   left: 43%;
   color: #fff;
 }

 .r {float: right;}

 b {color:#d8a3ff;}

 h1{font-family:'Dancing Script';font-size:4vh;text-decoration:underline;color:rgba(255, 114, 2030.7);}

</style>
<div id="sheet"></div>
<div id="center">
  <div id="navigation">
    <a href="#stats" class="nav">►</a><br>
    <a href="#bio" class="nav">◄</a>
  </div>
  <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/rMnc.png" style="height: 100%;">
  </div>
  <div id="box1">
    <div id="host1">
      <div id="stats">
        <center><h1>Stats</h1></center>
        <br><br><br>
        <font style="font-size:3vh;">
        <b>Name</b><div class="r">Name here</div><br>
        <b>Moniker</b><div class="r">Nickname here</div><br>
        <b>Gender</b><div class="r">Probably femme</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">Girly, Soft</div><br>
        <b>Height</b><div class="r">IDFK fam</div><br>
        <b>Thing</b><div class="r">Next Thing</div><br>
        <b>Thing</b><div class="r">Next Thing</div><br>
        <b>Thing</b><div class="r">Next Thing</div><br>
        <b>Thing</b><div class="r">Next Thing</div><br>
        <b>Thing</b><div class="r">Next Thing</div><br>
        </font>
      </div>
      <div id="bio">
        <center><h1>Biography</h1></center>
        <font style="justified">
          <center>WORK.IN.PROGRESS<br>COME BACK NEXT TIME</center>
        </font>
      </div>
    </div>
  </div>
  <div id="box2">
    <center><h1>Siblings</h1></center>
    <a href="URLHERE">.name.</a>elle.quote<br>
    <a href="URLHERE">.name.</a>kaela.quote<br>
    <a href="URLHERE">.name.</a>who.quote
    <center><h1>Friends</h1></center>
    <a href="URLHERE">.name.</a>info.quote<br>
    <a href="URLHERE">.name.</a>info.quote<br>
    <a href="URLHERE">.name.</a>info.quote<br>
    <a href="URLHERE">.name.</a>info.quote<br>
    <a href="URLHERE">.name.</a>info.quote<br>
    <a href="URLHERE">.name.</a>info.quote<br>
    <a href="URLHERE">.name.</a>info.quote<br>
    <a href="URLHERE">.name.</a>info.quote<br>
    <a href="URLHERE">.name.</a>info.quote<br>
    <a href="URLHERE">.name.</a>info.quote<br>
  </div>
  <div id="box3">
    <center><h1>Out Of Character</h1></center>
    <b>ღ</b> Whatever!<br>
    <b>ღ</b> Whatever!<br>
    <b>ღ</b> Whatever!<br>
    <b>ღ</b> Whatever!<br>
    <b>ღ</b> Whatever!<br>
    <center><h1>Typist Info</h1></center>
    <b>ღ</b> BLAH!<br>
    <b>ღ</b> BLAH!<br>
    <b>ღ</b> BLAH!<br>
  </div>
</div>
<div id="credit">
  &copy; <a href="https://www.themonster.xyz/" target="_blank">The Monster</a>. Send an RPC mail to <b>Deum</b> for all inquiries~
</div>
<script src="https://www.themonster.xyz/profiles/Addons/free.js"></script>