* {
    box-sizing: border-box;
    font-family: 'Amatic SC', cursive;
    margin:0;
    padding:0;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ and Edge */
    user-select: none; /* Standard syntax */
  }

button {
  background: #efefef;
}

#container-game {
  height: calc(var(--vh, 1vh) * 100);
  border: black calc(var(--vh, 1vh) * 1) solid;
  border-width: calc(var(--vh, 1vh) * 1) .5vw;
  background-image: url(resources/objects/backgroundOldWoodTable2.jpg);
  position: relative;
}

/* Default card size */
.card {
  float: left;
  position: relative;
  text-align: center;
  z-index: 1;
}

.card p {
  background: white;
  border-radius: calc(var(--vh, 1vh) * 1.5);
  color: black;
  font-size: calc(var(--vh, 1vh) * 5);
  left: 25%;
  position: absolute;
  text-align: center;
  top: 38%;
  width: 50%;
}

#containerDeck {
  height: calc(var(--vh, 1vh) * 22);
  left: 1vw;
  position: absolute;
  top: calc(var(--vh, 1vh) * 42);
  width: 10vw;
}

#containerDeck p {
  color: white;
  padding: .5vw 0 .3vw;
}

#deck {
  height: 100%;
  position: relative;
  width: 100%;
}

#deck .card {
  height: 100%;
  position: absolute;
  width: 100%;
}

#deck .card img {
  border-radius: calc(var(--vh, 1vh) * 1.5);
  height: 100%;
  top: 0;
  margin: 0 auto;
  max-width: 9vw;
  position: relative;
  width: auto;
}

#deck .card p, #centerTable .card p, [id^=centerTable] p {
  color: transparent;
  background: transparent;
}

#boxDeckNumber {
  align-items: center;
  background: darkblue;
  border-radius: calc(var(--vh, 1vh) * 1);
  color: white;
  display: flex;
  font-size: 1.75vw;
  font-weight: bold;
  height: calc(var(--vh, 1vh) * 7.5);
  justify-content: center;
  left: 1vw;
  position: absolute;
  text-align: center;
  top: calc(var(--vh, 1vh) * 34);
  width: 10.5vw;
}

#cardDecks {
  border-radius: calc(var(--vh, 1vh) * 1);
  font-size: 2vw;
  font-weight: bold;
  margin-left: .5vw;
  padding: calc(var(--vh, 1vh) * .5);
  text-align: center;
  vertical-align: middle;
  width: 3vw;
}

[id^="containerDeckPlayer"] {
  display: flex;
  font-size: calc(var(--vh, 1vh) * 4);
  height: calc(var(--vh, 1vh) * 31);
  position: absolute;
  width: 46vw;
}

#containerDeckPlayer1, #containerDeckPlayer2 {
  align-items: flex-start;
  top: calc(var(--vh, 1vh) * 1);
}

#containerDeckPlayer1, #containerDeckPlayer4 {
  left: calc(var(--vh, 1vh) * 1);
}

#containerDeckPlayer2, #containerDeckPlayer3 {
  right: calc(var(--vh, 1vh) * 1);
  justify-content: flex-end;
}

#containerDeckPlayer3, #containerDeckPlayer4 {
  align-items: flex-end;
  bottom: calc(var(--vh, 1vh) * 1);
}

[class^=playerLabel] {
  align-items: center;
  background: darkblue;
  border: 1px white solid;
  border-radius: calc(var(--vh, 1vh) * 1);
  color: white;
  display: flex;
  font-size: calc(var(--vh, 1vh) * 2.5);
  font-weight: bold;
  height: calc(var(--vh, 1vh) * 30);
  justify-content: center;
  position: relative;
  text-orientation: upright;
  width: 2vw;
  writing-mode: vertical-rl;
}

.playerLabel2, .playerLabel3 {
  float: right;
  right: 0px;
}

.playerLabel1, .playerLabel4 {
  margin-right: .5vw;
}

.playerLabel2, .playerLabel3 {
  margin-left: .5vw;
}

[id^="deckPlayer"] {
  display: flex;
  position: relative;
  width: auto;
}

[id^="deckPlayer"] p {
  color: black;
  padding: 0;
}

