magnet

<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Zilla+Slab+Highlight: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: #E3ECF1;
background-image: url("https://www.transparenttextures.com/patterns/gun-metal.png");
	background-position: fixed;
 background-size: 1.5%;
	background-repeat:repeat;
	background-position: center bottom;


}
.magnolia{
 position: fixed;
 bottom: 0vw;
 left: 45vw;
background-image: url('https://i.imgur.com/Qlb2Wke.png') ;
 background-size: cover;
background-repeat: no-repeat;
 transform: rotate(0deg) scaleX(-1);
 z-index: 0;
opacity: 1;
transition: .8s;
height: 50vw;
width: 55vw;
}

.magnoliatitle{
 position: fixed;
 bottom: 4vw;
 left: 55vw;
background-image: url('https://i.imgur.com/59tpHFY.png') ;
 background-size: cover;
background-repeat: no-repeat;
 transform: rotate(-5deg);
 z-index: 0;
opacity: 1;
transition: .8s;
height: 15vw;
width: 45vw;
}



.dexbackground{
 position: fixed;
 bottom: 5vw;
 left: 0vw;
background-image: url('https://i.imgur.com/rz7M4ut.png') ;
 background-size: cover;
background-repeat: no-repeat;
 transform: rotate(0deg);
 z-index: 0;
opacity: 1;
transition: .8s;
height: 37vw;
width: 50vw;
}



.dexbackgroundleft{position: fixed;
 bottom: 10.7vw;
 left: 7.1vw;
 z-index: -1;
background-image: url('https://i.imgur.com/G3Sb8YE.png') ;
 background-size: cover;
background-repeat: no-repeat;
display: inline-block;
opacity: 1;
height: 6.7vw;
width: 6.7vw;
transition: .8s;
}

#navi1 {position: fixed;
 bottom: 11.7vw;
 left: 41.8vw;
 z-index: 0;
opacity: 1;
height: 4.5vw;
width: 4.6vw;
}

#navi1 a {
display: inline-block;

}


#navi1:hover {
filter: brightness(50%);
display: inline-block;
transition: .2s;
}

#navi1 img{position: fixed;
 z-index: 0;
background-image: url('https://i.imgur.com/nsqgPU7.png') ;
 background-size: cover;
background-repeat: no-repeat;
display: inline-block;
opacity: 1;
height: 4.5vw;
width: 4.6vw;
}

#navi2 {position: fixed;
 bottom: 14.7vw;
 left: 9.5vw;
 z-index: 0;
opacity: 1;
height: 2.5vw;
width: 2vw;
transition: .8s;
}

#navi2 a {
display: inline-block;
}


#navi2:hover {
filter: brightness(50%);
display: inline-block;
transition: .2s;
}

#navi2 img{position: fixed;
 z-index: 0;
opacity: 1;
height: 2.5vw;
width: 2vw;
transition: .8s;
}

#navi3 {position: fixed;
 bottom: 13vw;
 left: 11.1vw;
 z-index: 0;
opacity: 1;
height: 2vw;
width: 2.5vw;
transition: .8s;
}

#navi3 a {
display: inline-block;
}


#navi3:hover {
filter: brightness(50%);
display: inline-block;
transition: .2s;
}

#navi3 img{position: fixed;
 z-index: 0;
opacity: 1;
height: 2vw;
width: 2.5vw;
transition: .8s;
}

#navi4 {position: fixed;
 bottom: 10.9vw;
 left: 9.5vw;
 z-index: 0;
opacity: 1;
height: 2.5vw;
width: 2vw;
transition: .8s;
}

#navi4 a {
display: inline-block;
}


#navi4:hover {
filter: brightness(50%);
display: inline-block;
transition: .2s;
}

#navi4 img{position: fixed;
 z-index: 0;
opacity: 1;
height: 2.5vw;
width: 2vw;
transition: .8s;
}


#navi5 {position: fixed;
 bottom: 13vw;
 left: 7.2vw;
 z-index: 0;
opacity: 1;
height: 2vw;
width: 2.5vw;
transition: .8s;
}

#navi5 a {
display: inline-block;
}


#navi5:hover {
filter: brightness(50%);
display: inline-block;
transition: .2s;
}

