/* Licensed under the Academic Free License version 3.0
	- See a copy of the AFL-3.0 at https://spdx.org/licenses/AFL-3.0 
	- Any copyright dedicated to the public domain: https://creativecommons.org/publicdomain/zero/1.0/ */

:root {
	background-color: #342D1B;
	color: #eee;
}
body { margin-top: -1ex; counter-reset: boxes; }
output::after {
  content: counter(boxes);
}
h1 {
	color: goldenrod;
	text-align: center;
	font-size: 3em;
  padding-bottom:1ex;
}
#j {
	float:right;
	transform: scale(2) translate(-2em,-1em);
}
form > fieldset {
	display: grid;
	grid-template: repeat(5, 1fr) / repeat(5, 1fr);
	border: 1px solid goldenrod;
	padding: 0;
	width: 0;
	margin: 0 auto;
	clear:right;
}
@media (orientation: landscape) {
	form > fieldset { transform: scale(1.25) }
	a > svg { top:0; }
}
@media (orientation: portrait) {
	a > svg { bottom:280px; }
}
legend {
	position:fixed;
	top:17ex;
	left:calc(50% - 12ex);
}
form > fieldset > label {
	height: 4em;
	padding: 1em;
	background-color: #fafad2;
	border: 1px solid goldenrod;
	display:inline-grid;
	text-align: center;
	align-items: center;
	position:relative;
	cursor: pointer;
}
label > b {
	color: #111;
	z-index: 2;
}
label > input[type="checkbox"] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: scale(5) perspective(1px) translate(-12.5%,-15%);
	opacity: 0;
}
label > input[type="checkbox"]:checked {
  opacity: 0.7;
  accent-color: #08F;
  counter-increment: boxes;
}
label > input[type="checkbox"]:checked + b {
	color: gold;
	text-shadow: -1px 1px 0 #000,
				  1px 1px 0 #000,
				 1px -1px 0 #000,
				-1px -1px 0 #000;
}
label > input[type="checkbox"]:disabled {
	appearance: none;
}
label > input[type="checkbox"]:disabled::before {
	content: "☑️";
}
#boxes{
  font-size: 2em;
  display:block;
  margin-top:-12em;
  text-align:center
}
input[type="reset"] {
	position:absolute;
	right: 4em;
	bottom: 40%;
	transform: scale(2);
}
#svg2 {
	opacity:0;
	width:656px;
	position:relative;
	top:-484px;
	pointer-events:none;
	display:block;
	margin:0 auto;
	transition:opacity 1s;
}
fieldset:disabled + #svg2 {
	opacity:0.6;
	pointer-events:unset;
}