Pulsating multiple borders with box-shadow & var

dabblet.css

/* Pulsating multiple borders with box-shadow & var */
body {
	--bg: #6495ED;
	background-color: var(--bg);
}
div {
	--border-size: 4px;
	width: 50%;
	height: 10em;
	background-color: white;
	position: fixed;
	top: 25%;
	left: 25%;
	box-shadow: 0 0 0 var(--border-size) black,
		0 0 0 calc(2 * var(--border-size)) var(--bg),
		0 0 0 calc(3 * var(--border-size)) black,
		0 0 0 calc(4 * var(--border-size)) var(--bg),
		0 0 0 calc(5 * var(--border-size)) black;
	transition: 1s;
}
div:hover {
	--border-size: 8px;
}

dabblet.html

<div></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}