@import url('https://fonts.googleapis.com/css2?family=BenchNine&display=swap');


@media screen and (min-width: 700px) {
#Top {
	max-width:700px !important;
	padding:10px;
	margin:auto;
}
#MainWelcome {
			max-width:700px !important;
	padding:10px;
	margin:auto;
}

#FooterMenu {
				max-width:700px !important;
	padding:10px;
	margin:auto;
}
}

@media screen and (min-width: 1000px) {
#Top {
	max-width:800px !important;
	padding:10px;
	margin:auto;
}
#MainWelcome {
			max-width:800px !important;
	padding:10px;
	margin:auto;
}
#FooterMenu {
				max-width:700px !important;
	padding:10px;
	margin:auto;
}
}

p {
		text-align: left;
}

body {
	margin: 0 !important;
	padding: 0 !important;
	/* overflow-x: hidden; */
}
.ErrorClass
{
		color:#8f1402;
		font-weight:700;
		font-size:1.3rem;
}
#Main {
		text-align: center;
}
#Top {
	max-width:400px;
	margin:auto;
}
#InstructionsLink {
		
			
}
#Instructions {
		display:none;
}
#Inline-key {
		display:none;
}

#FooterMenu li{
			display:inline-block;
			margin:10px;
			
}

.ButtonStyleSmall {
	background: #32beff !important;
	margin: 3px 6px 3px 6px !important;
	padding: 3px 6px 3px 6px !important;
	color: white;
	font-size:.8rem;
	font-weight:700;
	border-radius: 6px !important;
	cursor:pointer;		
}

.ButtonStyleSmall:hover {
			background: #00ddff !important;
	
}



.ButtonStyle {
	background: #32beff !important;
	margin: 3px 8px 3px 8px !important;
	padding: 3px 8px 3px 8px !important;
	color: white;
	font-size:1.2rem;
	font-weight:700;
	border-radius: 8px !important;
	cursor:pointer;		
}

.ButtonStyle:hover {
			background: #00ddff !important;
	
}
.PuzzleWordsHeader h4 {
			display:inline-block;	
}
.NavWrap {
			display:inline-block;
			float:right;
}
.Nav {
	background: #32beff !important;
	padding: 3px 5px 3px 5px !important;
	color: white;
	border-radius: 8px !important;
	cursor:pointer;		
	height:30px;
	width:30px;
}


#ButtonRow {
					text-algin:center;
}
#MainWelcome {
					margin:auto;
}

#ClearWordList
{
			margin-left:30px;
}
	div,button,select,h1,h2,h3,h4,h5,h6
	{
			font-family: 'BenchNine';			
	}
	
	h1,h2,h3,h4,h5,h6{
		text-align: center;
	}

.Margin10 {
			margin:10px 10px 10px 10px;
}

#UsedWord {
				height:40px;
				font-size:20px;
				width:125px;
}
#PuzzlesOptions {
			font-size:1.5rem;
}
#PuzzlesNum {
	font-size:1.5rem;
	
}

#PuzzlesNum option{
	width:50px;
	
}

	.UsedWordBox-5 {
				
	}
	


	#Puzzles {
					margin-top:25px;
					display:flex;
					flex-flow: row;
					justify-content:center;				
				  flex-wrap: wrap;	
	}
	
		#Letters  {
					height:40px;		
					font-size:2.2 rem;				
	}
	
	 .LetterBoxesCell
	 {
		 		margin:3px;
				text-align: center;
				display:inline-block;
	 }
	.LetterBoxes  {
				
				font-size:2.2 rem;
				height:40px;
				width:20px;		
				margin:3px;
				text-align: center;
				
	}
	
	
	
ul {
			margin:3px;
			padding:3px;
}
li {
		list-style: none;
		
}	
	
.LinkList	 {
			column-count: 2;	
}

.LinkList li{
		margin:10px;
	
}

.LinkListSingle li{
		margin:10px;
	
}


.TwoColums {
			column-count: 2;	
	
}


	.Puzzle {
				border: solid 1px black;
				padding:4px;
				margin:5px;
				
		
	}
	.PuzzleWord
	{
			display:table-row;
	}
	.CharCell {
				display:table-cell;
				
	}
	.Char {
				margin:2px;
				padding:3px;				
				font-size:2.3rem;
				border:solid black 1px;
				text-align: center;
				min-width:18px;
				cursor:pointer;	
				
	}

	.CharIndex {
				display:table-cell;
				
				padding:3px;
				height:10px;
				width:15px;
				
				border:solid black 1px;				
	}
	
