we.type | SL

<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
|                                                                 |
|                Filename : SL_summ.html                          |
|                  Author : Simon Lindner                         |
|                                                                 |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->

<!DOCTYPE html>
<html>

  <head>

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

      body {
        margin:0;
      }

      .wrapper {
        width: 100vw;
        height: 100vh;
        background-color: white;
      }


        @keyframes move {
            0% {top:10vh;left:10vw;right:auto;bottom:auto;font-size:2vw}
            5% {top:10vh;left:30vw;}
            10% {top:50vh;left:60vw;font-size:12vw}
            15% {top:70vh;left:30vw;}
            20% {top:30vh;left:70vw;}
            25% {top:60vh;left:80vw;font-size:2vw}
            30% {top:85vh;left:10vw;}
            35% {top:40vh;left:10vw;font-size:12vw}
            40% {top:20vh;left:80vw;font-size:3vw}
            45% {top:80vh;left:40vw;}
            50% {top:50vh;left:20vw;}
            55% {top:30vh;left:60vw;font-size:12vw}
            60% {top:10vh;left:30vw}
            65% {top:30vh;left:40vw;}
            70% {top:70vh;left:10vw;font-size:2vw}
            75% {top:85vh;left:40vw;}
            80% {top:60vh;left:70vw;font-size:12vw}
            85% {top:30vh;left:40vw;}
            90% {top:40vh;left:10vw;}
            95% {top:50vh;left:60vw;}
            100% {top:10vh;left:10vw;right:auto;bottom:auto;font-size:2vw}
        }

        @keyframes shake {
          10%, 90% {
            transform: rotate(var(--rotation-degree));
          }
          
          20%, 80% {
            transform: rotate(calc(-1 * var(--rotation-degree)));
          }

          30%, 50%, 70% {
            transform: rotate(var(--rotation-degree));
          }

          40%, 60% {
            transform: rotate(calc(-1 * var(--rotation-degree)));
          }
          0%, 100% {
            transform: rotate(calc(-1 * var(--rotation-degree)));
          }
        }

      .c1, .c2, .c3, .c4 {
        animation-name: example;
        position:relative;
        display:inline-block;
        font-family: "Konsole";
        color:black;
      }

      .my-text {
        font-size: 2vw;
        position: fixed;
        animation: move 6s ease-in-out both, shake .4s cubic-bezier(.36,.07,.19,.97) both;
        animation-iteration-count: infinite;
        font-variation-settings: "wght" 400, "wdth" 50;
        top:10vh;
        margin:0;
        left:10vw;
        transform: rotate(calc(-1 * var(--rotation-degree)));
        padding: 0px 1rem;
      }

      .c1 {
        animation-delay:.1s;
      }
      .c2 {
        animation-delay: .3s;
      }
      .c3 {
        animation-delay:.2s;
      }
      .c4 {
        animation-delay: .4s;
      }


    </style>

  </head>

  <body>
    <div class="wrapper">
    <p class="my-text">
    <span class="c1">s</span><span class="c2">u</span><span class="c3">m</span><span class="c4">m</span>
    </p>
  </div>
  </body>

</html>