.it-is-written {
	color: #555;
  	font-size: 26px;
	}



/**KEY VERSE**/
/* 
  these type the CSS variable as color
  unlocking the ability for the browser 
  to animate just that portion
*/
@property --＠color-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(98 100% 62%);
}

@property --＠color-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(204 100% 59%);
}

/* keyframes that change the color variable */
@-webkit-keyframes gradient-change {
  to {
    --＠color-1: hsl(210 100% 59%);
    --＠color-2: hsl(310 100% 59%);
  }
}
@keyframes gradient-change {
  to {
    --＠color-1: hsl(210 100% 59%);
    --＠color-2: hsl(310 100% 59%);
  }
}

.Key-Verse {
  /* apply variable changes over time */
  -webkit-animation: gradient-change 2s linear infinite alternate;
          animation: gradient-change 2s linear infinite alternate;
  
  background: linear-gradient(
    /* 
      in oklch produces more vibrant gradient results 
      learn more https://developer.chrome.com/docs/css-ui/access-colors-spaces#color_interpolation
    */
    to right in oklch, 
    /* use the variables in a gradient (or wherever!) */
    var(--＠color-1), 
    var(--＠color-2)
  );
  
  /* old browser support */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* modern browser version */
  background-clip: text;
  color: transparent;
}




@layer demo.support {
  	.Key-Verse {
    		font-family: "Dank Mono", ui-monospace, monospace;
  		}
	}