.card-pile {
    width: 9.09091%;
    margin-right: 1.0101%;
}

.floating-cards {
    position: absolute;
    bottom: 0;
    left: 0;
}

#deck,
#done-cards,
.bottom-banner {
    bottom: 0px;
}

.done-cards {
    position: absolute;
    bottom: 0;
    left: 20%;
}

#done-cards {
    pointer-events: none;
}

#done-cards .card {
    pointer-events: none;
}

.card.back {
    transform: rotateX(180deg);
}

.card {
    /* TODO read more about will-chang */
    background-size: contain;
    will-change: left;
    -webkit-transform: translate3d(0, 0, 0);
}

#stacks .card {
    top: 25%;
}

#stacks .card.facedown {
    top: 9%;
}

#stacks .stack>.card {
    top: 0;
}

#stacks .card.facedown>.card {
    top: 9%;
}

#deck .card:nth-child(10) {
    left: 0px;
    z-index: 1;
}

#deck .card:nth-child(20) {
    left: 10px;
    z-index: 2;
}

#deck .card:nth-child(30) {
    left: 20px;
    z-index: 3;
}

#deck .card:nth-child(40) {
    left: 30px;
    z-index: 4;
}

#deck .card:nth-child(50) {
    left: 40px;
    z-index: 5;
}

#done-cards .card:nth-child(13) {
    left: 0px;
    z-index: 2;
}

#done-cards .card:nth-child(26) {
    left: 10px;
    z-index: 2;
}

#done-cards .card:nth-child(39) {
    left: 20px;
    z-index: 3;
}

#done-cards .card:nth-child(52) {
    left: 30px;
    z-index: 4;
}

#done-cards .card:nth-child(65) {
    left: 40px;
    z-index: 5;
}

#done-cards .card:nth-child(78) {
    left: 50px;
    z-index: 6;
}

#done-cards .card:nth-child(91) {
    left: 60px;
    z-index: 7;
}

#done-cards .card:nth-child(104) {
    left: 70px;
    z-index: 8;
}