Animated text slides off to the right in HTML CSS – Blancer.com Tutorials and projects

The tutorial I followed for the animated text is: https://www.youtube.com/watch?v=4PbgtyE0mGs .

The animated text appears correctly and works, however, when the animation has finished, the text slides off to the right off the screen. After having a look online, it looks like I need to use display:flex , however, using this makes my custom cursor implementation not work. The custom cursors do not stay as the png image for most of the page. Is there any other way to fix this issue?

Here is my HTML page:

    <!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">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>

        <h1 data-text="&nbsp;Hi! I'm Julie &#58;&#41&nbsp;">&nbsp;Hi! I'm Julie &#58;&#41&nbsp;</h1>

        <div class="main-wrapper">
            <div class="season winter" data-background="#2b1055">Winter</div>
            <div class="season summer" data-background="#5988e2">Summer</div>
            <div class="season spring" data-background="#7cdea1">Spring</div>
            <div class="season autumn" data-background="#f79762">Autumn</div>
        </div>

        <div class="wrapper">
            <div>
                <img id="earth" src="img/earth.png" alt="scroll">
            </div>
        </div>

        <script src="app.js"></script>
    </body>
</html>

CSS:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  transition: background 1s ease-in-out; 
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
}

h1 {
  align-items: center;
  position: relative;
  font-size: 6em;
  color: transparent;
  margin: 40px;
  cursor: url('img/winter-cursor.png'), auto;
}

h1::before {
  content: attr(data-text);
  position: absolute;
  color: white;
  width: 350px;
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid #fff;
  animation: animate 8s linear infinite;
  filter: drop-shadow(0 0 20px #fff);
}

@keyframes animate {
  0%, 10%, 100% {
    width: 0;
  }
  70%, 90% {
    width: 100%;
  }
}

.season {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  color: #fff;
  font-family: sans-serif;
  font-size: 72px;
  font-weight: 600;
  text-transform: uppercase;
}

.winter {
  cursor: url('img/winter-cursor.png'), auto;
}

.summer {
  cursor: url('img/summer-cursor.png'), auto;
}

.spring {
  cursor: url('img/spring-cursor.png'), auto;
}

.autumn {
  cursor: url('img/autumn-cursor.png'), auto;
}

.wrapper {
  top: 120%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  cursor: url(img/earth-cursor.png), auto;
}

#earth {
  width: 800px;
  height: 800px;
  cursor: url(img/earth-cursor.png), auto;
}