The css animation needs to be centered without disturbing the layout of the homepage

HTML CSS AND JAVASCRIPT in a nutshell

The code needs to be optimized so that it fits into a website above a contact form and text should be in the center without disturbing the wordpess website layout .Please help

<head>
  <meta charset="UTF-8">
  <title></title>

  <style>

  body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: helvetica, arial, sans-serif;
  font-size: 100px;
  font-weight: bold;
  letter-spacing: -0.4rem;
}

.break {
  display: flex;
  flex-wrap: wrap;
}

.mask {
  transform: rotate(0deg);
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  animation: wobble 7s infinite;
}

@keyframes wobble {

 35% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }

}

.mask div {
  position: relative;
}



nav ul {
    display: flex;
}

nav li {
    display: block;
}

nav a {
    padding: 20px;
    text-decoration: none;
    background-color: lemonchiffon;
    margin-right: 1px;
}



  </style>


</head>

<body>

  <div class="break">
GET IN TOUCH
</div>



    <script>

    const col_count = 20;

let txt = document.querySelector(".break"),
    w = txt.getBoundingClientRect().width,
    h = txt.getBoundingClientRect().height,
    chunk_size = Math.ceil(w/col_count),
    row_count = Math.ceil(h/chunk_size);

txt.style.width = chunk_size*col_count+"px";

let html = `<div class='mask'><div>${txt.innerHTML}</div></div>`;
txt.innerHTML = "";

for(let i=0; i<row_count; i++) {
  for(let j=0; j<col_count; j++) {
    txt.innerHTML += html;
    let index = j+i*col_count;
  }
}

let masks = document.querySelectorAll(".mask");
let inMasks = document.querySelectorAll(".mask div");

for(let i=0; i<row_count; i++) {
    for(let j=0; j<col_count; j++) {
        let index = j+i*col_count;
        masks[index].style.width = chunk_size+"px";
        masks[index].style.height = chunk_size+"px";
        masks[index].style.overflow = "hidden";
        masks[index].style.animationDelay = `${index*20}ms`;
        inMasks[index].style.left = -j*(chunk_size) + "px";
        inMasks[index].style.top = -i*(chunk_size) + "px";
    }
}

    </script>




</body>

</html>

The code has been taken from the link –https://codepen.io/punishyourmachine/pen/pQZMZa?page=4

Requirements ~

1.needs to be in center
2.the code is need to be inserted above the the contact us form to showcase it.
3.Plz change the color too
4.You can correct the code by this or by going to the codepen editer

The css animation needs to be centered without disturbing the layout of the homepage