:root
{
--easter-angle:skewX(-20deg);
--easter-color:rgba(255, 255, 0, 1);
--easter-grade:linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
--Start-Button-top:65%;
--Start-z-reg:10;
--Start-z-cred:0;
--winline-color:rgba(0, 80, 0, 1);
--loseline-color:rgba(80, 0, 0, 1);		
--input-bg-color:rgba(0, 0, 0, 1);	
--input-text-color-:rgba(200, 200, 200, 1);	
--input-font-size:22pt;	
--input-font-weight:bold;
--input-border-radius:20px;
--input-border-right-width:5px;
--input-border-bottom-width:5px;
--input-border-color:rgba(255, 255, 255, 1);
--inputoutput-text-align:center;	
--main-bg-color:rgba(0, 0, 0, 1);
--main-text-color:rgba(200, 200, 200, 1);
--main-font-size:28pt;
--CurrentGuess-border-color:rgba(255, 255, 255, 1);
--CurrentGuess-border-style:solid;
--CurrentGuess-border-size:10px;	
--CurrentGuess-border-radius:10px;
--CurrentGuess-text-color:rgba(255, 255, 255, 1);
--row-font-size:30pt;
--row-font-weight:none;
--HxGuess-border-color:rgba(12, 12, 12, 1);
--HxGuess-border-style:solid;
--HxGuess-border-size:10px;	
--HxGuess-border-radius:10px;
--HxGuess-text-color:rgba(255, 255, 255, 1);
--mainframe-border-color:rgba(108, 108, 108, 1);
--mainframe-border-style:none;
--mainframe-border-size:10px;	
--mainframe-border-radius:12px;
--Clickable-cursor:pointer;
--clickable-hover-bg-color:rgba(40, 40, 40, 1);
--green-bg-color:rgba(0, 80, 0, 1);
--yellow-bg-color:rgba(110, 110, 0, 1);
--red-bg-color:rgba(80, 0, 0, 1);




--OutterGame-overflow:scroll;
--OutterGame-min-height:500px;


--Cg-Top:28%;
--Cg-Top-One:28%;
--Cg-Top-Two:21%;



--Hx-Top:38%;
--Hx-Top-One:38%;
--Hx-Top-Two:30%;

--Guess-Width:98%;

--Guess-Width-notios:92%;


--Hx-Top-win:35%;
--Hx-Top-One-win:35%;
--Hx-Top-Two-win:28%;


--Hx-Top-height-win:60%;
--Hx-Top-One-height-win:32%;
--Hx-Top-Two-height-win:25%;


}

					@keyframes SqueezeIn
					{
						0%
						{
							top:0%;
							height:0px;
							width:0%;
							left:50%;
						}
						50%
						{
							
						}
						100%
						{
							height:40px;
							width:100%;
							left:0%;
							top:0%;
						}

					}		

	body
		{
			background-color:var(--main-bg-color);
			color:var(--main-text-color);
			font-size:22pt;
//			overflow:hidden;
		}

		

	.OutterGameClass
		{
			min-height:var(--OutterGame-min-height);
			min-width:350px;
			position:absolute;
			top:0%;
			height:95%;
			left:0%;
			width:100%;
			min-width:415px;
			min-height:550px;
			border-color:var(--mainframe-border-color);
			border-style:var(--mainframe-border-style);
			border-size:var(--mainframe-border-size);	
			border-radius:var(--mainframe-border-radius);
			z-index:10;
			overflow:var(--OutterGame-overflow);
			overflow-x:hidden;	
			}
			.OutterGameClass::-webkit-scrollbar {
						  display: none;
						}


@media only screen and (min-width: 1100px)
{
	
	.OutterGameClass
		{
			min-height:var(--OutterGame-min-height);
			min-width:350px;
			position:absolute;
			top:0%;
			height:95%;
			left:30%;
			width:40%;
			border-color:var(--mainframe-border-color);
			border-style:var(--mainframe-border-style);
			border-size:var(--mainframe-border-size);	
			border-radius:var(--mainframe-border-radius);
			z-index:10;
			overflow:var(--OutterGame-overflow);
			overflow-x:hidden;	
		}
			.OutterGameClass::-webkit-scrollbar {
						  display: none;
						}

}





	.OutterTitleClass
		{
			position:absolute;
			top:0%;
			height:5%;
			left:-10%;
			width:98%;
		}
	.InnerTitleClass
		{
			position:absolute;
			top:15%;
			height:100%;
			left:5%;
			width:85%;
			text-align:center;
			padding-top:5px;
			font-size:20pt;
			font-weight:bold;
			text-shadow:2px 2px rgba(255, 255, 255,  0.5);
		}





	.OutterTopInfoClass
		{
			position:absolute;
			top:6%;
			height:5%;
			left:1%;
			width:98%;
			z-index:15;
		}
	.InnerTopInfoClass
		{
			position:absolute;
			top:0%;
			height:100%;
			left:0%;
			width:100%;
			text-align:center;
			font-size:15pt;
			justify-content:space-between;
			display:flex;
		}
	.OutterFormClass
		{
			position:absolute;
			top:10%;
			height:8%;
			left:1%;
			width:98%;
			z-index:12;
		}
	.InnerFormClass
		{
			position:absolute;
			top:0%;
			height:100%;
			left:0%;
			width:100%;
		}
	.TheGuessInputClass
		{
			position:absolute;
			top:0%;
			height:90%;
			left:0%;
			width:92%;
			background-color:var(--input-bg-color);
			color:var(--input-text-color);
			text-align:var(--inputoutput-text-align);
			font-size:var(--input-font-size);
			font-weight:var(--input-font-weight);
			border-radius:var(--input-border-radius);
			border-right-width:var(--input-border-right-width);
			border-bottom-width:var(--input-border-bottom-width);
			border-color:var(--input-border-color);
			z-index:15;
		}	



					@keyframes BounceAni
					{
						0%
						{
							top:25%;
				//				transform:rotate(0deg);
						}
						5%
						{
							top:0%;
				//				transform:rotate(360deg);
						}
						10%
						{
							top:25%;
				//				transform:rotate(360deg);
						}
						100%
						{
							top:25%;
				//				transform:rotate(360deg);
						}

					}
