#stage {
  border: 0.5em solid;
  border-color: #D2AB6F #8C6529;
}

#felt {
  position: relative;
  margin: 0 0 0 200px;
  height: 500px;
  background-color: green;
  background-image: repeating-linear-gradient(
    to top right,
    rgba(255,255,255,0),
    rgba(255,255,255,0) 80px,
    rgba(255,255,255,0.2) 80px,
    rgba(255,255,255,0.2) 150px
  );
  box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
}

#felt > div {
  position: absolute;
  left: -140px;
  top: 100px;
  width: 74px;
  height: 105px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 4px;
  transform-origin: center;
}

#felt > div.deck {
  background: rgba(0,0,0,0.1);
}

#felt > div.holder {
  background: rgba(255,255,255,0.1);
}

#felt > div.card {
  background-color: white;
  background-image: repeating-linear-gradient(
    to top left,
    midnightblue 0em,
    white 4em,
    midnightblue 4em
  );
  border: 1px solid #666;
  transition-property: left, top, transform;
  transition-timing-function: ease-out, ease-out, ease-in-out;
  transition-duration: 0.5s;
  cursor: pointer;
}

#felt > div.card.black {
  background-color: black;
}

#felt > div.card:nth-child(odd) {
  transform: rotate(1deg);
}

#felt > div.card:nth-child(3n) {
  transform: rotate(-1deg);
}

#felt > aside {
  display: none;
  position: absolute;
  left: 10%;
  top: 20%;
  width: 80%;
  height: 60%;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.9);
  border: 5px solid white;
  font-family: monospace;
  text-transform: uppercase;
  text-shadow: 0 0 0.5em black;
  text-align: center;
  font-size: 3em;
  color: white;
}