* {
    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 */
  }

input {
  -webkit-user-select: text; /* Chrome, Opera, Safari */
  -moz-user-select: text; /* Firefox 2+ */
  -ms-user-select: text; /* IE 10+ */
  user-select: text; /* Standard syntax */
}

button {
  background: #efefef;
}

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

h1 {
  background: darkblue;
  color: white;
  font-size: calc(var(--vh, 1vh) * 10);
  text-align: center;
}

#boxDeckSelector {
  color: white;
  font-size: calc(var(--vh, 1vh) * 4);
  height: calc(var(--vh, 1vh) * 7.5);  
  left: calc(var(--vh, 1vh) * 1);
  padding-top: calc(var(--vh, 1vh) * .5);
  position: absolute;
  text-align: center;
  top: calc(var(--vh, 1vh) * 3);
  width: calc(var(--vh, 1vh) * 25);  
}

#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);
}

#boxButtons {
  height: calc(var(--vh, 1vh) * 20);
  right: calc(var(--vh, 1vh) * 2);
  position: absolute;
  text-align: center;
  top: calc(var(--vh, 1vh) * 3);
  width: auto;
}

#buttonHowTo, #buttonInstructions, #buttonNewRound {
  border-radius: calc(var(--vh, 1vh) * 1);
  font-size: calc(var(--vh, 1vh) * 3);
  height: calc(var(--vh, 1vh) * 8);
  position: relative;
  top: calc(var(--vh, 1vh) * 1);
  width: 6vw;
}

.card {
  display: inline-block;  
  position: relative;
  text-align: center;
  width: auto;
  z-index: 1;
}

.card img {
  height: 100%;
  position: relative;
  text-align: center;
  z-index: 1;
}

.card p {
  background: darkblue;
  border-radius: calc(var(--vh, 1vh) * 1.5);
  color: white;
  font-size: calc(var(--vh, 1vh) * 4);
  left: 50%;
  line-height: 13.4vh;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  z-index: 5;
}

#deck2 {
  height: auto;
  margin: 0 auto;
  margin-top: calc(var(--vh, 1vh) * 1);
  position: relative;
  width: 80vw;
}

#deck2 > .card {
  height: calc(var(--vh, 1vh) * 14.5);
  width: 4.3vw;
}

#deck2 > .card img {
  visibility: hidden;
position: relative;
}

#deck2 > .card p {
  background: darkblue;
  height: 100%;
}

#hand {
  bottom: calc(var(--vh, 1vh) * 2);
  height: calc(var(--vh, 1vh) * 35);
  left: 7vw;
  overflow: hidden;
  position: absolute;
  text-align: center;
  width: 71vw;
}

#hand .card, #boxDiscard .card {
  position: relative;
  height: calc(var(--vh, 1vh) * 35);
  margin: 0 1vw;
  max-width: 15vw;
  width: auto;
  z-index: 1;
}

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

#hand .card p, #discard .card p {
  font-size: calc(var(--vh, 1vh) * 5);
  height: calc(var(--vh, 1vh) * 9);  
  line-height: calc(var(--vh, 1vh) * 9);
  left: 50%;
  position: relative;
  top: -50%;
  width: 50%;
}

#boxDiscard .card {
  left: 50%;
  margin: 0;
  max-width: 18vw;
  position: absolute;
  transform: translate(-50%, 0);
}

#discard .card img {
  max-width: 18vw;
  width: auto;
}

#boxDiscard {
  border: white 1px solid;
  border-radius: calc(var(--vh, 1vh) * 1.5);
  bottom: calc(var(--vh, 1vh) * 2);
  color: white;
  font-size: calc(var(--vh, 1vh) * 4);
  height: calc(var(--vh, 1vh) * 42.5);
  right: 1vw;
  position: absolute;
  width: 19vw;
}

#boxDiscard h1 {
  border-radius: calc(var(--vh, 1vh) * 1.5) calc(var(--vh, 1vh) * 1.5) 0 0;
  color: white;
  font-size: calc(var(--vh, 1vh) * 3);
  font-weight: bold;
  margin-bottom: calc(var(--vh, 1vh) * 1);
  padding: calc(var(--vh, 1vh) * 1.25);
  text-align: center;
}