.CalClas
{
	position:absolute;
	top:25%;

	
	
}

		
	.OutterBotInfoClass
		{
			position:absolute;
			top:20%;
			height:5%;
			left:1%;
			width:98%;
			z-index:11;
			padding-top:10px;
		}
	.InnerBotInfoClass
		{
			position:absolute;
			top:0%;
			height:100%;
			left:0%;
			width:100%;
			text-align:var(--inputoutput-text-align);
			font-size:18pt;
			font-style:italic;
			font-weight:bold;
		}		
	.OutterCurrentGuessClass
		{
			position:absolute;
			top:var(--Cg-Top);
			height:5%;
			left:0%;
			width:var(--Guess-Width);
			z-index:13;
		}

	.InnerCurrentGuessClass
		{
			position:absolute;
			top:0%;
			height:100%;
			left:2%;
			width:98%;
		}		


	.CurrentGuessClass
	{
		border-color:var(--CurrentGuess-border-color);
		border-style:var(--CurrentGuess-border-style);
		border-size:var(--CurrentGuess-border-size);	
		border-radius:var(--CurrentGuess-border-radius);
			text-wrap:no-wrap;				
			position:relative;
			width:100%;
			left:0%;
			font-size:45pt;
			color:var(--CurrentGuess-text-color);
			margin:0 -8px;
			overflow:hidden;
			z-index:11;
			display:inline-block;
			height:40px;
	}	
	.RowWrapClass
		{
						
			text-wrap:no-wrap;				
			position:relative;
			width:100%;
			left:0%;
			font-size:45pt;
			border-color:var(--HxGuess-border-color);
			border-style:var(--HxGuess-border-style);
			border-size:var(--HxGuess-border-size);	
			border-radius:var(--HxGuess-border-radius);
			color:var(--HxGuess-text-color);
			margin:0 -8px;
			overflow:hidden;
			z-index:11;
			display:inline-block;
			height:40px;
			}
					.OuterBarClass
					{
						background-color:var(--main-bg-color);
						height:100%;
						position:absolute;
						width:100%;
						z-index:5;
					}
					.InnerBarClass
					{
						background-color:var(--main-bg-color);
						border-radius:5px;
						height:100%;
						min-width:1%;
						z-index:5;	
					}
					.RowClass
					{
						border-radius:5px;
						font-weight:var(--row-font-weight);
						font-size:inhherit;
						height:40px;
						justify-content:space-between;
						padding:25px -20px;
						position:relative;
						width:100%;
						align-items:center;
						display:flex;
						z-index:5;
					}	






					.InnerRowClass
					{
						border-radius:5px;
						font-weight:var(--row-font-weight);
						font-size:35pt;
						height:40px;
						justify-content:space-between;
						padding:25px -20px;
						position:relative;
						width:96%;
						left:2%;
						top:0%;
						align-items:center;
						display:flex;
						z-index:5;
					}	


		.OutterGuessHXClass
		{
			position:absolute;
			top:var(--Hx-Top);
			height:60%;
			left:0%;
			width:var(--Guess-Width);
			overflow-x:visible;
			overflow-y:scroll;
			z-index:15;
			}
			.OutterGuessHXClass::-webkit-scrollbar {
						  display: none;
						}
						

						
						
						
	.InnerGuessHXClass
		{
			position:absolute;
			top:0%;
			height:100%;
			left:2%;
			width:98%;
		}
	.OutterMenuOpenClass
		{
			position:absolute;
			top:0%;
			height:5%;
			left:90%;
			width:10%;
		}
	.InnerMenuOpenClass
		{
			background-color:;//var(--main-bg-color);
			position:absolute;
			top:0%;
			height:100%;
			left:0%;
			width:100%;
			text-align:center;
			z-index:20;
			border-radius:25px;
		}
			.InnerMenuOpenClass:hover
				{
					background-color:var(--clickable-hover-bg-color);
				}
	.InnerMenuDotClass
		{
			position:absolute;
			width:15%;
			height:10%;
			left:45%;
			top:20%;
			background-color:var(--main-text-color);
		}
	.InnerMenuDotAClass
		{
			top:25%;
		}
	.InnerMenuDotBClass
		{
			top:50%;
		}
	.InnerMenuDotCClass
		{
			top:75%;
		}


	.OutterMenuClass
		{
			position:absolute;
			top:5%;
			height:45%;
			left:56%;
			width:25%;
			min-width:280px;
			min-height:230px;
			z-index:90;
		}




