La Brava

<style>
@import url('https://fonts.googleapis.com/css?family=Damion|Great+Vibes|Handlee&display=swap');

body {
  background-color: #ce6593;
	background-image: url('');
	background-position: fixed;
 background-size: 70%;
	background-repeat:no-repeat;
	background-position: top center;
 	font-family: ;
	color: #7c7c7c;
 	text-shadow:0px 0px 3px #000;

}

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

::-webkit-scrollbar-thumb:vertical {
background-color:#transparent;
height:150px;}

::-webkit-scrollbar-thumb:horizontal {
background-color:#transparent;
height:60px;}


::-webkit-scrollbar {
height:60px;
width:5px;
background-color:#transparent;}

h1{border-bottom: 1px solid #fff; text-align: center; font-size: 32px; font-family: 'Great Vibes', cursive; color: #fff;}

div.fixed {
 position: fixed;
 top: 50%;
 left: 40%;
 width: 300px;
 height: 400px;
 border: 2;
 padding: 20px;
 color: #fff;
 overflow: scroll;
 overflow-x: hidden;
 font-family: 'Damion', cursive;
 font-size: 20px;
border: 2px solid #7c1e28;
 border-radius: 50px;
 box-shadow: -5px 5px 10px #000;
background-color: #000;
opacity: 0;
animation: textup 2s;
 animation-delay: 12.3s;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
}

div.fixed2 {
 position: fixed;
 top: 50%;
 left: 67%;
 width: 300px;
 height: 400px;
 border: 2px;
 padding: 20px;
 color: #fff;
overflow: scroll;
 overflow-x: hidden;
 font-family: 'Damion', cursive;
 font-size: 20px;
border: 2px solid #7c1e28;
 border-radius: 50px;
 box-shadow: -5px 5px 10px #000;
background-color: #000;
opacity: 0;
animation: textup 2s;
 animation-delay: 12s;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
}

div.title {
 position: fixed;
 left: 55%;
 width: 800px;
 height: 500px;
 font-size: 70px;
 color: #eee;
 text-shadow: 5px 5px 5px #000;
 font-family: 'Great Vibes', cursive;
opacity: 0;
animation: textup2 2s;
 animation-delay: 11.5s;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
}

div.title2 {
 position: fixed;
 left: 33%;
 top: 40%;
 width: 800px;
 height: 500px;
 font-size: 90px;
 color: #eee;
 text-shadow: 5px 5px 5px #000;
 font-family: 'Great Vibes', cursive;
opacity: 0;
animation: textup3 10s;
 animation-delay: 0s;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
}


div.gentle{
 position: fixed;
 top: 10%;
 left: 10%;
 background-image:url(https://i.ibb.co/KsrySy4/LaBrava.png);
background-size: 25%;
background-repeat: no-repeat;
 width: 100%;
 height: 100%;
 opacity: 0;
 z-index: -2;
 filter:contrast(%);
 animation: gentleup 2s;
 animation-delay: 11s;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
}


div.bravaheart1{
 position: fixed;
 background-image:url(https://i.ibb.co/DW8m5Zw/Brava-heart-1.png);
background-size: 40%;
 background-repeat: no-repeat;
 width: 100%;
 height: 100%;
 opacity: 0;
 z-index: -2;
 filter:contrast(%);
 animation: heart1 8s;
 animation-delay: 0s;
 animation-timing-function: ease-in;
 animation-iteration-count: 1;
}

div.bravaheart2{
 position: fixed;
 background-image:url(https://i.ibb.co/7vb6dKq/Brava-Heart-2.png);
background-size: 40%;
background-repeat: no-repeat;
 top: 0%;
 left: 0%;
 width: 100%;
 height: 100%;
 opacity: 0;
 z-index: -2;
 filter:contrast(%);
 animation: heart2 8s;
 animation-delay: .5s;
 animation-timing-function: ease-in;
 animation-iteration-count: 1;
}

div.bravaheart3{
 position: fixed;
 background-image:url(https://i.ibb.co/R6GJjzZ/Brava-Heart-3.png);
background-size: 40%;
background-repeat: no-repeat;
 top: 70%;
 left: 71%;
 width: 100%;
 height: 100%;
 opacity: 0;
 z-index: -2;
 filter:contrast(%);
 animation: heart3 8s;
 animation-delay: 1s;
 animation-timing-function: ease-in;
 animation-iteration-count: 1;
}

@keyframes heart1 {
 0% {top: 100%; left: 40%; opacity: 1;  width: 5%; height: 30%; }

 100% {top: -100%; left: 40%; }

}

@keyframes heart2 {
 0% {top: 100%; left: 70%; opacity: 1;  width: 5%; height: 30%; }

 100% {top: -100%; left: 70%; }

}

@keyframes heart3 {
 0% {top: 100%; left: 10%; opacity: 1;  width: 5%; height: 30%; }

 100% {top: -100%; left: 10%; }

}


@keyframes gentleup {
 0% {  opacity: 0; top: 150%; }

 100% { opacity: 1; top: 20%; }

}

@keyframes textup {
 0% {  opacity: 0; top: 150%; }

 100% { opacity: 1; top: 20%; }

}

@keyframes textup2 {
 0% {  opacity: 0; top: 150%; }

 100% { opacity: 1; top: 4%; }

}

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

}

</style>
<body>

<div class="bravaheart1">

</div>

<div class="bravaheart2">

</div>

<div class="bravaheart3">

</div>

<div class="title">
La Brava
</div>

<div class="title2">
♥ I love you ♥
</div>

<div class="gentle">

</div>

<div class="fixed">
<h1>Stats</h1>
<span style="float:left;"><b>Name</b></span><span style="float:right;">Manami Aiba</span><br>
<span style="float:left;"><b>Gender</b></span><span style="float:right;">Female</span><br>
<span style="float:left;"><b>Age</b></span><span style="float:right;">22</span><br>
<span style="float:left;"><b>Race</b></span><span style="float:right;">Quirked Human</span><br>
<span style="float:left;"><b>Hero Name</b></span><span style="float:right;">La Brava</span><br><br>

<span style="float:left;"><b>Height</b></span><span style="float:right;">3'8"</span><br>
<span style="float:left;"><b>Weight</b></span><span style="float:right;">100lbs</span><br>
<span style="float:left;"><b>Eyes</b></span><span style="float:right;">Pink with Purple rings</span><br>
<span style="float:left;"><b>Hair</b></span><span style="float:right;">Magenta</span><br>
<span style="float:left;"><b>Orientation</b></span><span style="float:right;">Straight</span><br>
<span style="float:left;"><b>Relationship</b></span><span style="float:right;"><a target="_blank" href="">---</a></span><br>
<span style="float:left;"><b>Affiliation</b></span><span style="float:right;">---</span><br><br><br>

<h1>Quirk</h1>

<span style='font-size: 24px;'><center><u>Love</u></center></span><br><br>
Love allows Manami to power up a target by confessing her feelings for them.<br><br>

The more intense Manami's love is, the stronger the power transmitted to the target is. This empowering makes the target physically stronger and faster than usual.<br><br>

Manami and Danjuro refer to this empowered state as "Lover Mode". Heart-shaped smoke appears around the body of the target when "Lover Mode" is active.<br><br>
  <span style='font-size: 24px;'><center><u>Weakness</u></center></span><br><br>

Manami only has the ability to activate Love once every 24 hours, thus making it an ace in the hole that is best used strategically.
</div>



<div class="fixed2">

<h1>Story</h1>
TBA<br>
<h1>Headcanons</h1>
TBA<br>
<h1>OOC</h1>
1. MHA Canon<br>
2. Handmade code. Want one? Ask.<br>
3. DM Friendly.<br>
4. Snowballer.<br>
5. Smut reserved.<br>

</div>

</body>
</body>