:root
	{
		--background-color:rgba(21, 32, 43, 1);
		--Leader-Boards-background-color:rgba(0, 0, 0, 1);
		--Win-Box-background-color:rgba(0, 0, 0, 1);
		--font-color:rgba(255, 255, 255, 1);
		--bar-color-green:rgba(0, 186, 124, 1);
		--bar-color-yellow:rgba(239, 125, 49, 1);
		--bar-color-red:rgba(249, 24, 128, 1);
		--outter-bar-color:rgba(50, 59, 70, 1);
		--font-family:Nunito,sans-serif;
		--font-size:10pt;
		--font-size-for-word-guessed:1.25em;
		--font-size-for-who-guessed:0.8em;
		--font-size-for-rank-guessed:1em;
		--font-size-title:2em;
		--info-label-font-size:1em;
		--info-label-item-font-size:1em;
		--mouseover-menu-background-color:rgba(30, 39, 50, 1);
		--modal-underlay-background-color:rgba(0, 0, 0, 0.5);
		--text-input-background-color:rgba(39, 51, 64, 1);
		--text-input-placeholder-text-color:rgba(150, 150, 150, 0.5);
		--button-background-color:rgba(54, 98, 231, 1);
		--mouse-over-button-background-color:rgba(84, 118, 251, 1);
		--mouse-over-clickable-background-color:rgba(50, 59, 70, 1);
		--input-background-color:rgba(39, 51, 64, 1);
		--placeholder-font-color:rgba(150, 150, 150, 0.5);
		--input-border-style:1px solid var(--font-color);
		--input-border-radius:5px;
		--guess-border-style:3px solid rgba(255, 255, 255, 1);
		--current-guess-border-style:3px solid var(--font-color);
		--modal-border:1px solid var(--font-color);
		--modal-background-color:rgba(39, 51, 64, 1);
		--modal-border-style:1px solid var(--font-color);
		--modal-close-button-border:1px solid var(--font-color);
		--modal-shadow-color:rgba(0, 0, 0, 1);
		--modal-input-background-color:var(--background-color);
		--modal-placeholder-font-color:rgba(150, 150, 150, 0.5);
		--modal-input-border-style:1px groove rgba(9, 21, 34, 1);
		--modal-input-border-radius:5px;
		--modal-text-color:var(--font-color);
		--modal-setting-input-focus-outline-style:groove;
		--modal-setting-input-focus-outline-color:rgba(69, 81, 94, 1);
		--modal-setting-input-focus-background-color:var(--modal-underlay-background-color);
		--modal-button-background-color:rgba(39, 51, 64, 1);
		--modal-button-text-color:var(--font-color);
		--modal-button-hover-background-color:rgba(69, 71, 84, 1);	
		--tab-background-color:rgba(29, 31, 44, 1);
		--title-margin:1em;
		--max-game-width:480px;
		--thin-weight:400;
		--normal-weight:600;
		--bold-weight:800;
		--bot-color:rgba(232, 89, 200, 1);
		--bot-color-Head:var(--bot-color);
		--bot-color-Eye-Brow:rgba(0, 0, 0, 0.9);
		--bot-color-Eye:rgba(0, 0, 0, 0.9);
		--bot-color-Mouth:rgba(100, 0, 0, 1);
		--bot-color-Neck:var(--bot-color);
		--bot-color-Body:var(--bot-color);
		--bot-color-Tie:var(--bot-color);
		--bot-color-Book:var(--bot-color);
		--bot-color-Arm:var(--bot-color);
		--bot-color-Leg:var(--bot-color);
		--bot-border:1px solid rgba(0, 0, 0, 1);
		--bot-border-Head:var(--bot-border);
		--bot-border-Face:var(--bot-border);
		--bot-border-Eye-Brow:1px solid rgba(0, 0, 0, 1);
		--bot-border-Eye:1px solid rgba(0, 0, 0, 1);
		--bot-border-Mouth:var(--bot-border);
		--bot-border-Neck:var(--bot-border);
		--bot-border-Body:var(--bot-border);
		--bot-border-Tie:var(--bot-border);
		--bot-border-Book:var(--bot-border);
		--bot-border-Arm:var(--bot-border);
		--bot-border-Leg:var(--bot-border);
		--bot-roundness:3pt;
		--bot-roundness-Head:var(--bot-roundness);
		--bot-roundness-Face:var(--bot-roundness);
		--bot-roundness-Eye-Brow:var(--bot-roundness);
		--bot-roundness-Eye:var(--bot-roundness);
		--bot-roundness-Mouth:var(--bot-roundness);
		--bot-roundness-Neck:var(--bot-roundness);
		--bot-roundness-Body:var(--bot-roundness);
		--bot-roundness-Tie:var(--bot-roundness);
		--bot-roundness-Book:var(--bot-roundness);
		--bot-roundness-Arm:var(--bot-roundness);
		--bot-roundness-Leg:var(--bot-roundness);
		--Bot-Angle-Width:100%;
		--Bot-Angle-Left:0%;
		--game-max-width:600px;
		--game-min-width:200px;
		--unchecked-background-color:rgba(19, 31, 44, 1);
		--unchecked-text-color:rgba(200, 200, 200, 1);
		--unchecked-border:1.5px solid rgba(0, 0, 0, 1);
		--uncheckmark:" ";
		--checked-background-color:rgba(59, 71, 84, 1);
		--checked-text-color:rgba(0, 0, 0, 1);
		--checked-border:1px solid rgba(255, 255, 255, 1);
		--checkmark:"\2713";		
		--input-option-background-color:var(--background-color);
		--input-option-border:solid 1px rgba(0, 0, 0, 0);
		--input-option-font-color:var(--font-color);
		--input-option-hover-background-color:var(--mouseover-menu-background-color);
		--input-option-hover-font-color:var(--font-color);
		--input-option-hover-border:solid 1px rgba(0, 0, 155, 0.5);
		--input-option-selected-background-color:var(--modal-button-background-color);
		--input-option-selected-font-color:var(--font-color);
		--input-option-selected-border:solid 1px rgba(0, 0, 50, 1);
		--scrollbar-width:thin;	
		--scrollbar-track:rgba(19, 31, 44, 1);
		--scrollbar-thumb:rgba(39, 51, 64, 1);
		--scrollbar-thumb-border:3px solid rgba(0, 0, 0, 1);		
		--setting-UI-scrollbar: none;
		--selection-font-color:rgba(255, 255, 255, 10);
		--selection-background-color:rgba(0, 0, 0, 1);
		--range-progress-bar:rgba(42, 64, 86, 1);
		--range-track:var(--scrollbar-track);
		--range-thumb:rgba(62, 84, 106, 1);
		--Default-Caption-Top:70vh;
		--progress-bar-filled-color:rgba(22, 44, 66, 1);
		--progress-bar-empty-color:rgba(0, 0, 0, 1);
	}
	.info-bar
	{
		text-align:center;
	}
	.Captions-Class
	{
		display:none;
			margin:auto;
			max-width:var(--game-max-width);
			min-width:var(--game-min-width);
			padding:15px 15px 100px;
			z-index:1000;
		background-color: #000;
		border: 1px solid #ccc;
		border-radius: 10px;
		padding: 10px;
		position: absolute;
		top:var(--Default-Caption-Top);
		width: 80%;
		left:10%;
		opacity: 0.8;
		pointer-events:none;
		z-index:9990;
	}
	.Captions-Class::after {
		content: "";
		position: absolute;
		right:0.25%;
		bottom:-15%;
		width:15pt;
		height:15pt;
		border: 1px solid #ccc;
		border-top-style:none;
		border-left-style:none;
		background-color: #000;
		transform:rotate(15deg);

	}
	.SpeechBubbleText
	{
		display:inline-block;
		width:90%;
		color:rgba(250, 250, 250, 1);
		text-align:center;
	}
	
	html
	{
		scrollbar-gutter: stable;
	}
	body
		{
			background-color:var(--background-color);
			color:var(--font-color);
			font-size:var(--font-size);
			font-family:var(--font-family);
			font-weight:var(--normal-weight);
		}
		

		
	*
		{
			box-sizing:border-box;
			font-family:inherit;
			font-weight:inherit;
			margin:0;
			padding:0;
		}
	a
		{
			color:var(--font-color);
			font-weight:var(--bold-weight);
			text-decoration:none;
		}		
	html
		{
			overflow-y:scroll;
		}		
	b
		{
			font-weight:var(--bold-weight);
		}
	main
		{
			position:relative;
			min-height:calc(100svh);
			min-width:500px;
			z-index:1000;
		}
		



