Mira

<style>
#musicslice{
position: fixed;
top: 20px;
right: 20px;
height: 50px;
width: 50px;
border: 2px solid #3;
overflow: hidden;
-webkit-transition: all 1s;
transition: all 1s;
box-shadow: 1px 1px 3px #f99403;
opacity: .8;
z-index: 10;
zoom: 150%;}

#musicslice:active{
-webkit-transition: all 0s;
transition: all 0s;
box-shadow: 0px 0px 0px black;}

#musiccover{
position: absolute;
left: 0px;
top: 0px;
height: 50px;
width: 50px;
background-image:url(https://bestanimations.com/media/daisies/1580022641daisies-falling-gif.gif);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center bottom -2px;
 background-color: transparent;
}

#musichidden{
position: absolute;
left: -10px;
top: 0px;
height: 50px;
width: 50px;
zoom: 180%;
opacity: 0;
z-index: 1;
overflow: hidden;}
</style>





<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans+SC');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
body {
 background-color: #000;
 background-image: url("https://thumbs.gfycat.com/DeadlyDimpledAfricanjacana-size_restricted.gif");
background-position: center;
background-repeat: no-repeat;
background-size: 88%}
::-webkit-scrollbar
{
 width: 0px;
 background-color: transparent;
}
a {
 color: indigo;
 text-decoration: none;
}
b{
 font-size: inherit;
 letter-spacing: 1px;
}

#box {
 position: fixed;
 left: 0px;
 right: 0px;
 top: 0px;
 bottom: 0px;
 margin: auto;
 height: 550px;
 width: 850px;
 background: none;
 padding: 7px;
 border-radius: 10px;
}

#title {
 position: absolute;
 top: -40px;
 right: 70px;
 margin: auto;
 font-size: 80px;
 color: maroon;
 line-height: 1;
 font-family: 'Permanent Marker', cursive;
 text-shadow: 1.5px 1.5px 10px #000;
}

#smol{
 height: 160px;
 width: 140px;
 position:absolute;
 background: url('https://cdn.discordapp.com/attachments/768555703203528724/930427803298578462/895e35b42995b13e694434e1b5e37bff.png');
 background-size: 100% 100%;
 left: 30px;
 top: 50px;
 border-radius: 100px;
 box-shadow: 2px 2px 15px #161616;
}

#red{
 height: 150px;
 width: 170px;
 position:absolute;
 background: url('https://cdn.discordapp.com/attachments/768555703203528724/930825298721771640/tumblr_inline_pmblvyfoZR1rsmi7p_540.png');
 background-size: 110% 100%;
 right: -10px;
 top: 50px;
 border-radius: 100px;
 box-shadow: -2px 2px 15px #161616;
}

#smol2{
 height: 140px;
 width: 140px;
 position:absolute;
 background: url('https://cdn.discordapp.com/attachments/768555703203528724/930468837248335882/16ae883f9d6545f92a8849d57ec77c73.png');
 background-size: 105%;
 background-position: -5 -25;
 left: 30px;
 top: 210px;
 border-radius: 100px;
 box-shadow: 2px 2px 15px #161616;
}


#red2{
 height: 160px;
 width: 150px;
 position:absolute;
 background: url('https://cdn.discordapp.com/attachments/768555703203528724/931030257748832286/4d808a4be6a725c2738395b1f7ca0d9f.png');
 background-size: 100% 100%;
 background-position: top: 0%;
 right: 30px;
 top: 210px;
 border-radius: 100px;
 box-shadow: -2px 2px 15px #161616;
}

#smol3{
 height: 140px;
 width: 140px;
 position:absolute;
 background: url('https://cdn.discordapp.com/attachments/768555703203528724/930513026937937930/eb821dacd1ce9558ff5544d79006317f.png');
 background-size: 100%;
 left: 30px;
 bottom: 50px;
 z-index:10;
 border-radius: 100px;
 box-shadow: 2px 2px 15px #161616;
}

#red3{
 height: 140px;
 width: 140px;
 position:absolute;
 background: url('https://cdn.discordapp.com/attachments/768555703203528724/930659876009566208/unknown.png');
 background-size: 100% 100%;
 right: 30px;
 bottom: 50px;
 border-radius: 100px;
 box-shadow: -2px 2px 15px #161616;
}