@media only screen and (min-width: 768px)
{
	.OutterMenuClass
		{
			position:absolute;
			top:5%;
			height:50%;
			left:50%;
			width:25%;
			min-width:280px;
			min-height:230px;
			z-index:56;
		}

}



	.InnerMenuClass
		{
			position:absolute;
			top:0%;
			height:100%;
			left:0%;
			width:100%;
			min-width:150px;
			text-align:center;
			border-style:var(--CurrentGuess-border-style);
			border-size:var(--CurrentGuess-border-size);
			border-radius:var(--CurrentGuess-border-radius);
			border-color:var(--CurrentGuess-border-color);
			background-color:var(--main-bg-color);
			color:var(--main-text-color);
			z-index:96;	
		}
.MenuItemClass
		{
			position:relative;
			width:100%;
			top:0%;
			min-width:150px;
			font-size:var(--main-font-size);
			color:var(--main-text-color);
			cursor:var(--Clickable-cursor);
		}
		.MenuItemClass:hover
				{
					background-color:var(--clickable-hover-bg-color);
				}
.OutterCreditClass
	{
		position:absolute;
		font-size:12pt;
		width:99%;
		height:99%;
		left:1%;

		background-color:var(--main-bg-color);
		z-index:91;
//		overflow:hidden;
		}		
.InnerCreditClass
	{
		position:absolute;
		left:0%;
		top:5%;
		width:100%;
		height:31%;
		text-align:center;
		overflow:hidden;
		z-index:90;
	}
		
			.InnerCreditClass::-webkit-scrollbar {
						  display: none;
						}	
.StoryCreditClass
	{
		position:absolute;
		left:0%;
		top:0%;
		width:90%;
		height:52.5%;
		text-align:center;
		text-wrap:no-wrap;
		color:yellow;
		overflow:scroll;
		transform:var(--easter-angle);
		color:var(--easter-color);
		z-index:94;
	}		

			.StoryCreditClass::-webkit-scrollbar {
						  display: none;
						}					
.StoryFadeClass
	{
		position:absolute;
		left:0%;
		top:0%;
		width:120%;
		height:32.5%;
		text-align:center;
		text-wrap:no-wrap;
		background:var(--easter-grade);
		
		
		color:yellow;
		overflow:hidden;
		transform:var(--easter-angle);
		
		z-index:95;
	}		
.StoryBGClass
	{

		position:absolute;
		left:0%;
		top:0%;
		width:150%;
		height:52.5%;
		overflow:hidden;
		transform:var(--easter-angle);
		z-index:93;
		
	
	}
.OutterBoxSetClass
{
			position:absolute;
			top:0%;
			height:100%;
			left:1%;
			width:98%;

		}
		
		
.InnerBoxSetClass
		{
			
			background-color:var(--main-bg-color);
			position:absolute;
			top:10%;
			height:89%;
			left:1%;
			width:98%;
			border-style:var(--CurrentGuess-border-style);
			border-size:var(--CurrentGuess-border-size);
			border-radius:var(--CurrentGuess-border-radius);
			border-color:var(--CurrentGuess-border-color);
			z-index:51;
		}	
.SettingTitleClass
	{
		position:absolute;
		left:0%;
		top:0%;
		width:100%;
		height:10%;
		text-align:center;
		overflow:hidden;
		background-color:var(--main-bg-color);
	}		
.RightHouseInfoClass

{

	font-size:12pt;
	z-index:40;
}
.LetterMenuClass
{
	background-color:var(--main-bg-color);
	color:var(--main-text-color);
	font-size:10pt;
	width:50px;
}

			.LetterMenuClass::-webkit-scrollbar {
						  display: none;
						}					
.HintTopInfoClass
{
	display:none;
}
.OutterThemeClass
{
	position:absolute;
	width:100%;
	height:5%;
	top:11%;
	left:0%;

}
.OutterThemeClass:hover
{
	background-color:var(--clickable-hover-bg-color);
}
.LeftThemeClass
{
	position:absolute;
	left:0%;
	width:25%;
	overflow:hidden;
}
.RightThemeClass
{
	position:absolute;
	left:25%;
	width:75%;
	overflow:hidden;


}
.LeftArrowThemeClass
{
	background-color:rgba(100, 100, 100, 0.3);
	border-radius:60px;
	cursor:var(--Clickable-cursor);
	width:5%;
	position:absolute;
	left:0%;
	top:0%;
}
.RightArrowThemeClass
{
	background-color:rgba(100, 100, 100, 0.3);
	border-radius:60px;
	cursor:var(--Clickable-cursor);
	width:5%;
	position:absolute;
	left:90%;
	top:0%;
}
.InThemeSetClass
{
position:relative;
left:36%;
width:64%;
text-align:center;

}
.CentInThemeSetClass
{
position:relative;

	width:84%;
cursor:var(--Clickable-cursor);
}
.OutterAutoClass
{
	position:absolute;
	width:100%;
	height:5%;
	top:24%;
	left:0%;
	cursor:var(--Clickable-cursor)
}
.OutterAutoClass:hover
{
background-color:var(--clickable-hover-bg-color);
}

.LeftOutterAutoClass
{
	position:absolute;
	left:0%;
	width:35%;
	overflow:hidden;
}
.RightOutterAutoClass
{
	position:absolute;
	left:36%;
	width:64%;
	overflow:hidden;
	text-align:center;
}
.OutterModeClass
{
	position:absolute;
	width:100%;
	height:5%;
	top:31%;
	left:0%;
	cursor:var(--Clickable-cursor)
}
.OutterModeClass:hover
{
background-color:var(--clickable-hover-bg-color);
}