input[type="checkbox"]::before
	{
		position: relative;
		display:inline-block;
		width: 100%;
		height: 100%;
		text-align: center;
		white-space: pre;
		content: var(--uncheckmark);
		background: var(--unchecked-background-color);
		border:var(--unchecked-border);
	}
input[type="checkbox"]:checked::before
	{
		content: var(--checkmark);/*\2713*/
		background: var(--checked-background-color);
		color: var(--checked-text-color);
		border:var(--checked-border);
	}		
		
		


		
		
		
	.outter-game-wrap
		{
			display:flex;
			justify-content: center;
			 position: relative;
			z-index:1000;
		}	
	.game-wrapper
		{
			width:100%;
			height:100vh;
			/*display:none;*/
			overflow:hidden;
			z-index:1000;
		}

.main-game-wrap {
  position: relative; /* This creates a stacking context for the game content */
  z-index: 2; /* Ensures game content is on top */
  width: 100%;
  max-width: var(--game-max-width);
  min-width: var(--game-min-width);
  padding: 15px 15px 100px;
  height: 100%;
}

	.title-bar
		{
			align-items:center;
			display:flex;
			justify-content:space-between;
			z-index:1000;
		}
	.title
		{
			display:flex;
			justify-content: center; 
			flex-grow:1;
			text-align:center;
			z-index:1000;
		}
	.title h1
		{
			font-size:var(--font-size-title);
			/*font-variant: small-caps;*/
			text-transform:uppercase;
			font-weight:var(--bold-weight);
			display:block;
			margin-block-start: 0.67em;
			margin-block-end: 0.67em;
			margin-inline-end: 0px;
			font-weight: bold;
			unicode-bidi: isolate;
			z-index:1000;
		}
	.main-menu-container
		{
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			position: relative;
			z-index:2003;
		}
	.menu-button
		{
			align-items:center;
			background-color:initial;
			border:0;
			border-radius:12px;
			color:var(--font-color);
			cursor:pointer;
			display:flex;
			height:30px;
			justify-content:center;
			width:30px;
			z-index:1000;
		}		
	.menu-button:hover
		{
			background-color:var(--mouse-over-clickable-background-color);
		}		
	.file-menu-container
		{
			margin-top:10px;
			margin-bottom:10px;
			margin-left:10px;
			margin-right:10px;
			background-color:var(--background-color);
			border:var(--modal-border);
			box-shadow:0 1px 1px var(--modal-shadow-color),0 2px 2px var(--modal-shadow-color),0 4px 4px var(--modal-shadow-color),0 8px 8px var(--modal-shadow-color),0 16px 16px var(--modal-shadow-color);
			position: absolute;
			right: 0;
			top: 100%;
			display: block;
			z-index:1000;
		}
	.icons
	{
		margin-right:5px;
	}
	.menu-item
		{
			align-items:center;
			background-color:var(--background-color);
			border:0;
			border-radius:5px;
			color:var(--font-color);
			cursor:pointer;
			display:flex;
			font-size:16px;
			padding:10px 15px;
			text-align:left;
			white-space:nowrap;
			width:100%;
			margin-right:10px;
			z-index:1000;
		}
	.menu-item:hover
		{
			background-color:var(--mouse-over-clickable-background-color);		
		}		
	.info-item-label
		{
			font-size:var(--info-label-font-size);
			font-weight:var(--normal-weight);
			text-transform:uppercase;
			z-index:1000;
		}				
	.info-item
		{
			font-size:var(--info-label-item-font-size);
			font-weight:var(--normal-weight);
			text-transform:uppercase;
			z-index:1000;
		}
	.word-entry-form-container
		{
			z-index:1000;
		}	
	.word-input
		{
			background-color:var(--input-background-color);
			border:var(--input-border-style);
			border-radius:var(--input-border-radius);
			color:var(--textcolor);
			font-family:inherit;
			font-size:1.25em;
			margin:10px 0;
			padding:10px 15px;
			width:100%;
			z-index:1000;
		}		
	.word-input::placeholder
		{
			color:var(--placeholder-font-color);
			z-index:1000;
		}		
	.message-to-player	
		{
			display:flex;
			flex-direction:column;
			justify-content:center;
			margin-bottom:15px;
			margin-top:5px;
			min-height:50px;
			z-index:1000;
		}
	.message-to-player p
		{
			margin-bottom:10px;
		}		
	.message-to-player p:last-of-type
		{
			margin-bottom:0;
		}	
	.guess-hx		
		{
			padding-bottom:20px;
			z-index:1000;
			height: 55vh;
			overflow:scroll;
			width:100%;
			scrollbar-width:none;
		}
		
	.guess-hx::-webkit-scrollbar {
		display: none; /* Hides the scrollbar visually */
	}			
		
		
	.row-wrapper
		{
			border:var(--guess-border-style);
			border-radius:8px;
			margin-top:5pt;
			margin-bottom:5pt;
			overflow:hidden;
			position:relative;
			text-transform:capitalize;
			font-variant: small-caps;
			cursor:pointer;
			font-size:var(--font-size-for-word-guessed);
			z-index:1000;
		}		
	.current-guess
		{
			border:var(--current-guess-border-style);
			border-style:groove;
			font-weight:900;
			font-weight:var(--bold-weight);
			z-index:1000;
		}		
	.outer-bar
		{
			background-color:var(--outter-bar-color);
			height:1000%;
			top:-500%;
			position:absolute;
			width:100%;
			font-size:var(--font-size-for-word-guessed);
			z-index:1000;
		}		
	.inner-bar
		{
			background-color:var(--bar-color-red);
			border-radius:5px;
			height:200%;
			min-width:1%;
			display:inline-block;
			font-size:var(--font-size-for-word-guessed);
			z-index:1000;
		}		
	.row-div
		{
			border-radius:5px;
			font-weight:inherit;
			height:100%;
			justify-content:space-between;
			padding-left:10px;
			padding-right:10px;
			padding-bottom:10px;
			padding-top:10px;
			position:absolute;
			left:0%;
			top:0%;
			width:100%;
			max-width:100%;
			align-items:center;
			display:flex;
			font-size:var(--font-size-for-word-guessed);
			z-index:1000;			
		}		
	.who-guessed-div
		{
			font-weight:inherit;
			justify-content:space-between;
			align-items:center;
			display:flex;
			font-size:var(--font-size-for-who-guessed);
			max-width:40%;
			overflow:hidden;
			z-index:1000;			
		}		
	.who-guessed-div div
		{
			padding-left:2px;
			padding-right:2px;
			font-size:var(--font-size-for-who-guessed);
			z-index:1000;
		}
	.word-div
		{
			font-size:var(--font-size-for-word-guessed);
			max-width:60%;
			min-width:40%;
			overflow:hidden;
			z-index:1000;
		}
	.rank-div
		{
			min-width:10%;
			font-size:var(--font-size-for-rank-guessed);
			z-index:1000;
		}
	.modal-underlay
		{
			display:none;
			background-color:var(--modal-underlay-background-color);
			height:100svh;
			justify-content:center;
			left:0;
			position:fixed;
			top:0;
			width:100vw;
			z-index:;
			align-items:center;
			display:flex;
			z-index:2000;
		}		
	.modal-close-button
		{
			--size:30px;
			align-items:center;
			background-color:var(--input-background-color);
			border:var(--modal-border-style);
			border-radius:calc(var(--size)/2);
			cursor:pointer;
			display:flex;
			height:var(--size);
			justify-content:center;
			position:absolute;
			right:calc(var(--size)/3*-1);
			top:calc(var(--size)/3*-1);
			width:var(--size);
			z-index:2005;
		}
	.modal-wrap
		{
			position:fixed;
			display:flex;
			flex-direction:column;
			max-width:460px;
			max-height:calc(100svh - 140px);
			position:relative;
			width:calc(100vw - 40px);
			z-index:2003;
		}
	.modal
		{
			scrollbar-gutter:stable both-edges;	
			background-color:var(--modal-background-color);
			border:var(--modal-border);
			border-radius:10px;
			box-shadow:0 1px 1px var(--modal-shadow-color),0 2px 2px var(--modal-shadow-color),0 4px 4px var(--modal-shadow-color),0 8px 8px var(--modal-shadow-color),0 16px 16px var(--modal-shadow-color);
			height:100%;
			overflow-y:hidden;
			padding:20px;
			z-index:2004;
		}		
	.footer
		{
			z-index:1000;
			position:absolute;
			top:96vh;
			width:30%;
			height:2%;
			text-align:center;
			bottom:1%;
			opacity:0.1;
		}	
	.hidden
		{
			display: none !important;
		}
	#FileMenContainer,
	#Modal1,
	#Modal2,
	#OpenedMenuUnderlay {
		display: none;
	}		
	
	
	.Tab-Container	
		{
			padding-right:5pt;
			padding-left:5pt;
			display:flex;
			justify-content:space-between;
			background-color:var(--tab-background-color);
			
		}
	.Tab-Container div
		{
			position:relative;
			top:2pt;
			margin:2pt;
			border:var(--modal-border);
			border-bottom:none;
			padding-top:3pt;
			padding-left:3pt;
			padding-right:3pt;
			text-align:center;
			cursor:pointer;
		}
	.Tab-Container div:hover
		{
			background-color:var(--mouse-over-clickable-background-color);
		}		
	.Tab-Container-Current
		{
			border:var(--modal-border);
			background-color:var(--modal-background-color);
			border-top-width:6px !important;
			padding-top:1pt !important;
		}
	.Setting-Modal-Box
		{
			display:flex;
			flex-direction:column;
			overflow:scroll;
			height:95%;
			overflow-x: hidden;
		}
	.Setting-Individual-Box
		{
			display:flex;
			flex-direction:row;
			padding:10pt;			
		}
		
	

		
	.Setting-Label-Box
		{
			display:inline-block;
			width:40%;
			padding-right:2pt;
			padding-left:2pt;
			padding-top:10pt;
		}
		
	.Setting-UI-Container
	{
		display:flex;
		flex-direction:column;
		width:100%;
	}		
		
	.Setting-Option-Box
		{
			display:inline-block;
			width:100%;
			padding-left:2pt;
		}
	
	
	.modal-setting-input
		{
			display:block;
			width:100%;
			text-align:center;
			background-color:var(--modal-input-background-color);
			border:var(--modal-input-border-style);
			border-radius:var(--modal-input-border-radius);
			color:var(--modal-text-color);
			font-family:inherit;
			font-size:1em;
			margin:10pt;
			
			-ms-overflow-style: var(--setting-UI-scrollbar);  /* IE and Edge */
			scrollbar-width: var(--setting-UI-scrollbar);  /* Firefox */
		}
		.modal-setting-input:focus
		{
			outline-style:var(--modal-setting-input-focus-outline-style);
			outline-color:var(--modal-setting-input-focus-outline-color);
			background-color:var(--modal-setting-input-focus-background-color)
		}
		

