* {
	font-family: Arial;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: none;
	user-select: none;
}
body {
	--bg100: #081216;
	--bgStats: #162428;
	--bgAccent: #324852;
	--fg100: #ffffff;
	--fg75: #ffffffc0;
	--fg50: #ffffff64;
	--fg20: #ffffff32;
	--gray100: #646464;
	--gray50: #64646464;
	--accentA: #327232;
	--accentA50: #32723264;
	--accentB: #968032;
	--accentB50: #96803264;
	--keyBase: #ffffff48;
	--keyHover: #ffffff32;
	--gameFontSize: 1.8em;
	--keyboardFontSize: 1.3em;
	
	background: var(--bg100);
	color: var(--fg100);
}
body.light {
	--bg100: #f8ffff;
	--bgStats: #f0ffff;
	--bgAccent: #c8c8c8;
	--fg100: #000032;
	--fg75: #000032c0;
	--fg50: #00003264;
	--fg20: #00003232;
	--keyBase: #00000036;
	--keyHover: #00000052;
}
body.colormode {
	--accentA: #326472;
	--accentA50: #32647264;
	--accentB: #964816;
	--accentB50: #96481664;
}
body>div {
	max-width: 720px;
	margin: auto;
	min-height: 100vh;
	overflow: hidden;
}
header {
	text-align: center;
	border-bottom: 1px solid var(--gray50);
}
header h1 {
	margin: .2em 0;
}
header a {
	color: var(--fg75);
	text-decoration: none;
	text-align: right;
}
header a:hover, header a:active {
	color: var(--fg100);
}
header>span {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: .2em;
	position: relative;
	top: -1em;
	height: 0;
	overflow: visible;
	font-size: 2em;
	line-height: 0.5em;
	width: 100%;
}
content {
	display: flex;
	justify-content: center;
	flex-direction: column;
}
content>*{
	margin: 1em auto;
}
content .container {
	flex-grow: 1;
}
content .style button {
	background: none;
	border: .2rem solid var(--fg50);
	color: var(--fg100);
	padding: .3em .5em;
	margin: .2em 0;
	width: 10em;
	height: 2em;
	font-size: 1.5em;
	cursor: pointer;
}
content .style h2 {
	font-weight: normal;
	text-align: center;
	margin: 1em 0;
}
content .style button:hover {
	background: var(--fg20);
}
content table {
	border-spacing: .2em;
    border-collapse: separate;
	font-size: var(--gameFontSize);
	margin-right: -2.4em;
}
content table td {
	border: .1em solid var(--fg50);
	text-align: center;
	width: 2em;
	height: 2em;
}
content table.wordle {
	margin-right: 0;
}
content table td.side {
	width: 2.2em;
	border: none;
	display: table-cell;
	transition: .2s background-color;
}
content table.wordle td.side {
	display: none;
}
div.correct, div.close {
	width: 1.25em;
	height: 1.25em;
	margin: 0.05em;
	background: var(--gray50);
	border-radius: .3em;
	font-size: .8em;
	vertical-align: middle;
	text-align: center;
	display: inline-block;
}
.correct:not(:empty) {
	background: var(--accentA);
	border-width: 0;
}
.close:not(:empty) {
	background: var(--accentB);
	border-width: 0;
}
content .keyboard {
	display: table;
	font-size: var(--keyboardFontSize);
}
content .keyrow:nth-child(2) {
	margin-left: 1em;
}
content .keyrow div {
	background: var(--keyBase);
	border-radius: .3em;
	min-width: 1.5em;
	height: 2em;
	line-height: 1.55em;
	text-align: center;
	padding: .3em .6em;
	margin: .2em;
	display: inline-block;
	cursor: pointer;
}
content .keyrow div:hover {
	background: var(--keyHover);
}
content .keyrow div:active {
	background: var(--keyBase);
}
content .backdrop {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background: #00000064;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0;
}
content .stats, content .howto, content .config {
	width: 500px;
	max-width: 85%;
	margin: .6em 1em;
	background: var(--bgStats);
	box-shadow: .2em .2em .5em black;
	border: .1em inset var(--bgAccent);
	border-radius: .3em;
	text-align: center;
	padding: .6em;
	max-height: 80vh;
	overflow-y: auto;
	scrollbar-width: thin;
}
.collapsetoheader {
	position: relative;
	top: -1em;
	height: 0;
	overflow: visible;
	font-size: 2em;
	line-height: 0.5em;
	width: 100%;
	display: inline-block;
	text-align: right;
}
.collapsetoheader a {
	color: var(--fg75);
	text-decoration: none;
	font-family: Arial;
}
.collapsetoheader a:hover, .collapsetoheader a:active {
	color: var(--fg100);
}
.stats h1, .howto h1, .config h1 {
	border-bottom: 1px solid gray;
}
.stats .numstats {
	display: flex;
	justify-content: center;
	max-width: 80%;
	margin: 1.5em auto;
}
.stats .numstats>div {
	flex-grow: 1;
}
.stats .numstats>div>span {
	font-size: 1.5em;
}
.stats .fiddyfiddy {
	min-width: 100%;
}
.stats .fiddyfiddy>*{
	display: inline-grid;
	width: 49%;
	margin: 0 0 1em 0;
}
.stats .fiddyfiddy h5 {
	text-align: center;
}
.stats .statbars {
	display: grid;
	grid-template-columns: min-content min-content 1fr;
	grid-template-rows: auto auto auto auto auto auto auto;
	gap: .2em 0;
	margin: 5%;
}
.stats .statbars .count {
	background: var(--gray100);
	padding: 0 .3em;
	margin-left: .3em;
}
.stats .statbars .barwrapper {
	text-align: left;
}
.stats .statbars .bar {
	height: 100%;
	display: inline-block;
	background: var(--gray100);
}
.stats .statbars .count.active, .stats .statbars .bar.active {
	background: var(--accentA);
}
.stats .histogram {
	width: 90%;
	margin: auto;
	padding: 5%;
}
.stats .histogram .fillA {
	fill: var(--accentA50);
	stroke: none;
}
.stats .histogram .strokeA {
	fill: none;
	stroke: var(--accentA);
}
.stats .histogram .fillB {
	fill: var(--accentB50);
	stroke: none;
}
.stats .histogram .strokeB {
	fill: none;
	stroke: var(--accentB);
}
.stats #timer {
	font-size: 2.5em;
}
.howto p {
	margin: 1em .5em 1.5em .5em;
	text-align: justify;
}
.config .settinggrid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1em;
	margin: 1em;
	text-align: left;
}
.config .settinggrid>:nth-child(2n) {
	font-size: 1.5em;
}
.toast {
	position: fixed;
	left: 50%;
	top: 10%;
	transform: translateX(-50%);
	padding: .5em 1em;
	box-shadow: 2px 2px 5px black;
	border-radius: .2em;
	background: #ffffff;
	color: #000000;
	font-size: 1.5em;
	opacity: 0;
	display: none;
	width: 20em;
	max-width: 80%;
	text-align: center;
}
#share {
	margin: auto;
	font-size: 1.8em;
	padding: .5em .8em;
	border-radius: .5em;
	background: var(--accentA);
	color: var(--fg100);
	cursor: pointer;
}