#top{
 opacity:1;
 height: 177px;
 width: 352px;
 padding:7px;
 background: url('https://cdn.discordapp.com/attachments/768555703203528724/930826277521334332/8605dd662006cade2031f217e654fc95bbfcd613.png');
 background-size: 90%;
background-repeat: no-repeat;
 background-position: -45 0;
background-color: #000;
 position:absolute;
 left:200px;
 top:50px;
 overflow:auto;
 color: black;
 line-height: 1;
 font-size:12px;
 font-family: 'Alegreya Sans sc', cursive;
 text-align: justify;
 border-radius: 25px 25px 0px 0px;
 box-shadow: 0px 0px 15px #161616;
}

#one{
 opacity:0;
 height: 177px;
 width: 452px;
 padding:7px;
 background: url('https://cdn.discordapp.com/attachments/768555703203528724/930976437677195364/4da9845a621d56d674bbbb381be48edc.png');
 background-size: 90%;
 background-position:  5-10;
 position:absolute;
 left:200px;
 bottom:50px;
 z-index:10;
 animation: one 0s;
 animation-fill-mode: forwards;
 transition: ease 1s linear 1s;
 overflow:auto;
 color: black;
 line-height: 1;
 font-size:12px;
 font-family: 'Alegreya Sans sc', cursive;
 text-align: justify;
 border-radius: 0px 0px 25px 25px;
 box-shadow: 0px 0px 15px #161616;
}

@keyframes one{
0%{
 opacity:0;
}

90%{
 opacity:0;
}

100%{
 opacity:1;
}
}

#one:target{
 opacity:1;
 z-index:11;
}


#two, #three, #four, #five{
 opacity:0;
 height: 177px;
 width: 452px;
 padding:7px;
 background-color: #e9e9e9;
 position: absolute;
 left:200px;
 bottom:50px;
 z-index:9;
 color:#767682;
 transition: ease 1s linear 1s;
 line-height: .95;
 font-size:12px;
 font-family: 'Alegreya Sans SC', cursive;
 text-align: justify;
 overflow: auto;
 border-radius: 0px 0px 25px 25px;
}

#two:target, #three:target, #four:target, #five:target{
 opacity:1;
 z-index:11;
}

#navi{
 width:466px;
 height:82px;
 top:241px;
 left:200px;
 position:absolute;
 background: ;
 z-index:99;
 font-family: 'Alegreya Sans sc', cursive;
 text-align: center;
 font-size: 13;
 opacity:0;
 animation:navi 0s;
 animation-fill-mode: forwards;
 box-shadow: 0px 0px 15px #161616;
}

@keyframes navi{
0%{
 opacity:0;
}
90%{
 opacity:0;
}
100%{
 opacity:1;
}
}

#navi a{
 width:45px;
 height:45px;
 margin-top: 15px;
 margin-left:38px;
 float: left;
 background: url('https://cdn.discordapp.com/attachments/852359440543645718/932112581701804052/Deco_Flower_PNG_Transparent_Clip_Art_Image.png');
 background-color: lightgoldenrodyellow;
background-repeat: no-repeat;
 background-size: 100%;
 border:solid 1px magenta;
 display: inline-block;
 transform: rotate(225deg);
}
#cred{
 height: 35px;
 width: 35px;
 position:absolute;
 filter: grayscale(1);
 right: 0px;
 bottom: 0px;
}

</style>
<div id="box">
<div id="title">
<i>

</i>
</div>
<div id="top">
</div>
<div id="one">
</div>
<div id="two">
<span style="float: left;"><b>Name</b></span><span style="float: right">Mirabel (Mira)</span><br>
<span style="float: left;"><b>Alias</b></span><span style="float: right">None yet</span><br>
<span style="float: left;"><b>Age</b></span><span style="float: right">Twenty-five</span><br>
<span style="float: left;"><b>Height</b></span><span style="float: right">Five-foot-five</span><br>
<span style="float: left;"><b>Relationship</b></span><span style="float: right"><a target="_blank" href="https://roleplay.chat/profile.php?user=">Single</a></span><br>
<span style="float: left;"><b>Orientation</b></span><span style="float: right">Demi/pan</span><br>
<span style="float: left;"><b>Occupation</b></span><span style="float: right">Petal Dancer</span><br>

