DARK WITCH [COMPLETE]

<style type="text/css">
@import url(//fonts.googleapis.com/css?family=Cookie|Homemade+Apple|Satisfy|Josefin+Slab|Overlock|Antic+Slab|Prata|Pacifico);

body{
background-color: #fff;
background-image: linear-gradient(to top, #ded2c6, #ac9ec5, #7067a4, #4f427a, #471ABA, #2B0F71);
background-position: bottom;
background-size: 110%;
background-repeat:no-repeat;
}

#whole {
position:fixed;
left:0px;
right: 0px;
top: 0px;
bottom: 0px;
}

#overlay {
background: url('https://i.pinimg.com/originals/17/aa/40/17aa40cc5530dfb653e172cbe086f6ee.gif');
z-index: -1;
position: absolute;
background-size: 10.2%;
left: 0px; top: 0px; right: 0px; bottom: 0px;
}

::-webkit-scrollbar-track {background-color:;}
::-webkit-scrollbar-thumb {background-color:;}
::-webkit-scrollbar {width:0px;height:0px;}

#render1 {
position: absolute;
left: 127.3vh;
height: 150vh;
width: 95vh;
background-color: transparent;
border-radius: 0%;
background-image: url('https://cdn.discordapp.com/attachments/724949383744979026/744682555617443950/ezgif-7-70d7c1adcd1c.png');
bottom: -50vh;
background-repeat: no-repeat;
z-index: 5;
}

#tab1 {
position: absolute;
z-index: 5;
left: 6.4vh;
bottom: 75.2vh;
background-color: transparent;
border-radius: 0%;
background-image: url('https://i.pinimg.com/originals/6f/02/80/6f0280219049121f3f9c7a1b6b4206b5.gif');
background-repeat: no-repeat;
background-size: 100%;
height: 55px;
width: 55px;
opacity: 1;
}

#tab2 {
position: absolute;
z-index: 5;
left: 6.4vh;
bottom: 54.6vh;
background-color: transparent;
border-radius: 0%;
background-image: url('https://i.pinimg.com/originals/6f/02/80/6f0280219049121f3f9c7a1b6b4206b5.gif');
background-repeat: no-repeat;
background-size: 100%;
height: 55px;
width: 55px;
opacity: 1;
}

#tab3 {
position: absolute;
z-index: 5;
left: 6.4vh;
bottom: 34.2vh;
background-color: transparent;
border-radius: 0%;
background-image: url('https://i.pinimg.com/originals/6f/02/80/6f0280219049121f3f9c7a1b6b4206b5.gif');
background-repeat: no-repeat;
background-size: 100%;
height: 55px;
width: 55px;
opacity: 1;
}

#tab4 {
position: absolute;
z-index: 5;
left: 6.4vh;
bottom: 13.6vh;
background-color: transparent;
border-radius: 0%;
background-image: url('https://i.pinimg.com/originals/6f/02/80/6f0280219049121f3f9c7a1b6b4206b5.gif');
background-repeat: no-repeat;
background-size: 100%;
height: 55px;
width: 55px;
opacity: 1;
}

#titleunder {
position: absolute;
left: 16.2vh;
font-family: 'Cookie';
font-size: 24.28vh;
z-index: 6;
color: #a8bcb4;
letter-spacing: 4px;
opacity: 1;
bottom: 75.5vh;
}

#titletop {
position: absolute;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
left: 16.2vh;
font-family: 'Cookie';
font-size: 24.38vh;
z-index: 7;
color: transparent;
background-image: url('https://media0.giphy.com/media/jsUIl8W67ohMXGx1V8/giphy-downsized-medium.gif');
background-repeat: repeat;
background-size: ;
letter-spacing: 4px;
opacity: 1;
bottom: 75.5vh;
}

#quote {
position: absolute;
left: 62vh;
font-family: 'Homemade Apple';
font-size: 3vh;
z-index: 6;
color: #a8bcb4;
letter-spacing: 4px;
opacity: 1;
bottom: 78vh;
text-align: center;
}

#container {
z-index: 4;
position: absolute;
left: 5vw;
bottom: 7.9vh;
width: 162.6vh;
height: 79vh;
border: 4px solid #2B0F71;
background-image: url('https://www.transparenttextures.com/patterns/blizzard.png');
background-color: #7067a4;
opacity: 0.9;
}

#ooc {
position: absolute;
z-index: 6;
bottom: 10.6vh;
left: 15.6vh;
border: 2px solid #2B0F71;
background-color: #471ABA;
color: #ded2c6;
font-family: 'Josefin Slab';
font-size: 13px;
padding: 3px;
overflow-y: auto;
height: 30vh;
width: 56vh;
}

