:root {
  --main_background:#999;
  --main_color:#333;
  --green:#859900;
  --orange:#cb4b16;
  --red:#dc322f;
  --purple:#6c71c4;
  --gray:#586e75;
  --lightteal:#93a1a1;
  --lightgray:#777;
  --large:4vw;
  --normal:2vw;
  --small:1.5vw;
  --smaller:1.2vw;
  --tiny:1vw;
  --tinier:0.5vw;
  --system:1.3vw;
  --info:1.3vw;
  --tile:2.5vw;
  --controls:5vw;
}

body{
	background-color:var(--main_background);
	font-size:var(--small);
	color:var(--main_color);
	font-family: "JetBrains Mono", monospace;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	margin:0;
	padding:0;
	overflow: auto;
	touch-action: manipulation;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none;  /* Internet Explorer 10+ */

	touch-action: auto;
	-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Chrome/Safari/Opera */
		 -khtml-user-select: none; /* Konqueror */
			 -moz-user-select: none; /* Firefox */
				-ms-user-select: none; /* Internet Explorer/Edge */
						user-select: none; /* Non-prefixed version, currently
																	not supported by any browser */
}

body::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

button.system{
	background-color:var(--main_background);
	font-size:var(--system);
	color:var(--main_color);
	border:2px solid var(--main_color);
	margin:0;
	padding:2px 5px;
	cursor: pointer;
}
button.system:disabled{
	background-color:var(--main_color);
	font-size:var(--system);
	color:var(--main_background);
	border:2px solid var(--main_background);
	margin:0;
	padding:2px 5px;
	cursor: default;
}
button.system_small{
	background-color:var(--main_background);
	font-size:var(--tiny);
	color:LightSlateGray;
	border:2px solid LightSlateGray;
	margin:0;
	padding:2px 5px;
	cursor: pointer;
}






button.controls{
	width: var(--controls);
	height: var(--controls);
	background-color:#777;
	font-size:var(--normal);
	color:var(--main_color);
	border:0.2vw solid #555;
	margin:0vw;
	padding:0vw;
}






button.stone{
	width: var(--tile);
	height: var(--tile);
	background-color:#777;
	font-size:var(--tinier);
	color:var(--main_color);
	border:0.2vw solid #555;
	margin:0vw;
	padding:0vw;
}
button.brick{
	width: var(--tile);
	height: var(--tile);
	background-color: #444;
	font-size:var(--tinier);
	color:var(--main_color);
	border:0.2vw solid #555;
	margin:0vw;
	padding:0vw;
	border-radius: 0;
}
button.mine{
	width: var(--tile);
	height: var(--tile);
	background-color:#333;
	font-size:var(--tinier);
	color:var(--main_color);
	border:0.2vw solid #555;
	margin:0vw;
	padding:0vw;
}
button.hidden_mine{
	width: var(--tile);
	height: var(--tile);
	background-color:#555;
	font-size:var(--tinier);
	color:var(--main_color);
	border:0.2vw solid #555;
	margin:0vw;
	padding:0vw;
}
button.fill{
	width: var(--tile);
	height: var(--tile);
	background-color:#0f6186;
	font-size:var(--tinier);
	color:var(--main_color);
	border:0.2vw solid #555;
	margin:0vw;
	padding:0vw;
}



button.player{
	width: var(--tile);
	height: var(--tile);
	background-color:orange;
	font-size:var(--tiny);
	color:var(--main_color);
	border:0.2vw solid #555;
	margin:0vw;
	padding:0vw;
}
button.empty{
	width: var(--tile);
	height: var(--tile);
	background-color:#999;
	font-size:var(--tiny);
	color: #777;
	border:0.2vw solid #999;
	margin:0vw;
	padding:0vw;
}


button{border-radius: 0.2vw;}
button:disabled{border-radius: 0.2vw;}

button:active{transform: scale(98%);}



.large{font-size:var(--large);}
.normal{font-size:var(--normal);}
.small{font-size:var(--small);}
.smaller{font-size:var(--smaller);}
.tiny{font-size:var(--tiny);}
.tinier{font-size:var(--tinier);}

.main_background{color:var(--main_background);}
.main_color{color:var(--main_color);}
.red{color:var(--red);}
.pink{color:var(--pink);}
.orange{color:var(--orange);}
.purple{color:var(--purple);}
.green{color:var(--green);}
.teal{color:var(--teal);}
.lightteal{color:var(--lightteal);}
.gray{color:var(--gray);}
.blue{color:var(--blue);}
.yellow{color:var(--yellow);}