.LeftOutterModeClass
{
	position:absolute;
	left:0%;
	width:35%;
	overflow:hidden;
}
.RightOutterModeClass
{
	position:absolute;
	left:36%;
	width:64%;
	overflow:hidden;
	text-align:center;
}
.OutterBadModeClass
{
	position:absolute;
	width:100%;
	height:5%;
	top:52%;
	left:0%;
	cursor:var(--Clickable-cursor)
}
.OutterBadModeClass:hover
{
background-color:var(--clickable-hover-bg-color);
}

.LeftOutterBadModeClass
{
	position:absolute;
	left:0%;
	width:35%;
	overflow:hidden;
}
.RightOutterBadModeClass
{
	position:absolute;
	left:36%;
	width:64%;
	overflow:hidden;
	text-align:center;
}
.OutterComModeClass
{
	position:absolute;
	width:100%;
	height:5%;
	top:58%;
	left:0%;
	cursor:var(--Clickable-cursor)
}
.OutterComModeClass:hover
{
background-color:var(--clickable-hover-bg-color);
}

.LeftOutterComModeClass
{
	position:absolute;
	left:0%;
	width:35%;
	overflow:hidden;
}
.RightOutterComModeClass
{
	position:absolute;
	left:36%;
	width:64%;
	overflow:hidden;
	text-align:center;
}
.OutterHouseModeClass
{
	position:absolute;
	width:100%;
	height:5%;
	top:38%;
	left:0%;
	cursor:var(--Clickable-cursor)
}
.OutterHouseModeClass:hover
{
background-color:var(--clickable-hover-bg-color);
}

.LeftOutterHouseModeClass
{
	position:absolute;
	left:0%;
	width:35%;
	overflow:hidden;
}
.RightOutterHouseModeClass
{
	position:absolute;
font-size:15pt;
	left:36%;
	width:64%;
	overflow:hidden;
	text-align:center;
}
.OutterLaidClass
{
	position:absolute;
	width:100%;
	height:5%;
	top:17%;
	left:0%;
	cursor:var(--Clickable-cursor)
}
.OutterLaidClass:hover
{
background-color:var(--clickable-hover-bg-color);
}
.LeftOutterLaidClass
{
	position:absolute;
	left:0%;
	width:35%;
	overflow:hidden;
}
.RightOutterLaidClass
{
	position:absolute;
	left:36%;
	width:64%;
	overflow:hidden;
	text-align:center;
}

.OutterNoNoClass
{
	position:absolute;
	width:100%;
	height:5%;
	top:45%;
	left:0%;
	cursor:var(--Clickable-cursor)
}
.OutterNoNoClass:hover
{
background-color:var(--clickable-hover-bg-color);
}





.OutterPluClass
{
	position:absolute;
	width:100%;
	height:5%;
	top:65%;
	left:0%;
	cursor:var(--Clickable-cursor)
}
.OutterPluClass:hover
{
background-color:var(--clickable-hover-bg-color);
}
.LeftOutterPluClass
{
	position:absolute;
	left:0%;
	width:35%;
	overflow:hidden;
}
.RightOutterPluClass
{
	position:absolute;
	left:36%;
	width:64%;
	overflow:hidden;
	text-align:center;
}













.AllowOutterAdsClass
{
	position:absolute;
	width:100%;
	height:5%;
	top:85%;
	left:0%;
	text-align:center;
	cursor:var(--Clickable-cursor)
}
.AllowOutterAdsClass:hover
{
background-color:var(--clickable-hover-bg-color);
}




.OutterClearDataClass
{
	position:absolute;
	width:100%;
	height:5%;
	top:93%;
	left:0%;
	text-align:center;
	cursor:var(--Clickable-cursor)
}
.OutterClearDataClass:hover
{
background-color:var(--clickable-hover-bg-color);
}

.LeftOutterNoNoClass
{
	position:absolute;
	left:0%;
	width:45%;
	overflow:hidden;
}
.RightOutterNoNoClass
{
	position:absolute;
	left:36%;
	width:64%;
	overflow:hidden;
	text-align:center;
}





.TheNoNoListClass
{
	background-color:var(--main-bg-color);
	color:var(--main-text-color);
	position:relative;
	left:2%;
	width:40%;
	text-align:center;
	font-size:16pt;
		
}
.WinDivClass
{
position:absolute;
left:10%;
z-index:25;
background-color:var(--main-bg-color);
width:80%;
height:40%;
			border-style:var(--CurrentGuess-border-style);
			border-size:var(--CurrentGuess-border-size);
			border-color:var(--CurrentGuess-border-color);
			border-radius:var(--CurrentGuess-border-radius);
}
	.CanvasWinClass
	{
		position:absolute;
		left:1%;
		top:1%;
		width:98%;
		height:98%;
		z-index:26;
	}
	




	.StartButtonClass
		{
			position:absolute;
			left:20%;
			top:84%;//var(--Start-Button-top);
			width:55%;
			height:5%;
			background-color:var(--main-bg-color);
			color:var(--main-text-color);
			text-align:center;
			border-style:var(--CurrentGuess-border-style);
			border-size:var(--CurrentGuess-border-size);
			border-color:var(--CurrentGuess-border-color);
			border-radius:var(--CurrentGuess-border-radius);
			cursor:var(--Clickable-cursor);
			z-index:50;
		}
		.StartButtonClass:hover
			{
				background-color:var(--clickable-hover-bg-color);
			}
	.TopButtonClass
		{
			position:absolute;
			left:20%;
			top:91%;//var(--Start-Button-top);
			width:55%;
			height:5%;
			background-color:var(--main-bg-color);
			color:var(--main-text-color);
			text-align:center;
			border-style:var(--CurrentGuess-border-style);
			border-size:var(--CurrentGuess-border-size);
			border-color:var(--CurrentGuess-border-color);
			border-radius:var(--CurrentGuess-border-radius);
			cursor:var(--Clickable-cursor);
			z-index:50;
		}
		.TopButtonClass:hover
			{
				background-color:var(--clickable-hover-bg-color);
			}











			
			
			
