bowser code

<style>
@import url('https://fonts.googleapis.com/css2?family=Grenze+Gotisch&family=Lancelot&family=MedievalSharp&family=UnifrakturCook:wght@700&display=swap');

::-webkit-scrollbar {
 width: .1px;
}

::-webkit-scrollbar-track {
 box-shadow: inset 0 0 5px grey;
 border-radius: 10px;
}

::-webkit-scrollbar-thumb {
 background: #b95595;
 border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
 background: #b95591;
}

body {
	background-color: #111;
	background-image: url('...') ;
	background-position: fixed;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: right bottom;
}

h1 {
color: #fff;
border-bottom: 1px solid #fff;
font-family: 'MedievalSharp', cursive;
font-size: 50px;
text-align: center;
font-weight: bold;
padding: 5px;
}

.bowsertitle{
 position: fixed;
 bottom: -11vw;
 left: 0vw;
opacity: ;
z-index: -1;
}
.fire1{
 position: fixed;
 bottom: -3vw;
 left: -15vw;
z-index: -2;
filter: brightness(.7);
}

.fireball{
 position: fixed;
 bottom: 7vw;
 left: 32vw;
z-index: -3;
filter: brightness();
transform: rotate(-55deg);
animation: fireball 5s infinite;
animation-timing-function:linear;
 animation-delay: 0s;
}

.smoke{
 position: fixed;
 bottom: 12vw;
 left: 40vw;
opacity: .3;
filter: brightness();
transform: rotate(15deg);
z-index: -1;

}

.bowsermain{
 position: fixed;
 bottom: -5vw;
 left: 74vw;
z-index: -1;
filter: brightness();
}

.bowsermainback{
 position: fixed;
 bottom: -8vw;
 left: 45vw;
 opacity: .3;
z-index: -2;
filter: brightness();
}


@keyframes fireball{
 0% { bottom: 7vw; left: 32vw; }

 75% { bottom: 7vw; left: 32vw; }

 100% { bottom: -15vw; left: 70vw; }

}

#navi1 {position: fixed;
 left: 17vw;
 bottom: 7vw;
 z-index: 2;
vertical-align: top;
}

#navi1 a {

font-family: 'Lovers Quarrel', cursive;
background-image: url('https://i.pinimg.com/originals/e7/fa/b1/e7fab1e75ccfeb1484df5f1ec76c6796.gif') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
display: inline-block;
opacity: 1;
height: 75px;
width: 75px;
transition: .8s;
}

#navi1 a:hover {
display: inline-block;
}

#navi2 {position: fixed;
 left: 22.5vw;
 bottom: 7vw;
 z-index: 2;
vertical-align: top;
}

#navi2 a {
font-family: 'Lovers Quarrel', cursive;
background-image: url('https://i.pinimg.com/originals/e7/fa/b1/e7fab1e75ccfeb1484df5f1ec76c6796.gif') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
display: inline-block;
opacity: 1;
height: 75px;
width: 75px;
transition: .8s;
}

#navi2 a:hover {
display: inline-block;
}

#navi3 {position: fixed;
 left: 28vw;
 bottom: 7vw;
 z-index: 2;
vertical-align: top;
}

#navi3 a {
font-family: 'Lovers Quarrel', cursive;
background-image: url('https://i.pinimg.com/originals/e7/fa/b1/e7fab1e75ccfeb1484df5f1ec76c6796.gif') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
display: inline-block;
opacity: 1;
height: 75px;
width: 75px;
transition: .8s;
}

#navi3 a:hover {
color: #27233C;
filter: grayscale(0.0);
text-shadow:0px 0px 3px #FC7C81;
display: inline-block;
}

#navi4 {position: fixed;
 left: 33.5vw;
 bottom: 7vw;
 z-index: 2;
vertical-align: top;
}

#navi4 a {
font-family: 'Lovers Quarrel', cursive;
background-image: url('https://i.pinimg.com/originals/e7/fa/b1/e7fab1e75ccfeb1484df5f1ec76c6796.gif') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
display: inline-block;
opacity: 1;
height: 75px;
width: 75px;
transition: .8s;
}