.IndexRow {
				height:20px;
				vertical-align: middle;
				display:table-row;
}

.IndexText {
		display:table-cell;
		padding-left:5px;
}

		.GoodLetterWrongPlaceKey {
			color: #fae821;			
	}
	
	.GoodLetterRightPlaceKey {
		 color: green;
		 
	}
	.GoodLetterWrongPlace {
			background-color: #fae821;			
	}
	
	.GoodLetterRightPlace {
		 background-color: green;
		 color:white;
	}
	
	.BadLetter {
		
	}
	  .FoundWordsHeader {
		  		
					justify-content: center;
					
				 }
				 
	  .FoundWordsTitle
		{
				
				padding:3px 3px 3px 125px;
				font-size:1.8rem;
				max-height:50px;
		}
		.FoundWordCount {
					padding-left:15px;
					font-size:.8rem;
		}

	
	.FoundWordsWrapper {
					display:flex;
					flex-flow: row;
					justify-content: center;			
					flex-wrap: wrap;
					border:solid 1px black;
					margin:10px;
					
	}
	.FoundWords {
				margin:5px;
				font-size:1.2rem
	}

.DailyUsed {
			color:#ad0707;
			font-style: italic; 
}


/*   Menu system*/



.menu-wrap a {
	color: #b8b7ad;
}

.menu-wrap a:hover,
.menu-wrap a:focus {
	color: #c94e50;
}



/* Menu Button */
.menu-button {
	position: fixed;
	z-index: 1000;
	margin: .2rem .2rem .2rem .5rem;
	padding: 0 ;

	border: none;

	color: black;
	background: transparent;
}



.menu-button:hover {
	opacity: 0.6;
}

/* Close Button */
.close-button {
	position: absolute;
	right: 1em;
	top: 1em;
	overflow: hidden;

	border: none;
	background: transparent;
	color: white;
}




/* Menu */
.MenuHeaders 
{
			color:white;
}


.menu-wrap {
	position: absolute;
	z-index: 1001;
	width: 300px;
	height: 100%;
	background: #373a47;
	padding: 2.5em 1.5em 0;
	font-size: 1.15em;
	-webkit-transform: translate3d(-380px,0,0);
	transform: translate3d(-380px,0,0);
	-webkit-transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.menu, 
.icon-list {
	height: 100%;
}

.icon-list {
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

.icon-list li {
	display: block;
	padding: 0.4em;
	-webkit-transform: translate3d(0,500px,0);
	transform: translate3d(0,500px,0);
}

.icon-list,
.icon-list li {
	-webkit-transition: -webkit-transform 0s 0.4s;
	transition: transform 0s 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.icon-list li:nth-child(2) {
	-webkit-transform: translate3d(0,1000px,0);
	transform: translate3d(0,1000px,0);
}

.icon-list li:nth-child(3) {
	-webkit-transform: translate3d(0,1500px,0);
	transform: translate3d(0,1500px,0);
}

.icon-list li:nth-child(4) {
	-webkit-transform: translate3d(0,2000px,0);
	transform: translate3d(0,2000px,0);
}

.icon-list li:nth-child(5) {
	-webkit-transform: translate3d(0,2500px,0);
	transform: translate3d(0,2500px,0);
}

.icon-list li:nth-child(6) {
	-webkit-transform: translate3d(0,3000px,0);
	transform: translate3d(0,3000px,0);
}

.icon-list li:nth-child(7) {
	-webkit-transform: translate3d(0,3500px,0);
	transform: translate3d(0,3500px,0);
}

.icon-list li:nth-child(8) {
	-webkit-transform: translate3d(0,4000px,0);
	transform: translate3d(0,4000px,0);
}

.icon-list li:nth-child(9) {
	-webkit-transform: translate3d(0,4500px,0);
	transform: translate3d(0,3500px,0);
}

.icon-list li:nth-child(10) {
	-webkit-transform: translate3d(0,5000px,0);
	transform: translate3d(0,5000px,0);
}



.icon-list a span {
	margin-left: 10px;
	font-weight: 700;
}

/* Shown menu */
.show-menu .menu-wrap {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: -webkit-transform 0.8s;
	transition: transform 0.8s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.show-menu .icon-list,
.show-menu .icon-list li {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: -webkit-transform 0.8s;
	transition: transform 0.8s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.show-menu .icon-list li {
	-webkit-transition-duration: 0.9s;
	transition-duration: 0.9s;
}