Keep everything centered for different browser resolution - html

Question

I am trying to keep everything centered as the browser changes size. I have tried messing around with the position, but I haven't gotten that to work for everything.
I'm also having trouble centering my font-awesome icons. They are too far to the right, which I have tried to counter by setting it to left: 49%; but that just makes it even more wonky as the sizes shift around.
body {
font-family: "Lato", sans-serif;
color: #fff;
background-color: #21d4fd;
background-image: linear-gradient(19deg, #21d4fd, #b721ff);
background-size: 10%, 10%;
background-repeat: repeat;
animation: change 10s ease-in-out infinite;
}
#name {
font-size: 75px;
font-kerning: auto;
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;
}
#schoolText {
text-align: center;
letter-spacing: 5px;
font-size: 20px;
line-height: 25px;
}
.mainText {
border: 5px solid;
border-radius: 5px;
position: absolute;
padding: 10px 100px;
line-height: 10px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
#footer {
text-align: left;
position: absolute;
width: 99%;
left: 1%;
top: 95%;
letter-spacing: 5px;
text-transform: uppercase;
}
#keyframes change {
0% {
background-position: 0, 50%;
}
50% {
background-position: 100%, 50%;
}
10% {
background-position: 0, 50%;
}
}
.media {
padding: 0;
margin: 0;
position: absolute;
top: 65%;
transform: translateY(-53%);
width: 100%;
text-align: center;
}
.btn {
display: inline-block;
width: 90px;
height: 90px;
background: rgb(255, 255, 255, 0.0);
margin: 10px;
border-radius: 30%;
color: rgb(255, 255, 255, 0.4);
overflow: hidden;
position: relative;
}
.btn i {
line-height: 90px;
font-size: 35px;
transition: 0.2s;
}
.btn :hover {
color: white;
}
<div class="mainText">
<h1 id="name">Nick</h1>
<p id="schoolText">Professional Harvard Dropout</p>
</div>
<h6>Centered</h6>
<!-- Social Media Icons -->
<div class="media" style="text-align: center;">
<a class="btn" href="#">
<i class="fab fa-instagram"></i>
</a>
<a class="btn" href="#">
<i class="fab fa-snapchat-ghost"></i>
</a>
</div>