we.type | JK_holterdipolter

<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
|                                                                 |
|                Filename : JK_holterdipolter.html                |
|                  Author : Josephine Kähler                      |
|                                                                 |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->

<!DOCTYPE html>
<html>

<head>

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

    body {
      font-family: Konsole;
      font-size: 20vw;
      margin-top: 20vw;
      background-color: white;
    }

    /* with the mix-blend-mode you can change the color of the overlay area that arises when the spans are turning*/
    span {
      mix-blend-mode: difference;
      color: white;
      height: 10vw;
    }

    /* Every second span turns counterwise */
    span:nth-child(2n+1) {
      animation: counterwise 5s ease 0s infinite none;
      display: inline-block;
    }

    /* Every second span turns clockwise */
    span:nth-child(2n) {
      animation: clockwise 5s ease 0s infinite none;
      display: inline-block;
    }

    /* here you can define the keyframes for your animation */
    @keyframes clockwise {
      0% {
        transform: rotate(-0.5turn);
      }

      50% {
        transform: rotate(0turn);
      }

      100% {
        transform: rotate(-0.5turn);
      }
    }

    @keyframes counterwise {
      0% {
        transform: rotate(0turn);
      }

      50% {
        transform: rotate(-0.5turn);
      }

      100% {
        transform: rotate(0turn);
      }
    }

    .main {
      text-align: center;

    }
  </style>

</head>



<body>
  <div class="main">
    <span>ho</span><span>lt</span><span>er</span><span>die</span>
    <br>
    <span>po</span><span>lt</span><span>er</span><span></span>
  </div>
</body>

</html>