body {
	margin: 0;
	width: 100vw;
	height: 100vh;
	font-family: 'Poppins', sans-serif;
	font-size: 20px;
	background-color: #534d41;
	overflow: hidden;
	color: #29335c;
}
div.panel {
	width: 100%;
	height: 10%;
	display: flex;
	background-color: #29335c;
	justify-content: center;
	align-items: center;
	color: #f0cea0;
}
button, input[type=button]{
	background-color: #f3a712;
	cursor: pointer;
	color: #29335c;
	border: 3px #29335c solid;
	font-family: 'Poppins', sans-serif;
	border-radius: 5px;
}
button:hover, input[type=button]:hover{
	background-color: #db2b39;
}
div.panel button, input[type=button] {
	min-height: 70%;
	max-height: 90%;
	font-size: 4.2vmin;
	margin: 0.5em 1em;
}
div.panel h3 {
	text-align: center;
	font-size: 0.9em;
}
div.canvCont {
	width: 100%;
	height: 80%;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	overflow: hidden;
}
canvas {
	margin: 5% 2.5%;
	background-color: #f0cea0;
	z-index: 1;
}
div.gameover {
	display: none; /* --> flex*/
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
div.gameover div.content {
	min-width: 50%;
	max-width: 90%;
	max-height: 80%;
	padding: 2em;
	animation-name: animatetop;
	animation-duration: 0.4s;
	top: 50%;
	background-color: #29335cee;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	color: #f0cea0;
}
div.gameover div.content button {
	font-size: 1em;
}
div.gameover div.content h1 {
	font-weight: 800;
	text-decoration: underline;
	font-size: 2.5em;
	margin: 0.5em 0;
}
div.gameover div.content h2 {
	margin: 0.5em 0;
}
div.setup {
	display: none; /* --> flex*/
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	background-color: #534d41;
}
div.setup div.content {
	min-width: 50%;
	max-width: 90%;
	max-height: 90%;
	padding: 2em;
	top: 50%;
	text-align: center;
	border: 3px solid black;
	border-radius: 10px;
	background-color: #f0cea0;
	overflow: auto;
	z-index: 3;
}
div.setup div.content button, div.setup div.content input[type=button] {
	font-size: 2em;
}
div.setup div.content h1 {
	font-weight: 100;
	text-decoration: underline;
	font-size: 3em;
	margin: 0.1em 0 0em 0;
	font-family: 'Pacifico';
	line-height: 1.1em;
}
div.setup div.content h2 {
	margin: 0.1em 0;
}
div.setup div.content h3 {
	margin: 0;
}
div.setup div.content h4 {
	margin: 0;
	margin-top: 0.5em;
	margin-bottom: 1em;
}
div.setup div.content p {
	margin: 0;
	font-size: 0.9em;
}
@-webkit-keyframes animatetop {
	from {middle: -300px; opacity:0} 
	to {middle:0; opacity:1}
}
@keyframes animatetop {
	from {top: -300px; opacity:0}
	to {middle:0; opacity:1}
}
footer {
	display: flex;
	height: 10%;
	width: 100%;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: #29335c;
	color: #f0cea0;
}
footer p {
	margin: 0;
	font-size: 0.9em;
}
div.status {
	display: flex;
	height: 70%;
}
div.status figure {
	display: flex;
	align-items: center;
	margin: 0 2em;
	color: #29335c;
}
div.status img {
	height: 3em;
	margin: 0.2em 0.7em;
}
div.status figcaption {
	font-size: 2.4em;
	background-color: #f3a712;
	margin-top: 0.2em;
	line-height: 1.3em;
	border-radius: 0.2em;
	width: 3em;
	text-align: center;
}
a {
	color: #534d41;
	text-decoration: none;
}
a:hover {
	color: #db2b39;
}
ul.settings {
	font-size: 0.8em;
	margin: 10px auto;
	list-style-type: "\2794";
	width: -moz-fit-content;
	width: -webkit-fit-content;
	width: fit-content;
	min-width: 50%;
	max-width: 90%;
	text-align: left;
	display: grid;
	padding: 0;
}
ul.sublist {
	display: flex;
	list-style-type: none;
	flex-wrap: wrap;
}
ul.sublist.board li {
	margin: 0.2em 1em;
}
ul.sublist li{
	display: flex;
	width: 5em;
	min-width: fit-content;
}
form label {
	cursor: pointer;
}
form input[type=radio] {
	height: 1.5em;
	width: 1.5em;
}
li.difficulty {
	font-size: 1.5em;
	font-weight: 800;
}
input[type=number] {
	height: 1.4em;
	background-color: #f3a712;
	border: 2px solid #29335c;
	color: #29335c;
	font-weight: 800;
	font-family: 'Poppins';
	border-radius: 5px;
	font-size: 1.05em;
	outline: none;
	width: 4.6em;
}
input[type=number]:focus::placeholder {
	opacity: 0;
}
input[type=number]::placeholder {
	transition: opacity 0.2s;
	text-align: center;
	color: #29335c;
}
label:hover {
	color: #db2b39;
}
::selection {
	background-color: #db2b39;
	color: #29335c;
}
p.touch_control {
	display: none; /*--> flex*/
	flex-direction: column;
	border: 2px solid #29335c;
	border-radius: 0.5em;
}
p.touch_control span {
	text-decoration: underline;
}
div.hint {
	display: none;
	position: absolute;
	z-index: 2;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	justify-content: center;
	align-items: flex-start;
}
div.hint div{
	background-color: #f3a712;
	height: 10%;
	width: 100%;
	border-radius: 0.2em;
	text-align: center;
	font-size: 2.2em;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media screen and (max-width: 768px) {
	div.setup div.content {
		font-size: 0.8em;
	}
	div.status {
		font-size: 0.6em;
	}
	div.hint div {
		font-size: 0.9em;
	}
}