Is there a way to change the position of all the blurbs and buttons?

for a really simple change if you want to switch the position of the "online" tag and the pfp you can write

<style>
.profile-pic {
float: right !important;
}
</style>

---

to actually make your pfp at the top center of the page you /can/ try
<style>
.profile-pic {
 transform: translate([your x value][your y value]);  !important;
}
</style>

or

<style>
.profile-pic {
  position: relative;
  left: [value];
  top: [value];
}
</style>

but it can cover other elements. basically any way will cover other elements unless you make room for it. so:

.col.right {
padding-top: [value];
}
</style>

or

<style>
main {
padding-top: 200px !important;
}
</style>

could work depending on where you want to put your pfp. Then you can use either transform or position relative to put it in the place you want it. for example:

<style>
main {
padding-top: 200px !important;
}

.profile-pic, .online, .profile h1 {
  position: relative;
  left: 100%;
  top: -200px;
}
</style>

note: this leaves a lot of blank space on either side because the pfp is a sqaure. and it also keeps a blank space where your pfp used to be. .online and .profile h1 is to get the online status and your name in the same spot XD