/*
*
{	background: rgb(0 0 0 / .025);
	outline: thin dashed rgb(0 0 0 / .25);}
*/
:root
{	--s01:	0 0 2px rgb(0 0 0 / .14),
			0 2px 2px rgb(0 0 0 / .12),
			0 1px 3px rgb(0 0 0 / .2);
	--s02:	0 0 4px rgb(0 0 0 / .14),
			0 3px 4px rgb(0 0 0 / .12),
			0 4px 5px rgb(0 0 0 / .2);
	--s08:	0 8px 10px rgb(0 0 0 / .14),
			0 3px 14px rgb(0 0 0 / .12),
			0 4px 15px rgb(0 0 0 / .2);}

/*--------------------------------------------------------
	
--------------------------------------------------------*/
body
{	box-sizing: border-box;
	margin: 0;
	width: 100vw; height: 100vh;
	padding: 32px;

	display: flex;
	flex-direction: column;
	justify-content: center; align-items: center;
	user-select: none;
	font-family: "Old Standard TT";
}

#debug
{	position: fixed;
	left: 32px; top: 32px;
	font-family: "Inconsolata";
	font: normal small monospace;}

#input_strings
{	position: fixed;
	left: 32px; top: 32px;

	font-family: "Inconsolata";
	font-size: 24px;
	padding:0px;
	margin:0px;}

#input_strings input{
	text-transform: uppercase;
}

#string
{	width: 100%; height: 64px;
	font-size: 32px;}
#stringidx
{	width: 100%; height: 64px;
	font-size: 32px;
	color:rgb(0 0 0 / .6);
}

#string span {
	box-sizing: border-box;
	text-transform: uppercase;
	width:64px;
	height:64px;
	display: inline-flex;
	justify-content: center; align-items: center;
	
	border: 3px solid grey;
}

#subString
{	margin-top: 192px;
	position: fixed;
	left: 32px;	
	min-width: 128px; height: 64px;
	font-size: 32px;}

#subString span{
	box-sizing: border-box;
	text-transform: uppercase;
	width:64px;
	height:64px;
	display: inline-flex;
	justify-content: center; align-items: center;
	
	border: 3px solid grey;
}

#stringidx span{
	box-sizing: border-box;
	text-transform: uppercase;
	width:64px;
	height:64px;
	display: inline-flex;
	justify-content: center; align-items: center;
	
	border: thin dashed grey;
}

span
{	transition: background .25s;}

.match {
	background-color: rgb(239, 154, 154); 
}

.selected1 {
	background-color: rgb(128, 203, 196); 
}

.selected2 {
	background-color: rgb(255, 224, 130); 
}

.unselected {
	background-color: white; 
}