/* FONT SIZE STYLES */ 
    .sizeGrow .char {
      --indexPlus1: calc(var(--char-index) + 1);
      font-size: calc(1em * var(--indexPlus1) / 2);
    }

    /* .size .char:nth-child(even) {
      --index1: calc(var(--char-index) + 1);
      font-size: calc(28px * var(--index1) / 2);
      color: hsl( calc( 140 + 70 * var(--char-percent) ), 90%, 65%);
    } */

    /* this one doesn't work too well, but with a new path it might */
    .loopPath .char{
        offset-path: path('M.2 219.6c247-107 233.3 91.4 406.4 138.4C659.2 426.6 750.2 6.6 552.2.6 337.7-5.9 426.9 415 696.1 359.4c256.1-52.9 182.1-217.9 413.1-163.9');
        offset-distance: calc(var(--char-index) * 2.5rem);
    }

  /* COLOR STYLES */
    .bluGrnGrad .char {
        color: hsl( calc( 140 + 70 * var(--char-percent) ), 90%, 65%);
    }

    .redYloGrad .char {
        color: hsl( calc( 3 + 40 * var(--char-percent) ), 95%, 65%);
    }

    .rainbowG .char {
      color: hsl(calc(260 * (var(--char-index) / var(--char-total))), 90%, 70%);
    }

  /* TRANSFORM STYLES */
    .wacky .char:nth-child(odd) {
        transform: translateY(-5%) rotate(10deg);
      }

    .wacky .char:nth-child(even) {
        transform: translateY(5%) rotate(-10deg);
      }

      .dotBG .char{
      /* filter: hue-rotate(calc(5deg * var(--char-index) )); */
        background-color: hsla( calc(190 + 17 * var(--char-percent)), 90%, 15%, 82%);
        border-radius: 50%;
        margin: 1px;
        width: 1.2em;
        height: 1.2em;
        text-align: center;
        vertical-align: text-top;
        box-shadow: 2px calc(0.1em * var(--char-index)) 3px rgba(0, 0, 0, 0.4);
        z-index: calc(var(--char-total) + var(--char-index));
      }

      .eachWordGrow .word {
        --indexPlus1: calc(var(--word-index) + 1);
        font-size: calc(1em * var(--indexPlus1) / 2);
        z-index: calc(var(--word-index) + 1); 
      }

    .break .char{
      overflow: visible;  
      /* clip-path: polygon(50% 0%, 100% 0, 100% 100%, 44% 120%, 53% 68%, 46% 22%); */
      /* color: transparent; */
    }
    .break .char::before{
      clip-path: polygon(55% 0, 50% 25%, 55% 60%, 50% 120%, 0 100%, 0 0);
      transform-origin: 0 100%;
      transform: rotate(-5deg);
      visibility: visible !important;
      /* color:black; */
    } 
    
    .break .char::after{
      clip-path: polygon(50% 0%, 100% 0, 100% 100%, 44% 120%, 53% 68%, 46% 22%);
      transform-origin: 100% 100%;
      transform: rotate(4deg) translateY(5%);
      visibility: visible !important;
      /* color:black; */
    } 
    .break .char:nth-child(odd)::before{
      clip-path: polygon(55% 0, 50% 25%, 55% 60%, 50% 120%, 0 100%, 0 0);
      transform-origin: 90% 100%;
      /* transform: rotate(5deg) translateY(-2%) translateX(-6%); */
      visibility: visible !important;
      /* color:green; */
    }
   .break .char:nth-child(odd)::after{
      clip-path: polygon(50% 0%, 100% 0, 100% 100%, 44% 120%, 53% 68%, 46% 22%);
      transform-origin: 100% 100%;
      transform: rotate(4deg) translateY(-1%);
      visibility: visible !important;
      /* color:green; */
    }
    /* see https://www.w3schools.com/CSSref/sel_nth-of-type.php */
    .float .char:nth-child(+n-1){
      transform: translate(-2%, 7%) rotate(3deg);
      /* color: purple; */
    }
    .float .char:nth-child(-n+2){
    transform: translate(3%, -7%) rotate(-2deg);
    /* color:olive; */
    }
    .float .char:nth-child(2n-3){
    transform: translate(2%, 9%) rotate(3deg);
    /* color:seagreen; */
    }
    .float .char:nth-child(1){
      transform: translate(-3%, -5%) rotate(-1.5deg);
      /* color:aquamarine; */
    }


    /* 
    IDEAS
    - split horizontally with increasing width between the split
    - progessivly hide the letters with clipPath
    - "well" inset box-shadow
    - frosted glass background (make sure that blur filter renders)
    - hue-rotate for :before and :after half/half (make sure that hue filter renders)
    - <mark> tag w/ context menu
    - Use the "lines" plugin can we select .lines now?
    - Could split the background image for special effects (post MVP)
    */