input[type="range"] {
	background-color: green; 
	outline-style:var(--modal-setting-input-focus-outline-style);
	outline-color:var(--modal-setting-input-focus-outline-color);
			
}


		
/* Hide scrollbar for Chrome, Safari and Opera */		
.modal-setting-input::-webkit-scrollbar {
  display: var(--setting-UI-scrollbar);
}


		
		
		
		.modal-setting-button
		{
			display:block;
			width:100%;
			font-family:inherit;
			font-size:1em;
			margin:10pt;
			display:block;
			width:100%;
			text-align:center;
			background-color:var(--modal-button-background-color);
			color:var(--modal-button-text-color);
			font-family:inherit;
			font-size:1em;
			cursor:pointer;
		}
		
		.modal-setting-button:hover
		{
			background-color:var(--modal-button-hover-background-color);
		}
		
		
		
		
		
		
		
		.modal-setting-check
		{
			display:block;
			width:100%;
			text-align:left;
			background-color:var(--input-background-color);
			border-style:none;
			border-radius:var(--input-border-radius);
			color:var(--textcolor);
			font-family:inherit;
			font-size:1em;
		}		
		
		
		

		
		
	
		
		
		

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 10px;
  }

  *::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }

  *::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border: --scrollbar-thumb-border;
  }		
				
		

		
