html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

}

body {
    background-color: #4d4d4d;
    background: url('../img/memoryGameBkg3.jpg'); /* Background pattern from Subtle Patterns */
    background-size: 200px;
    font-family: 'Coda', sans-serif;
    color: white;
}

.container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    height: 100%;
}

h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 900;
}

/*
 * Styles for the deck of cards
 */

.deck {
    width: 360px;
    min-height: 360px;
    background: #373737; /*linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);*/
    padding: 10px;
    border-radius: 10px;
    box-shadow: 12px 15px 8px 0 rgba(51, 51, 51, 0.5);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 3em;
}

.deck .card {
    height: 75px;
    width: 75px;
    background: #524a44;
    font-size: 0;
    color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.28);
    transition: 300ms all ease-in-out;
}

.deck .card.open {
    transform: rotateY(180deg);/*LG Changed*/
    background: #d14d2d; /*#02b3e4;*/
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.28);
    cursor: default;
}

.deck .card.show {
    font-size: 25px;
}

.deck .card.match {
    cursor: default;
    background: #5c8347;/*#02ccba;*/
    font-size: 18px;
}

/*
 * Styles for the Score Panel
 */

.score-panel {
    text-align: left;
    width: 345px;
    margin-bottom: 10px;
}

.score-panel .stars, ul.final-score {
    margin: 0;
    padding: 0;
    display: inline-block;
    margin: 0 5px 0 0;
}

.score-panel .stars li, ul.final-score li {
    list-style: none;
    display: inline-block;
}

.score-panel .clock {
    padding: 0;
    display: inline-block;
    margin: 0 25px 0 5px;
    float: right;
}

.score-panel .restart-clock {
    float: right;
    cursor: pointer;
    transition: 100ms ease-in-out;
}

.score-panel .restart-clock:hover {
    color: white!important;
}

/* game over overlay styles*/
#game-over-overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 0;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 500ms ease-in-out;
}

#game-over-overlay.show {
    height: 100%;
}

.game-over-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* 100% width */
    text-align: center;
}

h1#game-over-header {
    font-size: 4em;
}

h1.fa-repeat {
    cursor: pointer;
    margin-top: 100px;
    font-size: 4em;
    transition: 100ms ease-in-out;
}

h1.fa-repeat:hover {
    color: white!important;
}

/* color styles */
.game-orange {
    color: #d14d2d!important;
}

.game-green {
    color: #5c8347!important;
}

.game-dark-yellow {
    color: #d9ac59!important;
}

.game-yellow {
    color: #ffec7a!important;
}

.game-brown {
    color: #524a44!important;
}

.game-dark-coffee {
    color: #373737!important;
}

.game-pewter {
    color: #9e9e9e!important;
}

.game-bkg-orange {
    background-color: #d14d2d!important;
}

.game-bkg-green {
    background-color: #5c8347!important;
}

.game-bkg-dark-yellow {
    background-color: #d9ac59!important;
}

.game-bkg-yellow {
    background-color: #ffec7a!important;
}

.game-bkg-brown {
    background-color: #524a44!important;
}

.game-bkg-dark-coffee {
    background-color: #373737!important;
}

.game-bkg-pewter {
    background-color: #9e9e9e!important;
}

/* media querries*/
@media only screen and (min-width: 500px) {

    .deck {
        width: 500px;
        min-height: 500px;
        padding: 32px;

    }

    .deck .card {
        height: 100px;
        width: 100px;
    }
}

@media only screen and (min-width: 769px) {
    .container {
        justify-content: center;
    }