@media (max-width: 768px) {

	BODY {
		background: linear-gradient(to right, black 0%, #572222 10%, #572222 90%, black 100%);
	}

	#Board,
	#WordList,
	#Game,
	#Solution,
	#Toolbar {
		width: 100svw;
		max-width: 1000px;
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
	}

	#WordList {
		width: 86svw;
		max-width: 1000px;
		margin-left: 7svw;
		margin-right: auto;
		margin-bottom: 20px;
	}

	#Board > DIV > DIV,
	#Solution > DIV > DIV {
		width: 12svmin;
		height: 12svmin;
		font-size: 8svw;
	}

	#WordList {
		min-height: 150px;
		max-height: 150px;
	}

	#Toolbar {
		margin-top: 20px;
		width: 100%;
	}

	#Toolbar INPUT[type="button"] {
		width: calc(100% - 40px);
		height: 40px;
	}

	#HistoryContainer {
		width: 90px;
	}

	#History {
		opacity: 0;
		background-color: #662233;
/*		height: calc(100svh - 250px);*/
		left: -10px;
		padding: 10px;
	}

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

	#HistoryButton {
		display:block !important;
	}

	#HistoryButton:hover + #History {
		position:relative;
		top: 40px;
		opacity: 1;
		transition: opacity 0.5s ease;
	}

	#Overlay {
		width: calc(100svw - 20px);
		padding: 10px 10px;
		align-items: stretch;
		height: 100svh;
		top: 0px;
		justify-content: space-around;
		align-items: center;
	}

	#Overlay > DIV {
		white-space: break-spaces;
		width: 90%;
	}

	#Overlay > DIV:not(.OverlayMessage) {
		margin: 10pt;
		min-width: 120px;
	}

}