/**

Styles to apply the handwritten effect to a thinger

**/

.handwritten-wrap {
  font-family: "Caveat", cursive;

  a {
    position: relative;
    color: inherit;
    text-decoration: none;
  }

  a::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: -0.15em;
    height: 0.3em;
    pointer-events: none;

    background: repeating-linear-gradient(
      -3deg,
      currentColor 0 1.5px,
      transparent 1.5px 4px
    );
    opacity: 0.9;
  }

  del {
    position: relative;
    text-decoration: none;
    color: inherit;
  }

  del::after {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    width: calc(100% + 8px);
    height: 1.4em;
    transform: translateY(-50%);
    pointer-events: none;

    background-color: currentColor;

    -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'>\
<path d='M2 8 Q20 2 40 10 T80 8 T98 10' stroke='white' stroke-width='3' fill='none'/>\
<path d='M2 14 Q30 6 60 14 T98 12' stroke='white' stroke-width='2' fill='none'/>\
</svg>");
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-size: auto 100%;

    mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'>\
<path d='M2 8 Q20 2 40 10 T80 8 T98 10' stroke='white' stroke-width='3' fill='none'/>\
<path d='M2 14 Q30 6 60 14 T98 12' stroke='white' stroke-width='2' fill='none'/>\
</svg>");
    mask-repeat: repeat-x;
    mask-size: auto 100%;
  }
}