.TopScreenClass
	{
		position:absolute;
		width:98%;
		height:91%;
		left:1%;
		background-color:var(--main-bg-color);
		z-index:49;
			border-style:var(--CurrentGuess-border-style);
			border-size:var(--CurrentGuess-border-size);
			border-color:var(--CurrentGuess-border-color);
			border-radius:var(--CurrentGuess-border-radius);
	}		
			


.TopScreenInfoClass
	{
		position:absolute;
		width:100%;
		height:5%;
		left:0%;
		top:3%;
		text-align:center;
		color:var(--main-text-color);
		z-index:19;
		overflow:hidden;
		

	}		
			
			
	.OutterClosewordsClass
		{
			position:absolute;
			top:70%;
			height:80.5%;
			left:0%;
			width:100%;
			overflow:scroll;
			background-color:var(--main-bg-color);
			z-index:19;
			}
			.OutterClosewordsClass::-webkit-scrollbar {
						  display: none;
						}
						
						
						
.InnerClosewordsClass
		{
			position:absolute;
			top:0%;
			height:100%;
			left:2%;
			width:97%;

		}						
	
.OutterDefineClass
{
	border-size:10px;
	border-style:solid;
	border-color:rgba(200, 200, 200, 0.7);
	box-shadow:10px 10px rgba(50, 50, 50, 0.5);
	
			transform:skewY(-5deg);
	
	position:absolute;
	top:30%;
	left:10%;
	width:80%;
	height:30%;
	background-color:rgba(185, 185, 80, 1);
	color:rgba(0, 0, 0,  1);
	z-index:60;
	text-wrap:wrap;
	text-align:center;
}
.TopDefineClass
{
	
	position:absolute;
	top:0%;
	left:0%;
	width:100%;
	height:15%;
	background-color:rgba(15, 185, 80, 1);
	color:rgba(0, 0, 0,  1);
	z-index:50;
	text-align:left;	
}




.exDefineClass
{
	
	position:absolute;
	top:0%;
	left:88%;
	width:10%;
	height:98%;
	border-radius:30px;
	background-color:rgba(15, 185, 80, 1);
	color:rgba(0, 0, 0,  1);
	z-index:50;
	text-align:center;
overflow:hidden;	
cursor:var(--Clickable-cursor);
}
.exDefineClass:hover
{
	background-color:rgba(0, 150, 45, 1);
}


.BotDefineClass
{
	
	position:absolute;
	top:15%;
	left:0%;
	width:100%;
	height:85%;
	background-color:rgba(185, 185, 80, 1);
	color:rgba(0, 0, 0,  1);
	z-index:50;
	text-align:left;
	overflow:scroll;
}
			.BotDefineClass::-webkit-scrollbar {
						  display: none;
						}






.FancyBackClass
{
position:absolute;
left:0%;
top:0%;
width:100%;
height:100%;
z-index:0;	
overflow:hidden;
}
.FancyBackCanvasClass
{
position:absolute;
left:0%;
top:0%;
width:100%;
height:100%;
z-index:0;	
}
.FancyBackCanvasTwoClass
{
position:absolute;
left:0%;
top:0%;
width:100%;
height:100%;
z-index:3;	
}
.FancyBackCanvasThreeClass
{
position:absolute;
left:0%;
top:0%;
width:100%;
height:100%;
z-index:4;
}

.PlaneStreakClass
{
	position:absolute;
	top:10%;
	left:0%;
	z-index:2;
	width:100%;
	height:1.5%;
	z-index:2;
}




					@keyframes Contrailout
					{
						0%
						{
							opacity:100%;
						}
						50%
						{
							opacity:0%;
						}
						100%
						{
							opacity:100%;
						}

					}


.PlanerClass
{
	position:absolute;
	top:0%;
	left:-1%;
	z-index:2;
	width:50%;
	height:100%;
	filter:blur(1px);
	z-index:2;
}





					@keyframes TwinkleAni
					{
						0%
						{
							opacity:100%;
							filter:blur(2.5px);
						}
						10%
						{
							opacity:50%;
							filter:blur(3.5px);
						}
						20%
						{
							opacity:80%;
							filter:blur(1.5px);
						}
						30%
						{
							opacity:100%;
							filter:blur(3.5px);
						}
						40%
						{
							opacity:10%;
							filter:blur(1px);
						}
						50%
						{
							opacity:100%;
							filter:blur(2.5px);
						}
						60%
						{
							opacity:100%;
							filter:blur(3.5px);
						}
						70%
						{
							opacity:100%;
							filter:blur(1.5px);
						}
						80%
						{
							opacity:100%;
							filter:blur(2.5px);
						}
						90%
						{
							opacity:10%;
							filter:blur(3.5px);
						}
						100%
						{
							opacity:100%;
							filter:blur(2.5px);
						}

					}

