@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');

.input {
	padding: 10px;
	text-align: center;
}

.checkbox-container {
	display: block;
	padding: 10px;
	text-align: left;
	font-size: min(4vw, 17px);
}

.checkbox-sub-container {
	display: inline-block;
	padding-left: 1vw;
	text-align: left;
}

.checkbox {
	display: none;
}

.checkbox:not(:checked) + label {
	text-decoration: line-through;
	text-decoration-color: red;
	text-decoration-thickness: 2px;
}

.grid-container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	row-gap: 10px;
	column-gap: 10px;
	max-width: 800px;
}

@media (max-width:850px) {
	.grid-container {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width:650px) {
	.grid-container {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width:500px) {
	.grid-container {
		grid-template-columns: repeat(1, 1fr);
	}
	.checkbox-container {
		font-size: 30px;
	}
}

@media (pointer: coarse)  {
	.grid-container {
		grid-template-columns: repeat(1, 1fr);
	}
	.checkbox-container {
		font-size: 30px;
	}
}

@media (hover: none) {
	.grid-container {
		grid-template-columns: repeat(1, 1fr);
	}
	.checkbox-container {
		font-size: 30px;
	}
}

.roll-button-div {
	display: block;
	text-align: center;
}

.roll-button {
	font-size: 40px;
	background-color: #000069;
}

.team-size-input {
	padding-left: 15px;
	padding-right: 15px;
	text-shadow: 0.1em 0.1em #000000;
	background-color: #000069;
	text-align: center;
	font-size: min(5vw, 30px);
	width: 90%;
	height: 30px;
	max-width: 800px;
}

.team-output {
	padding-left: 15px;
	padding-right: 15px;
	text-shadow: 0.1em 0.1em #000000;
	background-color: #000069;
	text-align: center;
	font-size: min(4vw, 30px);
	width: 90%;
	height: 30px;
	max-width: 800px;
	-webkit-text-stroke: 1px black;
	color: white;
	text-shadow:
	0.05em 0.05em black,
	0.05em 0.0em black,
	0.05em -0.05em black,
	0.0em 0.125em black,
	0.0em -0.05em black,
	-0.05em 0.05em black,
	-0.05em 0.0em black,
	-0.05em -0.05em black;
	background-color: #0000FF;
	color: white;
	padding: 0.3vw;
}