* {
  box-sizing: border-box; /* Include borders in div size */
  font-family: 'Montserrat', sans-serif; /* Set font for site */
  margin:0; padding:0; /* Default - No margins, no padding  */
  -webkit-user-select: none; /* Do not permit select text on page - Safari */
  -ms-user-select: none; /* Do not permit select text on page - IE 10+ and Edge */
  user-select: none; /* Do not permit select text on page - Standard */
  -webkit-user-drag: none; /* Do not permit dragging of any images */
}

/* Set the size of page to one screen, add border */
#framePage {
  height: calc(var(--vh, 1vh) * 100);
  background: url(resources/objects/backgroundWoodGrey.jpg);
  padding: calc(var(--vh, 1vh) * 1);
  position: relative;
}

/* Set the size of player trays, labels and card trays */
[id^="trayPlayer"] {
  background: #949599;
  border: #f8e00e calc(var(--vh, 1vh) * .4) ridge;
  display: flex;
  flex-wrap: wrap;
  height: calc(var(--vh, 1vh) * 31);
  position: absolute;
  width: 42vw;
}

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

#trayPlayer3, #trayPlayer4 {
  bottom: calc(var(--vh, 1vh) * 1);
}

[id^="labelPlayer"] {
  align-items: center;
  background: #f8e00e;
  color: #949599;
  display: flex;
  font-size: calc(var(--vh, 1vh) * 2.5);
  font-weight: bold;
  height: 100%;
  justify-content: center;
  text-orientation: upright;
  width: 2vw;
  writing-mode: vertical-rl;  
}

[id^="handPlayer"] {
  align-content: center;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  justify-content: space-around;
  width: calc(100% - 2vw);  
}

[id^="handPlayer"] .card {
  background: -webkit-radial-gradient(#d0d1d3 40%, white 65%);
  background-size: calc(var(--vh, 1vh) * .2) calc(var(--vh, 1vh) * .2);
  border: calc(var(--vh, 1vh) * 1) white solid;
  border-radius: calc(var(--vh, 1vh) * 1.5);
  display: flex;
  float: left;
  height: calc(var(--vh, 1vh) * 27);
  justify-content: center;
  max-height: calc((42vw - 2vw) * .19 * 20 / 13);
  max-width: calc(calc(var(--vh, 1vh) * 27) * 13 / 20);
  width: 19%;
}

[id^="handPlayer"] .card img {
  display: block;
  display: none;
}

.card p {
  align-self: center;
  background-color: white;
  color: #949599;
  font-size: 3vw;
  justify-self: center;
  position: absolute;
  text-align: center;
  width: 5vw;
}

/* Define area for deck number and deck */
#trayDeck {
  color: #949599;
  height: calc(var(--vh, 1vh) * 33);
  left: 3vw;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: calc(var(--vh, 1vh) * 19.5);
}

#trayDeckNumber {
  background: #f8e00e;
  font-size: calc(var(--vh, 1vh) * 2.5);
  font-weight: bold;
  height: calc(var(--vh, 1vh) * 4);
  line-height: calc(var(--vh, 1vh) * 4);
  text-align: center;
  width: 100%;
}

#deckNumber {
  padding: calc(var(--vh, 1vh) * .2);
}

#trayCards {
  height: calc(var(--vh, 1vh) * 29);
  padding: calc(var(--vh, 1vh) * 1);
  width: 100%;
}

#trayCards .card {
  background: -webkit-radial-gradient(#d0d1d3 40%, white 65%);
  background-size: calc(var(--vh, 1vh) * .2) calc(var(--vh, 1vh) * .2);
  border-radius: calc(var(--vh, 1vh) * 1.5);
  height: calc(var(--vh, 1vh) * 27);
  position: absolute;
  width: calc(var(--vh, 1vh) * 17.5);
}

#blankCard {
  border: calc(var(--vh, 1vh) * 1) white solid;
}

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

/* Define top box - Dealer and buttons */
#boxDealer {
  display: flex;
  flex-wrap: wrap;
  height: calc(var(--vh, 1vh) * 31);
  justify-content: center;
  left: 50%;
  position: absolute;
  top: calc(var(--vh, 1vh) * 1);
  transform: translate(-50%, 0);
  width: calc(100vw - 84vw - calc(var(--vh, 1vh) * 4));
}

#headerBoxDealer {
  background: #f8e00e;
  color: #949599;
  font-size: calc(var(--vh, 1vh) * 2.5);
  font-weight: bold;
  height: calc(var(--vh, 1vh) * 6.5);
  line-height: calc(var(--vh, 1vh) * 3);
  text-align: center;
  width: 100%;
}

#bodyBoxDealer {
  align-content: space-around;
  display: flex;
  flex-wrap: wrap;
  height: calc(var(--vh, 1vh) * 24.5);
  justify-content: center;
  position: relative;
  width: 100%;
}

#bodyBoxDealer button {
  font-size: .9vw;
  height: 25%;
  top: calc(var(--vh, 1vh) * 1);
  width: 75%;
}

#buttonPickUp, #buttonTurnDown {
  display: none;
}

