Wiccode

<style>
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Pacifico');
</style>
<style type="text/css">
html, body {
background: #F6F1EE;
background-image:url("https://i.pinimg.com/564x/c2/ff/f8/c2fff8fb8b975de8dd473654e11d5dc0.jpg");
background-size:auto 70%;
background-repeat:no-repeat;
background-position:bottom right;
color:#BFD4EF;
font-family: 'Josefin Sans', sans-serif;
text-align:center;
font-size:13;
margin:0px;
}

#profile {
background-color: transparent;
border: 0px ;
}

.pfor {display: none}

::-webkit-scrollbar-button:vertical:{
background-color: #FFFFFF;}

::-webkit-scrollbar-thumb:vertical {
background-color:#FFFFFF;
height:0px;}

::-webkit-scrollbar-thumb:horizontal {
background-color:#090909;
height:0px;}

::-webkit-scrollbar {
height:0px;
width:0px;
background-color:#090909;}

#navbar {
position:absolute;
top:30%;
left:12%;
width:8%;
height:60%;
z-index:0;
background-color:#000;
background-image:url('https://i.pinimg.com/originals/d3/e8/d7/d3e8d7f8218befd1b8e08b4ac39ce0fb.gif');
background-size:auto 100%;
background-position:top center;
}


.button {
position:absolute;
height:8%;
width:6%;
left:13%;
background-color:transparent;
z-index:2;
background-image:url('https://cdn.discordapp.com/attachments/422890946338750495/570716911092891670/butterfly_copy.png');
background-size:100% auto;
background-position:0% 50%;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
}

.button:hover {filter:drop-shadow(0px 0px 5px #fff);}

#one {top:40%;}
#two {top:50%;}
#three {top:60%;}
#four {top:70%;}
#five {top:80%;}

#box {
position:absolute;
top:45%;
left:25%;
width:40%;
height:40%;
background-color:#000;
background-image:url('https://data.whicdn.com/images/290625235/original.gif');
background-repeat:repeat-x;
background-size:100% auto;
background-position:bottom center;
z-index:1;
}

#boxbox {
position:absolute;
height:76%;
width:86%;
top:12%;
left:7%;
background-color:#221243;
z-index:1;
}

#boxboxbox {
position:absolute;
height:100%;
width:69%;
top:0%;
left:1%;
background-color:#221243;
z-index:2;
overflow:scroll
}

.tab {
position:absolute;
height:100%;
width:69%;
top:0%;
left:70%;
background-color:#221243;
z-index:3;
opacity:0;
overflow:scroll;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
}

.tab:target {
left:1%;
opacity:1;
}

#contact {
position:absolute;
width:84%;
height:20%;
left:8%;
}

h1 {font-family: 'Pacifico', cursive;text-decoration:bold;text-align:center;text-shadow:0px 0px 2px #C2DEEC;color:#A9A8C8;}
b {color:#824982;}
i {color:#759EBA;}
a {text-decoration:underline;color:#CC30CC;}
</style>
<a href="#tab1"><div id="one" class="button"></div></a>
<a href="#tab2"><div id="two" class="button"></div></a>
<a href="#tab3"><div id="three" class="button"></div></a>
<a href="#tab4"><div id="four" class="button"></div></a>
<a href="#reset"><div id="five" class="button"></div></a>

<img src="https://cdn.discordapp.com/attachments/535995267585933352/570679204170039326/birdsit_copy.png" style="position:absolute;height:50%;top:0%;left:0%;z-index:1;">
<div id="navbar"></div>
<div id="box"><img src="https://cdn.discordapp.com/attachments/422890946338750495/570694794024583260/tumblr_o9cdxa21IR1r3thx5o1_1280.png" style="position:absolute;height:100%;bottom:-13.3%;left:60%;z-index:4;">
<div id="boxbox">

<div id="tab1" class="tab"><h1>According to All</h1>known laws of aviation, a bee should not be able to fly</div>

<div id="tab2" class="tab"><h1>Its Wings Are</h1>too small to get its fat little body off the ground. The bee, of course, flies anyway. Because bees don’t care what humans think is impossible.</div>

<div id="tab3" class="tab">
<a href="https://roleplay.chat/profile.php?user=Jon+Harte" target="_blank"><span title="Jon, the best magic dick in all the land"><div id="contact" style="top:5%;background-image:url('https://cdn.discordapp.com/attachments/535995267585933352/570734046137548806/unknown.png');background-size:100% auto; background-position:0% 40%;"></div></span></a>

<a href="" target="_blank"><span title="Someone Else"><div id="contact" style="top:27%;background-image:url('https://www.sampsonmorrisgroup.com/wp-content/uploads/2018/07/PF-Headshot-Placeholder-1.jpg');background-size:100% auto;background-position:0% 60%;"></div></span></a>

<a href="" target="_blank"><span title="Someone Else"><div id="contact" style="top:49%;background-image:url('https://www.sampsonmorrisgroup.com/wp-content/uploads/2018/07/PF-Headshot-Placeholder-1.jpg');background-size:100% auto;background-position:0% 60%;"></div></span></a>

<a href="" target="_blank"><span title="Someone Else"><div id="contact" style="top:71%;background-image:url('https://www.sampsonmorrisgroup.com/wp-content/uploads/2018/07/PF-Headshot-Placeholder-1.jpg');background-size:100% auto;background-position:0% 60%;"></div></span></a>
</div>

<div id="tab4" class="tab"><h1>OOC, Probably</h1>she's totally not a witch</div>


<div id="boxboxbox"><h1>Black Magic Woman</h1>
<font style=float:left>I got a black magic woman</font><font style=float:right>Got a black magic woman
</font><br>
<font style=float:left>Yes, I got a black magic woman</font><font style=float:right>Got me so blind I can't see
</font><br>
<font style=float:left>But she's a black magic woman</font><font style=float:right>Tryin' to make a devil outta me</font><br>
<font style=float:left>Stat</font><font style=float:right>Stat</font><br><br><b>this is bold</b><br><i>this is italic</i><br><a href="" target="_blank">this is a link</a></div></div></div>