html,body{
	margin:0;
	padding:0;
	background-color:rgba(0,0,0,0.7);
}

#content{
	height: auto;
}

#gameplay,
#rulesUI,
#WinnerUI{
	position:absolute;
	top:0;
}

#gameplay{
	display: block;
}

#rulesUI{
	display: none;
	background-color:pink;
	height:100vh;
	text-align: center;
	font-size: 20px;
	/* line-height: 5vh; */

}

#Rules{
	background-color:white;
	background-image:url(../img/RulesIcon.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	height:50px;
}

#WinnerUI{
	display:none;
	/* background-color:blue; */
	background-image: url(../img/bgWinner.jpg);
	height:100vh;
	text-align: center;
	line-height: 50vh;
	color:white;
	font-size:40px;
}

#WinnerUI input{
	background-color: transparent;
    border: solid black;
    height: 70px;
    color: white;
    font-size: 40px;
    line-height: 0px;
    border-radius: 10px;
}

#Ad{
	height:50px;
	background-color:rgba(255,255,255,0.4);
	text-align:center;
	line-height: 50px;
	color:white;
	font-weight: bold;
}

.playerStack,
.stack{
	height:calc(100vh - 50px);
	/*line-height: calc(100vh - 50px);*/
	text-align:center;
}


.playerStack{
	/* background-color:yellow; */
	background-image: url(../img/bgStack2.jpg);
	opacity: 0.35;
}
.stack{
	/* background-color: red; */
	background-image: url(../img/bgGamePieces.jpg);
}

.playerStack.turn{
	opacity: 1;
}


.piece{
	height: calc(16.5vh - 50px);
	line-height: calc(16.5vh - 50px);
	font-size: 30px;
	/*background-color: orange;*/
	background-image: url(../img/bgPiece.jpg);
	border:solid black;
	opacity: 0.25;
}

.piece.avalaible{
	opacity: 1;
}

.piece.used{
	background-color: blue;
	opacity: 1;
	color:white;
}

.piece.unavalaible{
	pointer-events: none;
	opacity: 0;
}