.modal-setting-input option
	{
		background-color:var(--input-option-background-color);
		color:var(--input-option-font-color);
		border:var(--input-option-border);
	}		
.modal-setting-input option:hover
	{
		background-color:var(--input-option-hover-background-color);
		color:var(--input-option-hover-font-color);
		line-height:1;
		border:var(--input-option-hover-border);
		border-radius:5px;
		-webkit-appearance:none;
		outline: none;
	}
.modal-setting-input option:checked
	{
		background-color:var(--input-option-selected-background-color);
		color:var(--input-option-selected-font-color);
		line-height:1;
		border:var(--input-option-selected-background-color);
		border-radius:5px;
		-webkit-appearance:none;
		outline: none;
	}		
		
		
::-moz-selection { /* Code for Firefox */
  color: var(--selection-font-color);
  background: var(--selection-background-color);
}

::selection {
  color: var(--selection-font-color);
  background: var(--selection-background-color);
}		
		
		
		
		
		
		
		
		
		
		
		
		
		.Setting-Number-Label
		{
			display:inline-block;
			width:100%;
			text-align:center;
			text-transform: lowercase;
		}
		.Setting-Number-Label input
		{
			display:inline-block;
			width:25%;
			text-align:center;
			background-color:var(--modal-input-background-color);
			border:var(--modal-input-border-style);
			border-radius:var(--modal-input-border-radius);
			color:var(--modal-text-color);
			font-family:inherit;
			margin:10pt;
			padding-left:10pt;
			padding-right:0pt;
		}
		
		
		
		

		
		

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 100%;
      -webkit-appearance: none;
      background-color: var(--range-track);
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: var(--range-track);
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: var(--range-thumb);
      box-shadow: -180px 0 0 180px var(--range-progress-bar);
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: var(--range-progress-bar); 
}
input[type="range"]::-moz-range-track {  
  background-color: var(--range-track);
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: var(--range-progress-bar); 
}
input[type="range"]::-ms-fill-upper {  
  background-color: var(--range-track);
}
		
		
		

	.checkbox-option-wrapper
		{
			margin-left:30%;
		}

	.checkbox-option-wrapper label
		{
			margin-left: 10pt;
		}





