* {
    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 */
    -webkit-user-drag: none;
  }

button {
  background: #efefef;
  border-radius: calc(var(--vh, 1vh) * 1);
}

#container-game {
  height: calc(var(--vh, 1vh) * 100);
  border: white calc(var(--vh, 1vh) * 1) solid;
  background-image: url(resources/objects/felt1.jpg);
  position: relative;
}
  
.card {
  background-image: url(resources/cards/cardsPlaying/back.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: calc(var(--vh, 1vh) * 1);
  float: left;
  height: 6.72611465vw;
  position: relative;
  margin: calc(var(--vh, 1vh) * .1);
  text-align: center;
  width: 4.4vw;
  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: 35%;
  width: 50%;
}

#containerDeck {
  height: calc(var(--vh, 1vh) * 24);
  left: 10vw;
  position: absolute;
  text-align: center;
  top: calc(var(--vh, 1vh) * 33);
  width: calc(var(--vh, 1vh) * 15.7);
}

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

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

#deck .card {
  background-image: url(resources/cards/cardsPlaying/back.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  position: absolute;
  width: 100%;
}

#deck .card img {
  visibility: hidden;
}

#deck .card p, #centerTable .card p {
  color: transparent;
  background: transparent;
}

#boxDeckNumber {
  color: white;
  font-size: calc(var(--vh, 1vh) * 4);
  font-weight: bold;
  height: calc(var(--vh, 1vh) * 20);
  left: 13.5vw;
  position: absolute;
  text-align: center;
  top: calc(var(--vh, 1vh) * 25);
  transform: translate(-50%, 0);
  width: calc(var(--vh, 1vh) * 33);
}

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

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

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

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

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

[id^="deckPlayer"] {
  float: left;
  height: 85%;
  margin: 0 auto;
  position: relative;
  width: 26vw;
}

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

[id^="deckPlayer"] img {
  height: auto;
  position: relative;  
  width: 100%;
}

[id^="deckPlayer"] [class^="card"] img {
  visibility: hidden;
}

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

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

#containerDeckPlayer1, #containerDeckPlayer2 {
  top: calc(var(--vh, 1vh) * 1);
  position: absolute;
}

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

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

#containerDeckPlayer3, #containerDeckPlayer4 {
  top: calc(var(--vh, 1vh) * 51);
  position: absolute;
}

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

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

#buttonDeal, #buttonNewRound, #buttonHowTo, #buttonInstructions {
  font-size: 1.8vw;
  height: calc(var(--vh, 1vh) * 8);
  position: absolute;
  top: calc(var(--vh, 1vh) * 1);
  width: 45%;
}

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

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

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

#centerTable {
  align-items: center;
  background-image: url(resources/objects/backgroundWoodDark.jpg);
  border: brown 3px ridge;
  border-radius: calc(var(--vh, 1vh) * 1.5);
  display: flex;
  height: calc(var(--vh, 1vh) * 35);
  justify-content: space-around;
  left: 50%;
  position: absolute;
  top: 55%;
  transform: translate(-50%, -50%);
  width: 45vw;
}

#centerTable .card {
  height: auto;
  background-image: none;
  position: relative;
  width: 10vw;

}

#centerTable .card img {
  border-radius: calc(var(--vh, 1vh) * 1.5);
  height: auto;
  position: relative;  
  width: 100%;
}

#score {
  border: white 1px solid;
  border-radius: calc(var(--vh, 1vh) * 1.5);
  color: white;
  display: flex;
  flex-wrap: wrap;
  font-size: 2vw;;
  height: calc(var(--vh, 1vh) * 33.5);
  top: calc(var(--vh, 1vh) * 1);
  position: absolute;
  left: 50%;
  text-align: center;
  transform: translate(-50%, 0%);
  width: calc(var(--vh, 1vh) * 24);
}

#score h1 {
  border-bottom: 1px white solid;
  color: white;
  font-size: calc(var(--vh, 1vh) * 4);
  font-weight: bold;
  padding: calc(var(--vh, 1vh) * 1.25);
  text-align: center;
  width: 100%;
}

#score [id^="player"] {
  width: 100%;
}

#score button {
  font-size: 1.8vw;
  height: calc(var(--vh, 1vh) * 5);
  margin: calc(var(--vh, 1vh) * .5);
  text-align: center;
  width: 6vw;
}

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

#warningLandscape {
  background-image: url(resources/objects/felt1.jpg);
  color: white;
  display: none;
  font-size: 8vh;
  height: calc(var(--vh, 1vh) * 100);
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 100;
}

#warningLandscape p {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  width: 100%;
}

@media screen and (orientation:portrait) {
  #warningLandscape {
    display: block;
  }
  html {
    background-image: url(resources/objects/felt1.jpg);
  }  
  #container-game {
    display: none;
  }
}