#friends {
position: absolute;
z-index: 4;
bottom: 10.6vh;
left: 75.8vh;
border: 2px solid #2B0F71;
background-color: #471ABA;
color: #ded2c6;
font-family: 'Josefin Slab';
font-size: 13px;
padding: 3px;
overflow-y: auto;
height: 30vh;
width: 56vh;
}

.frbox {
width: 21vw;
height: 12vh;
margin: 20px;
float: left;
margin-top: 5px;
margin-bottom: 25px;
background-color: #7067a4;
}

.frbox img {
position: absolute;
width: 5vw;
height: 10.6vh;
z-index:6;
border-radius: 50%;
border: 10px solid #7067a4;
box-shadow:1px 1px 10px #a8bcb4;
margin-top: -7px;
right: 24px;
}

.desc {
position: absolute;
margin-left: 8px;
margin-right: 10px;
margin-top: 8px;
margin-bottom: 2px;
height: 8.8vh;
width: 16.5vw;
float: center;
border: 1px solid #2B0F71;
background-color: #2B0F71;
color: #fff;
font-size: 10px;
font-family: 'Antic Slab';
padding: 3px;
overflow-y: auto;
}

#headcanons {
position: absolute;
z-index: 4;
bottom: 44vh;
left: 92.4vh;
border: 2px solid #2B0F71;
background-color: #471ABA;
color: #ded2c6;
font-family: 'Josefin Slab';
font-size: 14px;
line-height: 17px;
padding: 3px;
overflow-y: auto;
height: 30vh;
width: 22vw;
}

#rplog {
position: absolute;
z-index: 4;
bottom: 44vh;
left: 49.3vh;
border: 2px solid #2B0F71;
background-color: #471ABA;
color: #ded2c6;
font-family: 'Josefin Slab';
font-size: 15px;
line-height: 17px;
padding: 3px;
overflow-y: auto;
height: 30vh;
width: 39vh;
}

#aesthetic {
position: absolute;
z-index: 4;
bottom: 44vh;
left: 15.6vh;
border: 2px solid #2B0F71;
background-color: #471ABA;
background-image: url('');
border-radius: 0%;
padding: 3px;
overflow-y: auto;
height: 30vh;
width: 29.45vh;
color: #ded2c6;
font-family: 'Josefin Slab';
font-size: 13px;
overflow-y: auto;
}

.imgbox {
width: 23.9vh;
height: 12vh;
margin: 16px;
float: left;
margin-top: 3px;
margin-bottom: 2px;
background-color: #7067a4;
border: 2px solid #2B0F71;
}

h1 {
font-family: 'Pacifico';
font-size: 2vh;
color: #;
text-transform: ;
letter-spacing: 3px;
border-bottom: 0px solid #;
background-image: url('https://www.transparenttextures.com/patterns/ecailles.png');
background-color: #7067a4;
background-repeat: repeat;
text-align: center;
margin-right: 0px;
margin-left: 0px;
line-height: 14px;
margin-top: 1px;
margin-bottom: 8px
}

b {
color: #FFF57D;
font-family: 'Prata';
letter-spacing: 1px;
font-size: 10px;
}

a {
color: #d36cb2;
font-family: 'Satisfy';
text-decoration: none;
}

a:hover {
font-family: 'Satisfy';
text-decoration: none;
color: yellow;
}

i {
color: #3D9BED;
}

</style>

<div id="whole" oncontextmenu="return false;">
<div id="overlay"></div>
<div id="render1"></div>
<div id="titleunder">Indigo Morelli</div>
<div id="titletop">Indigo Morelli</div>
<div id="quote">"Short Quote Life!"</div>
<div id="container"></div>
<a href="#2"><div id="tab1"></div></a>
<a href="#3"><div id="tab2"></div></a>
<a href="#4"><div id="tab3"></div></a>
<a href="#1"><div id="tab4"></div></a>
<div id="ooc">
<h1>Out of Character</h1>
<B>00.</B> This code was made by <a target="_blank" href="https://roleplay.chat/profile.php?user=Sailor+Chuu" target="_blank">Chuu</a> for the exclusive use of [CHARACTER NAME]. Do <i>not</i> steal!
</div>
<div id="friends">
<h1>Connections</h1>
<div class="frbox"><a target="_blank" href="URLHERE"><img src="https://i.pinimg.com/originals/88/f4/ba/88f4ba4d2406eaadfd5351c9e36d81cb.gif"></a><div class="desc">Words.</div></div>
<div class="frbox"><a target="_blank" href="URLHERE"><img src="https://i.pinimg.com/originals/88/f4/ba/88f4ba4d2406eaadfd5351c9e36d81cb.gif"></a><div class="desc">Words.</div></div>
<div class="frbox"><a target="_blank" href="URLHERE"><img src="https://i.pinimg.com/originals/88/f4/ba/88f4ba4d2406eaadfd5351c9e36d81cb.gif"></a><div class="desc">Words.</div></div>
<div class="frbox"><a target="_blank" href="URLHERE"><img src="https://i.pinimg.com/originals/88/f4/ba/88f4ba4d2406eaadfd5351c9e36d81cb.gif"></a><div class="desc">Words.</div></div>
</div>
<div id="rplog"><h1>RP Updates</h1>