input[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
}


.modal-title
{
	font-size:var(--font-size-for-word-guessed);
	border-bottom:var(--input-border-style);
	width:98%;
}

.ListBox
{
	width:100%;
	height:100%;
	overflow-y:scroll;
	overflow-x:hidden;
}

.ListNumber
{
	font-size:var(--font-size-for-word-guessed);
	background-color:var(--button-background-color);
	color:var(--font-color);
	width:98%;
	padding:3pt;
	margin:3pt;
	cursor:pointer;
	border-style:none;
	border-radius:var(--input-border-radius);
}

.ListNumber:hover
{
	background-color:var(--mouse-over-button-background-color);
}
.ListNumber:active {
}



.Win-Box
{
	--mrg:30pt;
	margin-left:var(--mrg);
	margin-right:var(--mrg);
	padding-left:var(--mrg);
	padding-right:var(--mrg);
	display:inline-block;
	height:100%;
	margin-bottom:12pt;
	background-color:var(--Win-Box-background-color);
	border:var(--current-guess-border-style);
	border-radius:10px;
	text-align:center;
}
.WinBox-Title
{
	width:100%;
	text-align:center;
	margin:3pt;
	font-size:var(--font-size-for-word-guessed);
}
.WinBox-Info
{
	margin:15pt;
	text-align:center;
	font-size:var(--font-size);
}

