ol, ul {
    list-style: none;
}

#canvas{
      max-width: 100%;
}
.game-board {
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.game-grid-row {
    display: flex;
    flex-wrap: nowrap;
}

.game-card {
    width: 4.5em;
    height: 4.5em;
    background-color: #d03c28;
    margin: 2px;
    cursor: pointer;
    position: relative;
}
.game-card.open, .game-card.show, .game-card.match{
  background-color: #414793;
}
.game-card-img {
    visibility: hidden;
    object-fit: cover;
    width: 4.5em;
    height: 4.5em;
}

.show-img {
    visibility: visible;
    animation: animateShowImage 0.4s linear alternate;
}

.disabled {
    pointer-events: none;
}
/* Animations */
@keyframes animateTop {
    from { top: -300px; opacity: 0; }
    to { top: 5%; opacity: 1; }
}

@-moz-keyframes animateTop {
    from { top: -300px; opacity: 0; }
    to { top: 5%; opacity: 1; }
}

@-webkit-keyframes animateTop {
    from { top: -300px; opacity: 0; }
    to { top: 5%; opacity: 1; }
}

@keyframes animateIcons {
    0% { top: 0em; left: 0em; }
    40% { top: 0em; left: 0em; }
    43% { top: -0.7em; left: 0em; }
    46% { top: 0em; left: -0.3em; }
    48% { top: -0.4em; left: 0.3em; }
    50% { top: 0em; left: 0em; }
    100% { top: 0em; left: 0em; }
}

@-moz-keyframes animateIcons {
    0% { top: 0em; left: 0em; }
    40% { top: 0em; left: 0em; }
    43% { top: -0.7em; left: 0em; }
    46% { top: 0em; left: -0.3em; }
    48% { top: -0.4em; left: 0.3em; }
    50% { top: 0em; left: 0em; }
    100% { top: 0em; left: 0em; }
}

@-webkit-keyframes animateIcons {
    0% { top: 0em; left: 0em; }
    40% { top: 0em; left: 0em; }
    43% { top: -0.7em; left: 0em; }
    46% { top: 0em; left: -0.3em; }
    48% { top: -0.4em; left: 0.3em; }
    50% { top: 0em; left: 0em; }
    100% { top: 0em; left: 0em; }
}

@keyframes animateCloseIcon {
    0% { top: 0em; }
    40% { top: 0em; }
    43% { top: -0.2em; }
    46% { top: 0em; }
    48% { top: 0.2em; }
    50% { top: 0em; }
    100% { top: 0em; }
}

@-moz-keyframes animateCloseIcon {
    0% { top: 0em; }
    40% { top: 0em; }
    43% { top: -0.1em; }
    46% { top: 0em; }
    48% { top: 0.1em; }
    50% { top: 0em; }
    100% { top: 0em; }
}

@-webkit-keyframes animateCloseIcon {
    0% { top: 0em; }
    40% { top: 0em; }
    43% { top: -0.1em; }
    46% { top: 0em; }
    48% { top: 0.1em; }
    50% { top: 0em; }
    100% { top: 0em; }
}

@keyframes animateShowImage {
    0% { transform: rotateY(90deg); opacity: 0;}
    100%{ transform: rotateY(0); opacity: 1; }
}

@-webkit-keyframes animateShowImage {
    0% { transform: rotateY(90deg); opacity: 0;}
    100%{ transform: rotateY(0); opacity: 1; }
}

@-moz-keyframes animateShowImage {
    0% { transform: rotateY(90deg); opacity: 0;}
    100%{ transform: rotateY(0); opacity: 1; }
}

@media only screen and (min-width: 600px) and (max-width: 767px) {
    .game-card, .game-card-img {
        width: 100%;
        height: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .game-card, .game-card-img {
        width: 100%;
        height: 100%;
    }
}

@media only screen and (min-width: 992px) {

    .game-card, .game-card-img {
        width: 100%;
        height: 100%;
    }
}