carmine

<style>
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Finger+Paint&family=Stint+Ultra+Condensed&display=swap');
body {
	background-color: #234;
	background-image: url('https://www.transparenttextures.com/patterns/dark-exa.png'), linear-gradient(180deg, #FF0000, #9C0000, #470000); ;
	background-position: fixed;
background-position: right bottom;
background-size: 3%;
}

h1 {
color: #fff;
border-bottom: 5px dashed #fff;
font-family: 'Bangers', cursive;
font-size: 45px;
text-align: center;
font-weight: bold;
padding: 5px;
}


.render {
 background: url('https://cdn.discordapp.com/attachments/649485777893326869/940870377847017512/image.png');
 background-size: cover;
 position:absolute;
 right: 5vw;
 bottom: 0vw;
 opacity: 1;
 width: 39vw;
 height: 50vw;
 filter: drop-shadow(-2px 10px 0px #FF0000) drop-shadow(2px 0px 0px #FF0000) drop-shadow(0px -2px 0px #396FB1);
 z-index: 1;
}

.render2 {
 background: url('https://i.imgur.com/AJyDIyd.png');
 background-size: cover;
 position:absolute;
 left: 2vw;
 bottom: 0vw;
 opacity: 1;
 width: 70vw;
 height: 40vw;
 z-index: -10;
}

.title{
 background: url('https://i.imgur.com/9wJ2QSG.png');
 background-size: cover;
 position: fixed;
 right: 5vw;
 bottom: -2vw;
 width: 33vw;
 height: 20vw;
transform: rotate(17deg);
filter: drop-shadow(-2px 3px 0px #FF0000) drop-shadow(2px 0px 0px #396FB1) drop-shadow(0px -2px 0px #396FB1);
z-index: 3;
 border: ;
 color: #fff;
font-size: 60px;
font-family: 'Finger Paint', cursive;
}



.quote{
 position: fixed;
 bottom: 10vw;
 left: 55vw;
 width: 1000px;
transform: rotate(-12deg);
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: 40px;
font-family: 'Finger Paint', cursive;
}

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

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

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

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

#navi2 a {
background-image: url('https://i.imgur.com/gEJgU1K.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
filter: drop-shadow(-2px 3px 0px #FF0000) drop-shadow(2px 0px 0px #FF0000) drop-shadow(0px -2px 0px #FF0000);
display: inline-block;
transform: rotate(20deg);
opacity: 1;
height: 4vw;
width: 15vw;
transition: .8s;
}

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

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

#navi3 a {
background-image: url('https://i.imgur.com/gEJgU1K.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
filter: drop-shadow(-2px 3px 0px #FF0000) drop-shadow(2px 0px 0px #FF0000) drop-shadow(0px -2px 0px #FF0000);
display: inline-block;
transform: rotate(-0deg) scaleX(-1);
opacity: 1;
height: 4vw;
width: 15vw;
transition: .8s;
}

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

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

#navi4 a {
background-image: url('https://i.imgur.com/gEJgU1K.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
filter: drop-shadow(-2px 3px 0px #FF0000) drop-shadow(2px 0px 0px #FF0000) drop-shadow(0px -2px 0px #FF0000);
display: inline-block;
transform: rotate(-20deg) scaleX(-1);
opacity: 1;
height: 4vw;
width: 15vw;
transition: .8s;
}

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

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

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

.contentbox{
border: 10px #000 solid;
  padding: 15px;
  border-image: url(https://www.transparenttextures.com/patterns/brushed-alum.png) 50 stretch;
background-color: #3F3F3F;
background-clip: content-box;
background-image: url("https://www.transparenttextures.com/patterns/brushed-alum-dark.png");
padding: 0px;
font-family: 'Stint Ultra Condensed', cursive;
font-size: 25px;
color: #fff;
letter-spacing: 0px;
height: 32vw;
width: 29vw;
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(1deg); }
 40% { transform: rotate(-.5deg); }
 60% { transform: rotate(1deg); }
 80% { transform: rotate(-.5deg); }
 100% { transform: rotate(0deg); }

}

</style>
<body>

<div class="render"></div>
<div class="render2"></div>
<div class="title"></div>
<div class="quote">
<center>"Don't rev me up..."

</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">
<span style="float:right;"><a href="#"><img src="https://i.ibb.co/6YtFCL3/wohresetbutton.png" width="20" ></a></span>
<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">
<span style="float:right;"><a href="#"><img src="https://i.ibb.co/6YtFCL3/wohresetbutton.png" width="20" ></a></span>
<h1>Headcanons</h1>


</div>
</div>

 <div id="three" class="content"><div class="contentbox">
<span style="float:right;"><a href="#"><img src="https://i.ibb.co/6YtFCL3/wohresetbutton.png" width="20" ></a></span>
<h1>Allies</h1>


</div>
</div>

 <div id="four" class="content"><div class="contentbox">
<span style="float:right;"><a href="#"><img src="https://i.ibb.co/6YtFCL3/wohresetbutton.png" width="20" ></a></span>
<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>