css text animation not centered on page - animation

Question

I have been having issues centering the text animation on my page, it does not center correctly on all viewports, I have been messing with the keyframes changing them from left: 130px to sometimes 150px to get it centered but it isn't centered properly, that doesn't seem to help, I have also taken off animation-fill mode: forwards, and it seems to just glitch in the middle of the page instead of being a smooth transition. Any help would be appreciated Thanks.
tsParticles.load("tsparticles", {
fps_limit: 60,
interactivity: {
detect_on: "canvas",
events: {
onclick: { enable: true, mode: "push" },
onhover: {
enable: true,
mode: "attract",
parallax: { enable: false, force: 60, smooth: 10 }
},
resize: true
},
modes: {
push: { quantity: 4 },
attract: { distance: 200, duration: 0.4, factor: 5 }
}
},
particles: {
color: { value: "#ffffff" },
line_linked: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.4,
width: 1
},
move: {
attract: { enable: false, rotateX: 600, rotateY: 1200 },
bounce: false,
direction: "none",
enable: true,
out_mode: "out",
random: false,
speed: 2,
straight: false
},
number: { density: { enable: true, value_area: 800 }, value: 80 },
opacity: {
anim: { enable: false, opacity_min: 0.1, speed: 1, sync: false },
random: false,
value: 0.5
},
shape: {
character: {
fill: false,
font: "Verdana",
style: "",
value: "*",
weight: "400"
},
image: {
height: 100,
replace_color: true,
src: "images/github.svg",
width: 100
},
polygon: { nb_sides: 5 },
stroke: { color: "#000000", width: 0 },
type: "circle"
},
size: {
anim: { enable: false, size_min: 0.1, speed: 40, sync: false },
random: true,
value: 5
}
},
polygon: {
draw: { enable: false, lineColor: "#ffffff", lineWidth: 0.5 },
move: { radius: 10 },
scale: 1,
type: "none",
url: ""
},
retina_detect: true
});
const intro = document.querySelector("#intro")
// intro.style.display = "none";
// const timeout = setTimeout(myGreeting, 2000)
// window.onload(function () {
// intro.style.display = "block";
// }
// )
// const myGreeting = () => {
// document.querySelector("#intro").textContent = "Hello Im";
// }
// const timeout = setTimeout(myGreeting, 3000)
const secondGreeting = () => {
document.querySelector(".name").textContent = "Peter Ayad"
}
const timeout2 = setTimeout(secondGreeting, 2500)
const button = document.querySelector('button');
//back to top button
const topButton = document.querySelector('.bTop')
// const divButton = document.querySelector('.divButton');
// divButton.addEventListener('click', function () {
// document.body.scrollTop = 0;
// document.documentElement.scrollTop = 0;
// })
// topButton.addEventListener('click', function () {
// document.body.scrollTop = 0;
// document.documentElement.scrollTop = 0;
// })
// // divButton.addEventListener('click', topFunction)
// window.onscroll = function() {
// topFunction();
// }
window.onscroll = function() {
topFunction();
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
topButton = document.querySelector(".bTop");
html {
height: 100vh;
}
body {
margin: 0;
padding: 0;
}
canvas {
display: block;
/* vertical-align: bottom; */
}
/* ---- tsparticles container ---- */
#tsparticles {
position: absolute;
/* position: fixed; */
width: 100%;
height: 100%;
background-color: #0d47a1;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
/* background-position: 50% 50%; */
z-index: -1;
}
.github {
bottom: 10px;
right: 10px;
position: fixed;
border-radius: 10px;
background: #fff;
padding: 0 12px 6px 12px;
border: 1px solid #000;
}
.github a:hover,
.github a:link,
.github a:visited,
.github a:active {
color: #000;
text-decoration: none;
}
.github img {
height: 30px;
}
.github #gh-project {
font-size: 20px;
padding-left: 5px;
font-weight: bold;
vertical-align: bottom;
}
.bg-img {
background-repeat: no-repeat;
position: fixed;
background-size: cover;
z-index: -1;
}
#bgCanvas {
background-repeat: no-repeat;
offset-position: center;
position: fixed;
background-size: cover;
z-index: -1;
}
/* span#intro {
margin-top: 40%;
color: white;
} */
.flex {
display: flex;
justify-content: center;
/* margin-top: 50%; */
}
.introParagraph {
display: inline-block;
position : relative;
}
p {
/* margin-top: 0; */
font-family: Roboto, sans-serif;
margin-top: 60%;
margin-bottom: 1rem;
text-align: center;
padding: 2px;
color: white;
}
form {
display: flex;
justify-content: center;
}
/* span#intro {
font-family: Roboto, sans-serif;
display: inline-block;
position: absolute;
animation: appear 2s;
animation-fill-mode: forwards;
margin-top: 35%;
margin-left: 15%;
} */
p#intro {
color: white;
/* position: absolute; */
position: fixed;
animation: appear 2s;
/* animation-fill-mode: forwards; */
margin-top: 35%;
/* color: white; */
/* right: 0; */
}
.name {
margin-left: 39%;
color: white;
}
/* span#intro styles */
#keyframes appear {
from {
left: -100px;
}
to {
left: 140px;
/* left: 30.5%; */
/* text-align: center; */
}
}
#-moz-keyframes appear {
from {
left: -100px;
}
to {
left: 140px;
}
}
#-webkit-keyframes appear {
from {
left: -100px;
}
to {
left: 140px;
}
}
#-o-keyframes appear {
from {
left: -100px;
}
to {
left: 140px;
}
}
.name {
font-family: Roboto, sans-serif;
text-align: center;
display: inline-block;
/* position: absolute; */
position: fixed;
margin-top: 48%;
/* margin-left: 43%; */
}
/* span#intro,
.name,
p {
color: #ffffff;
} */
button {
margin-top: 10%;
/* background-color: initial; */
/* background-color: white; */
border: 2px solid black;
animation: button 2s;
/* padding: 10px; */
border-radius: 5%;
background-color: lightsteelblue;
}
#divButton {
border-radius: 10px;
}
#keyframes button {
0% {
transform:translateY(-100%);
opacity: 0;
}
15% {
transform:translateY(-100%);
opacity: 0;
}
}
/* MEDIA QUERY 720PX */
#media (min-width: 720px) {
span#intro {
color: white;
font-size: 30px;
margin: 0;
margin-top: 20%;
margin-left: 25%;
}
.name {
/* font-family: Roboto, sans-serif;
text-align: center;
display: inline-block;
position: absolute; */
margin-top: 32%;
margin-left: 40%;
font-size: 30px;
}
p.introParagraph {
font-size: 30px;
margin-top: 40%;
}
form {
font-size: 30px;
}
}
/* MEDIA QUERY 1024px */
#media (min-width: 1024px) {
span#intro {
color: white;
font-size: 30px;
margin: 0;
/* margin-top: 20%;
margin-left: 25%; */
margin: 15% 31.5%;
}
.name {
/* margin-top: 35%; */
margin: 25% 43%
}
p.introParagraph {
margin-top: 34%;
}
button {
margin-top: 5%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="styles2.css"> -->
<!-- <link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&family=Dancing+Script&family=Roboto:wght#100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles2.css">
<title>New Portfolio</title>
</head>
<body>
<header class="header1">
<!-- <canvas id="bgCanvas"></canvas> -->
<!-- <video>
<source src="video/153868659.mp4" type="video/mp4" loop autoplay preload="auto">
</video> -->
<!-- <h4 class="name">Peter Ayad</h4> -->
<!-- <nav class="navbar navbar-dark navbar-expand-md"> -->
<!-- <div class="nav_toggle" id="nav-toggle"> -->
<!-- Peter Ayad
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks"> -->
<!-- <div class="collapse navbar-collapse" id="navLinks"></div> -->
<!-- <ul class="nav_menu" id="nav-menu"> -->
<!-- <ul class="navbar-nav">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Resume</li>
<li class="nav-item">Projects</li>
<li class="nav-item">Contact</li>
</ul> -->
<!-- </div> -->
<!-- <i class="bx bxs-grid"> -->
<!-- <i class="bx bxs-grid" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"></i> -->
<!-- </nav> -->
<!-- <h1 class="mainHeader">Welcome to Peter's Portfolio</h1> -->
</header>
<!-- <canvas id="bgCanvas"></canvas> -->
<!-- Courtesy of CodePen/Vincent Garreau -->
<!-- <p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGxvQd" data-user="VincentGarreau" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/VincentGarreau/pen/bGxvQd">
particles.js</a> by Vincent Garreau (#VincentGarreau)
on CodePen.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>-->
<!-- Courtesy of CodePen/Vincent Garreau -->
<div id="tsparticles"></div>
<section class="mainSection">
<div class="mainPage">
<div class="flex">
<!-- <span id="intro">Hello Im...</span> -->
<p id="intro">Hello Im...</p>
<!-- <div><span class="name">Peter Ayad</span></div> -->
</div>
<div>
<span class="name"></span>
</div>
<p class="introParagraph">
<!-- Peter is a fullstck web developer and react designer. Emmerisve and beautiful websites and apps is his passion. -->
A web developer that is passionate about <span class="create">creating</span> and designing <strong>beautiful</strong>, <span class="immersive">immersive</span>, and <em>interactive</em> websites.
</p>
<!-- <p>Interested in working together? Want to know more about what I do? check out my projects below!</p> -->
<!-- <p>Check out my work</p> -->
<form action="projects.html">
<button id="divButton">Check out my work >></button>
</form>
</div>
</section>
<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles#1.37.4/tsparticles.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="app2.js"></script>
</body>
</html>