[id^="deckPlayer"] img {
  border-radius: calc(var(--vh, 1vh) * 1);
  height: auto;
  margin: 0 calc(var(--vh, 1vh) * .2);
  position: relative;  
  width: 7vw;
}

#deckPlayer2, #deckPlayer3 {
  flex-wrap: wrap;
  justify-content: flex-end;
}

#boxButtons {
  height: calc(var(--vh, 1vh) * 20);
  left: 50%;
  position: absolute;
  text-align: center;
  top: calc(var(--vh, 1vh) * 80);
  transform: translate(-50%, 0);
  width: calc(var(--vh, 1vh) * 33);
}

#buttonDeal, #buttonNewRound, #buttonHowTo, #buttonInstructions {
  border-radius: calc(var(--vh, 1vh) * 1);
  font-size: calc(var(--vh, 1vh) * 4);
  height: calc(var(--vh, 1vh) * 8);
  position: absolute;
  top: calc(var(--vh, 1vh) * 1);
  width: calc(var(--vh, 1vh) * 15);
}

#buttonHowTo {
  left: calc(var(--vh, 1vh) * 1);
}

#buttonHowTo, #buttonInstructions {
  top: calc(var(--vh, 1vh) * 10);
}

#buttonInstructions {
  right: calc(var(--vh, 1vh) * 1);
}

#buttonDeal, #buttonNewRound {
  position: relative;
}

#buttonDeal {
  margin-right: calc(var(--vh, 1vh) * .5);
}
#boxCenterTable, #boxCenterTable2 {
  display: flex;
  justify-content: center;
  left: 12vw;
  position: absolute;
  top: calc(var(--vh, 1vh) * 25);
  width: auto;
  z-index: 1;
}

#boxCenterTable2{
  z-index: 2;
}

[id^=centerButtons] {
  border: transparent 2px solid;
  border-radius: calc(var(--vh, 1vh) * 1.5);
  height: calc(var(--vh, 1vh) * 6);
  margin: .25vw;
  position: relative;
  width: 10vw;
}


[id^=centerTable] {
  border: white 2px solid;
  border-radius: calc(var(--vh, 1vh) * 1.5);
  height: calc(var(--vh, 1vh) * 47);
  margin: .25vw;
  position: relative;
  width: 10vw;
}

[id^=centerTable] .card {
  height: calc(var(--vh, 1vh) * 19);
  position: absolute;
  text-align: center;
  width: 9.8vw
}

[id^=centerTable] img {
  border-radius: 5%;
  height: calc(var(--vh, 1vh) * 19);
  left:50%;
  max-width: 9vw;
  position: absolute;
  transform: translate(-50%, 0);
  width: auto;
}

[id^=centerTable] div:nth-child(1) {
  margin-top: calc(var(--vh, 1vh) * 4.55);
}

[id^=centerTable] div:nth-child(2) {
  margin-top: calc(var(--vh, 1vh) * 8.15);
}

[id^=centerTable] div:nth-child(3) {
  margin-top: calc(var(--vh, 1vh) * 11.75);
}

[id^=centerTable] div:nth-child(4) {
  margin-top: calc(var(--vh, 1vh) * 15.35);
}

[id^=centerTable] div:nth-child(5) {
  margin-top: calc(var(--vh, 1vh) * 18.95);
}

[id^=centerTable] div:nth-child(6) {
  margin-top: calc(var(--vh, 1vh) * 22.55);
}

[id^=centerTable] div:nth-child(7) {
  margin-top: calc(var(--vh, 1vh) * 26.15);
}

[id^=centerTable] div:nth-child(8) {
  margin-top: calc(var(--vh, 1vh) * 29.75);
}

[id^=centerTable] div:nth-child(9) {
  margin-top: calc(var(--vh, 1vh) * 4.55);
}

[id^=centerTable] div:nth-child(10) {
  margin-top: calc(var(--vh, 1vh) * 8.15);
}

[id^=centerTable] div:nth-child(11) {
  margin-top: calc(var(--vh, 1vh) * 11.75);
}

[id^=centerTable] div:nth-child(12) {
  margin-top: calc(var(--vh, 1vh) * 15.35);
}


