<main class="wrapper">
    <section>
      <div class="sr-only">ping</div>
      <div class="text" aria-hidden="true">
          
            P
            <span class="stack bouncing">.</span>
            <span class="stack">ı</span> ng
        </div>
    </section>
    <section>
      <div class="sr-only">cling</div>
      <div class="text" aria-hidden="true">

            cl
            <span>
                <span class="stack bouncing">.</span>
                <span class="stack">ı</span>
            </span>
            ng

        </div>
    </section>
    <section>
      <div class="sr-only">string</div>
      <div class="text" aria-hidden="true">
            Str<!--This comment is required to remove whitespace created by inline-block elements.
         --><span>
                <span class="stack bouncing">.</span>
                <span class="stack">ı</span>
            </span><!--This comment is required to remove whitespace created by inline-block elements.
         -->ng
        </div>
    </section>
</main>

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}


html {
    background-color: black;
    font-family     : "Times New Roman", Times, serif;
    font-size       : 1.5em;
    color           : #ff8a00;
}

.wrapper {
    display        : flex;
    justify-content: space-evenly;
    align-items    : flex-end;
    padding        : 0.5em 1em 0.5em 1em;
}

.text {
    margin     : 0;
    line-height: 0.55;
}

span {
    display: inline-block;
}

.stack {
    display: block;
}

/*  Bouncing Animation */

@keyframes bounce {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, -10px, 0);
    }
}

.bouncing {
    animation                : bounce 0.4s;
    animation-iteration-count: infinite;
    animation-direction      : alternate;
}
@media screen and
  (prefers-reduced-motion: reduce), 
  (update: slow) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important; 
    transition-duration: 0.001ms !important;
  }
    main {
      position: relative;
    }
    main:before {
      background-color: red;
      color: white;
      content: "Reduced motion is on";
      padding: 1rem;
      position: absolute;
    }
}