.WinBox-Color-Cont
{
	--mrg:20pt;
	margin-left:var(--mrg);
	margin-right:var(--mrg);
	height:30%;
}

.WinBox-ColorItem-Cont
{
	--mrg:20pt;
	margin-left:var(--mrg);
	margin-right:var(--mrg);
	margin-bottom:0pt;
}

.Tiny-Color-Box-Container
{
	display:inline-block;
}


.Tiny-Color-Boxes
{
	display:inline-block;
	width:20px;
	height:20px;
	margin-right:5pt;
}


.Tiny-Color-Green
{
	background-color:var(--bar-color-green)
}
.Tiny-Color-Yellow
{
	background-color:var(--bar-color-yellow)
}
.Tiny-Color-Red
{
	background-color:var(--bar-color-red)
}

.Color-Label
{
margin-left:5pt;
}



.End-Button-Cont
{
		--mrg:20pt;
		margin-right:var(--mrg);
		width:100%;
		height:40%;
}


.End-Buttons
{
	display:inline-block;
	width:50%;
	font-size:var(--font-size-for-word-guessed);
	background-color:var(--button-background-color);
	color:var(--font-color);
	padding:3pt;
	margin:3pt;
	cursor:pointer;
	border-style:none;
	border-radius:var(--input-border-radius);
}


