html{
	/* Makes web page fill whole screen. */
	min-height: 100%;
}

:root{
	/* 2 dashes and a name, then store a property in the variable. */
	--my-height: 123pt;
	--my-width: 123px;
	--my-gradient: radial-gradient(red, orange, yellow, green, blue, violet);
	--my-border: 8px outset #a3a3a3;
	--my-shadow: 9px 10px 7px #868686;
	--my-border: 47%;
	--font-size: 1pt;
}


section{
	float: left;
	height: var(--my-height);
	width: var(--my-width);
	background-image: var(--my-gradient);
	border: var(--my-border);
	box-shadow: var(--my-shadow);

	animation-name: spinning;
	animation-duration: 4s;
}

section > p{
	animation-name: spinning;
	animation-duration: 4s;
	font-size: var(--font-size);
	
}


article{
	float: right;
	height: var(--my-height);
	width: var(--my-width);
	background-image: var(--my-gradient);
	border: var(--my-border);
}


@keyframes spinning {
	from {
		float: left;
		height: 10px;
		width: 10px;
		background-image: var(--my-gradient);
		border: var(--my-border);
		box-shadow: var(--my-shadow);
		border-radius: var(--my-border);		
	}
	to {
		float: left;
		height: var(--my-height);
		width: var(--my-width);
		background-image: var(--my-gradient);
		border: var(--my-border);	
		box-shadow: var(--my-shadow);
		font-size: 12pt;
	}
}