<header>
	<h1>Pick up sticks</h1>
  <p>By selecting the one that's on top.</p>
</header>
  
<form>
	<input type="checkbox" id="stick-1" />
	<label for="stick-1">Stick 1</label>

	<input type="checkbox" id="stick-2" />
	<label for="stick-2">Stick 2</label>

	<input type="checkbox" id="stick-3" />
	<label for="stick-3">Stick 3</label>

	<input type="checkbox" id="stick-4" />
	<label for="stick-4">Stick 4</label>
	
	<input type="checkbox" id="stick-5" />
	<label for="stick-5">Stick 5</label>

	<input type="checkbox" id="stick-6" />
	<label for="stick-6">Stick 6</label>

	<input type="checkbox" id="stick-7" />
	<label for="stick-7">Stick 7</label>

	<input type="checkbox" id="stick-8" />
	<label for="stick-8">Stick 8</label>

	<input type="checkbox" id="stick-9" />
	<label for="stick-9">Stick 9</label>

	<input type="checkbox" id="stick-10" />
	<label for="stick-10">Stick 10</label>

 	<input type="checkbox" id="stick-11" />
	<label for="stick-11">Stick 11</label>

	<input type="checkbox" id="stick-12" />
	<label for="stick-12">Stick 12</label>

	<input type="checkbox" id="stick-13" />
	<label for="stick-13">Stick 13</label>

	<input type="checkbox" id="stick-14" />
	<label for="stick-14">Stick 14</label>
	
	<input type="checkbox" id="stick-15" />
	<label for="stick-15">Stick 15</label>

	<input type="checkbox" id="stick-16" />
	<label for="stick-16">Stick 16</label>

	<input type="checkbox" id="stick-17" />
	<label for="stick-17">Stick 17</label>

	<input type="checkbox" id="stick-18" />
	<label for="stick-18">Stick 18</label>

	<input type="checkbox" id="stick-19" />
	<label for="stick-19">Stick 19</label>

	<input type="checkbox" id="stick-20" />
	<label for="stick-20">Stick 20</label> 
  
	<div class="message winner">
		<div class="message-content">
			<h2>Wow you are AWESOME!</h2>
			<p>This may well be your super power, with great power comes great responsiblity.</p>
			<button type="reset">Do it again!</button>
		</div>
	</div>
  
	<div class="message gameover">
		<div class="message-content">
			<h2>Ah nuts, you stuffed up</h2>
			<p>Don&apos;t worry this isn't an essential life skill.</p>
			<button type="reset">Try again</button>
		</div>
	</div>

</form>

html, body, form {
	height: 100%;
	margin: 0;
}

body {
	font-family: sans-serif;
	text-align: center;
	color: #333;
	font-size: 20px;
	perspective: 1000px;
}

h1, h2 {
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.3rem;
}
header {
  position: absolute;
	z-index: 99;
  width: 100%;
  padding: 0.2rem 0 0;
  background: rgba(255,255,255,0.7);
}
h1 {
	font-size: 2rem;
   margin: 0;
}
h2 {
	font-size: 2rem;
}

p {
	font-size: 1.5rem;
	max-width: 30rem;
	margin: 0 auto 0.5rem;
}

button {
	background: #fff;
	border: solid 1px currentColor;
	font-size: 1rem;
	padding: 0.6rem;
	text-transform: uppercase;
	cursor: pointer;
}

button:hover {
	background-color: #444;
	color: #fff;
}

input {
	position: absolute;
	right: 100%;
}

label {
	position: fixed;
  text-indent: -100%;
  overflow: hidden;
	top: 50%;
	left: 50%;
	content: "";
	width: 80%;
	height: 10px;
	background: #eee;
	display: block;
	border: solid 3px currentColor;
	opacity: 1;
	transform: translate3d(-50%, -50%, 0);
	transition: all 300ms ease-out;
	border-radius: 50%;
}

/* 
	This is the reason why Sass is being used, everything else
	is standard CSS
*/
@for $i from 1 through 20 {
	label:nth-of-type(#{$i}) {
	   transform: translate3d( -50%, -50%, 0) rotate(random(360) + deg);
	   margin: 10% - random(10);
	   z-index: 60 - $i;
	}
}


input:first-of-type:checked + label, 
input:checked + label + input:checked + label {
	opacity: 0!important;
	pointer-events: none;
}

input:not(:checked) ~ input:checked ~ .gameover,
input:checked + label + input:checked + label + .winner {
	transform: translate3d(0, 0, 0); 
}

.message {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;	
	transform: translate3d(-100%, 0, 0);
	background: rgba(255,255,255,0.9);
	z-index: 200;
}

.message-content {
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translate3d(0, -50%, 0);
}