:root {
	--matched-color: #00FF00;
	--out-of-place-color: orange;
	}

body {
	font-family: Helvetica, sans-serif;
	}
#page {
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 98svh;
	}
#middle {
	overflow: scroll;
	}
h1 {
	font-size: 1.3em;
	margin-top: 0.1em;
	margin-bottom: 0.1em;
	text-align: center;
	}

.game-header {
	font-size: 0.7em;
	font-weight: bold;
	text-align: center;
	}
.guesses {
	margin-bottom: 1em;
	}
#help {
	width: 35ch;
	}

.game {
	display: grid;
	grid-template-columns: max-content;
	}
.game-grid {
	display: grid;
	grid-template-columns: max-content min-content;
	column-gap: 0.3em;
	}
.target-stat-grid {
	display: grid;
	grid-template-rows: min-content auto min-content;
	text-wrap: nowrap;
	}
.target-stat {
	text-align: center;
	font-size: 0.5em;
	}

#guess {
	font-size: 1.5em;
	font-weight: bold;
	min-height: 1.1em;
	margin-bottom: 0.25em;
	}
#guess[error] {
	background-color: #F88;
	}
div.history-guess {
	box-sizing: border-box;
	justify-content: center;
	display: flex;
	margin-bottom: 0.4ch;
	}
span.history-letter {
	padding-top: 0.65ch;
	padding-bottom: 0.4ch;
	padding-left: 0.5ch;
	padding-right: 0.5ch;
	margin-left: 0.2ch;
	margin-right: 0.2ch;
	}
a.history-guess {
	color: black;
	text-decoration: none;
	}
span.matching-run {
	background-color: var(--matched-color);
	}
span.out-of-place {
	background-color: var(--out-of-place-color);
	}
span.initial-match {
	border-top-left-radius: 20% 40%;
	border-bottom-left-radius: 20% 40%;
	padding-left: 0.4em;
	}
span.end-match {
	border-top-right-radius: 20% 40%;
	border-bottom-right-radius: 20% 40%;
	padding-right: 0.4em;
	}

#keyboard {
	font-size: 0.9em;
	}
.keyboard-row {
	display: flex;
	justify-content: center;
	}
.keyboard-key {
	display: inline-block;
	border: 1px black solid;
	border-radius: 0.2em;
	background-color: #EEEEEE;
	min-width: 1em;
	text-align: center;
	padding: 0.3em 0.2em 0.1em;
	margin: 0.2em;
	}
.keyboard-key[invalid] {
	background-color: #CCCCCC;
	color: #808080;
	}
.keyboard-key[out-of-place] {
	background-color: var(--out-of-place-color);
	}
.keyboard-key[matched] {
	background-color: var(--matched-color);
	}

.centerer{
	display: flex;
	justify-content: center;
	}
[hidden] {
	display: none;
	}

.svg-container {
	/* Weird hack to keep the SVG auto-sized, even below 150px. */
	position: relative;
	}
#target-graphic {
	/* Weird hack to keep the SVG auto-sized, even below 150px. */
	position: absolute;
	height: 100%;
	}
#target-graphic .center-line {
	stroke: #444444;
	}

.streak {
	font-size: 0.85em;
	font-weight: bold;
	margin-top: 1em;
	margin-bottom: 1em;
	text-align: center;
	}
#histogram {
	border: 1px solid gray;
	min-width: 600px;
	margin-bottom: 1em;
	margin-top: 1em;
	}
#histogram rect {
	fill: gray;
	}
#histogram rect[latest] {
	fill: green;
	}
#histogram text.guess-number {
	font-size: 0.5em;
	fill: white;
	}
#daily-next {
	margin-top: 1em;
	}

.button {
	text-weight: bold;
	display: inline-block;
	border: 1px black solid;
	border-radius: 0.2em;
	background-color: #EEEEEE;
	text-align: center;
	padding: 0.3em 0.4em 0.1em;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	cursor: default;
	}


@media only screen and (max-width: 799px) {
	span.guess-letter {
		padding: 0.1em 0.2em 0.1em;
		}
	#keyboard {
		font-size: 1em;
		}
	.keyboard-key {
		padding: 0.225em 0.2em 0.225em;
		}
	#histogram {
		min-width: 50vw;
		width: 90vw;
		}
	.button {
		padding: 0.1em 0.4em 0.1em;
		}
	}