mirkonew

<style>
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
body {
background-image: url("https://www.transparenttextures.com/patterns/slash-it.png"), linear-gradient(180deg, #fefefe, #ffc720, #E53845);
	background-position: fixed;
	background-repeat:repeat;
	background-position: right bottom;
animation:move-scrolling-front 90s linear infinite;
}

canvas {
z-index: -50;
}

h1 {
color: #000;
text-align: center;
font-family: 'Bangers', cursive;
font-size: 2vw;
font-weight: bold;
padding: 1px;
margin:6px;
}

::-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;
}

.mirko{
 position: fixed;
 bottom: 0vw;
 left: 33vw;
background-image: url('https://i.imgur.com/dqKmEJU.png') ;
 background-size: cover;
background-repeat: no-repeat;
 transform: rotate(0deg) ;
 z-index: 0;
opacity: 1;
transition: .8s;
height: 51vw;
width: 35vw;
}
.mirkob{
 position: fixed;
 bottom: 0vw;
 left: 33vw;
background-image: url('https://i.imgur.com/lNvT9qQ.png') ;
 background-size: cover;
background-repeat: no-repeat;
 transform: rotate(0deg) ;
 z-index: -1;
opacity: 1;
transition: .8s;
height: 51vw;
width: 36vw;
}

.mirkol{
 position: fixed;
 bottom: 0vw;
 left: 0vw;
background-image: url('https://i.imgur.com/oVMFNPW.png') ;
 background-size: cover;
background-repeat: no-repeat;
filter: contrast(150%) brightness(.5);
 z-index: -5;
opacity: 1;
transition: .8s;
height: 51vw;
width: 45vw;
}

.mirkor{
 position: fixed;
 bottom: 0vw;
 right: 0vw;
background-image: url('https://i.imgur.com/Ev2bkel.png') ;
 background-size: cover;
background-repeat: no-repeat;
filter: contrast(150%) brightness(.5);
 z-index: -5;
opacity: 1;
transition: .8s;
height: 51vw;
width: 32vw;
}

#name1{
 position: fixed;
bottom: 136vw;
 right: -39vw;
transform: rotate(28.7deg);
 z-index: 2;
filter: brightness(1);
animation: backtext1 5s infinite;
animation-timing-function:linear;
 animation-delay: 0s;
}

#name1 img{position: fixed;
display: inline-block;
opacity: 1;
height: 200vw;
width: vw;
}


#name2{
 position: fixed;
bottom: 91vw;
 left: -20vw;
transform: rotate(-31deg);
 z-index: 2;
filter: brightness(1);
animation: backtext2 3s infinite;
animation-timing-function:linear;
 animation-delay: 0s;
}

#name2 img{position: fixed;
display: inline-block;
opacity: 1;
height: 200vw;
width: vw;
}


#bar1{
 position: fixed;
 bottom: -5vw;
 left: 42.5vw;
transform: scaleX(-1) rotate(300deg);
 z-index: 1;

filter: brightness(1);
}

#bar1 img{position: fixed;
display: inline-block;
opacity: 1;
height: 7vw;
width: 200vw;
}

#bar2{
 position: fixed;
 bottom: 0vw;
 right: 39.3vw;
 transform: rotate(300deg);
 z-index: 1;
filter: brightness(1);
}

#bar2 img{position: fixed;
display: inline-block;
opacity: 1;
height: 7vw;
width: 100vw;
}


.navi1{
 position: fixed;
left: 80vw;
 bottom: 16.4vw;
 display: inline-block;

 z-index: 2;
transition: 1s;

}

.navi1 .tooltiptext {
 visibility: hidden;
 opacity: 0;
 width: 10vw;
 height: 10vw;
 font-size: .7vw;
font-family: verdana;
font-variant: small-caps;
 color: #000;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: fixed;
 z-index: 2;
 bottom: 10vw;
 right: 6vw;
transition: opacity .5s;
}

.navi1:hover .tooltiptext {
 visibility: visible;
 opacity: 1;

}

.navi2{
 position: fixed;
left: 77vw;
 bottom: 11.4vw;
 display: inline-block;

 z-index: 2;
transition: 1s;

}

.navi2 .tooltiptext {
 visibility: hidden;
 opacity: 0;
 width: 10vw;
 height: 10vw;
 font-size: .7vw;
font-family: verdana;
font-variant: small-caps;
 color: #000;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: fixed;
 z-index: 2;
 bottom: 10vw;
 right: 6vw;
transition: opacity .5s;
}

.navi2:hover .tooltiptext {
 visibility: visible;
 opacity: 1;

}
.navi3{
 position: fixed;
left: 74vw;
 bottom: 6.75vw;
 display: inline-block;

 z-index: 2;
transition: 1s;

}

.navi3 .tooltiptext {
 visibility: hidden;
 opacity: 0;
 width: 10vw;
 height: 10vw;
 font-size: .7vw;
font-family: verdana;
font-variant: small-caps;
 color: #000;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: fixed;
 z-index: 2;
 bottom: 10vw;
 right: 6vw;
transition: opacity .5s;
}

.navi3:hover .tooltiptext {
 visibility: visible;
 opacity: 1;

}

.navi4{
 position: fixed;
left: 15vw;
  bottom: 16vw;
transform: scaleX(-1);
 display: inline-block;

 z-index: 2;
transition: 1s;

}

.navi4 .tooltiptext {
 visibility: hidden;
 opacity: 0;
 width: 10vw;
 height: 10vw;
 font-size: .7vw;
font-family: verdana;
font-variant: small-caps;
 color: #000;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: fixed;
 z-index: 2;
 bottom: -7vw;
 left: 9vw;
transition: opacity .5s;
transform: scaleX(-1);
}

