html{
    background-image: url('./img/rps_background.webp');
    background-size: cover;
    background-position: center;

    display: flex;
    justify-content: center;
    align-items: center;

    height: 100%;
    overflow: hidden;
}

@supports (height: 100dvh) {
    html {
        height: 100dvh !important;
    }
}

.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    overflow: hidden;
}

@media only screen and (max-width: 932px) {
    .flex-mobile{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1em;
        overflow: hidden;
        flex-direction: column;
        height: 100%;
    }
}

.container{
    width: 75vw;
    height: 75vh;
    padding: 1em;

    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 25px;

    background-color: rgba(0, 0, 0, .25);

    .field{
        height: 45%;
    }

    .score{
        height: 10%;
        font-size: x-large;
    }
}

.card{
    height: 255px;
    width: 255px;
    max-height: 100%;

    background-image: url('./img/rps_unknown.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 25px;
    font-size: 50px;
    overflow: hidden;

    color: transparent;
    color: rgba(255, 255, 255, .5);
}


.cardRock, .cardPaper, .cardScissors{
}
.cardRock{
    background-image: url('./img/rps_rock.webp');
}
.cardPaper{
    background-image: url('./img/rps_paper.webp');
}
.cardScissors{
    background-image: url('./img/rps_scissors.webp');
}