PUNCH

<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
body {
background-color: #2c3539;
background-image: url("https://www.transparenttextures.com/patterns/flowers.png"), linear-gradient(180deg, #f7ad74 , #b34747 , #5c2733);
	background-position: fixed;
 background-size: 5%;
	background-repeat: repeat;
	background-position: left bottom;
animation:move-scrolling-front 90s linear infinite;

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

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

.bubble{
 position: fixed;
 bottom: 30vw;
 right: 30vw;
background-image: url('https://i.imgur.com/4P88K1z.png') ;
 background-size: cover;
background-repeat: no-repeat;
 transform: rotate(-20deg) ;
 z-index: 0;
opacity: 1;
transition: .8s;
height: 20vw;
width: 20vw;
}
div.fixed {
 position: fixed;
  bottom: 40vw;
 right: 30vw;
transform: rotate(-20deg) ;
overflow: auto;
width: 20vw;
 height: 7vw;
 border: ;
 color: #000;
font-size: 23px;
font-family: 'Lobster', cursive;

}

@keyframes move-scrolling-front{
from{background-position:600% -200%}
to{background-position:300% 00%}
}
</style>
<body>
<div class="tsuyoi">
</div></div>
<div class="bubble">
</div></div>
<div class="fixed">
<center>Tsuyoi Bara<br>
The Strength Hero<br>
<b>PUNCH</b><br>
Quirk: <a target="_blank" href="https://pastebin.com/t9T71Trs">Wind-up</a><br><br><br>
MHA OC<br>
<br>Placeholder code<br>
</center>
</div>

</body>
</body>