Nitocris Code

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Ibarra+Real+Nova&display=swap');


.pfor {display: none;}
body {background-color: #FBEACC;
background-repeat: no-repeat;
background-size: 1800px 900px;
}

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

.horizontalLine{
background-color: #596288;
width: 100%;
height: 100px;
position: absolute;
top: 350px;
right: 0px;
margin: 0px;
z-index: -1;
border-color: #596288;
}

.verticalLine{
background-color: #596288;
height: 100%;
width: 100px;
position: absolute;
right: 350px;
top: 0px;
margin: 0px;
z-index: -1;
border-color: #596288;
}


.button1{
 background: #1E2D4A;
 padding: 10px;
 width: 20px;
 height: 10px;
position: absolute;
top: 310px;
right: 460px;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}

.button1:hover{
 background: #596288;
}

.button2{
 background: #1E2D4A;
 padding: 10px;
 width: 20px;
 height: 10px;
position: absolute;
top: 460px;
right: 460px;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}

.button2:hover{
 background: #596288;
}

.button3{
 background: #1E2D4A;
 padding: 10px;
 width: 20px;
 height: 10px;
position: absolute;
top: 310px;
right: 300px;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}

.button3:hover{
 background: #596288;
}

.button4{
 background: #1E2D4A;
 padding: 10px;
 width: 20px;
 height: 10px;
position: absolute;
top: 460px;
right: 300px;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}

.button4:hover{
 background: #596288;
}


.tab-content,.tab-content:target~#Stats {
 display:none;
 z-index:4;
 }

.tabHolder{
background-color: #000000;
font-family: trebuchet ms;
font-size: 8pt;
position: absolute;
top: 350px;
right: 450px;
}

#tabOne:target {
 display:block;
overflow: scroll;
overflow-X: hidden;
background-color: #FBEACC;
height: 100px;
width: 400px;
font-family: 'Ibarra Real Nova', serif;
font-size: 8pt;
 }

#tabTwo:target {
 display:block;
overflow: scroll;
overflow-X: hidden;
background-color: #FBEACC;
height: 100px;
width: 400px;
font-family: 'Ibarra Real Nova', serif;
font-size: 8pt;
 }

#tabThree:target {
 display:block;
overflow: scroll;
overflow-X: hidden;
background-color: #FBEACC;
height: 100px;
width: 400px;
font-family: 'Ibarra Real Nova', serif;
font-size: 8pt;

 }

#tabFour:target {
 display:block;
overflow: scroll;
overflow-X: hidden;
background-color: #FBEACC;
height: 100px;
width: 400px;
font-family: 'Ibarra Real Nova', serif;
font-size: 8pt;
 }

#tabFive:target {
 display:block;
overflow: scroll;
overflow-X: hidden;
background-color: #FBEACC;
background-height: 100px;
background-width: 400px;
height: 100px;
width: 400px;
font-family: 'Ibarra Real Nova', serif;
font-size: 8pt;
 }

#tabOne:focus{
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;

}

