body {
    --card-wh-ratio: calc(691 / 1056);
    --card-width: min(18vw, calc(18vh * var(--card-wh-ratio)));
    --card-height: calc(var(--card-width) / var(--card-wh-ratio));
    --offset-size: calc(var(--card-height) / 6);

    background-color: green;
    margin: 0px;
}

.content {
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    gap: 1vw;
}

.column {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.base {
    width: var(--card-width);
    height: var(--card-height);
}

.above, .below {
    flex: 1;
    display: flex;
}

.above {
    align-items: flex-end;
}

.base, .above, .below {
    position: relative;
}

.base > img, .above > img, .below > img {
    position: absolute;
    width: var(--card-width);
    height: var(--card-height);
}

.above > img {
    --offset: 0;
    transform: translateY(calc(0px - var(--offset) * var(--offset-size)));
}

.below > img {
    --offset: 0;
    transform: translateY(calc(var(--offset) * var(--offset-size)));
}

.counter {
    font-size: 3vh;
    font-weight: bolder;
    text-align: center;
    background-color: darkgreen;
    color: red;
    border-radius: 10px;
    z-index: 10;
}

.deck-counter, .king-counter {
    font-size: 54px;
    position: absolute;
    right: 20px;
}

.deck-counter {
    top: 20px;
}

.king-counter {
    top: 74px;
}

button {
    width: 100%;
    font-size: 6vh;
    color: #fdcd44;
    border-width: 6;
    border-color: #fdcd44;
}

.shuffle-btn {
    background-color: #006400;
}

.reset-btn {
    background-color: red;
}

.undo-btn {
    background-color: #00539b;    
}