.memory-game table {
    /*
    Pro: Causes all the cells to have even size. Table renders faster.
    Con: Might make long words overflow the table cell. (Update: Have not seen this happen)
    */
    table-layout: fixed; /*No clear evidence that this does anything, but it should*/
    width: 100%;
}

.memory-game-flip {
    -webkit-perspective: 800px;
    perspective: 800px;
    /*width: 4em;*/
    /*height: 4em;*/
    /*max-width: 20em;*/
    /*max-height: 4em;*/
    position: relative;
    /*margin: 0 auto;*/
    padding: 0.3em;

}

.memory-game-flipped {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

/*.memory-game-flip {*/
    /*transition: all .2s ease-in-out;*/
/*}*/

/*.memory-game-flip:hover {*/
    /*transform: scale(1.02);*/
/*}*/

/*.memory-game-no-transform {*/
    /*transform: none !important;*/
/*}*/
.memory-game-card {
    will-change: transform;
    touch-action: manipulation; /*Makes clicking cards more responsive on mobile*/
    cursor: pointer;
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/

    /*
    IMPORTANT NOTICE!: This opacity was added to prevent Firefox from briefly showing the backface of the card when
    animating into place in the renderer. It has the side-effect of making the cards disappear while they animate.
    If this gets fixed in Firefox, the side-effect might disappear and the opacity can be removed.
    The effect the opacity has is that it creates a new Stacking Context,
    see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

    UPDATE: Changing the opacity seems to hide the backface of the card on all browsers,
    not sure what changed and firefox seems to be fixed now??? So this is no longer needed.
    */
    /*opacity: .95;*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    /*font-size: 3.5vw;*/
    background: #73c2f3;
    /*width: 100%;*/
    /*height: 100%;*/
    /*width: 5em;*/
    /*height: 9em;*/
    /*max-width: 4em;*/
    /*max-height: 4em;*/
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    /*box-shadow: 0 1px 3px rgb(215, 215, 215); !*Dropping this improves smoothness of the flip animation*!*/
    /*-webkit-transform:translate3d(0,0,0);*/
}

.memory-game-face {
    /*width: 100%;*/
    /*height: 100%;*/
    /*position: absolute;*/
    /*background: #73c2f3;*/

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    z-index: 2;
    /*font-family: Georgia;*/
    /*font-size: 2em;*/
    text-align: center;
    /*line-height: 200px;*/
}

.memory-game-front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateX(0deg);
}

.memory-game-back {
    /*will-change: transform;*/
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    /*background: white;*/
    color: white;
    text-shadow: -1px 1px 1px rgba(0,0,0,0.2);
}

.memory-game-word {
    font-size: 1.75em;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;

    padding-top: 25%;

    background: #73c2f3;
    transform: translate(-50%, -50%);
    /*will-change: transform;*/
}

.memory-game-back img {
    /*margin: 0 auto;*/
    /*max-width: 13em;*/
    padding: 0.3em;
    margin: 0 auto;
    /*max-width: -moz-available;*/

    background: #73c2f3;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    border-radius: 0;
}

.memory-game-alpha-div {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(255, 255, 255, 0.6);
    display: none;
}

.memory-game-message-div {
    position: absolute;
    top: 15%;
    display: inline-block;
    font-size: 1.5em;
    right: 5%;
    max-width: 86%;
    border: 2px dashed #505050;
    color: #505050;
}

.correct {
    background: #b1dda0 !important; /*Override the normal correct color for higher contrast*/
}



@media (min-width: 1025px) {
    .memory-game-word {
        /*font-size: 1.75em;*/
    }
}


/************ TABLET *************/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

    .memory-game-word {
        font-size: 1.5em;
    }

    .memory-game-back img {
        padding: 0.2em;
    }

    .memory-game-flip {
        padding: 0.2em;
    }
}


/************ MOBILE *************/
@media (max-width: 767px)  {
    #memory-game table {
        /*width:98%;*/
    }

    .memory-game-word {
        font-size: 1.5em;
    }

    .memory-game-back img {
        padding: 0.15em;
    }

    .memory-game-message-div {
        font-size: 1.5em;
    }
}

@media (max-width: 576px) {
    .memory-game-flip {
        padding: 0.1em;
    }

    .memory-game-word {
        font-size: 1.25em;
    }
}

@media (max-width: 480px) {
    .memory-game-word {
        font-size: 1em;
    }
}

@media (max-width: 375px) {
    .memory-game-word {
        font-size: 0.85em;
    }
}
/*
Chrome specific fix on backface visibility.
If visibility is hidden chrome does not show previously backfacing elements.
If visibility is visible ipad flickers.
*/
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .memory-game-card {
        backface-visibility: visible;
    }
    .memory-game-face {
        backface-visibility: visible;
    }
}
/*
Firefox specific fix on backface visibility.
If visibility is hidden chrome does not show previously backfacing elements.
If visibility is visible ipad flickers and if it is visible on chrome firefox shows backfacing elements.
*/
@-moz-document url-prefix() {
    .memory-game-card {
        backface-visibility: hidden;
    }
    .memory-game-face {
        backface-visibility: hidden;
    }
}