#faceDown {
  background: url("../img/flipped.png");
}

#aceOfHearts {
  background: url("../img/hearts/A.png");
}

#twoOfHearts {
  background: url("../img/hearts/2.png");
}

#threeOfHearts {
  background: url("../img/hearts/3.png");
}

#fourOfHearts {
  background: url("../img/hearts/4.png");
}

#fiveOfHearts {
  background: url("../img/hearts/5.png");
}

#sixOfHearts {
  background: url("../img/hearts/6.png");
}

#sevenOfHearts {
  background: url("../img/hearts/7.png");
}

#eightOfHearts {
  background: url("../img/hearts/8.png");
}

#nineOfHearts {
  background: url("../img/hearts/9.png");
}

#tenOfHearts {
  background: url("../img/hearts/10.png");
}

#jackOfHearts {
  background: url("../img/hearts/j.png");
}

#queenOfHearts {
  background: url("../img/hearts/q.png");
}

#kingOfHearts {
  background: url("../img/hearts/k.png");
}

#aceOfSpades {
  background: url("../img/spades/A.png");
}

#twoOfSpades {
  background: url("../img/spades/2.png");
}

#threeOfSpades {
  background: url("../img/spades/3.png");
}

#fourOfSpades {
  background: url("../img/spades/4.png");
}

#fiveOfSpades {
  background: url("../img/spades/5.png");
}

#sixOfSpades {
  background: url("../img/spades/6.png");
}

#sevenOfSpades {
  background: url("../img/spades/7.png");
}

#eightOfSpades {
  background: url("../img/spades/8.png");
}

#nineOfSpades {
  background: url("../img/spades/9.png");
}

#tenOfSpades {
  background: url("../img/spades/10.png");
}

#jackOfSpades {
  background: url("../img/spades/j.png");
}

#queenOfSpades {
  background: url("../img/spades/q.png");
}

#kingOfSpades {
  background: url("../img/spades/k.png");
}

#aceOfDiamonds {
  background: url("../img/diamonds/A.png");
}

#twoOfDiamonds {
  background: url("../img/diamonds/2.png");
}

#threeOfDiamonds {
  background: url("../img/diamonds/3.png");
}

#fourOfDiamonds {
  background: url("../img/diamonds/4.png");
}

#fiveOfDiamonds {
  background: url("../img/diamonds/5.png");
}

#sixOfDiamonds {
  background: url("../img/diamonds/6.png");
}

#sevenOfDiamonds {
  background: url("../img/diamonds/7.png");
}

#eightOfDiamonds {
  background: url("../img/diamonds/8.png");
}

#nineOfDiamonds {
  background: url("../img/diamonds/9.png");
}

#tenOfDiamonds {
  background: url("../img/diamonds/10.png");
}

#jackOfDiamonds {
  background: url("../img/diamonds/j.png");
}

#queenOfDiamonds {
  background: url("../img/diamonds/q.png");
}

#kingOfDiamonds {
  background: url("../img/diamonds/k.png");
}

#aceOfClubs {
  background: url("../img/clubs/A.png");
}

#twoOfClubs {
  background: url("../img/clubs/2.png");
}

#threeOfClubs {
  background: url("../img/clubs/3.png");
}

#fourOfClubs {
  background: url("../img/clubs/4.png");
}

#fiveOfClubs {
  background: url("../img/clubs/5.png");
}

#sixOfClubs {
  background: url("../img/clubs/6.png");
}

#sevenOfClubs {
  background: url("../img/clubs/7.png");
}

#eightOfClubs {
  background: url("../img/clubs/8.png");
}

#nineOfClubs {
  background: url("../img/clubs/9.png");
}

#tenOfClubs {
  background: url("../img/clubs/10.png");
}

#jackOfClubs {
  background: url("../img/clubs/j.png");
}

#queenOfClubs {
  background: url("../img/clubs/q.png");
}

#kingOfClubs {
  background: url("../img/clubs/k.png");
}

body {
  background-color: #2d69d7;
}

body h1 {
  font-family: 'oswald', sans-serif;
}

body #table {
  background-color: green;
  text-align: center;
  max-width: 888px;
  max-height: 888px;
  margin: auto;
}

body #table h1,
body .betContainer h1 {
  margin: 0;
  font-size: calc(10px + (22 - 10) * ((100vw - 300px) / (1600 - 300)));
}

body #table img {
  width: 25%;
  height: auto;
}

body #table .cardContainer {
  display: flex;
  width: 60%;
  height: 13vh;
  margin-left: 40%;
}

body #table .cardContainer .card {
  width: 8.71vh;
  height: 13vh;
  z-index: 5;
  margin-left: 3px;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

body #table #winner {
  position: absolute;
  margin-left: 70vw;
  max-width: 125px;
}

body #table #burnedPile {
  margin-left: 20% !important;
}

body #buttonContainer {
  display: flex;
  flex-wrap: wrap;
}

body #buttonContainer .buttons {
  width: 25%;
}

body #buttonContainer .buttons button {
  width: 80%;
}

body .betContainer {
  display: flex;
  flex-wrap: wrap;
  background-color: yellow;
  width: 100%;
  max-width: 888px;
  margin: auto;
  justify-content: space-evenly;
  align-items: center;
}

body .betContainer #totalBet {
  width: 100%;
  text-align: center;
}

body .betContainer #betButtons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70%;
}

body .betContainer #betButtons button {
  width: 13%;
  margin-left: 1em;
  margin-right: 1em;
}

body .betContainer #totalChips {
  text-align: center;
  width: 30%;
}