section.portfolio-experiment
  .experiment-title(contenteditable="true") This is cray

$font: "Roboto", monospace;

.portfolio-experiment {
  background: #00ffa5;
  color: #203e86;

  $steps: 50;
  .experiment-title {
    outline: none;
    font-size: 10vw;
    text-align: center;
    font-family: $font;
    min-height: 10vw;
    max-width: 80vw;
    min-width: 10vw;
    
    &,
    * {
      animation: cray 6s infinite steps($steps);
      display: inline-block;
    }
  }

  @keyframes cray {
    @for $i from 1 to $steps {
      $per: 100% / $steps * $i;
      $weight: (
        100,
        200,
        300,
        400,
        500,
        600,
        700
      );
      $style: (
        normal,
        italic,
        normal,
        normal
      );
      $decor: (
        none,
        none,
        line-through,
        underline,
        none,
        none,
        none
      );
      $trans: (
        none,
        none,
        uppercase,
        lowercase,
        capitalize,
        none,
        none,
        none,
        none,
        none,
        none
      );

      $arrayW: random(7);
      $arrayS: random(4);
      $arrayD: random(7);
      $arrayT: random(11);

      #{$per} {
        font-weight: nth($weight, $arrayW);
        font-style: nth($style, $arrayS);
        text-decoration: nth($decor, $arrayD);
        text-transform: nth($trans, $arrayT);
      }
    }
  }
}