Mal template WIP

<style>
 /* --------- IMPORT BASE CODE --------*/
 @import url(https://ellexidecodes.github.io/Profile-Codes/free/assassin.css);

/*
 INVISIBLE CREDIT PLEASE DON'T REMOVE

 AUTHOR: Elle
 ORIGINALLY FOR: Alessandrio Lupi [RPC Profile]
 Language: CSS/HTML
 Date of Completion: February 12, 2018 || 7:05 AM EST

 COPYRIGHT REGISTRATION: hhttps://www.copyrighted.com/work/2PKqDybNAqyK7xoN


######################----########-----------------########------------------######################
######################----########-----------------########------------------######################
######################----########-----------------########------------------######################
########------------------########-----------------########------------------########
########------------------########-----------------########------------------########
######################----########-----------------########------------------######################
######################----########-----------------########------------------######################
######################----########-----------------########------------------######################
########------------------########-----------------########------------------########
########------------------########-----------------########------------------########
######################----#####################----######################----######################
######################----#####################----######################----######################
######################----#####################----######################----######################

*/

/*
============================================================================================================
THE REST OF THE CODE IS KEPT IN MY FILE BUT IT WON'T AFFECT HOW YOUR PROFILE WILL LOOK. HERE ARE THE EDITABLE
PORTIONS OF YOUR CODE. IT MAKES IT EASIER FOR YOU TO IGNORE THE PARTS OF THE CODE WHERE YOU REALLY CAN'T TOUCH
BECAUSE IT MIGHT BREAK THE WHOLE THING. IT ALSO MAKES IT EASIER FOR ME TO FIX BUGS YOU MAY FIND.
=============================================================================================================
*/

/* ------ CHANGE BACKGROUNDS ------*/
:root{
 --first-background: linear-gradient(#222, #000) !important;
 --secondpage-backcolor: #0e0101 !important;
}
/* --- just remove the * and / to add this code block in || IF YOU WANT TO ADD A BACKGROUND IMAGE ---
#firstpage{
 background-image: url();
 background-position: center;
 }
*/
#secondpage{
 /* this is a tranparent pattern so you can form whatever color you want on it;; refer to the root*/
 background-image: url(http://i.picpar.com/9WTc.png) !important;
 background-size:100%!important;
background-repeat: no-repeat;
}

a.nav{
 /* the small pattern within each nav button; semi-transparent as well */
 background-image: url(https://thumbs.gfycat.com/ImmaterialMixedAntipodesgreenparakeet-size_restricted.gif) !important;
 background-size: cover !important;
}


/* -------- CHANGE IMAGES -----------*/
#firstpic{
 background-image: url('http://i.picpar.com/PSTc.png') !important;
 background-size: 100% !important;
 background-repeat: no-repeat !important;
 background-position: bottom !important;
}

#pic{
 background-image: url('http://i.picpar.com/uWTc.png') !important;
 background-repeat: no-repeat !important;
 background-position: bottom !important;
 background-size: 70% !important;
}



/* --------- CHANGE COLORS ----------*/
:root{
--first-scrollbar: #D4A544 !important;
--first-name: #ffb81f !important;
--text: #b30059 !important;
--first-bold: #ffb3d9!important;
--h1:  #660033!important;
--second-bold:  #660033!important;
--second-scrollbar: #850a0a !important;
--border-color:#b30059!important;
--nav-color: !important;
--nav-border:  #660033 !important;
--infobox:  #000000 !important;
--words-outline: #ffb3d9 !important;
}



/* ---------- CHANGE FONTS [you'll have to link them first though] ----------*/
#name{font-family: 'RavaliItalic' !important;font-size: 17vh !important;}
#basic{font-family: 'Satisfy' !important;font-size: 6vh !important;}
#quote{font-family: 'Yesteryear' !important;font-size: 9vh !important;}
.info{font-family: 'BebasNeueBold' !important;}
h1{font-family: 'BradleyGratisRegular' !important;}



/*
 =======================================================================================================
 TROUBLESHOOTING: IF YOU NEED ANY HELP, MESSAGE ME ON DISCORD: Lil Monster#3557
 =======================================================================================================
*/
 </style>
<!-- DONATER PERK: DETERS CODE THEFT || IF YOU'RE NOT A DONATOR, IT'S FINE. YOU CAN KEEP IT IN BUT IT JUST WON'T WORK -->
<script src="https://rawgit.com/EllexideCodes/Profile-Codes/master/free/credit.js"></script>


<div id="profile">
 <!-- ENTRANCE -->
 <div id="firstpage">
 <div id="firstpic"></div>
 <div id="name">As I always say, <br>it's just business.</div>
 <div id="basic">

 </div>
 <div class="sheet"></div>
 </div>

 <!-- ACTUAL PROFILE -->
 <div id="secondpage">
 <!--behind the sheet-->
 <div id="border">
 <div id="box"></div>
 </div>
 <div id="pic"></div>
 <div id="quote">You do not understand the posistion you're in.</div>
 <div class="sheet"></div>

 <!--YOUR ACTUAL INFO HERE-->
 <div id="border2">
 <div id="box2">
 <div class="host">
 <div id="stats" class="info">
 <center><h1>Basic</h1></center>
 <b>Name</b><div class="r">Maleficent</div><br>
 <b>Moniker</b><div class="r">Lupin</div><br>
 <b>Age</b><div class="r">25 y.o.</div><br>
 <b>Gender</b><div class="r">Male</div><br>
 <b>Species</b><div class="r">Werewolf</div><br>
 <b>Occupation</b><div class="r">Assassin</div><br>
 <b>Info</b><div class="r">Detail</div><br>
 <b>Info</b><div class="r">Detail</div><br>
 <b>Info</b><div class="r">Detail</div><br>
 <b>Info</b><div class="r">Detail</div><br>
 <b>Info</b><div class="r">Detail</div><br>
 </div>
 <br>
 <div id="bio" class="info">
 <center><h1>Biography</h1></center>
 <center><b>Bold</b> <i>Italics</i> <a href="#">Link</a> <u>Underline</u> <s>Strikethrough</s></center>
 <br>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis blandit auctor. Etiam vitae massa sem. Curabitur elementum gravida urna, id dapibus dui bibendum tempus. Duis hendrerit commodo nisl, ut placerat mauris. Nunc ullamcorper lacus sollicitudin tortor semper faucibus. Vivamus vel tempus velit, id aliquam nunc. Proin mattis sem eget faucibus interdum. Aliquam placerat velit non dui mollis, eu fringilla libero tempor. In tristique vulputate erat, vitae pulvinar nibh egestas et. Aenean scelerisque ante ac lacus ornare posuere. Quisque ullamcorper arcu turpis. Curabitur et lorem ante. Praesent ut nunc sed dui egestas blandit. Quisque non nisl pharetra, eleifend sapien ac, vehicula neque. Integer sit amet neque sapien. Praesent dolor nibh, malesuada vitae porttitor quis, mollis sed ante.</p>

 <p>Donec in turpis id nulla maximus dictum non id lacus. Vestibulum tincidunt pellentesque orci, sit amet lacinia nunc. In nibh mauris, ullamcorper ac diam id, convallis pellentesque nisi. Etiam vitae augue a sapien maximus tincidunt. Vivamus blandit, erat eu finibus vulputate, leo dui venenatis magna, nec ultricies odio risus rhoncus felis. Vestibulum sit amet mollis augue. Curabitur cursus magna erat, id lacinia leo suscipit et. Sed erat enim, molestie ut magna et, iaculis tempus eros. Donec sit amet ultrices ex. Cras ut cursus risus. Phasellus suscipit ornare elit, et sodales ligula sagittis sed. In egestas quam sit amet auctor hendrerit. Nulla ultrices odio orci, eget suscipit dui dapibus in.</p>
 </div>
 <br>
 <div id="friends" class="info">
 <center><h1>Friends</h1></center>
 <center>
 <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
 <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br><br>
 <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
 <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br><br>
 <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
 <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br><br>
 <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
 <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br><br>
 <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
 <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br><br>
 </center>
 </div>
 <br>
 <div id="ooc" class="info">
 <center><h1>Out of Character</h1></center>
 <b>∾</b> This profile is made by <a target="_blank" href="https://roleplay.chat/profile.php?user=Ellexide">Elle</a> mainly for Alessandro Lupi but it's free for anyone to use.<br>
 <b>∾</b> OOC bullet.<br>
 <b>∾</b> OOC bullet.<br>
 <b>∾</b> OOC bullet.<br>
 <b>∾</b> OOC bullet.<br>
 <b>∾</b> OOC bullet.<br>
 <b>∾</b> OOC bullet.<br>
 <b>∾</b> OOC bullet.<br>
 </div>
 </div>
 </div>
 </div>

 <!--NAVIGATION BUTTONS-->
 <a href="#ooc" class="nav one"></a>
 <a href="#friends" class="nav two"></a>
 <a href="#bio" class="nav three"></a>
 <a href="#stats" class="nav four"></a>


 <!--PLEASE DO NOT REMOVE THIS CREDIT-->
 <div id="credit"><a target="_blank" href="https://www.copyrighted.com/work/2PKqDybNAqyK7xoN">© 2018</a> || <a target="_blank" href="https://roleplay.chat/profile.php?user=Ellexide">Ellexide Codes</a></div>
 </div>
 </div>