// main container (everything NOT in the sections that change outside of music player & marquee) 
<div class="main">
  <img src=""welcome to profile" IMG LINK HERE">
  <img src="DOLL IMG LINK HERE" style="position: absolute; left: 20em; top: 0em; width: 350px;">
  <img src=""i love purple" BLINKIE IMG LINK HERE" style="position: absolute; left: 22.2em; top: 22.5em; width: 250px;">
  <div class="button-container"><button><a onclick="loadPage('page1')"><img src="BUTTON PIXEL IMG LINK HERE" style="width: 30px;"></a></button><br><br><button><a onclick="loadPage('page2')"><img src="BUTTON PIXEL IMG LINK HERE" style="width: 30px;"></a></button><br><br><button><a onclick="loadPage('page3')"><img src="BUTTON PIXEL IMG LINK HERE" style="width: 30px;"></a></button><br><br>
  </div>

// MUST PUT THIS AFTER CODE ABOVE AND BEFORE CODE BELOW - allows for website to have "pages" and to change from section to section properly 
 <div id="content">
  </div>

// 3 page outline
<script>
    const pages = {
      page1: `CODE HERE`,
      page2: `CODE HERE`,
      page3: `CODE HERE`
    };

// link format - target blank allows page to open in new tab
subscribe to me on <a href="LINK HERE" target="_blank"><mark>youtube</mark></a>

// js allowing page 1 to load by default and ensuring transition from section to section runs smoothly - js cannot be disabled on your browser for this to work (there are alternative methods but those are more complex/less efficient)
function loadPage(pageKey) {
      document.getElementById('content').innerHTML = pages[pageKey];
    }

    loadPage('page1');
  </script>
  .bg {
/* for plain background */
background: #FE82B624;
/* vv for image background. remove if want plain */
background-image:url(https://dl.glitter-graphics.com/pub/3280/3280187fn0bvl7irz.jpg);
  background-repeat: repeat;
padding:12px; /* make number bigger/smaller for a bigger/smaller border */
width:50%;
border:1px solid white;
position: relative;
top: -8em;
left: 138px;
}

.in {
background: #FFF;
color: #000;
padding:5px;
border:1px solid black;
font-family: pixel;
line-height: 1.125em;
height:91px; /* set height to "height:fit-content;" to expand with text size */
overflow-y:auto; /* remove overflow if you don't want a scroll */
box-shadow: inset 13px 0 6px -10px rgb(66 66 66 / 30%), inset -13px 0 6px -10px rgb(66 66 66 / 30%), inset 0 13px 6px -10px #f0f0f0, inset 0 0 0 -10px rgb(66 66 66 / 30%);
}

https://loveberry.nekoweb.org/resources/text (highlighted are what is edited) 

.imagemask {
background-image: url("https://dl.glitter-graphics.com/pub/2965/2965909pnagjmnk38.png");
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2em;
font-weight:bold;
width:fit-content;
margin:0 auto; /* this is to center, if needed */
/* add below if you want an outline, if not remove */
filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black);
font-family: SakeMoru;
margin-bottom: 5px;
}