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

.wordcloud{
	--totalwidth:min(600px,var(--articleWidth));
	--heightmargin:60px;
    margin-top:5em;
    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;
}

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

.wordcloud .text{
    font-family:Courier;
    font-size:40px;
}

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

	text-align:right;
	font-family:Courier;
    transform:translateY(75%);
}

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