/* ----------------------  Keeratav kaart  ----------------------- */

.deck {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 250 / 363;
    margin: 5px auto;
    position: relative;
    perspective: 500px;
    padding: 5px;
}

.flip {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease-in-out;
    transform-style: preserve-3d;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.playingcardback {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background-color: var(--background-one-color);
    border: 1px solid var(--playingcard-border-color);
    border-radius: 12px;
    color: var(--text-on-dark-backgrounds);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--text-font);
    font-size: 1.8em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    background-image: url('../img/deck_back_background.svg');
    background-size: 100%;
    background-position: center;
}

.playingcardfront {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background-color: var(--background-one-color);
    border: 1px solid var(--playingcard-border-color);
    border-radius: 12px;
    transform: rotateY(180deg);
    padding: 20px;
    overflow: auto;
    color: var(--text-on-dark-backgrounds);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.flip.clicked {
    transform: rotateY(-180deg);
}

.header-button {
    cursor: pointer;
    box-shadow: inset 0px 2px 50px var(--link-shadow-color);
    transition: color 0.8s ease, text-shadow 0.8s ease, box-shadow 0.8s ease;
    justify-self: center;
    margin: 15px;
    margin-top: 25px;
    border-radius: 10px;
    padding: 10px 20px;
    text-align: center;
}

.header-button:hover {
    color: var(--link-hover-text-color);
    text-shadow: 0 0 5px var(--link-hover-shadow-color);
    box-shadow: inset 0px 0px 10px var(--link-hover-shadow-color);
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* x                                                  Nutiseadmetele kohandamine                                                            x */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

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

}

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

}