</div>
<div id="aesthetic"><h1>Gallery</h1>
<img src="https://i.pinimg.com/originals/88/f4/ba/88f4ba4d2406eaadfd5351c9e36d81cb.gif" class="imgbox">
<img src="https://i.pinimg.com/originals/88/f4/ba/88f4ba4d2406eaadfd5351c9e36d81cb.gif" class="imgbox">
<img src="https://i.pinimg.com/originals/88/f4/ba/88f4ba4d2406eaadfd5351c9e36d81cb.gif" class="imgbox">
<img src="https://i.pinimg.com/originals/88/f4/ba/88f4ba4d2406eaadfd5351c9e36d81cb.gif" class="imgbox">
<img src="https://i.pinimg.com/originals/88/f4/ba/88f4ba4d2406eaadfd5351c9e36d81cb.gif" class="imgbox">
<img src="https://i.pinimg.com/originals/88/f4/ba/88f4ba4d2406eaadfd5351c9e36d81cb.gif" class="imgbox">
<img src="https://i.pinimg.com/originals/88/f4/ba/88f4ba4d2406eaadfd5351c9e36d81cb.gif" class="imgbox">
<img src="https://i.pinimg.com/originals/88/f4/ba/88f4ba4d2406eaadfd5351c9e36d81cb.gif" class="imgbox">

</div>
<div id="headcanons">
<div style="height:30vh;overflow-y:hidden;">
<a name="1"></a>
<div style="height:29.95vh;overflow:auto;">
<div style="margin: 0 auto;width:21.5em;">
<h1>Statistics</h1>
<b>Name:</B> <font style=float:right>Answer.</font>
<br><B>Nickname(s):</B> <font style=float:right>Answer.</font><br>
<B>Alias:</B> <font style=float:right>Answer.</font><br>
<B>Age:</b> <font style=float:right>Answer.</font><br>
<B>D.o.B.:</b> <font style=float:right>Answer.</font><br>
<b>Zodiac:</b> <font style=float:right>Answer.</font><br>
<B>P.o.B.:</b> <font style=float:right>Answer.</font><br>
<B>Gender:</b> <font style=float:right>Female.</font><br>
<B>Species:</b> <font style=float:right>Answer.</font><br>
<B>Orientation:</b> <font style=float:right>Heterosexual.</font><br>
<B>Marital:</B> <font style=float:right>Single.</font><br>
<B>Alignment:</b> <font style=float:right>Answer.</font><br>
<B>Occupation:</b> <font style=float:right>Answer.</font><br>
<B>Partner:</B> <font style=float:right><a target="_blank" href="https://roleplay.chat/profile.php?user=" target="_blank">Name</a>.</font>
<h1>Appearance</h1>
<B>Hair Color:</b> <font style=float:right>Answer.</font><br>
<B>Eye Color:</B> <font style=float:right>Answer.</font><br>
<B>Skin Tone:</b> <font style=float:right>Answer.</font><br>
<B>Height:</b> <font style=float:right>Answer.</font><br>
<B>Weight:</b> <font style=float:right>Answer.</font><br>
<B>Build:</b> <font style=float:right>Answer.</font><br>
<B>Blood Type:</b> <font style=float:right>Answer.</font>

</div></div>

<a name="2"></a>
<div style="height:30vh;overflow:auto;">
<div style="margin: 0 auto;width:21.5em;">
<h1>Abilities</h1>

</div></div>

<a name="3"></a>
<div style="height:30vh;overflow:auto;">
<div style="margin: 0 auto;width:21.5em;">
<h1>Headcanons</h1>

</div></div>

<a name="4"></a>
<div style="height:30vh;overflow:auto;">
<div style="margin: 0 auto;width:21.5em;">
<h1>History</h1>

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