/* general styles */
body {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: relative;
}
img {
    margin: 20px;
    border: 8px solid royalblue;
    border-radius: 8px;
    box-shadow: 6px 6px 10px hsla(300,15%,25%,0.3) inset;
    background-color: white;
}

label {
    font-size: large;
}

/* class styles */
img.solved {
    margin: 20px;
    border: 8px solid olivedrab;
    border-radius: 8px;
    animation-name: pairAnimation;
    animation-duration: 0.3s;
    animation-iteration-count: 6;
}

@keyframes pairAnimation {
    0% {
        border: 8px solid rgb(240,240,200);
    }
    100% {
        border: 8px dotted olivedrab;
    }
}

.centered-white {
    margin: 1em auto;
    padding: 0.2em;
    text-align: center;
    color: white;
}

.notdisplayed {
    display: none;
}
.gameover{
    position: absolute;
    z-index: 100000;
    top: calc(50% - 3em);
    left: calc(50% - 20em);
    width: 40em;
    /* top: 40%; */
    /* transform: translate(-216px, 0px);  (-50%, 0px) */
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    /*
    min-width: 410px;
    max-width: 410px; */
    /* width: 400px; */
    /*border:2px solid tomato;*/
    background-color: royalblue;
    color: black;
    opacity: 0.85;
    border: 6px dotted #2f3e46;
    border-radius: 15px;
}

div.wonClass {
    /* width: 1030px; */
    padding: 20pt;
    margin: auto;
    border: 8px solid olivedrab;
    border-radius: 8px;
    animation-name: solvedAnimation;
    animation-duration: 1.2s;
    animation-iteration-count: 2;
    animation-fill-mode: backwards; /* forwards; */
    animation-direction: alternate;  
}

@keyframes solvedAnimation {
    0% {
        background: #cad2c5;
    }
    25% {
        background: #84a98c;
    }
    50% {
        background: #52796f;
    }
    75% {
        background: #354f52;
    }
    100% {
        background: #2f3e46;
    }
}

/* id styles */
div#myHead {
    margin:30px;
}

div#mainContainer {
    display: flex; /*grid*/
    /*grid-gap: 5px; */
    flex-wrap: wrap;
    margin:10em;
    align-content: center;
    justify-content: center; /*space-evenly;*/
    /*align-items: center;
    justify-items: center; */
    /*max-width: 1100px;*/
    /*grid-template-columns: auto 1fr 1fr 1fr 1fr auto */
    position: relative;
    z-index: 1;
    /* width: 1030px; /*  4*240 + 90  */
    border: 8px solid white;
    padding: 20pt;
    margin: auto;
    background-color: rgb(220, 220, 220);
}

div#feedBack {
    margin: 40px auto;
    text-align: center;
}
label#lblCount {
    font-size: x-large;
    color: crimson;
}
div#info {
    margin: 5px auto;
    text-align: center;
}