byleth

<style>
@import url('https://fonts.googleapis.com/css2?family=Charm&family=Homemade+Apple&display=swap');
body {
	background-color: #234;
	background-image: url('https://www.transparenttextures.com/patterns/light-grey-floral-motif.png') ;
	background-position: fixed;
}

h1 {
color: #000;
border-bottom: 5px dashed #000;
font-family: 'Homemade Apple', cursive;
font-size: 35px;
text-align: center;
font-weight: bold;
padding: 5px;
}


.render {
 background: url('https://i.imgur.com/3dYzhBa.png');
 background-size: cover;
 position:absolute;
 left: 35vw;
 bottom: 0vw;
 opacity: 1;
 width: 29vw;
 height: 35vw;
 filter: drop-shadow(-2px 10px 0px #396FB1) drop-shadow(2px 0px 0px #396FB1) drop-shadow(0px -2px 0px #396FB1);
 z-index: 1;
}

.render2 {
 background: url('https://gamepress.gg/feheroes/sites/fireemblem/files/2019-07/F_Byleth_Injured.png');
 background-size: cover;
 position:fixed;
 left: -25vw;
 bottom: -17vw;
 opacity: 1;
 width: 70vw;
 height: 70vw;
opacity: .4;
 z-index: -1;
}

.quote{
 position: fixed;
 bottom: 35vw;
 left: 30vw;
 width: 1000px;
transform: rotate(-10deg);
filter: drop-shadow(-2px 3px 0px #000) drop-shadow(2px 0px 0px #000) drop-shadow(0px -2px 0px #000);
z-index: 3;
 border: ;
 color: #fff;
font-size: 60px;
font-family: 'Homemade Apple', cursive;
}

#navi1 {position: fixed;
 left: 30vw;
 bottom: 24vw;
 z-index: 5;
vertical-align: top;
}

#navi1 a {
background-image: url('https://i.imgur.com/2zN4ImA.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
filter: drop-shadow(-2px 3px 0px #396FB1) drop-shadow(2px 0px 0px #396FB1) drop-shadow(0px -2px 0px #396FB1);
display: inline-block;
opacity: 1;
height: 5vw;
width: 5vw;
transition: .8s;
}

#navi1:hover {
 filter: drop-shadow(-2px 10px 0px #396FB1) drop-shadow(2px 0px 0px #396FB1) drop-shadow(0px -2px 0px #396FB1);
display: inline-block;
animation: shake .7s infinite;
animation-timing-function:linear;
 animation-delay: 0s;
}

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

#navi2 a {
background-image: url('https://i.imgur.com/2zN4ImA.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
filter: drop-shadow(-2px 3px 0px #396FB1) drop-shadow(2px 0px 0px #396FB1) drop-shadow(0px -2px 0px #396FB1);
display: inline-block;
opacity: 1;
height: 5vw;
width: 5vw;
transition: .8s;
}

#navi2:hover {
display: inline-block;
 filter: drop-shadow(-2px 10px 0px #396FB1) drop-shadow(2px 0px 0px #396FB1) drop-shadow(0px -2px 0px #396FB1);
animation: shake .7s infinite;
animation-timing-function:linear;
 animation-delay: 0s;
}

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

#navi3 a {
background-image: url('https://i.imgur.com/2zN4ImA.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
filter: drop-shadow(-2px 3px 0px #396FB1) drop-shadow(2px 0px 0px #396FB1) drop-shadow(0px -2px 0px #396FB1);
display: inline-block;
opacity: 1;
height: 5vw;
width: 5vw;
transition: .8s;
}

#navi3:hover {
display: inline-block;
 filter: drop-shadow(-2px 10px 0px #396FB1) drop-shadow(2px 0px 0px #396FB1) drop-shadow(0px -2px 0px #396FB1);
animation: shake .7s infinite;
animation-timing-function:linear;
 animation-delay: 0s;
}

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

#navi4 a {
background-image: url('https://i.imgur.com/2zN4ImA.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
filter: drop-shadow(-2px 3px 0px #396FB1) drop-shadow(2px 0px 0px #396FB1) drop-shadow(0px -2px 0px #396FB1);
display: inline-block;
opacity: 1;
height: 5vw;
width: 5vw;
transition: .8s;
}

#navi4:hover {
display: inline-block;
 filter: drop-shadow(-2px 10px 0px #396FB1) drop-shadow(2px 0px 0px #396FB1) drop-shadow(0px -2px 0px #396FB1);
animation: shake .7s infinite;
animation-timing-function:linear;
 animation-delay: 0s;
}

.content{
position: fixed;
bottom: 31vw;
left: 64vw;
z-index: 1;
opacity: 1;
transition: 0s;
}

.content:target{
bottom: 31vw;
left: 64vw;
z-index: 2;
opacity: 1;
}

.contentbox{
border: 10px solid;
  padding: 15px;
  border-image: url(https://i.imgur.com/PeuB7fL.png) 50 stretch;
background-color: #DFD8CF;
background-clip: content-box;
background-image: url("https://www.transparenttextures.com/patterns/paper-1.png");
padding: 0px;
font-family: 'Charm', cursive;
font-size: 20px;
color: #000;
letter-spacing: 0px;
height: 29vw;
width: 25vw;
text-align: center;
overflow: auto;
position: fixed;
opacity: 1;
}

.testbed{
 position: fixed;
 bottom: 0vw;
 left: 0vw;
 z-index: 10;
}


@keyframes shake{
 0% { transform: rotate(0deg); }
 20% { transform: rotate(5deg); }
 40% { transform: rotate(-5deg); }
 60% { transform: rotate(5deg); }
 80% { transform: rotate(-5deg); }
 100% { transform: rotate(0deg); }

}

</style>
<body>

<div class="render"></div>
<div class="render2"></div>
<div class="quote">
<center>"I still have much to learn..."

</center>
</div>

<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="one" class="content"><div class="contentbox">
<h1>Stats</h1>
<span style="float:left;"><b>Name</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Gender</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Race</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Height</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Weight</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Eyes</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Hair</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Orientation</b></span><span style="float:right;">---</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>


</div>
</div>

 <div id="three" class="content"><div class="contentbox">
<h1>Allies</h1>


</div>
</div>

 <div id="four" class="content"><div class="contentbox">
<h1>OOC</h1>


</div>
</div>

<div class="testbed">
<a target="_blank" href="https://roleplay.chat/profile.php?user=testbed" title="Made by TestBed Codes."><img src="https://cdn.discordapp.com/attachments/649485777893326869/856393583761031199/image0.png" width="88" class="circle" ></a>
</div></div>

</body>
</body>