:root {
	--black: #000;
	--greyDark: #7d808a;
	--white: #fff;
}

*,
*::after,
*::before,
html,
body {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background: var(--greyDark);
	display: grid;
	height: 100vh;
	place-items: center;
	position: relative;
}

#app {
	background-color: var(--white);
	border: 2vmin solid var(--black);
	box-shadow: 0 5vmin 15vmin -5vmin;
	box-sizing: content-box;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(5, 1fr);
	padding: 5vmin;
}
#app > * {
	display: grid;
	height: 15vmin;
	overflow: hidden;
	place-items: center;
	position: relative;
	width: 15vmin;
}

#app * > * {
	border-radius: 100%;
	height: 100%;
	position: absolute;
	text-decoration: none;
	transition: 0.2s ease;
	width: 100%;
}

let app = document.createElement("div")
app.setAttribute("id", "app")
document.body.prepend(app)
let box = 15

let colors = [
	{
		color: "#0ff"
	},
	{
		color: "#00f"
	},
	{
		color: "#fd0"
	},
	{
		color: "#0F8"
	},
	{
		color: "#f04"
	}
];

function colorRandom() {
	return colors[Math.floor(Math.random() * colors.length)].color
}

function nullone() {
	let ons = Math.floor(Math.random() * 3)
	if (ons == 0) {
		ons = "0"
	} else if (ons == 1) {
		ons = "50%"
	} else if (ons == 2) {
		ons = "-50%"
	}
	return ons
}

function create() {
	for (let i = 0; i < box; i++) {
		let span = document.createElement("span")
		let s = document.createElement("s")
		span.prepend(s)
		app.prepend(span)
	}
	return rand()
}
create()

function rand() {
    for (let j = 0; j < box; j++) {
        let spanColor = document.querySelectorAll('span')[j]
        let sColor = document.querySelectorAll('span s')[j] 
        spanColor.style.backgroundImage = 'linear-gradient(' + Math.floor(Math.random() * 360) + 'deg,' + colorRandom() + ',' + colorRandom() + ')'
        sColor.style.backgroundImage = 'linear-gradient(' + Math.floor(Math.random() * 360) + 'deg,' + colorRandom() + ',' + colorRandom() + ')'
        sColor.style.top = nullone()
        sColor.style.left = nullone()
    }
}

app.addEventListener('click', rand)

//setInterval(rand, 1000)