body{
  padding:0;
  margin:0;
  box-sizing:border-box;
  font-family:sans-serif;
}

#wrapper{
  width:100%;
  height:100vh;
  background:black;
  display:flex;
  justify-content:center;
  align-items:center;
}

.scenes{
  background:darkgreen;
  width:70%;
  height:80%;
  border-radius:3%;
  border:solid 8px saddlebrown;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}

.scenes div{
  min-width: 20%;
}

#table{
  display:none;
}

h1{
  color:white;
  margin:0 0 10% 0;
  text-align:center;
}

p{
  color:white;
  text-align:center;
  font-weight:bold;
  display:none;
}

#endGame{
  background:rgba(0, 0, 0, 0.6);
  display:none;
  width:100%;
  height:100%;
  position:absolute;
  display:none;
  justify-content:center;
  align-items:center;
}

.end{
  background:rgba(0, 66, 0, 0.7);
}

#hand-contain{
  width:85%;
  height:70%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}

.hands{
  width:100%;
  display:flex;
  flex-wrap:wrap;
}

.hands div{
  width:100%;
  display:flex;
  justify-content:center;
  position:relative;
}

.cards, .card-hidden{
  width:20%;
}

.cards{
  position:absolute;
}

.card-hidden{
  opacity:0;
}

#buttons{
  width:85%;
  display:flex;
  justify-content:center;
}

ul{
  list-style-type:none;
  padding:0;
  margin:0;
  display:flex;
  justify-content:space-between;
  width:50%;
}

li{
  width:40%;
}

button{
  width:100%;
  padding:10px 0;
  border:none;
  border-radius:5%;
  background:black;
  color:white;
  cursor: pointer;
}

button:hover{
  background:saddlebrown;
  color:white;
  cursor: pointer;
}

button:active{
  border:none;
}

button:focus{
  outline:none;
}

@media only screen and (max-width: 2500px) {
  
  #hand-contain{
    width:85%;
    height:80%;
  }

  .cards, .card-hidden{
    width:15%;
  }
  
}

@media only screen and (max-width: 1700px) {
  
  .cards, .card-hidden{
    width:17%;
  }
  
}

@media only screen and (max-width: 1500px) {

  .cards, .card-hidden{
    width:19%;
  }
  
}

@media only screen and (max-width: 1300px) {

  .cards, .card-hidden{
    width:22%;
  }
  
}

@media only screen and (max-width: 1000px) {

  .cards, .card-hidden{
    width:27%;
  }
  
}

@media only screen and (max-width: 800px) {

  .cards, .card-hidden{
    width:33%;
  }
  
}

@media only screen and (max-width: 500px) {

  .cards, .card-hidden{
    width:47%;
  }
  
  ul{
    width:100%;
  }
  
  li{
    width:45%;
  }
  
}