#score {
  background: darkblue;
  border: white 1px solid;
  border-radius: calc(var(--vh, 1vh) * 1.5);
  color: white;
  font-size: calc(var(--vh, 1vh) * 4);
  height: auto;
  top: calc(var(--vh, 1vh) * 1);
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  width: calc(var(--vh, 1vh) * 28);
}

#score h1 {
  color: white;
  font-size: calc(var(--vh, 1vh) * 4);
  font-weight: bold;
  text-align: center;
}

[id^="player"] {
  text-align: center;
}

#wincho1, #wincho2, #wincho3 {
  display: none;
}

#wincho1a, #wincho2a, #wincho3a {
  color: gold;
  font-weight: bold;
  margin-left: .5vw;
}

#boxWinWincho {
  background: darkblue;
  border: gold 10px ridge;
  border-radius: calc(var(--vh, 1vh) * 1.5);
  color: gold;
  display: none;
  font-size: calc(var(--vh, 1vh) * 10);
  font-weight: bold;
  height: calc(var(--vh, 1vh) * 15);
  top: 50%;
  position: absolute;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  width: calc(var(--vh, 1vh) * 35);
  z-index: 6;
}

.boxButtons {
  background-color: darkblue;
  border-radius: calc(var(--vh, 1vh) * 1.5) calc(var(--vh, 1vh) * 1.5) 0 0;
  height: calc(var(--vh, 1vh) * 4.5);
  text-align: center;
  z-index: 2;
}

#boxCardsWon {
  background: darkblue;
  border: tan 5px ridge;
  border-top: tan 5vh solid;
  display: none;
  height: auto;
  left: 5vw;
  position: absolute;
  top: calc(var(--vh, 1vh) * 5);
  width: 90vw;
  z-index: 5;
}

[id^="boxInnerCardsWon"] {
  display: block;
  float: left;
  height: auto;
  padding-bottom: 1vh;
  padding-top: 1vh;
  position: relative;
  text-align: center;
  width: 100%;
}

#boxInnerCardsWon1 .label, #boxInnerCardsWon2 .label, #boxInnerCardsWon3 .label {
  align-items: center;
  color: tan;
  display: flex;
  float: left;
  font-size: calc(var(--vh, 1vh) * 1.75);
  font-weight: bold;
  height: calc(var(--vh, 1vh) * 22);
  justify-content: center;
  margin-top: 1vh;
  margin-bottom: 1vh;
  position: relative;
  text-orientation: upright;
  width: 2vw;
  writing-mode: vertical-rl;
}

.boxScore {
  float: left;
  height: 20vh;
  margin-top: 1vh;
  width: 3vw;
}

[id^="boxInnerCardsWon"] .finalScore {
  color: tan;
  font-size: calc(var(--vh, 1vh) * 4);
  font-weight: bold;
  height: calc(var(--vh, 1vh) * 8);
  padding-top: 2vh;
  text-align: center;
  position: relative;
  width: 3vw;
}

[id^="boxInnerCardsWon"] [id^="wincho"] {  
  color: gold;
  display: flex;
  flex-wrap: wrap;
  font-size: calc(var(--vh, 1vh) * 4);
  font-weight: bold;
  height: auto;
  margin-top: 1vh;
  height: calc(var(--vh, 1vh) * 12);
  position: relative;
  width: 3vw;
  word-break: break-all;
}

[id^="cardsWon"] {
  float: left;
  height: auto;
  position: relative;
  width: 83vw;
}

[id^="cardsWon"] p {
  display: none;
}

[id^="cardsWon"] img {
  border-radius: calc(var(--vh, 1vh) * .5);
  float: left;
  height: calc(var(--vh, 1vh) * 13);
  margin: .2vw;
  position: relative;
  width: auto;
}


.buttonClose {
  border: none;
  color: darkblue;
  cursor: pointer;
  font-size: 10vh;
  line-height: 3.5vh;
  position: absolute;
  top: -5vh;
  right: 10px;
  z-index: 100;
}

.buttonTrickWon {
  border-radius: calc(var(--vh, 1vh) * .5);
  font-size: 1.5vw;
  height: calc(var(--vh, 1vh) * 4);
  margin: calc(var(--vh, 1vh) * .25);
  width: 2.5vw;
  z-index: 2;
}

.test {
  position: absolute;
  height: 100px;
  width: 100px;
  z-index: 10;
  background: orange;
  top: 0;
}