.large_purple{font-size:var(--large);color:var(--purple);}
.large_orange{font-size:var(--large);color:var(--orange);}
.large_lightteal{font-size:var(--large);color:var(--lightteal);}
.large_green{font-size:var(--large);color:var(--green);}
.small_purple{font-size:var(--small);color:var(--purple);cursor:pointer;}
.small_red{font-size:var(--small);color:var(--red);cursor:pointer;}
.small_green{font-size:var(--small);color:var(--green);cursor:pointer;}
.small_lightteal{font-size:var(--small);color:var(--lightteal);cursor:pointer;}
.tiny_gray{font-size:var(--tiny);color:var(--gray);}

a.lv_discord:link { color:var(--main_color); text-decoration:none;padding:0; margin: 0;}
a.lv_discord:visited { color:var(--main_color); text-decoration:none;padding:0; margin:0;}
a.lv_discord:hover { color:var(--main_color); text-decoration:none;padding:0; margin:0;}

a.lv_donate:link { color:SteelBlue; text-decoration:none;padding:0; margin: 0;}
a.lv_donate:visited { color:SteelBlue; text-decoration:none;padding:0; margin:0;}
a.lv_donate:hover { color:dodgerblue; text-decoration:none;padding:0; margin:0;}

a.lv_site:link { color:var(--orange); text-decoration:none;padding:0; margin: 0;}
a.lv_site:visited { color:var(--orange); text-decoration:none;padding:0; margin:0;}
a.lv_site:hover { color:var(--orange); text-decoration:none;padding:0; margin:0;}






#counter{
	font-size: var(--large);
}
#rate{
	font-size: var(--tiny);
}


div.maze{
	display: block;
	text-align: center;
	margin: 2vw auto 0 auto;
	border: 0vw solid #555;
}
div.stats{
	position: absolute;
	display: block;
	text-align: center;
	margin: 0 auto;
	border: 0vw solid #555;
}
div.controls{
	position: absolute;
	display: block;
	text-align: center;
	margin: 0 auto;
	border: 0vw solid #555;
}



table.maze{
	font-size: var(--tinier);
	margin: auto;
	padding: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

table.maze td{
	border: 0vw solid #000;
	margin: 0;
	padding: 0;
}

























div.footer {
  	box-sizing: border-box;
	font-size: var(--info);
	position: fixed;
	bottom: 0%;
	margin: 0 auto 0 auto;
  	padding: 5px 0px;
	width:100%;
  	color: var(--gray);
	background-color: var(--main_background);
  	border: 0px solid var(--gray);
  	border-top: 2px solid var(--main_color);
}
.footer_item1{
	width: 100%;
	margin: none;
	padding: none;
	padding-right: 7px;
	padding-left: 5px;
	border-right: 1px solid #555;
}

.footer_item2{/*last element*/
	width: 100%;
	margin: none;
	padding: none;
	padding-right: 7px;
	padding-left: 5px;
	border-right: 0px solid #555;
}

.signature{
	border: 0px solid #777;
	float: right;
	margin-right: 0px;
}

table.settings{
  	width:45%;
	vertical-align:top;
	border:0px solid var(--main_color);
	border-collapse: separate;
	border-spacing: 2px;
	color: var(--main_color);
  	margin: 0px;
  	padding: 0px;
}
table.settings td{
	border:1px solid var(--main_color);
	padding: 2px;
	text-align: center;
}
div.textarea{
	margin: auto;
	padding: 0px;
  	font-size: var(--system);
	color:var(--main_color);
  	background-color:var(--main_background);
	height: 30px;
	width: 350px;
	text-align: justify;
	word-break:break-all;
	border: 2px solid var(--main_color);
	overflow: hidden;
}



table.settings_confirm{
	width: 50%;
	margin: 20px auto;
	padding: 0px;
	border-collapse: collapse;
	border: 0px;
	font-size: var(--tiny);
	text-align: center;
}
table.settings_confirm td{
	border:0px solid var(--main_color);
}
table.settings_confirm td.text_right{
	text-align: right;
}
table.settings_confirm td.text_left{
	text-align: left;
}



input.lever{
	height: 15px;
	background: var(--lightteal);
	outline: none;
	opacity: 1;
	-webkit-transition: .2s;
	transition: opacity .2s;
}

input.lever::-webkit-slider-thumb{
	appearance: none;
	border-radius: 0px;
	width: 15px; /* Set a specific slider handle width */
	height: 15px; /* Slider handle height */
	background: var(--gray); /* Blue background */
	cursor: pointer; /* Cursor on hover */
}

input.lever::-moz-range-thumb {
	border-radius: 0px;
	width: 15px; /* Set a specific slider handle width */
	height: 15px; /* Slider handle height */
	background: var(--gray); /* Blue background */
	cursor: pointer; /* Cursor on hover */
}