*{
	margin:0;
	box-sizing:border-box;
	padding:0;
}

body{
	background-color:#FFCAB7; //coral; #666;
}

.unselectable{
	user-select:none;  /*also see pointer-events:none;  to disallow mouse interaction with an elelemt... not right for here though*/
	cursor: default;
}

.cursor-pointer{
	cursor:pointer;
}

.hidden{
	visibility:hidden;
}

#prompter, #setup-menu, #prompter2, #openning{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	text-align:center;
	z-index:100;
	padding:50px 0 300px 0;
	background-color:rgba(125,125,125,0.5);
	display:grid;
	//place-items:center;
	//justify-content:center;
	//align-content:center;
}

#prompter-content, #menu-content, #setup-content, #openning-content{
	width:300px;
	//height:150px;
	padding:1rem;
	margin:0 auto;
	background-color:rgba(255,255,255,0.7);
	position:relative;
}
#openning-content{
	height:0px;
	width:0px;
	overflow:hidden;
	opacity:0;
	animation-name: openning;
	animation-duration: 1s;
	animation-delay:0.5s;
	animation-fill-mode:forwards;

}

@keyframes openning {
  0%   {width:0;height:0;}
  10%  {width:100;height:100;opacity:1;transform:rotate(90deg);}
  25%  {width:200px; height:200px;opacity:1;transform:rotate(180deg);}
  50%  {width:100px; height:100px;opacity:1;transform:rotate(360deg);}
  100% {width:300px; height:300px;opacity:1;transform:rotate(720deg);}
}


#prompter2-content{
	width:300px;
	height:200px;
	padding:0.5rem;
	margin:0 auto;
	background-color:rgba(255,255,255,0.7);
	position:relative;
}

	/*========================================================================*/
#close{
	padding:3px 0 0 0;
	position:absolute;
	top:5px;
	right:7px;
	background-color:cyan;
	color:coral;
	width:1.5em;
	height:1.5em;
	border-radius:50%;
	border-color:cyan;
	text-align:center;
	box-shadow:1px 1px 2px 5px rgba(0,0,0,.5);
	transition:transform 0.15s;
}

#close:hover , .menu-item:hover{
	transform:scale(0.90);
}

.menu-item{
	color:steelblue;
	background-color:coral;
	font-weight:700;
	border:solid 2px steelblue;
	border-radius:20px;
	width:100%;
	margin:5px auto;
	padding:5px 5px;
	text-shadow:1px 1px 2px rgba(0,0,0,1);
	outline:none;
}
	/*========================================================================*/
.op-msg1{
	text-align:center;
	margin:0.2rem 0 0 0;
	font-size:1.2rem;
}

.op-msg2{
	text-align:center;
	margin:0 0 0 0;
	color:#143F6B;
	text-shadow:2px 2px 5px rgba(0,0,0,0.8);
}

.prompter-msg{
	//width:min(200px,max-content);
	text-align:center;
	margin:0 auto;
}
#new-game-btn1, #new-game-btn2, #quit-btn, #continue-game-btn, #review-game-btn{
	display:block;
	font-size:1.5rem;
	font-wight:700;
	width:max-content;
	margin:10px auto 5px auto;
	background-color:cyan;
	padding:5px;
	color:coral;
	box-shadow:2px 2px 5px 5px rgba(0,0,0,0.3);
	transition:transform .25s;
}

#quit-btn, #review-game-btn{
	font-size:1.1rem;
	margin:0 auto;
}

#new-game-btn:hover, #quit-btn:hover, #continue-game-btn:hover{
	transform:scale(0.95) translateX(3px);
}

.name-field, .setup-fields{
	font-size:1.2rem;
}

.name-field{
	width:88%;
}

#sound, #duplicate, #maxcolors{
	width:20px;
	height:20px;
}
#maxcolors{
	width:40px;
	height:30px;
}
	/*========================================================================*/
#game-area{
	display:block;
	position:absolute;
	top:5px;
	left:5px;
	width:calc(100vw - 10x);
	height:calc(100vh - 10px); //max(calc(100vh - 10px),700px);
	background-color:rgba(0,0,0,0);
	//border:solid 1px black;
}
@media screen and (min-width:450px ){
	#game-area{
		top:5px;
		width:450px;
		left:calc(50vw - 225px);
		height:calc(100vh - 10px); //max(calc(100vh - 10px),700px);
	}
}