:root
{
	--distance: 100px;
	--width: 1200px;
}
input {padding: 10px;color: black;}
input[name^='num'] {width: 200px;}
div.checkbox {margin: 15px;}
input[type="checkbox"]
{
	width: 30px;
	height: 30px;
	position:relative;
	top: 5px;
	margin-right: 10px;
	cursor: pointer;
}
label[for="event"], input[id="event"]
{
	color: white;
	display: inline-block;
	font-size: 25px;
}

h3.total-rolls
{
	position: absolute; top: -75px; color: HOTPINK; right: 0; padding-right: 10px;
}
h2.results {margin-top: 25px;}

h2 > div > span:nth-child(1) {color: green;} 
h2 > div > span:nth-child(2) {color: cyan;} 
h2 > div > span:nth-child(3) {color: yellow;} 

h2 > div > span 
{
	display: inline-block;
	margin: 5px 10px;
}
h2, h3
{
	font-size: 25px;
	text-shadow: 3px 3px #000;
	color: white;
	text-align: left;
}

h3 {margin: 0; margin-top: 30px;}
h1
{
	margin-bottom: 20px;
	font-size: calc(var(--width) / 30);
	text-shadow: 3px 3px #000;
	color: white;	
}
div.output-wrapper
{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 0;
}