<h1>variable<span>fonts</span></h1>

$green: #ff0080;
$purple: #6e1f58;
$pink: #ff8c00;

body {
	background: #23074d;
	overflow: hidden;
}

@font-face {
	font-family: "Gingham Variable";
	src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Gingham.woff2")
			format("woff2"),
		url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Gingham.woff")
			format("woff");
	font-weight: 300 700;
	font-stretch: 1% 150%;
}

h1 {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	margin: 0;
	width: 100%;
	font-size: 18vw;
	font-family: "Gingham Variable", BlinkMacSystemFont, sans-serif;
	//font-variation-settings: "wght" 700, "wdth" 150;
	font-weight: 700;
	font-stretch: 150%;
	
	color: $pink;
	white-space: nowrap;
	text-align: center;
	transition: font-weight 250ms ease-out, font-stretch 250ms ease-out;
	text-shadow: -1px -1px 0 $purple, 1px -1px 0 $purple, -1px 1px 0 $purple,
		1px 1px 0 $purple, 1px 0px 0px $green, 0px 1px 0px $green, 2px 1px 0px $green,
		1px 2px 0px $green, 3px 2px 0px $green, 2px 3px 0px $green, 4px 3px 0px $green,
		3px 4px 0px $green, 5px 4px 0px $green, 3px 5px 0px $purple,
		6px 5px 0px $purple, -1px 2px 0 black, 0 3px 0 $purple, 1px 4px 0 $purple,
		2px 5px 0px $purple, 2px -1px 0 $purple, 3px 0 0 $purple, 4px 1px 0 $purple,
		5px 2px 0px $purple, 6px 3px 0 $purple, 7px 4px 0 $purple;

	span {
		//font-variation-settings: "wght" 0, "wdth" 0;
		font-weight: 300;
		font-stretch: 1%;
		transition: all 250ms ease-out;
	}

	&:hover {
	//	font-variation-settings: "wght" 0, "wdth" 0;
		
		font-weight: 300;
		font-stretch: 1%;
		
		span {
			font-weight: 700;
			font-stretch: 150%;
		//	font-variation-settings: "wght" 700, "wdth" 150;
		}
	}
}

// JS is to make the text editable, not required for the effect. Thanks for the suggestion @chriscoyier! 
var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
    this.setAttribute("data-heading", this.innerText);
});