Index page for animated text

<-- ! Html File -->
<!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="index.css">

    <title>Happy Birthday</title>

</head>
<body>


    <div class ="wrapper">


        <p class ="caption">Have a lovley day from Mark</p>

        <div class="waviy">
          <span style="--i:1">H</span>
          <span style="--i:2">a</span>
          <span style="--i:3">p</span>
          <span style="--i:4">p</span>
          <span style="--i:5">y</span>
          <span style="--i:6"></span>
          <span style="--i:7">B</span>
          <span style="--i:8">i</span>
          <span style="--i:9">r</span>
          <span style="--i:10">t</span>
          <span style="--i:11">h</span>
          <span style="--i:12">d</span>
          <span style="--i:13">a</span>
          <span style="--i:14">y</span>
          <span style="--i:1"></span>
          <span style="--i:2">J</span>
          <span style="--i:3">a</span>
          <span style="--i:4">c</span>
          <span style="--i:6">q</span>
          <span style="--i:7">u</span>
          <span style="--i:8">i</span>

         </div>

         </div>


</body>
</html>