body {
	font-family:arial;
	background:#f9f9f9;
	background-size:cover;
}

h1 {
 text-align: center;
  color:#fff;
}

#game-board {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.letter-box {
  border: 2px solid gray;
  border-radius: 3px;
  margin: 2px;
  font-size: 2.5rem;
  font-weight: 700;
  height: 3rem;
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  background:#fff;
}

#Del  {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
#Del:before {
  content: "\f55a";
}

.filled-box {
  border: 2px solid black;
}

.letter-row {
  display: flex;
}

#keyboard-cont {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#keyboard-cont div {
  display: flex;
}

.second-row {
  margin: 0.5rem 0;
}

/* disable the double-tap zoom */
* {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	touch-action: manipulation;
}
        
.keyboard-button {
	font-size: 1.25em;
	font-weight: bold;
	border: 1px solid #666;
	padding: 3px 10px;
	margin: 0 6px 0 0;
	height: 40px;
	border-radius: 4px;
	cursor: pointer;
	background-color: #fff;
	color: #000;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;	

	-webkit-appearance: button;
	touch-action: manipulation !important;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.keyboard-button.small {
  font-size: 1rem;
  line-height:1rem;
}
.keyboard-button:focus,
.keyboard-button:hover {
	background:#71CBC9;
}
.keyboard-button.small:focus,
.keyboard-button.small:hover {
	background:#88F286;
}


.help {
	text-align:center;
	margin:25px auto;
}
.help a {
	text-decoration:none;
	margin:10px;
	color:#fff;
	padding:5px 10px;
	display:inline-block;
}
.help a:hover {
	color:#000;
	background:#fff;
}

.clearit {
	font-size:24px;
}

#reload {
	background:#67A6C7;
	background: linear-gradient(180deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
	color:#fff;
	border-radius:5px;
	padding:6px 15px;
}
#reload:focus,#reload:hover {
	color:#fffs;
	background: rgb(131,58,180);
	background: linear-gradient(0deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}
#refresh {
	height:25px;
	position:absolute;
	top:5px;
	left:-5px;
}
#refresh svg {
	fill:#fff;
	height:23px;
	width:23px;
	transition: transform .7s ease-in-out;
}
#refresh svg:hover {
	fill:#80FF00;
	transform: rotate(360deg);
}


.tally {
	margin:10px 0px;
}
.tally div {
	padding:4px 3px 4px 15px;
	margin:1px 0px;
	width:85%;
}
.tally span {
	display:inline-block;
	width:80%;
}
.tally span.ans {
	width:15%;
	text-align:center;
}

.toast h2,
.toast h3 {
 	filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.8));
 	letter-spacing:2px;
 	width: 85%;
 	text-align:center;
}
.toast h3 svg {
 	max-height:25px;
 	width:auto;
 	fill:#FFD700;
 	margin-right:10px;
}
.toast h3.second svg {
	fill:#ffee88;
}
.toast h3.third svg {
	fill:#FFD700;
}
.toast h3.fouth svg {
	fill:#F2EF62;
}
.toast h3.fifth svg {
	fill:#F2EF62;
}
.toast h3.sixth svg {
	fill:#FFF;
}

.toast.toast-success { opacity: 1 !important; }

#toast-container > .toast.toast-success {
	background-image:none !important;
}
.win::before {
	content: "\f30b";
	display: inline-block;
	position: absolute;
	left: -29px;
	top: 0px;
	font-family: 'FontAwesome';
	font-size: 23px;
}
.win::after {
	display: inline-block;
	content: "\f30a";
	display: inline-block;
	position: absolute;
	right: -29px;
	top: 0px;
	font-family: 'FontAwesome';
	font-size: 23px;
}



.low.one {
	background:#72c600;
	font-weight:bold;
}
.low.two {
	background: rgb(114,198,0);
	background: linear-gradient(90deg, rgba(114,198,0,1) 0%, rgba(202,179,13,1) 85%);
}
.med.three {
	background:#CAB30D;
}
.med.four {
	background: rgb(202,179,13);
	background: linear-gradient(90deg, rgba(202,179,13,1) 0%, rgba(255,98,21,1) 85%);
}
.high {
	background:#FF6215;
}
.high.six {
	background: rgb(255,98,21);
	background: linear-gradient(90deg, rgba(255,98,21,1) 0%, rgba(237,33,37,1) 85%);
}
.fail {
	background:#ED2125;
	font-size: 12px;
}
.ans{ 
	font-weight:bold;     
}
.win {
	box-shadow: 0px 0px 9px #000;
	z-index: 1000;
	position: relative;
}

@media (max-width: 650px) {
	.keyboard-button {	  
	  padding: 8px 8px !important;
	  height:40px;
	}
	.keyboard-button.small {
	  font-size: .75rem !important;
	  line-height:1.5rem !important;
	}
	.toast-close-button {
		font-size: 40px !important;
		right: 0em !important;
	}
}

@media (max-width: 380px) {
	.keyboard-button {	  
	  padding: 4px 6px !important;
	  height:35px;
	}
	.keyboard-button.small {
	  font-size: .75rem !important;
	  line-height:1.2rem !important;
	}
	.toast-close-button {
		font-size: 30px !important;
		right: 0em !important;
	}
}