we.type | MR

<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
|                                                                 |
|                Filename : MR_boing.html                         |
|                  Author : Maik Reinke                           |
|                                                                 |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->

<!DOCTYPE html>
<html>

<head>
  <title>BOING</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style media="screen">
    @font-face {
      font-family: Konsole;
      src: url(../_fonts/Konsolev1.1-VF.ttf);
    }

    .box {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16vh;
    }

    .box span {
      font-family: Konsole;
      position: relative;
      top: 150px;
      display: inline-block;
      animation: bounce 0.6s ease infinite alternate;


    }

    @keyframes bounce {
      0% {
        font-variation-settings: "wght" 800;

        /*Schatten weichgezeichnet, a= Transparenz */
        /*text-shadow: 0  20px 20px rgba(0, 0, 0, 0.2);*/
      }

      100% {
        top: -170px;
        font-variation-settings: "wght" 50;
        /*text-shadow: 0 10px #ccc;*/
      }
    }

    .box span:nth-child(2) {
      animation-delay: 0.2s;
    }

    .box span:nth-child(3) {
      animation-delay: 0.3s;
    }

    .box span:nth-child(4) {
      animation-delay: 0.4s;
    }

    .box span:nth-child(5) {
      animation-delay: 0.5s;
    }
  </style>

</head>


<body>

  <div class="box">
    <span>B</span>
    <span>O</span>
    <span>I</span>
    <span>N</span>
    <span>G</span>
  </div>


</body>
</html>