/* css vars */
:root {
    --page_width: 800px;
    --page_height: 1280px;
    --page_bgcolor: #0C1774;
}

/* css reset */
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
html, body { height: 100%; font-family: Calibri, 'Trebuchet MS', sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
img, picture, video, canvas, svg {display: block; max-width: 100%; height: auto;}
input, button, textarea, select {font: inherit; color: inherit; border: none; background: none; outline: none;}
a {text-decoration: none; color: inherit;}
ul, ol {list-style: none;}

/* css layout */
#page, #intro, #juego, #resultado {width:var(--page_width); height:var(--page_height); overflow: hidden;}
#page {position: relative; margin: 0 auto;}
#intro, #juego, #resultado { 
    position: absolute; top: 0; left: 100%; transition: left 0.5s ease;
    background-repeat: no-repeat;  background-position: center; background-size: contain;
}

/* css style */
html, body {background-color:var(--page_bgcolor);}
body {/*background:var(--page_bgcolor) url('loading.gif') no-repeat center; background-size: 50px;*/}
#intro {background-image: url('pantalla-intro.png');}
#juego {background-image:url('pantalla-juego.png');}


#contador {
    position: absolute; bottom: 0px; left: 150px; width: 500px;
    padding: 5px 50px; background-color: #000; color:#fff; 
    font-size: 2.5vw; line-height: 1; vertical-align: middle; text-align: center;
}


/* juego */
#game-board {
    margin: 170px auto 20px 20px;
    display: flex; flex-wrap: wrap; justify-content: center;
}

.card {
    position: relative;  user-select: none;
    width: 249px; height: 249px; overflow: hidden;
    flex-shrink: 0; flex-shrink: 0; flex-basis: auto;
    margin-bottom: 22px;
}
.card:nth-child(3n + 2) {margin-top: 22px; margin-bottom: 0;}

.card img, .card .cover {}



.cover {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: url('item-0.png') no-repeat center; background-size: contain;
    cursor: pointer;
}
.flipped .cover, .matched .cover {display: none;}