:root {
	--response-color: #3498db;
	transition: --response-color 0.5s ease;
}

#ballDiv {
	position: relative;
	background:black;
	background-size: 99% 99%;
	width: min(60vw, 60vh);
	height: min(60vw, 60vh);
	max-width: 500px;
	max-height: 500px;
	border-radius:50%;
	border: solid black 1px;
	box-shadow: 0 0 5px rgb(51, 102, 204);
}


#innerBgDiv {
	position:absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: -webkit-repeating-linear-gradient(135deg,var(--response-color),var(--response-color) 2px,rgba(0, 0, 0, 0) 2px,rgba(0, 0, 0, 0) 9px);
	background: -o-repeating-linear-gradient(135deg,var(--response-color),var(--response-color) 2px,rgba(0, 0, 0, 0) 2px,rgba(0, 0, 0, 0) 9px);
	background: repeating-linear-gradient(-45deg,var(--response-color),var(--response-color) 2px,rgba(0, 0, 0, 0) 2px,rgba(0, 0, 0, 0) 9px);
	-webkit-mask-image: -webkit-radial-gradient(rgba(0, 0, 0, 0.15) 0,rgba(0, 0, 0, 0) 74%,rgba(0, 0, 0, 0) 85%);
	-o-mask-image: radial-gradient(rgba(0, 0, 0, 0.15) 0,rgba(0, 0, 0, 0) 74%,rgba(0, 0, 0, 0) 85%);
	-moz-mask-image: radial-gradient(rgba(0, 0, 0, 0.15) 0,rgba(0, 0, 0, 0) 74%,rgba(0, 0, 0, 0) 85%);
	mask-image: radial-gradient(rgba(0, 0, 0, 0.15) 0,rgba(0, 0, 0, 0) 74%,rgba(0, 0, 0, 0) 85%);
}

/*
 * Where the response - the 8 ball answer - is displayed
 * responseDivBg is a background to get the outline and background to be the correct
 * size and hidden/cropped by the coverDiv.  The text part is displayed on top
 * in the responseDivText.
 */
#responseDivBg, #responseDivText {
	position:absolute;

	top: 50%;
	left: 50%;
	padding: 5px;

	border-radius: 10px;

	transform: translate(-50%, -50%);

	transition: transform 2s ease-out;
	will-change: transform;

}
#responseDivBg {
	z-index: 2;
	opacity: 0;
	color: rgba(0,0,0,0);
	background:black;
	border: solid 2px var(--response-color);
}
#responseDivText {
	position:absolute;
	z-index: 5;
	opacity: 0;
	color: var(--response-color);
}


#coverDiv {
	position: absolute;
	z-index: 3;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	padding: 0;
	margin: 0;
}

#coverSvgPaths {
	cursor:pointer;
}


#lidDiv {
	position: absolute;
	z-index: 4;
	opacity: 1;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: 53.5%;
	height: 53.5%;
	border-radius: 50%;

	/* Gradient like an 8-ball highlight */
	background: radial-gradient(circle at 30% 30%, rgb(255, 253, 252), rgb(184,184,184));

	/* Center text */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;

	font-size: calc(555%);
	color: black;


	transition:
		transform 0.4s ease,
		opacity   0.4s ease,
		width     0.4s ease,
		height    0.4s ease;
	will-change: transform;

	box-sizing: border-box;
	padding: 5%;

	cursor: pointer;

}

#eightSvg {
	width: 60%;
	height: auto;
}


p.description {
	width: min(60vw, 60vh);
	max-width: 500px;

}

@media (min-width: 650px) {
	#responseDivBg, #responseDivText { font-size: 1.2em; }
}
@media (min-width: 700px) {
	#responseDivBg, #responseDivText { font-size: 1.4em; }
}
@media (max-width: 600px) {
	#ballDiv {
		width:  min(70vw, 70vh);
		height: min(70vw, 70vh);
	}
}
@media (max-width: 450px) {
	#ballDiv {
		width:  min(80vw, 80vh);
		height: min(80vw, 80vh);
	}
}
@media (max-width: 320px) {
	#ballDiv {
		width:  min(90vw, 90vh);
		height: min(90vw, 90vh);
	}
}
@media (max-width: 240px) {
	#ballDiv {
		width:  min(98vw, 98vh);
		height: min(98vw, 98vh);
	}
}