#navi4 a:hover {
color: #27233C;
filter: grayscale(0.0);
text-shadow:0px 0px 3px #FC7C81;
display: inline-block;
}

#navi5 {position: fixed;
 left: 39vw;
 bottom: 7vw;
 z-index: 0;
vertical-align: top;
}

#navi5 a {
font-family: 'Lovers Quarrel', cursive;
background-image: url('https://64.media.tumblr.com/39e5061f1704fe95ce65d5b06543626f/tumblr_mrnjan7IvH1rfjowdo1_500.gif') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
display: inline-block;
opacity: 1;
height: 50px;
width: 50px;
transition: .8s;
}

#navi5 a:hover {
color: #27233C;
filter: grayscale(0.0);
text-shadow:0px 0px 3px #FC7C81;
display: inline-block;
}



.content{
position: fixed;
bottom: 150vw;
left: 5vw;
z-index: 1;
opacity: 1;
transition: .8s;
-moz-transition: .8s;
webkit-transition: .8s;
-o-transition: .8s;
}

.content:target{
bottom: 45vw;
left: 5vw;
z-index: 0;
opacity: 1;
}

.contentbox{
background-color: #;
background-image: url('https://i.ibb.co/nkhj46G/bowser-text-back.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
font-family: 'Lancelot', cursive;
font-size:20px;
color: #fff;
border-style: inset;
border-color: #111;
border-radius: 5px;
letter-spacing: 0px;
width: 900px;
height: 400px;
text-align: center;
z-index: 0;
overflow-y: scroll;
position: fixed;
opacity: 1;
}

</style>
<body>

<div id="navi1"><a href="#one"></a></div></div>
<div id="navi2"><a href="#two"></a></div></div>
<div id="navi3"><a href="#three"></a></div></div>
<div id="navi4"><a href="#four"></a></div></div>
<div id="navi5"><a href="#"></a></div></div>

<div class="bowsertitle">
<img src="https://i.ibb.co/hXYB5R0/bowsertest.png" width="" height="500">
</div>

<div class="fire1">
<img src="https://media1.giphy.com/media/KanivNSR8L1Q8XD46T/source.gif" width="" height="800">
</div>

<div class="fireball">
<img src="https://i.gifer.com/5Mz4.gif" width="" height="200">
</div>

<div class="smoke">
<img src="https://thumbs.gfycat.com/ResponsibleCompetentAmericancicada-max-1mb.gif" width="" height="200">
</div>

<div class="bowsermain">
<img src="https://i.ibb.co/6Rx8ypw/bowsermain.png" width="" height="700">
</div>

<div class="bowsermainback">
<img src="https://i.ibb.co/p2pYJPz/bowsermainback3.png" width="" height="800">
</div>

 <div id="one" class="content"><div class="contentbox">
<h1>🔥Stats🔥</h1>
<span style="float:left;"><b>Name</b></span><span style="float:right;">Bowser</span><br>
<span style="float:left;"><b>Gender</b></span><span style="float:right;">Male</span><br>
<span style="float:left;"><b>Age</b></span><span style="float:right;">17</span><br>
<span style="float:left;"><b>Race</b></span><span style="float:right;">Human (Gifted)</span><br><br>

<span style="float:left;"><b>Height</b></span><span style="float:right;">5'7"</span><br>
<span style="float:left;"><b>Weight</b></span><span style="float:right;">150lbs</span><br>
<span style="float:left;"><b>Eyes</b></span><span style="float:right;">Green</span><br>
<span style="float:left;"><b>Hair</b></span><span style="float:right;">Dark Brown</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>


</div>
</div>

 <div id="two" class="content"><div class="contentbox">

<h1>🔥Headcanons🔥</h1>
HEADCANONS GO HERE
</div>
</div>

 <div id="three" class="content"><div class="contentbox">
<h1>🔥Background🔥</h1>
STORY GOES HERE

</div>
</div>

 <div id="four" class="content"><div class="contentbox">
<h1>🔥OOC🔥</h1>
THIS IS THE ACTUAL OOC

</div>
</div>

</body>
</body>