/* Variables */
:root{
    --size: 10vmin;
    --numCols: 1;
}

/* Rules for the game board */
#board{
    /*Colors*/
    background-color: navy;

    /*Sizing*/
    height: 100%;

    /*Display*/
    display: grid;
    grid-template-columns: repeat(var(--numCols),1fr);

    /*Alignment*/
    align-items: center;
    place-items: center;
}

/*Cards*/
.flip-card{
    /*Colors*/
    background-color: transparent;
    /*Sizing*/
    width: var(--size);
    height: var(--size);
    /*State*/
    perspective: 1000px;
}
.flip-card-inner{
    /*Colors*/
    box-shadow: 0 4px 10px 0 black;
    /*Sizing*/
    width: 100%;
    height: 100%;
    /*Positioning*/
    position: relative;
    /*Alignment*/
    text-align: center;
    /*Animation*/
    transition: transform .5s;
    transform-style: preserve-3d;
    /*State*/
    pointer-events: none;
    /*Clicks wont propagate to child elements*/
}

/* Flip selected and matched cards */
.flip-card .flip-card-inner:is(.selected,.matched){
    /*State*/
    transform: rotateY(180deg);
}
/* Common rules for back and front of cards */
.flip-card-front,
.flip-card-back{
    /*Sizing*/
    width: 100%;
    height: 100%;
    /*Positioning*/
    position: absolute;
    /*Display*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
/*Front of the card*/
.flip-card-front{
    /*Appearance*/
    background-image: url("../images/ui/CtrlPlay.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
}

/*Back of the card*/
.flip-card-back{
    /*Colors*/
    background-color: black;
    /*State*/
    transform: rotateY(180deg);
}
.flip-card-back>img{
    /*Sizing*/
    width: 100%;
    height: 100%;
}
.flip-card-inner.matched .flip-card-back>img{
    opacity: .2;
}