<br><br>
<h2>History</b></h2>
 Mirable was born mute making communication hard to deal with but this never stopped this free spirit from being playful and good-tempered. All in all her life was rather amazing and while her family wasn't overly well off they were still in a good place. She enjoyed reading about the Language of Flowers to help with communicating to people when it comes to feelings and soon all of the information gathered she and her parents gathered up various seeds overtime to begin a garden project, to plant as many flowers as their yard could handle.
<br><br>
It was colorful and so many different wonderfully floral scents attracted all sorts of birds, insects, and other various forms of nature and oh how did it make the growing child smile and laugh (yes, she's mute but mutes can still laugh). Then three years pass when the youthful Mirabel turns fifteen years old when it happened. All of the blooms growing within the family garden reacted to her presence.
<br><br>

When Mira approached them they hummed with a dull sheen. Blue eyes shift to dark pink with a gem ghosting the center of her forehead. Mira's parents rushed outside after looking through the window to check in on their daughter. They knew what this meant upon witnessing the reactions in both their plants and daughter. Both pride and fear bloomed within them for they knew what this meant. It was time to send Mira off for training and then off to go where ever she is needed.
<br><br>
Training in the ways of dance and honing those abilities was no easy task. Maintaining her transformed state was even harder. Communication was the most difficult. Unable to speak so written communication was often the best way to speak to her but if anything else was asked? A flower was given to the person. The kind of flower and color often held the answers to questions asked. If anything, Mira always found the language of them to be easy to understand and in-kind spoken.
<br><br>
Many years came and went at this point and Mira is now in her late twenties, she finished training with the other dancers and was sent away to aid in conflicts and to keep the peace where ever it was needed. Life has become interesting for her as of late. Where shall it go next?
<h3>Updates</h3>
Mirabel stumbled upon this really weird arena area! How overjoyed she was upon stumbling into such a new and odd place! So many people around meant new chances to make friends! Though she was soon mortified upon learning that this place caters to casual sex and how it is wagered before entering the arena...Needless to say, there is little to no chance that she will be entering the arena any time soon. Maybe if the wager is not lewd then it might be okay. Nothing is all bad! She stumbled upon a person named Theo and the two stuck up a deal. He is to give her an item in return he gets to study her abilities.
</div>
<div id="three">
Petal Dancers<hr>
 These people known as Petal Dancers have no known origin but they are often born at random. When becoming one, they are given the title of Prince or Princess but this holds no royal standing as it is due to how they are presented. These people are born with the ability to use flora to either calm and soothe the masses or boost their morale with gentle scents, petals, the creation of blooms, and their dancing. On the opposite side of the coin, they can utilize their dancing with the ability to control flowers (scent, petals, and creation) in combination with their skills in dancing for defensive measures and to aid support in times of war.
<br><br>
There are ways to tell who is born as one or not, while it isn't apparent at birth or straight away as there are late bloomers. One of the ways is a very strange interest in flowers and how they react around a person. If there are flowers around and they start to glow? Then it is a sign, another one would be a sudden shift in eye color and the last? If their forehead has a jewel just hardly manifesting. This means that they have to be taken away to get training to control their abilities.
<br><r>
<h3>
</div>
<div id="four">
tab four<hr>
<b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr>
</div>
<div id="five">
tab five<hr>
<b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr>
</div>
<div id="red">
</div>
<div id="smol">
</div>
<div id="red2">
</div>
<div id="smol2">
</div>
<div id="red3">
</div>
<div id="smol3">
</div>
<div id="navi">
<a href="#one"> </a>
<a href="#two"> </a>
<a href="#three"> </a>
<a href="#four"> </a>
<a href="#five"></a>
</div>
</div>
</div>
<div id="cred">
<a target="_blank" href="https://pastebin.com/u/notjustanotter"><img src="https://i.imgur.com/6nVB66x.png" title="if you remove this you're a terrible person" id="cred"></a>
</div>

<div id="musicslice" title="What Angel Wakes Me (Pulse Remix">
<div id="musiccover">
</div>
<div id="musichidden">
<audio controls src="https://od.lk/s/MTNfMTY2MzMzNjBf/Pulse%20-%20FINAL%20FANTASY%20XIV%20Remix%20Album%20-%20What%20Angel%20Wakes%20Me.mp3." id="mus" loop=3></audio>
</div>