.navi4:hover .tooltiptext {
 visibility: visible;
 opacity: 1;

}

.navi5{
 position: fixed;
transform: scaleX(-1);
left: 18vw;
 bottom: 11.4vw;
 display: inline-block;

 z-index: 2;
transition: 1s;

}

.navi5 .tooltiptext {
 visibility: hidden;
 opacity: 0;
 width: 10vw;
 height: 10vw;
 font-size: .7vw;
font-family: verdana;
font-variant: small-caps;
 color: #000;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: fixed;
 z-index: 2;
 bottom: -2vw;
 left: 12vw;
transition: opacity .5s;
transform: scaleX(-1);
}

.navi5:hover .tooltiptext {
 visibility: visible;
 opacity: 1;

}

.navi6{
 position: fixed;
transform: scaleX(-1);
left: 21vw;
  bottom: 6.75vw;
 display: inline-block;

 z-index: 2;
transition: 1s;

}

.navi6 .tooltiptext {
 visibility: hidden;
 opacity: 0;
 width: 10vw;
 height: 10vw;
 font-size: .7vw;
font-family: verdana;
font-variant: small-caps;
 color: #000;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: fixed;
 z-index: 2;
 bottom: 2vw;
 left: 14vw;
transition: opacity .5s;
transform: scaleX(-1);
}

.navi6:hover .tooltiptext {
 visibility: visible;
 opacity: 1;

}



.content{
position: fixed;
bottom: 0vw;
left: 26vw;

z-index: 20;
opacity: 1;

}

.content:target{
bottom: 17vw;
left: 27vw;
z-index: 50;
opacity: 1;

}

.contentbox{
background-color: #FFC720;
font-family: 'Caveat Brush', cursive;
font-size: 1.5vw;
line-spacing: 1.5vw;
color: #000;
letter-spacing: 0px;
width: 45vw;
height: 15vw;
overflow: auto;
position: fixed;
line-height: 1.5vw;
padding: 5px;
border: 5px solid #1B2196;
z-index: 1;
text-shadow:none;
opacity: 1;

}

.contentboxfriend{
background-color: #A03E0D;
width: 23vw;
height: 26vw;
overflow: auto;
position: fixed;
line-height: 15px;
padding: 5px;

border: 5px solid #56260d;
z-index: 1;
text-shadow:none;
opacity: 0;
bottom: -9.5vw;
left: 50vw;
}

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

@keyframes backtext1{
 0% {    bottom: 49vw;
 right: 9vw; }

 100% {  bottom: 136.2vw;
 right: -38.7vw; }

}

@keyframes backtext2{
 0% {   bottom: 49vw;
 left: 5vw; }

 100% {  bottom: 91.7vw;
 left: -20.7vw; }

}
@keyframes move-scrolling-front{
from{background-position:600% -200%}
to{background-position:300% 00%}
}
</style>
<body>

<div class="mirko">
</div></div>

<div class="mirkol">
</div></div>

<div class="mirkor">
</div></div>

<div class="navi1"><a href="#one"><img src="https://i.imgur.com/vnEB1Wb.png" width="100" height="100"></a>
 <span class="tooltiptext"><img src="https://i.imgur.com/352DBNh.png" width="" height="300" >


</span>
</div></div>
<div class="navi2"><a href="#two"><img src="https://i.imgur.com/vnEB1Wb.png" width="100" height="100"></a>
 <span class="tooltiptext"><img src="https://i.imgur.com/Yf9UB5Q.png" width="" height="300" >


</span>
</div></div>

<div class="navi3"><a href="#three"><img src="https://i.imgur.com/vnEB1Wb.png" width="100" height="100"></a>
 <span class="tooltiptext"><img src="https://i.imgur.com/V2TF2Bw.png" width="" height="300" >


</span>
</div></div>

<div class="navi4"><a href="#four"><img src="https://i.imgur.com/vnEB1Wb.png" width="100" height="100"></a>
 <span class="tooltiptext"><img src="https://i.imgur.com/ZtnXO6v.png" width="" height="300" >


</span>
</div></div>

<div class="navi5"><a href="#five"><img src="https://i.imgur.com/vnEB1Wb.png" width="100" height="100"></a>
 <span class="tooltiptext"><img src="https://i.imgur.com/aSuYjRu.png" width="" height="300" >


</span>
</div></div>

<div class="navi6"><a href="#"><img src="https://i.imgur.com/vnEB1Wb.png" width="100" height="100"></a>
 <span class="tooltiptext"><img src="https://i.imgur.com/CoI2uLI.png" width="" height="300" >


</span>
</div></div>

<div id="name1">
<img src="https://i.imgur.com/d3IjSrq.png" width="" height="">
</div></div>

<div id="name2">
<img src="https://i.imgur.com/KXvXLYu.png" width="" height="">
</div></div>




<div id="bar1">
<img src="https://i.imgur.com/4SVHXlb.png" width="" height="">
</div></div>

<div id="bar2">
<img src="https://i.imgur.com/4SVHXlb.png" width="" height="">
</div></div>

<div class="contentboxfriend">
</div></div>


</span>
</div>
<div id="one" class="content"><div class="contentbox">
<h1>1</h1>
TEXT HERE
</div></div>

 <div id="two" class="content"><div class="contentbox">
<h1>2</h1>
TEXT HERE
</div>
</div>

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

TEXT HERE


</div>
</div>

 <div id="four" class="content"><div class="contentbox">
<h1>4</h1>
TEXT HERE

</div>
</div>
 <div id="five" class="content"><div class="contentbox">
<h1>5</h1>
TEXT HERE

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