HTML,
BODY {
	margin: 0px;
	padding: 0px;
}

BODY {
	font-family: Arial;
	background: linear-gradient(to right, black 0%, #572222 10%, #572222 80%, black 90%, black 100%);
	height: 100svh;
}

.GameButton {
	background-color: #8fc5f5;
	border: 1px solid #000055;
	max-width: 200px;
	cursor: pointer;

	padding: 30px 0px;
	text-align: center;
}

#Board,
#WordList,
#Game,
#Solution,
#Toolbar {
	width: 70svw;
	max-width: 1000px;
	margin-left: 10svw;
	margin-right: auto;
	margin-bottom: 20px;
}

#WordList {
	display: flex;
	flex-wrap: wrap;

/*	max-width: 1000px;*/
	max-height: 200px;

	padding-top: 20px;
/*	margin-left: auto;*/
/*	margin-right: auto;*/
/*	margin-bottom: 20px;*/
	overflow-y: auto;

	justify-content: space-between;
	align-content: flex-start;
}

#WordList > DIV {
	padding: 3px;
	font-size: 8pt;
	color: #CCCCCC;
	border: 1px solid transparent;
}

#WordList > DIV.Selected {
	background-color: #c76666;
	border-color: black;
	color: white;
}

#Board > DIV {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

#Toolbar {
	display: flex;
	justify-content: center;
	align-items: center;
}

#Toolbar > DIV {
	padding: 20px 40px;
}

#CounterNumber,
#CounterMessage {
	color: white;
}

#CounterNumber {
	font-size: 40pt;
}

#CounterMessage {
	font-size: 11pt;
	margin-bottom: 10px;
	text-align: center;
}

#History > DIV.HistoryBoard > DIV,
#Solution > DIV {
	display: flex;
	justify-content: center;
}

#Board > DIV > DIV,
#Solution > DIV > DIV,
#History > DIV.HistoryBoard > DIV > DIV {
	border-radius: 5px;
	margin: 5px;
	width: 80px;
	height: 80px;
	font-size: 40pt;
	text-align: center;
	color: white;
	-webkit-text-stroke: 1px black;
}

#History > DIV.HistoryBoard > DIV > DIV,
#Solution > DIV > DIV {
	border: 1px solid #CCCCCC;
	z-index: 10;
}

#Solution > DIV > DIV.Gimme {
	cursor: pointer;
}

#Solution > DIV > DIV.Gimme:hover {
	background-color: #0bdb43 !important;
}

#Board > DIV > DIV {
	border: 1px solid white;
	z-index: 15;
	cursor: pointer;
	background-repeat: no-repeat;
/*	background-position: center;*/
	background-color:#874a56;
	background-position: right bottom;
	background-size: 30%
}

#Board > DIV > DIV.Selected {
	background-color: #c76666 !important;
}

#HistoryContainer {
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	right: 0px;
	top: 0px;
	width: 150px;
	height: 100svh;
	min-height: 0px;

/*	background-color: rgba(56, 5, 22, 1);*/
/*	opacity: 0.3;*/
}

#HistoryContainer > DIV,
#HistoryContainer > DIV.HistoryBoard {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#HistoryContainer > DIV {
	width: calc(100% - 20px);
/*margin-left: 10px;*/
}

#History {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow-y: auto;
	min-height: 0px;
	height: calc(100svh - 150px);
	width: 100%;
	z-index: 90;
}

#History > DIV {
	max-width: 80px;
	padding: 3px;
}

#HistoryContainer > DIV,
#History > DIV {
	margin-top: 10px;
}

#History > DIV.HistoryBoard {
	border: 1px solid white;
	border-radius: 10px;
}

#History > DIV.HistoryBoard > DIV > DIV {
	width: 15px;
	height: 15px;
	font-size: 9pt;
	margin: 2px;
	-webkit-text-stroke: unset;
}

#HistoryButton {
	display:none !important;
}

#NOBoard .Check1 {
	background-image: url(images/Icon_ArrowX.png);
}

#NOBoard .Check2 {
	background-image: url(images/Icon_ArrowY.png);
}

#NOBoard .Check3 {
	background-image: url(images/Icon_ArrowXY.png);
}

.Check4 {
/*	background-image: url(images/Icon_ArrowFound.png);*/
	background-color: #24a51b;
}

#History .Gimme,
#Solution .Gimme {
	background-color: #888888;
	color: #777777;
	-webkit-text-stroke: #666666;
}

#History .Gimme {
	color: black;
}

#History .InSolutionGimme,
#Solution .InSolutionGimme {
	background-color: #24a51b; /*#773344;*/
	color: #cccccc;
	-webkit-text-stroke: 1px black;
}

#OverlayContainer {
	position: fixed;
	display: none;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	margin: 0px;
	background-color: rgba(65, 5, 22, 0.8);
	z-index: 40;
}

#Overlay {
	width: 100%;
	min-height: 30%;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 25%;
	text-align: center;
	background-color: rgba(56, 5, 22, 1);
	padding: 20px;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}

#Overlay > DIV {
	white-space: nowrap;
	flex-grow: 1;
}

#Overlay > DIV:not(.OverlayMessage) {
}

#Overlay > DIV.GameButton {
	font-size: 20pt;
	margin: 0px 10px;
	min-width: 225px;
}

#Overlay > DIV.OverlayMessage {
	font-size: 40pt;
	color: white;
	width: 100%;
}