.End-Buttons:hover
{
	background-color:var(--mouse-over-button-background-color);
}



.Top-Word-Cont
{

	width:100%;
	height:80%;
	overflow-y:scroll !important;
		}
		
	
	
.Define-Box
{
	margin-top:15pt;
	width:100%;
	height:85%;
	overflow-y:scroll;
	overflow-x:hidden;
	
}
	
	
.Give-Up-Box
{
	font-size:var(--font-size-for-word-guessed);
	text-align:center;
	margin:10pt;
}
	
	
	
.Give-Up-Button
{
	background-color:var(--button-background-color);
	font-size:var(--font-size-for-word-guessed);
	text-align:center;
	margin-top:10pt;
	margin-left:40pt;
	display:inline-block;
	width:30%;
	height:10%;
	border-radius:10px;
	cursor:pointer;
}	
	
	
	.Give-Up-Button:hover
{
	background-color:var(--mouse-over-button-background-color);
}

.Give-Up-Button:active {
	border-style:double;
}




.BgGameWrapClass
{
	position:absolute;
	top:0;
	left:0;
	width:40%;
	height:100%;
}


.QS-Main-Info-Box
{
	display:flex;
	flex-direction:column;
	width:100%;
	height:100%;
	border:var(--input-border-style);
	border-radius:var(--input-border-radius);
	background-color:var(--modal-underlay-background-color)
}

.QS-Progess-Box
{
	position:relative;
	margin-top:10pt;
	margin-left:10pt;
	margin-right:10pt;
	width:90%;
	height:25%;
	border:var(--input-border-style);
	border-radius:var(--input-border-radius);
}
.QS-Progess-Bar
{
	margin-left:1pt;
	margin-right:1pt;
	background-color: var(--progress-bar-empty-color);
	width:99%;
	height:100%;
	border-style:none;
	border-radius:var(--input-border-radius);
}
.QS-Progess-Bar::-webkit-progress-value {
  background-color: var(--progress-bar-filled-color);;
}
.QS-Progess-Bar::-moz-progress-bar {
  background-color: var(--progress-bar-filled-color);;
}

