<div id="box">
	<h1 id="text">CSS<br/>is Awesome</h1>
</div>

body, html {
	overflow: hidden;
}
@font-face {	
	font-family:'Barlow GX';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/BarlowGX.ttf') format('woff-variations');
	font-style: normal;
	font-weight: 22 188;
	font-stretch: 300% 500%;
}

#box {
	--size: 237px;

	display: flex;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 4px solid black;
	width: var(--size);
	height: var(--size);

	@supports (resize: both) {
		resize: both;
		overflow: auto;
	}
}


h1 {
	--fontStretch:  500%;
	--fontSize: 78px;
	
	font-family:'Barlow GX';
	font-size: var(--fontSize);
	font-weight: 50;
	margin: 0;
	text-transform: uppercase;
	line-height: 0.9;
	font-stretch: var(--fontStretch);
	display: inline-block;

}


// Toggle
.controls {
	position: absolute;
	bottom: 10px;
	z-index: 100;
	display: block;
	width: 100%;
	text-align: center;
}

.button {
	border: 3px solid black;
	padding: 10px;
	background: white;
	color: black;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 700;
	
	&:hover,
	&:focus {
		background: black;
		color: white;
	}
}

// !!!! This code is experimental...don't blame me if your performance tanks.

const box = document.getElementById("box");
const text = document.getElementById("text");

function resizeBox() {
	calcTextWidth();
	calcTextSize();
}
resizeBox();

new ResizeObserver(resizeBox).observe(box);

function calcTextWidth() {
	const parentContainerWidth = text.parentNode.clientWidth;

	const currentTextWidth = text.scrollWidth;
	const currentFontStretch = parseInt(window.getComputedStyle(text).fontStretch);
	
	
	console.log('parent: ' + parentContainerWidth + ' textwidth: ' + currentTextWidth + ' stretch: ' +currentFontStretch);
	const newValue = Math.min(Math.max(300, (parentContainerWidth / currentTextWidth) * currentFontStretch), 500)

	text.style.setProperty('--fontStretch', newValue + '%');
}

function calcTextSize() {
	const parentContainerWidth = text.parentNode.clientWidth;
	const currentTextWidth = text.scrollWidth;
	const currentFontSize = parseInt(window.getComputedStyle(text).fontSize);
	const newValue = Math.min(Math.max(16, (parentContainerWidth / currentTextWidth) * currentFontSize), 500)

	text.style.setProperty('--fontSize', newValue +'px');
}