.wordcloud > .wordcloudwords{
	position:absolute;

	width:calc(var(--w));
	height:calc(var(--h));
	transform: translate(var(--x), calc(var(--y) + var(--heightmargin)));
}

.wordcloudwords > p{
	margin:0px;
	font-size: calc(var(--w) * 1.6 / var(--length));
	font-family:Courier;
	font-weight:bold;
	transform:scaleY(calc(var(--hU) / var(--wU) * var(--length) *0.6));
	transform-origin: top left;
	opacity:calc(var(--hovertimer) - var(--n) - 1);
}

@property --hovertimer{
	syntax: '<number>';
	initial-value: 0;
	inherits: true;
}

.wordcloud{
	--totalwidth:300px;
	--heightmargin:60px;
	margin:0px;
	position:relative;
	width:calc(var(--totalwidth));
	height:calc(var(--totalwidth) * var(--aspect) + var(--heightmargin) * 2);
	color:var(--mainCOL);
	--individualdelay:0.1s;
	transition: --hovertimer calc(var(--individualdelay) * (1 + var(--wordcount))) linear;
}

.wordcloud:hover{
	--hovertimer:calc(var(--wordcount));
	--individualdelay:0.3s;
}

.wordcloud > .nojstext{
	font-size:100px;
	background-color:var(--mainCOL);
	font-family:Courier;
}

#lquote{
	position:absolute;
	font-size:100px;
	color:var(--mainCOL);
	text-align:left;
	transform:translate(0,calc(-1 * var(--heightmargin)));
	font-family:Courier;
}

#tutorial{
    top:50%;
    left:50%;
    transform:translateX(-50%);
    color:var(--greyCOL);
    font-style:italic;
    position:absolute;
    opacity:calc(1 - var(--hovertimer))
}

#rquote{
	position:absolute;
	right:0px;
	bottom:0px;
	font-size:100px;

	color:var(--mainCOL);
	text-align:right;
	transform:translate(0,var(--heightmargin));
	font-family:Courier;
}