:root {
	--main-bg-color: #002f5f;
	--main-fg-color: #fff;
	--alt-bg-color: #e0ffff;
	--cell-width: 20%;
	--cell-height: 20%;
	--arrow-heading: 0deg;
}

*, *:before, *:after {
	box-sizing: inherit;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-moz-user-select: none;
}

::-ms-clear, ::ms-reveal {
	display: none;
}

html, body {
	height: 100%;
	max-height: 100%;
	margin: 0px;
	box-sizing: border-box;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-ms-overflow-style: none;
	-ms-content-zooming: none;
	touch-action: manipulation;
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	overflow: hidden;
	color: var(--main-fg-color);
}

.wholeScreen {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	min-height: 0px;
	overflow: hidden;
}

#header {
	display: flex;
	order: 1;
	width: 100%;
	height: 8%;
	max-height: 8%;
	align-items: center;
	flex: 0 0 8%;
	flex-direction: row;
	color: var(--alt-bg-color, #fff);
	background-color: var(--main-bg-color);
}

#content {
	height: 92%;
	max-height: 92%;
	flex: 92 92 92%;
	min-height: 0px;
	display: flex;
	order: 2;
	width: 100%;
	background-color: var(--alt-bg-color);
	flex-wrap: wrap;
	font-size: 2em;
	overflow: none;
}

#content div {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	height: var(--cell-height);
	background-color: DodgerBlue;
}

#content div div {
	display: flex;
	flex-direction: row;
	height: 100%;
	width: var(--cell-height);
	padding: 0.5em;

}
#content div div div {
	display: flex;
	background-color: yellow;
	height: 100%;
	width: 100%;
	padding: 0.25em;
	justify-content: center;
	cursor: pointer;
}

#modalWait {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 100%;
	min-width: 100%;
	min-height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgba(255,255,255,0.3);
	z-index: 9;
	cursor: not-allowed;
	height: 100%;
	width: 100%;
}

#modalWait div {
	flex: 1 1 50%;
	order: 1;
	max-width: 50%;
	max-height: 50%;
	background-color: black;
	color: white;
	cursor: default;
	overflow: auto;
	text-align: center;
	padding: 0.5em;
	font-size: 2em;
}

#placement {
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: hidden;
}

input[type="button"] {
	margin-right: 1em;
	cursor: pointer;
	border-radius: 0.66em;
	font-weight: bold;
	font-size: 1.5em;
	text-shadow: 1px 1px 0 #0d0d0d;
	color: #eff;
	box-shadow: inset 0 0 0.8em #eff;
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0.15, #ccffff),color-stop(0.51, #00ccdd),color-stop(0.65, #007580));
	background: -moz-linear-gradient(center top, #ccffff 15%, #00ccdd 51%, #007580 65%);
}

#coords {
	font-size: 1em;
}
	
#continue {
	font-size: 1em;
}

#arrow {
	transform: rotate(var(--arrow-heading));
	max-height: 100%;
    max-width: 100%;
    object-fit: contain;
	transition-duration: 2s;
    transition-property: transform;
    transform: rotate(var(--arrow-heading));
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--reduce-motion: 0s;
	}
}

@media only screen and (min-device-width : 1024px) {
	body {
		font-size: 14px;
	}
}

@media only screen and (min-device-width : 1920px) {
	body {
		font-size: 16px;
	}
}

@media only screen and (min-device-width : 2560px) {
	body {
		font-size: 22px;
	}
}