/** mobile app hacks **/

.app header>span {
	padding: 0 .5em;
}
@media (max-width: 540px) and (orientation: portrait) {
	body {
		--gameFontSize: calc(100vw / 20);
		--keyboardFontSize: calc(100vw / 28);
	}
}

/** animations **/

@keyframes anim_fadeout {
	0% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes anim_rollin {
	0% { font-size: 0; opacity: 0; }
	50% { font-size: 0; opacity: 0; }
	100% { font-size: var(--gameFontSize); opacity: 1; }
}
@keyframes anim_fadein {
	0% { opacity: 0; }
	66% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes anim_shake {
	0% { transform: translateX(0); }
	10% { transform: translateX(-.5em); }
	30% { transform: translateX(.4em); }
	50% { transform: translateX(-.3em); }
	70% { transform: translateX(.2em); }
	90% { transform: translateX(-.1em); }
	100% { transform: translateX(0); }
}
@keyframes anim_popfade {
	0% { opacity: 0; margin-top: .2em; }
	2% { opacity: 1; margin-top: .2em; }
	75% { opacity: 1; margin-top: 0em; }
	100% { opacity: 0; margin-top: 0em; }
}
@keyframes anim_tile_wrong {
	0% {
		background: linear-gradient(180deg, var(--gray100) 33%, #ffffff 50%, #ffffff00 66%);
		background-size: 100% 300%;
		background-position-y: 100%;
		border-width: .2em;
	}
	100% { 
		background: linear-gradient(180deg, var(--gray100) 33%, #ffffff 50%, #ffffff00 66%);
		background-size: 100% 300%;
		background-position-y: 0%;
		border-width: 0;
	}
}
@keyframes anim_tile_close {
	0% {
		background: linear-gradient(180deg, var(--accentB) 33%, #ffffff 50%, #ffffff00 66%);
		background-size: 100% 300%;
		background-position-y: 100%;
		border-width: .2em;
	}
	100% { 
		background: linear-gradient(180deg, var(--accentB) 33%, #ffffff 50%, #ffffff00 66%);
		background-size: 100% 300%;
		background-position-y: 0%;
		border-width: 0;
	}
}
@keyframes anim_tile_correct {
	0% {
		background: linear-gradient(180deg, var(--accentA) 33%, #ffffff 50%, #ffffff00 66%);
		background-size: 100% 300%;
		background-position-y: 100%;
		border-width: .2em;
	}
	100% { 
		background: linear-gradient(180deg, var(--accentA) 33%, #ffffff 50%, #ffffff00 66%);
		background-size: 100% 300%;
		background-position-y: 0%;
		border-width: 0;
	}
}@keyframes anim_tile_dance {
	0% { transform: translateY(0); }
	8% { transform: translateY(-.95rem); }
	10% { transform: translateY(-1rem); }
	12% { transform: translateY(-.95rem); }
	20% { transform: translateY(0); }
	28% { transform: translateY(-.65rem); }
	30% { transform: translateY(-.7rem); }
	32% { transform: translateY(-.65rem); }
	40% { transform: translateY(0); }
	48% { transform: translateY(-.35rem); }
	50% { transform: translateY(-.4rem); }
	52% { transform: translateY(-.35rem); }
	60% { transform: translateY(0); }
	68% { transform: translateY(-.15rem); }
	70% { transform: translateY(-.2rem); }
	72% { transform: translateY(-.15rem); }
	80% { transform: translateY(0); }
	90% { transform: translateY(-.1rem); }
	100% { transform: translateY(0); }
}

/** icon font **/
@font-face {
	font-family: 'fontello';
	src: url('./fontello/font/fontello.eot?33689866');
	src: url('./fontello/font/fontello.eot?33689866#iefix') format('embedded-opentype'),
		url('./fontello/font/fontello.woff?33689866') format('woff'),
		url('./fontello/font/fontello.ttf?33689866') format('truetype'),
		url('./fontello/font/fontello.svg?33689866#fontello') format('svg');
	font-weight: normal;
	font-style: normal;
}
.iconfont {
	font-family: "fontello";
}

/** from other websites **/

/* slider checkbox */
.switch {
  position: relative;
  display: inline-block;
  width: 1.9em;
  height: 1em;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--gray100);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 1em;
}
.slider:before {
  position: absolute;
  content: "";
  height: .8em;
  width: .8em;
  left: .1em;
  bottom: .1em;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: var(--accentA);
}
input:focus + .slider {
  box-shadow: 0 0 1px var(--accentA);
}
input:checked + .slider:before {
  transform: translateX(.9em);
}