/*making sure the html has enough height to contain everything else and based the percentage on that*/
html {
	height: 600px;
}

/*making sure the body has the same height as the html document*/
body {
	height: 100%;
	background-color: #82A0B4;
	font-family: 'Dosis', sans-serif;
}

/*making sure the container for the entire game has the same height as the body*/
.container{
	height: 100%;

}

section {
	display:inline-block;
	height: 20%;
	width: 90%;
	text-align: center;
}

.tileVertical,
.tileHorizontal
{
	border-radius: 5px;
}

.tileVertical {
	height: 95px;
	width: 45px;
	border: 2px solid #3E606F;
	display: inline-block;	
	border-radius: 5px;
	margin-right: 2px;
	margin-left: 2px;
}

.tileHorizontal {
	height: 35px;
	width: 76px;
	border: 2px solid #3E606F;
	display: inline-block;
}

.tileSquareVerticalTop {
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

.tileSquareVerticalBottom {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.tileSquareVerticalTop,
.tileSquareVerticalBottom {
	height: 46%;
	border:2px solid #D0CECE;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: white;
}

.tileSquareHorizontalLeft,
.tileSquareHorizontalRight {
	display: block;
	height: 90%;
	width: 44%;
	border:2px solid #D0CECE;
	float: right;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: white;
}

.tileSquareHorizontalRight {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.tileSquareHorizontalLeft {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	width: 45%;
}

.faceDown,
.faceDownBlock {
	background-color: #3E606F;
}

.faceDownBlock {
	display: block;
	margin-bottom: 3px;
}

.tileVerticalPlayAreaRight,
.tileVerticalPlayAreaLeft {
	height: 75px;
	width: 40px;
	border: 2px solid #3E606F;
	display: block;
	border-radius: 5px;
}

.tileVerticalPlayAreaRight {
	position: relative;
	left: 10%;
}

.emptyTile {
	border-color: #DEE0D3;
}

.playArea {
    position: relative;
    bottom: 55%;
    height: 50%;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: start;
}

.playAreaUpperRow,
.playAreaBottomRow {
    width: 90%;
    height: 15%;
    position: relative;
    left: 5%;
}

.playAreaCenter{
    width: 90%;
    height: 55%;
    position: relative;
    left: 5%;
}

.playAreaRightColumn,
.playAreaLeftColumn {
	width: 5%;
	height: 100%;
	display: inline-block;
}

.playAreaRightColumn{
	margin-left: 1%;
}

.playerScore,
.computerScore {
	width: 43%;
    height: 95%;
    position: relative;
    bottom: 43%;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #3E606F;
    box-sizing: border-box;
    left: 5px;
    text-align: center;
    font-family: 'Dosis', sans-serif;
    font-size: 40px;
    color: #181721;
}

.playAreaDiv {
	width: 100%;
	height: 100%;
	position: relative;
    bottom: -2%;
}

.boneyardArea{
	position: relative;
	height: 98%;
	width: 9%;
	bottom: 21%;
}

.boneyarAreaDiv {
	width: 100%;
	height: 100%;
}

.playerArea {
    position: relative;
    bottom: 54%;
    height: 20%;
}

.highlight{
	box-shadow: 3px 3px 5px #181721;
}

.tileVerticalPlayAreaLeft .tileSquareVerticalBottom{
	height: 43%;
}

.tileVerticalPlayAreaRight .tileSquareVerticalBottom{
	height: 43%;
}

.winner{
	font-size: 40px;
	font-weight: 700;
	font-family: 'Dosis', sans-serif;
}

.activePlayer{
	background-color: #3E606F;
}

.knockTurn,
.nextRound,
.newGame{
	display: inline-block;
	margin: 5px;
	height: 30px;
	border-radius: 4px;
	background-color: #3E606F;
	border-color: #3E606F;
}

a{
	font-size: 12px;
	text-decoration: none;
}

p{
	text-align: justify;
	font-size: 18px;
}

.videoTutorial,
.note,
.playGame,
.logo {
	text-align: center;
}

img {
	width: 25%;
}
.playGame {
	text-decoration: none;
}

.dominoes {
	font-size: 38px;
}