:root {
	--height: 20px;
	--radius: 2px;
}
html,
body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
}
body {
	padding: 30px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	box-sizing: border-box;
}
.object {
	width: calc(10vw - (5px * 4));
	height: calc(10vh - (5px * 4));
	border-radius: var(--radius);
	background: linear-gradient(315deg, #ffffff, #e4d9e6);
	box-shadow: calc(-1 * var(--height)) calc(-1 * var(--height)) 15px #cdc3cf, var(--height) var(--height) 15px #ffffff;
	transition: all 500ms;
	margin: 5px;
}

.objec--2 > div {
	background: #fdf1ff;
	box-shadow: calc(-1 * var(--height)) calc(-1 * var(--height)) 15px #cdc3cf, var(--height) var(--height) 15px #ffffff;
}

.object--3 > div {
	background: linear-gradient(315deg, #e4d9e6, #ffffff);
	box-shadow: calc(-1 * var(--height)) calc(-1 * var(--height)) 15px #cdc3cf, var(--height) var(--height) 15px #ffffff;
}

.object--4 > div {
	background: #fdf1ff;
	box-shadow: inset calc(-1 * var(--height)) calc(-1 * var(--height)) 15px #cdc3cf, inset var(--height) var(--height) 15px #ffffff;
}

const changeStyle = false;
let root = document.documentElement;

let html = '';
for(var x=0; x<10; x++) {
	for(var y=0; y<10; y++) {
		html += '<div class="object"></div>';
	}
}
document.body.innerHTML = html;
const all = document.querySelectorAll(".object");

function toggle() {
	const hue = r(0,360);
	const radius = `${r(0,20)}px`
	console.log(radius)
	root.style.setProperty('--radius', radius);
	all.forEach(obj => {
		var type = parseInt(Math.random() * 3) + 1;
		const b = `hsla(${hue}, ${r(50,80)}%, ${r(60,90)}%, ${r(10,70)/10})`;
obj.style.background = b;
		obj.style.setProperty('--height', `${parseInt(Math.random()*11, 10)+5}px`);
	});
}

toggle();
setInterval(toggle, 2000);

function r(iF, iT) {
	return parseInt(Math.random()*(iF-iT)+iT, 10)
}

document.body.classList.add('object--2');