.TwinkleClass
{
	position:absolute;
	z-index:0;
	filter:blur(2.5px);
	width:5px;
	height:5px;
	background-color:rgba(255, 255,  255,  1);
}





@keyframes WinLightAni
					{
						0%
						{
							opacity:100%;
						}
						100%
						{
							opacity:0%;
						}
			}




.InnerBoxSetTextClass
{
	text-align:center;
	position:relative;
	width:98%;
	left:1%;
}

.TheGuessInputOwnClass
{
	position:relative;
	width:80%;
	left:10%;
	background-color:var(--main-bg-color);
	color:var(--main-bg-color);
	text-align:var(--inputoutput-text-align);
}







	.StartOwnButtonClass
		{
			position:relative;
			left:30%;
			width:40%;
			height:5%;
			min-width:200px;
			background-color:var(--main-bg-color);
			color:var(--main-text-color);
			text-align:center;
			font-size:16pt;
			border-style:var(--CurrentGuess-border-style);
			border-size:var(--CurrentGuess-border-size);
			border-color:var(--CurrentGuess-border-color);
			border-radius:var(--CurrentGuess-border-radius);
			cursor:var(--Clickable-cursor);
			z-index:50;
		}
		.StartOwnButtonClass:hover
			{
				background-color:var(--clickable-hover-bg-color);
			}


.closeoutClass
{
	position:absolute;
	color:rgba(255, 255, 255, 1);
	background-color:rgba(0, 0, 0, 1);
	border-size:10px;
	border-style:solid;
	border-radius:100px;
	width:5%;
	height:5%;
	z-index:100;
	top:-5%;
	left:92%;
	text-align:center;
	font-size:15pt;
	padding:5px;
	padding-top:10px;
}

.closeoutClass:hover
{
		background-color:rgba(80, 80, 80, 1);
}






.OutterAutoIClass
{
	position:absolute;
	width:100%;
	height:5%;
	top:71%;
	left:0%;
	cursor:var(--Clickable-cursor)
}
.OutterAutoIClass:hover
{
background-color:var(--clickable-hover-bg-color);
}
.LeftOutterAutoIClass
{
	position:absolute;
	left:0%;
	width:35%;
	overflow:hidden;
}
.RightOutterAutoIClass
{
	position:absolute;
	left:36%;
	width:64%;
	overflow:hidden;
	text-align:center;
}


.titleoneclass
{
	position:relative;
	font-size:30pt;
	font-weight:bold;
text-shadow: -3px -3px 0 rgba(0,0,0,1), 3px -3px 0 rgba(0,0,0,1), -3px 3px 0 rgba(0,0,0,1), 2px 2px 0 rgba(0,0,0,1);
//	text-shadow:2px 2px rgba(255, 255, 255,  1);
	z-index:40;
}


.titletwoclass
{
	position:relative;
	display:inline-block;
	left:-20%;
	top:-30%;
	color:rgba(255,0,0,0.6);
	font-size:15pt;
	font-weight:bold;
	text-shadow: -1px -1px 0 rgba(0,0,0,1), 1px -1px 0 rgba(0,0,0,1), -1px 1px 0 rgba(0,0,0,1), 1px 1px 0 rgba(0,0,0,1);
	transform: skewY(-10deg);
	z-index:41;
}




.titlethreeclass
{
	position:absolute;
	left:78%;
	top:80%;
//	color:rgba(255,0,0,0.6);
	font-size:12pt;
	font-weight:bold;
	text-shadow: -1px -1px 0 rgba(0,0,0,1), 1px -1px 0 rgba(0,0,0,1), -1px 1px 0 rgba(0,0,0,1), 1px 1px 0 rgba(0,0,0,1);
	//transform: skewX(-30deg);
	z-index:43;
}


.FancyTitleClass
{
	position:relative;
	display:inline-block;
	left:5%;
	height:100%;
	width:100%;
	min-width:370px;

	text-align:center;

	
}


.InteractiveSetClass
{
	position:absolute;
	width:100%;
	height:5%;
	top:77%;
	left:0%;
	cursor:var(--Clickable-cursor);
	text-align:center;
}

.InteractiveSetClass:hover
{
	background-color:var(--clickable-hover-bg-color);
}


.boxclass
{
	accent-color: rgba(0, 155, 0, 1);	
}


.PhraseCatClass
{
	background-color:var(--main-bg-color);
	color:var(--main-text-color);
	font-size:var(--main-font-size);
	text-align:center;
	font-size:15pt;
	scrollbar-color: var(--input-bg-color) var(--main-bg-color);
}

.ThePhraseClass
{
	background-color:var(--main-bg-color);
	color:var(--main-text-color);
	font-size:var(--main-font-size);
	text-align:center;
	overflow-y: scroll;
	scrollbar-color: var(--input-bg-color) var(--main-bg-color);
}


.InputClass
{
	background-color:var(--main-bg-color);
	color:var(--main-text-color);
	font-size:var(--main-font-size);
	text-align:center;

}



.TheInterClass
{
	
				background-color:var(--main-bg-color);
			position:absolute;
			top:10%;
			height:89%;
			left:1%;
			width:98%;
			border-style:var(--CurrentGuess-border-style);
			border-size:var(--CurrentGuess-border-size);
			border-radius:var(--CurrentGuess-border-radius);
			border-color:var(--CurrentGuess-border-color);
			z-index:51;
	
	background-color:var(--main-bg-color);
	color:var(--main-text-color);
	font-size:var(--main-font-size);
	text-align:center;
	overflow-y: scroll;
	 scrollbar-color: var(--input-bg-color) var(--main-bg-color);
}


