/*Start of CSS*/


/*Start of header CSS*/

body {

    background: url("https://ie1-gfebf.cdnppb.net/mexchangeblackjack/turbo/17/assets/gameView/tableBackground.png?v17") no-repeat center fixed;
    background-size: cover;
    max-height: 100%;
    max-width: 100%;
}

h1, span, h3, h4, div#message {
	color: #F1F7EE;
	font-family: 'Lato', sans-serif;
}

h1 {
	font-size: 40px;
	text-align: center;
}

div.total, div.bet-div {
	display: flex;
	font-size: 18px;
	justify-content: center;
	color: #F1F7EE;
	font-family: 'Lato', sans-serif;

}

.container {
	display: flex;
	justify-content: center;

}

input {
	margin-right: 10px;
}

#message {
    height: 70px;
    font-size: 20px;
    text-align: center;
}

.button-div, #start {
	display: flex;
	justify-content: center;
  align-content: column;
  align-items: center;
}


/*End of header CSS*/

/*Start of Gameplay CSS*/

div#display {
	
   font-size: 20px;
   line-height: 30px;
 
}


div.game-play {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	align-content: flex-end;
	align-items: flex-end;

}

 div#playerHand {
	display: flex;
	justify-content: center;
	flex-direction: row;
	align-content: column;
  align-items: column;
  max-height: 300px;
  max-width: 	500px;
  margin-right: 50px;
 
	
}

div#dealerHand {
	display: flex;
	justify-content: row;
	align-content: flex-start;
  align-items: flex-start;
  max-height: 300px;
  max-width: 	300px;
  margin-right: 250px;

}

h4 {
	text-align: center;
	margin-left: 100px;
}



h4.play, h4.deal {
	margin-right: 5px;
}



div#actions, .deal-btn {
	display: flex;
	justify-content: space-evenly;
  align-content: column;
  align-items: center;
	
}

.player, .dealer {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
  max-height: 300px;
  max-width: 300px;
 	margin-right: 150px;
}



.scores {
	display: flex;
	justify-content: space-between;
	flex-direction: row;

}

#dealerValue, #playerValue {
	display: flex;
	justify-content: row;
	align-content: center;
	align-items: center;
	
}


/*End of Gameplay CSS*/

/*Start of button CSS*/

.deal-btn {
	margin-top: 20px;
}

.deal-btn,
.hold-btn,
.double-btn,
.hit-btn,
.start-btn,
.bet-btn {
    border-radius: 5px;
    padding: 5px 10px;
    color: #ffffff;
    background-color: #9B6B2B;
    min-width: 60px;
    min-height: 25px;
    
}

#deal-button,
#actions,
{
    display: none;
		
}


/*End of button CSS*/

/*Start of cards CSS*/

#cover {
    display: flex;
    width: 140px;
    height: 200px;
    background-color: gray;
    border-radius: 5px;
    border: 1px solid black;
    padding: 5px;
    down: 100px;
    position: absolute;


}

.Clubs,
.Spades {
    color: #000000;
}

.Hearts,
.Diamonds {
    color: red;
}

.card {
    display: flex;
    justify-content: column;
    width: 155px;
    height: 200px;
    padding: 5px;
    border: 1px solid black;
    background-color: white;
    border-radius: 5px;
    font-family: 'Lato', sans-serif;
}

.top-card {
    font-size: 30px;
    line-height: 30px;
}

.middle-card {
    text-align: center;
    font-size: 70px;
    margin-top: 85px;
}

.bottom-card {
    font-size: 30px;
    line-height: 30px;
    margin-top: 150px;
    transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-mos-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
}

.Hearts .suit::after {
    content: '\2665';
}

.Diamonds .suit::after {
    content: '\2666';
}

.Spades .suit::after {
    content: '\2660';
}

.Clubs .suit::after {
    content: '\2663';
}

/*End of cards CSS*/



/*End of CSS*/