style.css

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background: #151515;
	font-family: Arial, Helvetica, sans-serif;
	height: 100vh;
}
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
:root {
	/* this is the one measure to change for adjusting all, as all dimensions are set relative */
	--dimension: max(6vw, 80px);
	--color1: #f008;
	--color2: #0f08;
	--color3: #00f8;
	--shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

/* The grid - container - div */
#container {
	margin-top: 30px;
	width: fit-content;
	display: grid;
	gap: 1px;

	z-index: -2;
}

/* the zStacks */
z-stack {
	width: calc(var(--dimension) * 1.033);
	height: calc(var(--dimension) * 1.133);
	position: relative;
	background: orange;
	border-radius: 0 50% 50% 50%;

	/*overflow: hidden;*/
}

z-stack * {
	border: 1px solid #0000007c;
	/* box-shadow: var(--shadow); */
}

/* Define styles for individual z-stack elements */
z-stack .one {
	height: calc(var(--dimension) * 0.5);
	width: calc(var(--dimension) * 0.5);
	background-color: var(--color1);
	z-index: 1;
}

z-stack .two {
	height: var(--dimension);
	width: var(--dimension);
	background-color: var(--color2);
	border-radius: 0 50% 50% 50%;
}

z-stack .three {
	height: calc(var(--dimension) * 0.83);
	width: calc(var(--dimension) * 0.83);
	background-color: var(--color3);
	border-radius: 50%;
}

z-stack .four {
	height: calc(var(--dimension) * 0.4);
	width: calc(var(--dimension) * 0.4);
	background-color: var(--color2);
	border-radius: 50%;
	z-index: 1;
}

z-stack .five {
	height: calc(var(--dimension) * 0.3);
	width: calc(var(--dimension) * 0.3);
	background-color: var(--color1);

	z-index: 1;
}

z-stack .six {
	height: calc(var(--dimension) * 0.2);
	width: calc(var(--dimension) * 0.2);
	background-color: var(--color3);
	z-index: 1;
}

/* Control-panel with buttons and inputs */
#control-panel {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 10px;

	padding: 0 20px 20px;
	border-radius: 20px;
	background: #eeeeee2e;
	border: 1px solid #eeeeee2d;
	bottom: 20px;
}

button {
	margin-top: 20px;
	width: 300px;
	height: 30px;
	cursor: pointer;
	border-radius: 10px;
	background: #eeeeee2e;
	border: 1px solid #eeeeee2d;
	color: white;
}

button:hover {
	transform: scale(1.05, 1.05);
	background-color: beige;
	border: 2px solid orange;
	color: black;
}

input {
	margin-top: 5px;
}
input[type='range'] {
	-webkit-appearance: none;
	border-radius: 3px;
	border: 1px solid #d3d3d3;
	height: 8px;
	margin: 10px;
	box-shadow: var(--shadow);
}
input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: max(20px, 1.2vw);
	width: max(20px, 1.2vw);
	border-radius: 50%;
	background: orange;
	cursor: ew-resize;
	box-shadow: var(--shadow);
}
#numInput-container {
	width: 280px;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
}
label {
	margin-top: 20px;
	color: white;
	text-align: center;
}
input[type='number'] {
	margin: 0 10px;
}
/* always show arrows */
input[type='number']::-webkit-inner-spin-button {
	opacity: 1;
}
input:hover {
	transform: scale(1.1);
}