.LastWordClass
{
	position:absolute;
	width:100%;
	left:0%;
	top:93%;
	text-align:center;
	font-size:20pt;
	z-index:26;
	pointer-Events:none;
}




.TheOcClass
{
	position:absolute;
	width:96%;
	left:2%;
	top:76%;
	background-color:black;
	color:white;
	text-align:center;
	font-size:23pt;
	z-index:9999;
	pointer-Events:none;
}

.StickieContClass
{
	position:absolute;
	top:50%;
	left:80%;
	width:80px;
	height:120px;
	z-index:50;
}



.StickieHeadClass
{
	position:absolute;
	top:0%;
	left:0%;
	width:80%;
	height:50px;
	background-color:rgba(155, 0, 155, 0.3);
	z-index:40;
}



.StickieFacerClass
{
	position:absolute;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	background-color:rgba(155, 0, 155, 0.7);
	border-style:solid;
	border-size:5px;
	border-color:rgba(25, 0, 25, 1);
	z-index:40;
	box-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}




.StickieEyesClass
{
	position:absolute;
	top:20%;
	left:00%;
	width:100%;
	height:100%;
}

.StickieLeftEyeClass
{
	position:absolute;
	top:0%;
	left:20%;
	width:10%;
	height:10%;
	background-color:rgba(0, 0, 0, 0.8);
	border-style:solid;
	border-size:1px;
	border-color:rgba(0, 0, 0, 0.5);
	z-index:40;
}


.StickieRightEyeClass
{
	position:absolute;
	top:0%;
	left:60%;
	width:10%;
	height:10%;
	background-color:rgba(0, 0, 0, 0.8);
	border-style:solid;
	border-size:1px;
	border-color:rgba(0, 0, 0, 0.5);
	z-index:40;
}



@keyframes Blinker
	{
		0%
			{
				top:0%;
				height:10%;				
			}
		50%
			{
				top:4.5%;
				height:0%;				
			}
		100%
			{
				top:0%;
				height:10%;				
			}
			
	}




.StickieMouthClosedClass
{
	position:absolute;
	top:70%;
	left:20%;
	width:50%;
	height:1%;
	background-color:rgba(0, 0, 0, 0.5);
	border-style:solid;
	border-size:1px;
	border-color:rgba(0, 0, 0, 1);
	z-index:40;
}
@keyframes MouthFlapAni
	{
		0%
			{
				top:70%;
				height:1%;				
			}
		100%
			{
				top:63%;
				height:12%;											
			}						
	}
	
	
.StickieNexckClass
{
	position:absolute;
	top:50px;
	left:28%;
	width:25%;
	height:10px;
	background-color:rgba(155, 0, 155, 0.7);
	z-index:38;
}	
	
	
	
.StickiebodyClass
{
	position:absolute;
	top:60px;
	left:10%;
	width:60%;
	height:40px;
	background-color:rgba(155, 0, 155, 0.7);
	border-style:solid;
	border-size:5px;
	border-bottom-style:none;
	border-color:rgba(155, 0, 155, 1);
	z-index:38;
}



.StickieLeftLegClass
{
	position:absolute;
	top:103px;
	left:15%;
	width:15%;
	height:40px;
	background-color:rgba(155, 0, 155, 0.7);
	border-style:solid;
	border-size:5px;
	border-top-style:none;
	border-color:rgba(155, 0, 155, 1);
	z-index:37;
}



.StickieRightLegClass
{
	position:absolute;
	top:103px;
	left:50%;
	width:15%;
	height:40px;
	background-color:rgba(155, 0, 155, 0.7);
	border-style:solid;
	border-size:5px;
	border-top-style:none;
	border-color:rgba(155, 0, 155, 1);
	z-index:37;
}




.StickieLeftArmClass
{
	position:absolute;
	top:60px;
	left:-12%;
	width:15%;
	height:40px;
	background-color:rgba(155, 0, 155, 0.7);
	border-style:solid;
	border-size:5px;
	border-top-style:none;
	border-color:rgba(155, 0, 155, 1);
	z-index:43;
	rotate: 20deg;
//	animation-name: WaveLeftArm;
//	animation-duration: 6s;
//	animation-iteration-count: infinite;
}

@keyframes RaiseLeftArm
	{
		0%
			{
				top:60px;
				left:-12%;
				rotate: 20deg;				
			}
		50%
			{
				top:25px;
				left:-8%;
				rotate: 170deg;				
			}
		100%
			{
				top:60px;
				left:-12%;
				rotate: 20deg;				
			}	
	}



.StickieRightArmClass
{
	position:absolute;
	top:60px;
	left:78%;
	width:15%;
	height:40px;
	background-color:rgba(155, 0, 155, 0.7);
	border-style:solid;
	border-size:5px;
	border-top-style:none;
	border-color:rgba(155, 0, 155, 1);
	z-index:43;
	rotate: -20deg;
//	animation-name: WaveRightArm;
//	animation-duration: 6s;
//	animation-iteration-count: infinite;
}

@keyframes RaiseRightArm
	{
		0%
			{
				top:60px;
				left:78%;
				rotate: -20deg;				
			}
		50%
			{
				top:25px;
				left:74%;
				rotate: -170deg;				
			}
		100%
			{
				top:60px;
				left:78%;
				rotate: -20deg;				
			}	
	}
	
	
	
	
	
	
	
