.memory-container {display: flex;justify-content: center;align-items: center;flex-direction: column;}
.memory-container .deck {width: calc(85vmin - 125px); height: calc(85vmin - 125px); padding: 4vmin 2vmin 0vmin;; background: #dadada;border-radius: 4px;-webkit-box-shadow: 0 5px 10px rgb(22 22 22 / 15%);-moz-box-shadow: 0 5px 10px rgba(22, 22, 22, 0.15);box-shadow: 0 5px 10px rgb(22 22 22 / 15%);display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;margin: 0 0 25px;}
.memory-container .deck .card { height: auto;width: calc(25% - 4%);padding-top: calc(25% - 4%);margin: 0 2% 4%; background-position: 50% 50%; background-repeat: no-repeat; background-size:cover; font-size: 0; color: #ffffff; border-radius: 5px; border:none; cursor: pointer; display: flex; justify-content: center; align-items: center; -webkit-box-shadow: 0 5px 10px rgb(22 22 22 / 15%); -moz-box-shadow: 0 5px 10px rgba(22, 22, 22, 0.15); box-shadow: 0 5px 10px rgb(22 22 22 / 15%);}
.memory-container .deck .card.open { transform: rotateY(0); cursor: default; animation-name: flipInY; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-duration: .75s;}
.memory-container .deck .card:not(.match):not(.show) {background: #161616 !important;}
.memory-container .deck .card.match { cursor: default; animation-name: rubberBand; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-duration: .75s;}
.memory-container .deck .card.unmatched { animation-name: pulse; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-duration: .75s;}
.memory-container .deck .card.disabled { pointer-events: none; opacity: 0.9;} .memory-container .score-panel { text-align: left; margin-bottom: 10px;}
.memory-container .score-panel .restart { float: right; cursor: pointer;}
.memory-container .timer { display: inline-block; margin: 0 1rem;} .memory-container .overlay {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.7);transition: opacity 500ms;visibility: hidden;opacity: 0;display: -ms-flexbox;display: -webkit-flex;display: flex;-ms-flex-align: center;-webkit-align-items: center;align-items: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;}
.memory-container .overlay:target { visibility: visible; opacity: 1;}
.memory-container .popup { margin: 80px auto; padding: 40px; background: #ffffff; border-radius: 5px; max-width: 600px; width: 85%; position: relative; transition: all 5s ease-in-out; text-align:center; -webkit-box-shadow: 0 5px 10px rgb(22 22 22 / 15%); -moz-box-shadow: 0 5px 10px rgba(22, 22, 22, 0.15); box-shadow: 0 5px 10px rgb(22 22 22 / 15%);}
.memory-container .popup h3 {margin-bottom: 15px; }
.memory-container .popup .close { position: absolute; top: 15px; right: 20px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; font-family: 'Gotham';}
.memory-container .popup .close:hover { color: #EF8924}
.memory-container .popup .content { max-height: 30%; overflow: auto; text-align: center;}
.memory-container .popup .content p {margin-bottom: 20px;}
.memory-container .show { visibility: visible !important; opacity: 100 !important;}
.memory-container #play-again { margin: 0 !important; background: #EF8924; border: none;  border-radius: 0; font-family: 'Gotham'; color: #ffffff; text-transform: uppercase;letter-spacing: 1px; font-style: italic; line-height: 1; font-size: 18px !important; padding: 15px 35px; cursor: pointer;} @keyframes flipInY { from { 	transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 	animation-timing-function: ease-in; 	opacity: 0; }
40% { 	transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 	animation-timing-function: ease-in; }
60% { 	transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 	opacity: 1; }
80% { 	transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
to { 	transform: perspective(400px); }
}
@keyframes rubberBand { from { 	transform: scale3d(1, 1, 1); }
30% { 	transform: scale3d(1.25, 0.75, 1); }
40% { 	transform: scale3d(0.75, 1.25, 1); }
50% { 	transform: scale3d(1.15, 0.85, 1); }
65% { 	transform: scale3d(.95, 1.05, 1); }
75% { 	transform: scale3d(1.05, .95, 1); }
to { 	transform: scale3d(1, 1, 1); }
}
@keyframes pulse { from { 	transform: scale3d(1, 1, 1); }
50% { 	transform: scale3d(1.2, 1.2, 1.2); }
to { 	transform: scale3d(1, 1, 1); }
} @media (min-width: 768px) { 
.memory-container .popup { width: 60%; }
}