.displayResults {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	z-index: 1;
	transform: translate3d(0,0,0);
}
.displayResults .results {
	cursor: pointer;
	background: #CCCCCC;
	font-size: 2rem;
	padding: 10px 20px;
	margin: 40px;
	border-radius: 10px;
	transform: scale(1.5);
	opacity: 0;
	pointer-events: all;
	/* transition: all 500ms; pageload issue here */
}
.displayResults .showEffect {
	transform: scale(1);
	opacity: 1;
}
.displayResults .hideEffect {
	transform: scale(.5);
	opacity: 0;
}
.displayResults .hidden {
	pointer-events: none;
}
.displayResults .crit-success {
	color: green;
}
.displayResults .crit-failure {
	color: firebrick;
}
.displayResults .die-dropped {
	text-decoration: line-through;
	opacity: .4;
}
.displayResults .die-rerolled {
	text-decoration: line-through;
	opacity: .4;
}
.displayResults .die-exploded {
	color: green;
}
.displayResults .die-exploded::after {
	content: '!';
	display: 'block';
	color: green;
}
.displayResults .success,
.displayResults .failure,
.displayResults .null
{
	position: relative;
	top: 6px;
	width: 32px;
	height: 32px;
}
.displayResults .success {
	fill: #4B8968;
}
.displayResults .failure {
	fill: #A82E2D;
}
.displayResults .null {
	fill: #3E577D;
}