body {
	font-family: "Manu 4", serif;
	font-size: 2em;
	padding: 5.55555vh 5.55555vw 11.11111vh;
	max-width: 40em;
	margin: 0 auto;
}
body::before {
	content: attr(data-emoji);
}
.home {
	max-width: 20em;
}
h1 {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: white;
	font-size: 2.2em;
}
h1 span {
	display: block;
}
h1 span::before {
	content: '=';
}
h1 span:empty::before {
	content: '';
}
h1 .fixed {
	font-size: .33em;
	width: auto;
	display: block;
	font-weight: normal;
	height: 1.7em;
	transition: .2s;
}
h1 span:empty + .fixed {
	opacity: 0;
	transform: scale(.3);
}

h1 img,
.results img {
	max-height: 0.75em;
	width: auto;
	display: inline;
	transition: .1s cubic-bezier(.17,.67,1,1.93);
	transform: scale(1.1);
	margin: 0 .1em;
}
h1 img[src="emoji/leeg.png"] {
	transform: scale(.1);
}
h1 img:hover::after {
	content: 'x';
}
.home h1 + p {
	font-style: italic;
	margin: -1.5em 0 2em;
}
.home h1 + p img {
	max-height: .8em;
	transform: scale(1.6);
	width: auto;
	position: relative;
	z-index: 2;
}
form div {
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
	grid-gap: 5vmin;
}
.home form {
	display: block;

}
fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

input,
button {
	font: inherit;
}
input[type="text"],
button {
	max-width: 40em;
	width: 100%;
	border: 0;
	border-bottom: 2px dashed black;
	padding: .2em;
}
input[type="text"] {
	font-style: italic
}
button {
	margin-top: .5em;
	background-color: orange;
	border-radius: .2em;
	border: 1px solid black;
}
.home label::after {
	content: 'i';
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	font-family: "Manu Symbol 2";
}

fieldset div {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
	grid-column-gap: 1vmin;
	grid-row-gap: 1vmin;
	list-style: none;
	margin: 0 0 5.5555vh;
	padding: 0;
}
summary {
	font-weight: bold;
	margin: 1em 0;
}

fieldset label {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}
fieldset label input[type=checkbox] {
	position: absolute
}
img {
	width: 100%;
	max-width: 128px;
	position: relative;
	z-index: 1;
	background-color: white;
}

:focus + img {
	border-radius: .2em;
	box-shadow: 0 0 .1em black;
}
:checked + img {
	border-radius: .2em;
	box-shadow: 0 0 .1em red;
}
img + span {
	position: absolute;
	max-width: 0;
	overflow: hidden;
	top: 100%;
	z-index: 2;
	background-color: yellow;
	text-align: center;
	opacity: 0;
	transition: opacity .1s .1s;
}
img:hover + span {
	width: 200%;
	max-width: 20em;
	border: 1px solid black;
	padding: .3em;
	opacity: 1;
	font-size: .5em;
}

footer {
	margin: 11.1111vh 0 0;
	font-size: .5em;
}
.results {
	font-size: 2em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.results img {
	max-height: 1em;
}