:root {
	--mono-font: San Francisco Mono, Monaco, "Consolas", "Lucida Console", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
	--sans-font: -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	--white: #fff;
	--jet: #000;
	--dark: #121212;
	--pink: #ff1493;
	--red: #ED254E;
	--navy: #101D42;
	--green: #4CAF50;
	--yellow: #ff6;
	--purple: #665cff;
	--blue: #0074e4;
	--lemon: #fff5ca;
	--teal: #5ceace;
	--xlarge: 42px;
	--large: 36px;
	--medium: 21px;
	--small: 16px;
	--smaller: 14px;
	--tiny: 10px;
}

body {
	font-family: var(--sans-font), var(--mono-font);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-size: var(--medium);
	line-height: 1.3;
	margin: 0 auto;
	padding: 2rem 1rem;
	color: var(--jet);
	background-color: var(--white);
	max-width: 600px;
}

p,
small {
	margin: 1.5rem 0;
}

.title {
	color: var(--jet) !important;
	font-weight: bold;
	margin-right: .5em;
}

.btn, .puzzleno {
	padding: .2em .5em;
	font-size: var(--smaller);
	border-radius: 1em;
	text-align: right;
	opacity: 20%;
}

.puzzleno {
	border: 1px solid grey;
	float: right;
}

.nextgame {
	font-variant-numeric:tabular-nums;
}

a:link,
a:visited {
	color: var(--blue);
	text-decoration: none;
	transition: color .2s ease;
}

a:hover {
	color: var(--pink);
}

.callout {
	background-color: var(--lemon);
	padding: .5em;
	border-radius: 1em;
}

small {
	font-size: var(--small);
	color: var(--jet) !important;
	opacity: 50%;
	margin-right: 1em;
}

input[type=text],
input[type=submit],
select {
	font-size: var(--medium);
	width: 100%;
	padding: .5em;
	display: inline-block;
	border: 1px solid var(--jet);
	box-sizing: border-box;
}

input[type=submit] {
	margin-top: .2em;
	background-color: var(--jet);
	color: var(--white) !important;
	cursor: pointer
}

input:focus {
	outline: none;
}

.instructions {
	padding: .2em 1.5em;
	background: var(--lemon);
	margin: 1em 0 0 0;
	visibility: visible;
	transition: opacity 2s linear;
}

#after-label,
#before-label {
	opacity: 50%
}

#error {
	margin-top: .5em;
	color: var(--white)!important;
	background-color: var(--red);
	padding: .5em 1.5em;
}

.win, .support {
	background-color: var(--navy);
	color: var(--white) !important;
	border-radius: .5em;
	padding: .2em 1em;
	margin-bottom: 1em;
}

.support {
	background-color: var(--lemon) !important;
	color: var(--jet) !important;
}

#stats {
	margin-bottom: .5em;
	background: var(--lemon);
	padding: .2em 1em;
	border-radius: .5em;
	line-height:.3em;
	color: var(--jet);
}

.share {
	font-size: var(--small);
	opacity: 80%;
}

[v-cloak] {
	display: none;
}

.copy {
	background-color: var(--green);
	border: none;
	color: var(--white) !important;
	padding: 1em;
	text-decoration: none;
	border-radius: 1em;
	margin-bottom: 1em;
	font-size: var(--small);
	cursor: pointer;
}

@media(prefers-color-scheme : dark) {
	body {
		color: var(--white);
		background-color: var(--dark);
	}
	small {
		font-size: var(--small);
		color: var(--white) !important;
		opacity: 50%
	}
	.title {
		color: var(--white) !important;
	}
	.instructions,
	#stats {
		color: var(--jet);
	}
	input[type=submit] {
		background-color: var(--white);
		color: var(--jet) !important;
	}
}