.charImage {
position: absolute;
background-image: url(https://i.imgur.com/G87OgCi.png);
background-size: contain;
background-repeat: no-repeat;
left: 0px;
bottom: 0px;
height: 100%;
width: 50%;
}

.floaties{
text-align: left;
float: left; width: 30%;
}

.floaties2{
text-align: left;
float: left; width: 58%;
}

.wordGlow{
color: #000000
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}

.wordGlow:hover{
 color: #596288;
margin: 0px;
}


::-webkit-scrollbar {width: 4px;}
::-webkit-scrollbar-thumb:vertical {
height: 10px;background-color: #1E2D4A;}
::-webkit-scrollbar-thumb:horizontal {
height: 10px;background-color: #1E2D4A;border: 0px ;width: 15px;}
</style>

<div class="verticalLine">
</div>

<div class="tabHolder">
<div id="tabFive" class="tab-content">
</div>


<div id="tabOne" class="tab-content">
<font size="4px">
<div class="floaties">
Class:
<br>
True Name:
<br>
Gender:
<br>
Height:
<br>
Weight:
<br>
Source:
<br>
Alignment:
</div>

<div class="floaties2">
Caster
<br>
Nitocris
<br>
Female
<br>
162cm
<br>
51kg
<br>
Historical Fact
<br>
Lawful Good
</div>
</font>
</div>

<div id="tabTwo" class="tab-content">
<font size="3">
Caster's True Name is Nitocris, a magic queen who held the throne in the Sixth Dynasty of ancient Egypt, even if only for a short time. A person who lived around the 22nd Century BC. Strangely, she has the same name with an ancient queen of Babylon. It has been assumed that she caused all the influential men who deliberately murdered her beloved brothers to die by drowning, and then took her own life after accomplishing her revenge.
</font>
</div>

<div id="tabThree" class="tab-content">
<font size="4">
Skills
</font>
<br>
<font size="2">
<span title="Creation of a 'Temple', which is superior to a 'Workshop', becomes possible."><div class="wordGlow">Territory Creation A</div></span>

<span title="Nitocris is restricted to only being able to produce devices related to Egyptian magecraft. Many tools and devices manufactured with modern magecraft, such as golems, homunculi, miracle drugs, etc., are objects that even resembles the ones in Egyptian magecraft, but the ones in Egyptian magecraft are also by far more specialized in its versatility, and the colour of its magic are darker. Because of this Skill, the tools and items created by Nitocris always have holy inscriptions engraved on them."><div class="wordGlow">Item Construction B+</div></span>

<span title="At the same time that a ruler is one that controls the people and reigns over the land, a pharaoh is also someone who reaches the gods. A pharaoh has his divinity change in accordance with factors such as the era, etc., but Ozymandias is regarded as a child of the Sun God Ra, as well as one of its incarnations, while Nitocris is regarded as a child of the Sky God Horus, and also as one of its incarnations."><div class="wordGlow">Divinity B</div></span>

<span title="Denotes one’s ownership of the Magic Crest of ancient Egypt. The owner of this Skill is given a plus modifier towards checks related to necromancy magecraft."><div class="wordGlow">Egyptian Magecraft A</div></span>

<span title="A Pharaoh’s Divinity changes in accordance to the era, etc., but she is regarded as a child of the Sky God Horus, as well as his incarnation."><div class="wordGlow">Affection of Horus B</div></span>

<span title="No Information"><div class="wordGlow">Rapid Words of Divine B</div></span>
<br>
</font>
<font size="4">
<span title="A mirror that projects things that do not exist in reality. It does not function as an optical mirror. What is reflected is nothing but a grotesque and dreadful darkness that is constantly repulsive. Nitocris describes this as a mirror that reflects the netherworld, or maybe, the figure of a spiritual world of darkness, but the details are unknown. There is also the possibility that it projects her mind. Whether it is indeed the extension of the dark abyss of the underworld, or a demonic prison manufactured by the ancient Egyptian gods, or nothing more than something forming due to the magical power welling up inside of her, what spectacle really exists on the opposite side of the mirror?"><div class="wordGlow">Noble Phantasm - Anpu Neb Ta Djeser</div></span>
</font>
<font size="2">
Type: Anti-Army
<br>
Rank: B++
<br>
Range: 1~40
<br>
Maximum Num. of Targets: 100 people
</font>
</font>

</div>

<div id="tabFour" class="tab-content">
Normal OOC stuff goes here
<br>
This is a large W.I.P
</div>
</div>



<div class="horizontalLine">
</div>


<a href="#tabOne">
<div class="button1">
<b></b>
</div>
</a>

<a href="#tabTwo">
<div class="button2">
<b></b>
</div>
</a>

<a href="#tabThree">
<div class="button3">
<b></b>
</div>
</a>

<a href="#tabFour">
<div class="button4">
<b></b>
</div>
</a>


<div class="charImage">
</div>