/* Define bottom button box */
#boxButtons {
  align-content: space-around;
  bottom: calc(var(--vh, 1vh) * 1);
  display: flex;
  flex-wrap: wrap;
  height: calc(var(--vh, 1vh) * 31);
  justify-content: center;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
  width: calc(100vw - 84vw - calc(var(--vh, 1vh) * 4));
}

#boxButtons button {
  font-size: .9vw;
  height: 20%;
  top: calc(var(--vh, 1vh) * 1);
  width: 75%;
}


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

/* Formatting for center tray and discard tray */
#trayCenter, #trayDiscard {
  align-items: center;
  background: #949599;
  border: #f8e00e 5px ridge;
  display: flex;
  height: calc(var(--vh, 1vh) * 31);
  justify-content: space-around;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 45vw;
}

#trayDiscard {
  height: calc(var(--vh, 1vh) * 38);
  width: 56vw;
}

#trayCenter .card, #trayDiscard .card {
  float: left;
  height: calc(var(--vh, 1vh) * 29);
  max-height: calc(45vw * .23 * 20 /13);
  max-width: calc(calc(var(--vh, 1vh) * 29) * 13 / 20);
  position: relative;
  width: 23%;
}

#trayCenter .card p {
  display: none;
}

#trayDiscard .card {
  background: -webkit-radial-gradient(#949599 40%, white 65%);
  background-size: calc(var(--vh, 1vh) * .2) calc(var(--vh, 1vh) * .2);
  border-radius: calc(var(--vh, 1vh) * 1.5);
  border: calc(var(--vh, 1vh) * 1) white solid;
  display: flex;
  flex-wrap: wrap;
  height: calc(var(--vh, 1vh) * 27);
  justify-content: center;
  max-height: calc(56vw * .18 * 20 /13);
  max-width: calc(calc(var(--vh, 1vh) * 27) * 13 / 20);
  width: 18%;
}

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

#trayDiscard .card img {
  display: none;
}


/* Formatting for scoring tray */
#trayScore {
  color: #949599;
  display: flex;
  flex-wrap: wrap;
  height: calc(var(--vh, 1vh) * 33);
  justify-content: center;
  position: absolute;
  right: 3vw;
  top: 50%;
  transform: translate(0, -50%);
  width: calc(var(--vh, 1vh) * 19.5);
}

#trayScore h1 {
  background: #f8e00e;
  display: flex;
  font-size: calc(var(--vh, 1vh) * 2.5);
  font-weight: bold;
  height: calc(var(--vh, 1vh) * 4);
  justify-content: center;
  line-height: calc(var(--vh, 1vh) * 4);
  width: 100%;
}

#trayScore [id^="team"] {
  color: black;
  font-size: 2vw;
  text-align: center;
  width: 100%;
}

#trayScore button {
  font-size: .9vw;
  height: calc(var(--vh, 1vh) * 5);
  margin: 0 calc(var(--vh, 1vh) * 1);
  text-align: center;
  vertical-align: middle;
}

[id^="teamTricks"] button {
  width: 60%;
}

[id^="teamGame"] button {
  width: 25%;
}

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

/* Modal for discarding after picking up */
.modal {
  background-color: rgb(0,0,0);
  display: block;
  display: none; /* Hidden by default */
  left: 0;
  position: fixed; /* Stay in place */
  padding-top: 100px; /* Location of the box */
  top: 0;
  width: 100%; /* Full width */
  height: calc(var(--vh, 1vh) * 100); /* Full height */
  z-index: 3; /* Sit on top */
}

.modal h1 {
  bottom: calc(50% + calc(var(--vh, 1vh) * (42 / 2))); 
  color: #f8e00e;
  font-size: 3vw;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
}

.modal button {
  height: calc(var(--vh, 1vh) * 5);
  left: 50%;
  position: absolute;
  text-align: center;
  top: calc(50% + calc(var(--vh, 1vh) * (42 / 2)));
  transform: translate(-50%, 0%);
  font-size: 1.2vw;
  width: calc(var(--vh, 1vh) * 15);

}


/* Cards discarded from dealer's hand */
#deckDiscarded {
  display: none;
}

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

#selectSuits {
  grid-template-rows: 50% 50%;
  grid-template-columns: 50% 50%;
  display: none;
  height: 100%;
  position: relative;
  width: 100%;
}

#selectSuits div {
  height: 100%;
  padding: calc(var(--vh, 1vh) * .5);
  position: relative;
  text-align: center;
  width: 100%;
}

#selectSuits div img {
  border-radius: calc(var(--vh, 1vh) * 1);
  height: 100%;
  position: relative;
  max-width: calc(calc(var(--vh, 1vh) * 24.5) * .65);
  width: auto;

}

#buttonNewRound, #buttonNewRound2 {
  display: none;
  font-size: .9vw;
  height: calc(var(--vh, 1vh) * 7);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10vw;
  z-index: 2;
}

#buttonNewRound2 {
  left: unset;
  position: relative;
  transform: unset;
}

#warningLandscape {
  background: #949599;
  color: #f8e00e;
  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: #949599;
  }  
  #framePage {
    display: none;
  }
}