#navi5 img{position: fixed;
 z-index: 0;
opacity: 1;
height: 2vw;
width: 2.5vw;
transition: .8s;
}

#navi6 {position: fixed;
 bottom: 34vw;
 left: 16vw;
 z-index: 4;
opacity: 1;
height: 4.5vw;
width: 4.6vw;
}

#navi6 a {
display: inline-block;

}


#navi6:hover {
filter: brightness(50%);
display: inline-block;
transition: .2s;
}

#navi6 img{position: fixed;
display: inline-block;
opacity: 1;
}

#navi7 {position: fixed;
 bottom: 35vw;
 left: 16vw;
 z-index: 4;
opacity: 1;
transition: .8s;
}

#navi7 a {
display: inline-block;
}


#navi7:hover {
filter: brightness(50%);
display: inline-block;
transition: .2s;
}

#navi7 img{position: fixed;
 z-index: 0;
opacity: 1;

transition: .8s;
}

#navi8 {position: fixed;
 bottom: 31.5vw;
 left: 16vw;
 z-index: 4;
opacity: 1;
transition: .8s;
}

#navi8 a {
display: inline-block;
}


#navi8:hover {
filter: brightness(50%);
display: inline-block;
transition: .2s;
}

#navi8 img{position: fixed;
 z-index: 0;
opacity: 1;
transition: .8s;
}

#navi9 {position: fixed;
 bottom: 38.5vw;
 left: 28.5vw;
 z-index: 4;
opacity: 1;
transition: .8s;
}

#navi9 a {
display: inline-block;
}


#navi9:hover {
filter: brightness(50%);
display: inline-block;
transition: .2s;
}

#navi9 img{position: fixed;
 z-index: 0;
opacity: 1;
transition: .8s;
}


#navi10 {position: fixed;
 bottom: 35vw;
 left: 28.5vw;
 z-index: 4;
opacity: 1;
transition: .8s;
}

#navi10 a {
display: inline-block;
}


#navi10:hover {
filter: brightness(50%);
display: inline-block;
transition: .2s;
}

#navi10 img{position: fixed;
 z-index: 0;
opacity: 1;
transition: .8s;
}

#navi11 {position: fixed;
 bottom: 31.5vw;
 left: 28.5vw;
 z-index: 4;
opacity: 1;

transition: .8s;
}

#navi11 a {
display: inline-block;
}


#navi11:hover {
filter: brightness(50%);
display: inline-block;
transition: .2s;
}

#navi11 img{position: fixed;
 z-index: 0;
opacity: 1;

transition: .8s;
}


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

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


.contentbox{
background-color: #FCD5B5;
padding: 0px;
font-family: 'Press Start 2P', cursive;
font-size: 10px;
color: #4A96BA;
letter-spacing: 0px;
height: 12vw;
width: 16.4vw;
text-align: center;
overflow-y: scroll;
position: fixed;
opacity: 1;
}

.contentmag{
position: fixed;
bottom: 35vw;
left: 18.7vw;
z-index: 1;
opacity: 0;
transition: 1s;
}

.contentmag:target{
bottom: 35vw;
left: 20.7vw;
z-index: 2;
opacity: 1;
}


.magnetmite{
height: 1vw;
width: 1vw;
position: fixed;
opacity: 1;
}

.contentl{
position: fixed;
bottom: 37vw;
left: 20.7vw;
z-index: 1;
opacity: 0;
transition: 1s;
}

.contentl:target{
bottom: 37vw;
left: 22.7vw;
z-index: 2;
opacity: 1;
}

.lucario{
height: 1vw;
width: 1vw;
position: fixed;
opacity: 1;
}

.contentd{
position: fixed;
bottom: 36vw;
left: 18.7vw;
z-index: 1;
opacity: 0;
transition: 1s;
}

.contentd:target{
bottom: 36vw;
left: 20.7vw;
z-index: 2;
opacity: 1;
}


.doublade{
height: 1vw;
width: 1vw;
position: fixed;
opacity: 1;
}

.contentla{
position: fixed;
bottom: 34vw;
left: 18.7vw;
z-index: 1;
opacity: 0;
transition: 1s;
}

