body {
	font: 14px system-ui, sans-serif;
	margin: 10px;
}

p.preview {
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	line-height: 0;
	max-width: 100%;
}

a:link {
	color: #669;
}

a:visited {
	color: #666;
}

a:link:hover {
	color: #336;
}

a:visited:hover {
	color: #333;
}

a:hover:active {
	color: #900;
}

p.yaycode {
	font: 10px ui-monospace, Menlo, monospace;
	white-space: pre;
	-webkit-user-select: all;
	user-select: all;
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid hsl(0, 0%, 50%, .5);
}

img {
	image-rendering: pixelated;	
}

footer {
	font-size: smaller;
	margin-top: 2rem;
	border-top: 1px solid hsl(0, 0%, 50%, .2);
	padding-top: 1ex;
}

form img {
	vertical-align: middle;
}

#radios {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
	max-width: 900px;
}

#radios :first-child {
	margin-top: 0;
}

#radios p {
	margin-bottom: 0;
}

p.radios {
	display: grid;
	gap: 2px 6px;
	grid-template-columns: repeat(auto-fill, 2.5em)	
}

input[type=submit] {
	-webkit-appearance: none;
	border: 1px solid gray;
	border-radius: 8px;
	background: #f8f8f8;
	font-size: 3em;
	font-weight: bold;
}

input[type=submit]:active {
	background: lightgray;	
	color: black;
}

@media(max-width: 400px) {
	#radios {
		display: block;	
	}
}