.QS-Progess-Bar::-ms-fill {
  background-color: var(--progress-bar-filled-color);;
}
.QS-Progess-Bar::-webkit-progress-bar {
  background-color: var(--progress-bar-empty-color);;
}
.QS-Status-text
{
		margin:1pt;
		position:absolute;
		width:100%;
		height:100%;
		text-align:center;
		top: 0;
		left: 0;
		font-size:var(--font-size-for-word-guessed);
		padding-top:24pt;
		padding-left:24pt;
}
.QS-Thread-Status
{
  margin-top:10pt;
  margin-left:10pt;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  width:90%;
  height:20%;
}


.QS-Thread-Updates
{
	border:var(--input-border-style);
	border-radius:var(--input-border-radius);
	text-align:center;
	padding:3pt;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.QS-Time-Keeper
{
  display:flex;
  flex-direction:column;
  border:var(--input-border-style);
  border-radius:var(--input-border-radius);	
  margin-top:10pt;
  margin-left:10pt;
  width:90%;
  height:30%;
}


.QS-Time-Word-Keeper
{
	width:100%;
	text-align:center;
	margin:4pt;
	margin-top:6pt;
	font-size:var(--font-size-for-word-guessed);
	padding-top:4pt;
	padding-left:24pt;
	
}


.QS-Thread-Updates-Cont
{
		position:relative;
}



.Wait-Msg-Box
{
	position:relative;
	width:100%;
	height:100%;
}
.Type-Writer-Span
	{
		animation:TypeAni 1.5s infinite;
		display:inline-block;
		position:relative;
	}
@keyframes TypeAni
	{
		0%,10%,to
		{
			transform:translateY(0);
		}
		19%
		{
			transform:translateY(-.25em);
		}
	}


.Leader-Boards-Class
	{
		display:none;
		flex-direction:column;
		position:absolute;
		left:1%;
		bottom:10%;
		width:48%;
		height:15%;
		border:var(--modal-border);
		border-radius:10px;
		background-color:var(--Leader-Boards-background-color);
		z-index:1001;
		opacity:0.75;
		overflow-y:scroll;
		scrollbar-width:none;
		}
		
	.Leader-Boards-Class::-webkit-scrollbar {
		display: none; /* Hides the scrollbar visually */
	}			

	
.Leader-Boards-Class div
{
	display:flex;
	position:relative;
	width:100%;
	border-bottom:1px solid var(--font-color);
	justify-content:center;
	font-size:var(--font-size);
}	



	
.Runner-Boards-Class
	{
		position:absolute;
		left:1%;
		
	}
.Win-Boards-Class
	{
		position:absolute;
		left:50%;	
	}


.LikeBegClass
{
	display:none;
	position: absolute;
	top:7%;
	left:0%;
	margin-left:20pt;
	margin-right:20pt;
	justify-content:center;
	font-size:var(--font-size-title);
	text-align:center;
	padding:5pt;
	border:var(--modal-border);
	border-radius:10px;
	background-color:var(--Leader-Boards-background-color);
	z-index:2001;
	opacity:0.75;
	
}



.PlayPauseClass
{
	display:none;
	position:absolute;
	left:0%;
	bottom:12%;
	z-index:3000;
}
.PlayPauseClass button
{
	width:35pt;
	height:35pt;
	overflow:hidden;
	background-color:rgba(0,0,0,0);
	border-style:none;
	cursor:pointer;
}

.FAQbox
{
	margin-top:5pt;
	padding:15pt;
	position:relative;
	width:100%;
	border:var(--modal-border);
	border-radius:10px;
}

.QUESTIONcont
{
	position:relative;
	width:100%;
	text-align:center;
	cursor:pointer;
}

.AnswerBox
{
	display:none;
	margin-top:10pt;
	padding:5pt;
	border:var(--modal-border);
	border-bottom:none;
	border-radius:10px;
	position:relative;
	width:100%;
	text-align:center;
}