.contentla:target{
bottom: 34vw;
left: 20.7vw;
z-index: 2;
opacity: 1;
}


.lairon{
height: 1vw;
width: 1vw;
position: fixed;
opacity: 1;
}

.contentmet{
position: fixed;
bottom: 34vw;
left: 19.7vw;
z-index: 1;
opacity: 0;
transition: 1s;
}

.contentmet:target{
bottom: 34vw;
left: 21.7vw;
z-index: 2;
opacity: 1;
}


.metang{
height: 1vw;
width: 1vw;
position: fixed;
opacity: 1;
}

.contentmeo{
position: fixed;
bottom: 36.4vw;
left: 19.7vw;
z-index: 1;
opacity: 0;
transition: 1s;
}

.contentmeo:target{
bottom: 36.4vw;
left: 21.7vw;
z-index: 2;
opacity: 1;
}


.meowth{
height: 1vw;
width: 1vw;
position: fixed;
opacity: 1;
}

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

</style>
<body>

<div class="magnolia">

</div>

<div class="magnoliatitle">

</div>


<div class="dexbackground">
</div>

<div class="dexchomp">
</div>

<div class="dexbackgroundleft">
</div>


<div id="navi1"><a href="#five"><img src="https://i.imgur.com/nsqgPU7.png"></a></div></div>
<div id="navi2"><a href="#one"><img src="https://i.imgur.com/puDhCUt.png"></a></div></div>
<div id="navi3"><a href="#two"><img src="https://i.imgur.com/5mQjIaV.png" ></a></div></div>
<div id="navi4"><a href="#three"><img src="https://i.imgur.com/duVb9nn.png" ></a></div></div>
<div id="navi5"><a href="#four"><img src="https://i.imgur.com/YRd7ILp.png" width="" height="27"></a></div></div>
<div id="navi6"><a href="#magnetmite"><img src="https://i.imgur.com/gHvz5fS.png" width="90" height=""></a></div></div>
<div id="navi7"><a href="#lucario"><img src="https://i.imgur.com/36jkME1.png" width="90" height=""></a></div></div>
<div id="navi8"><a href="#doublade"><img src="https://i.imgur.com/JNjDrTP.png" width="90" height=""></a></div></div>
<div id="navi9"><a href="#lairon"><img src="https://i.imgur.com/BJQj7Mz.png" width="90" height=""></a></div></div>
<div id="navi10"><a href="#metang"><img src="https://i.imgur.com/U19GEmQ.png" width="90" height=""></a></div></div>
<div id="navi11"><a href="#meowth"><img src="https://i.imgur.com/pqFZ7qH.png" width="90" height=""></a></div></div>

 <div id="one" class="content"><div class="contentbox">
<h1>Info</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>Height</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Weight</b></span><span style="float:right;">---</span><br><br>
<span style="float:left;"><b>Home Region</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>W/e</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Height</b></span><span style="float:right;">---</span><br>




</div>
</div>

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

<h1>Box 2</h1>

</div>
</div>

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

</div>
</div>

 <div id="four" class="content"><div class="contentbox">
<h1>Box 4</h1>
IDK LMAO

</div>
</div>

 <div id="five" class="content"><div class="contentbox">
<h1>OOC</h1>
Code made by Testbed<br>


</div>
</div>

 <div id="magnetmite" class="contentmag"><div class="magnetmite">
<img src="https://i.imgur.com/XO7nkHR.gif" width='150'>

</div>
</div>

 <div id="lucario" class="contentl"><div class="lucario">
<img src="https://i.imgur.com/4XcuYWh.gif" width='100'>

</div>
</div>

 <div id="doublade" class="contentd"><div class="doublade">
<img src="https://i.imgur.com/Gr4zIJ0.gif" width='150'>

</div>
</div>

 <div id="lairon" class="contentla"><div class="lairon">
<img src="https://i.imgur.com/pP8YJjt.gif" width='150'>

</div>
</div>

 <div id="metang" class="contentmet"><div class="metang">
<img src="https://i.imgur.com/FVs7d4b.gif" width='125'>

</div>
</div>

 <div id="meowth" class="contentmeo"><div class="meowth">
<img src="https://i.imgur.com/K8rvqc6.gif" width='125'>

</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>