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);
			}
		}
	}
}