@keyframes ShrugLeftArm
	{
		0%
			{
				top:60px;
				left:-12%;
				rotate: 20deg;				
			}
		50%
			{
				top:50px;
				left:-12%;
				rotate: 30deg;				
			}
		100%
			{
				top:60px;
				left:-12%;
				rotate: 20deg;				
			}	
	}	
	
	
@keyframes ShrugRightArm
	{
		0%
			{
				top:60px;
				left:78%;
				rotate: -20deg;				
			}
		50%
			{
				top:50px;
				left:78%;
				rotate: -30deg;				
			}
		100%
			{
				top:60px;
				left:78%;
				rotate: -20deg;				
			}	
	}	
	
	
	
@keyframes WaveLeftArm
	{
		0%
			{
				top:60px;
				left:-12%;
				rotate: 20deg;				
			}
		10%
			{
				top:25px;
				left:-8%;
				rotate: 170deg;				
			}
		20%
			{
				top:35px;
				left:-10%;
				rotate: 140deg;				
			}
		30%
			{
				top:25px;
				left:-8%;
				rotate: 170deg;				
			}
		40%
			{
				top:35px;
				left:-10%;
				rotate: 140deg;				
			}
		50%
			{
				top:25px;
				left:-8%;
				rotate: 170deg;				
			}
		100%
			{
				top:60px;
				left:-12%;
				rotate: 20deg;				
			}	
	}	
	
	
	
	
	
@keyframes WaveRightArm
	{
		0%
			{
				top:60px;
				left:78%;
				rotate: -20deg;				
			}
		10%
			{
				top:25px;
				left:74%;
				rotate: -170deg;				
			}
		20%
			{
				top:35px;
				left:72%;
				rotate: -140deg;				
			}
		30%
			{
				top:25px;
				left:74%;
				rotate: -170deg;				
			}
		40%
			{
				top:35px;
				left:72%;
				rotate: -140deg;				
			}
		50%
			{
				top:25px;
				left:74%;
				rotate: -170deg;				
			}
		100%
			{
				top:60px;
				left:78%;
				rotate: -20deg;				
			}	
	}
	

.StickieHeartClass
{
position:absolute;
top:-8%;
left:35%;
font-size:20pt;
opacity:40%;
	animation-name: HeartBeat;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
@keyframes HeartBeat
{
	0%
		{
			font-size:17pt;
			top:-8%;
			left:35%;
		}
	50%
		{
			font-size:23pt;
			top:-10%;
			left:30%;
		}
	100%
		{
			font-size:17pt;
			top:-8%;
			left:35%;
		}
	
}
	


.GiftFieldClass
	{
		position:absolute;
		top:50%;
		left:0%;
		width:100%;
		height:180px;
		z-index:50;
		opacity:50%;
	}
	
	
.RoseFieldClass
	{
		position:absolute;
		top:50%;
		left:70%;
		width:30%;
		height:50%;
		z-index:50;
		opacity:100%;
	}
	
.RosesClass
{
	position:absolute;
	top:0%;
	left:0%;
	font-size:22pt;
	z-index:50;
}



@keyframes StickieHeadTilt
{
	0%
		{
//			rotate: 0deg;
			transform:skewY(0deg);
		}
	20%
		{
//			rotate: 30deg;
			transform:skewY(25deg);
		}
	90%
		{
//			rotate: 30deg;
			transform:skewY(25deg);
		}
	100%
		{
//			rotate: 0deg;
			transform:skewY(0deg);
		}
}


.TheQclass
{
	text-align:center;
	border-top-style:solid;
	border-size:1px;
	cursor:var(--Clickable-cursor);
}
.TheQclass:hover
{
background-color:var(--clickable-hover-bg-color);
}




.TheAclass
{
	text-align:center;
	border-style:solid;
	border-size:1px;
	width:80%;
	left:20%;
	display:none;
}

			.InnerBoxSetClass::-webkit-scrollbar {
						  display: none;
						}
						
						
.TheCenterTitleBoxClass
{
	position:relative;
	left:-5%;
}	
.TheFirstTitlePartClass				
{
	position:relative;
	left:0px;
	display:inline-block;
	font-size:30pt;
	font-weight:bold;
	text-shadow: -3px -3px 0 rgba(0,0,0,1), 3px -3px 0 rgba(0,0,0,1), -3px 3px 0 rgba(0,0,0,1), 2px 2px 0 rgba(0,0,0,1);
	z-index:40;
}	
						
.TheSecondTitlePartClass
{
	position:relative;
	display:inline-block;
	top:-15px;
	left:50px;
	color:rgba(255,0,0,0.6);
	font-size:15pt;
	font-weight:bold;
	text-shadow: -1px -1px 0 rgba(0,0,0,1), 1px -1px 0 rgba(0,0,0,1), -1px 1px 0 rgba(0,0,0,1), 1px 1px 0 rgba(0,0,0,1);
	transform: skewY(-10deg);
	z-index:41;
}	

.TheThirdTitlePartClass
{
	position:relative;
	display:inline-block;
	font-size:12pt;
	font-weight:bold;
	text-shadow: -1px -1px 0 rgba(0,0,0,1), 1px -1px 0 rgba(0,0,0,1), -1px 1px 0 rgba(0,0,0,1), 1px 1px 0 rgba(0,0,0,1);
	//transform: skewX(-30deg);
	z-index:43;
}