@import url('https://fonts.googleapis.com/css?family=Roboto');


body{
	xfont-family:Arial;
	font-family: 'Roboto', sans-serif;
	width:100vw;
	height:100vh;
	max-height:100vh;
	overflow-x:hidden;
	overflow-y:hidden;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
	
	background-color:#5781a2;
	margin:0;
	padding:0;
	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

p, input, textarea {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

#topBar{
	width:100vw;
	height:5vh;
	xheight:5vmin;
	xbackground-color:rgba(0,0,0,0.5);
	background-color:#256f6b;
}

#progressBarArea{
	border:1px solid black;
	width:100vw;
	height:5vh;
	xheight:5vmin;
	background-color:rgba(0,0,0,0.5);
	background-color:#black;
}

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
   appearance: none;
	width:100%;
	height:5vh;
}

progress[value]::-webkit-progress-bar {
 x background-color:rgba(0,0,0,0.5);
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
	
	

#levelContainer{
	padding:10px;
	xfont-weight:bold;
	xfont-size:19px;
	xfont-size:1.8em;
	font-size:8vmin;
	font-spacing:0.5;
	color:#CCB630;
	text-shadow: 1px 1px #333333;	
}

#openMenuButton{
	border:1px solid red;
	border-radius:5px;
	xcolor:#CCB630;
	color:#e6e6e6;
	float:right;
	xpadding:10px;
	margin:3px;
	font-size:5vmin;
	text-shadow:2px 2px #333333;	
	text-align:center;
	width:20%;
	xbackground-color:rgba(0,0,0,0.5);
	xbox-shadow: 0px 2px 4px #000,
				0px 0px 4px #000;
	background-color: #cc3333;
	border-bottom: 3px solid #661919;		
}

#openMenuButton:active{
	transform: translate(0px,3px);
	-webkit-transform: translate(0px,3px);
	border-bottom: 1px solid;
	background-color: #6c1313	
}


#menuContainer{
		  display: flex;
  justify-content: center;
 x align-items: center;
	
}


#menuArea{
	xborder:5px solid #79b9ab;
	border-radius:10px;
	position:absolute;	
	visibility:hidden;
	width:70vw;
	height:50vh;
	margin-top:10vh;
	padding:10px;
	z-index:1;
	xbackground-color:rgba(0,0,0,0.8);
	background-color:#498c7d;
	box-shadow: inset 0 0 25px #000000,	
				0 0 0 8px #dbf0db,
				0 0 0 12px #498c7d,
				0 10px 50px 20px #000000;
				
}

/* 2px 2px 4px #000, */

#menuTitle{
	color:#815931;
	color:white;
	text-shadow:2px 2px #333333;	
	font-size:10vmin;
	margin-bottom:20px;
	
}

#menuButtonArea{
	xborder:1px solid black;
	text-align:center;
}

.menuButton{
	border:1px solid red;
	display:inline-block;
	border-radius:5px;
	color:#e6e6e6;
	background-color: #d9263b;
	padding:10px;
	margin:3px;
	font-size:6vmin;
	text-shadow:1px 1px #333333;	
	text-align:center;
	width:50%;
	xbox-shadow: 0px 2px 4px #000,
				0px 0px 4px #000;
	
	border-bottom: 3px solid #661919;			
}

.menuButton:active{
	transform: translate(0px,4px);
	-webkit-transform: translate(0px,4px);
	border-bottom: 1px solid;
	background-color: #6c1313	
}


#tileArea{
	xborder:1px solid red;
	width:100vw;
	height:95vh;
	xdisplay:flex;
	xjustify-content: center; /* align horizontal */
	position:absolute;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

.tile{
	border:1px solid green;
	position:relative;
	visibility:hidden;
	xwidth:19%;
	xheight:9%;
	xdisplay:flex;
	float:left;
	padding:0px;
	margin:0px;
	background-color:#4baf7d;
	box-shadow: 1px 1px 5px #000;	
}


.wrapper:after {
  content:" ";
  display:table;
  clear:both;
}

.wrapper div {
  xwidth:50px;
  xheight:50px;
  xborder:1px solid;
}