html{
box-sizing:border-box;
}
*,
*::before,
*::after{
box-sizing:inherit;
}
html,
body{
width:100%;
height:100%;
margin:0;
padding:0;
text-align:center;
}
a:active {
outline:none;
}
a{color:#117fa9;
text-decoration:none;
}
a:hover{
text-decoration:underline;
color:#2b445e;
}
.sepdivider {
width:100%;
display:block;
border-top:1px dotted #c9952c;
}
.sepdividernoline {
width:100%;
display:block;
height:20px;
margin-top:10px;
margin-bottom:10px;
}
.instructions{
background-color:#fff;
width:330px;
margin:0px 10px 0px 10px;
padding:30px 25px 0px 25px;
text-align:center;
border-radius:10px;
justify-content:center;
align-items:center;
box-shadow:3px 2px 10px 0 rgba(46, 61, 73, 0.5);
}
.levelbuttons a{
display:block;
text-decoration:none;
background-color:#c9952c;
color:#fff;
font-size:16px;
height:auto;
width:175px;
margin:10px auto 10px auto;
padding:10px;
text-align:center;
border-radius:10px;
justify-content:center;
align-items:center;
box-shadow:3px 2px 10px 0 rgba(46, 61, 73, 0.5);
}
.levelbuttons a:hover{
display:block;
text-decoration:none;
background-color:#2b445e;
color:#fff;
font-size:16px;
height:auto;
width:175px;
margin:10px auto 10px auto;
padding:10px;
text-align:center;
border-radius:10px;
justify-content:center;
align-items:center;
box-shadow:3px 2px 10px 0 rgba(46, 61, 73, 0.5);
}
body{
background:#2b445e;
font-family:'arial', sans-serif;
font-size:16px;
color:white;
}
h1 {
font-family:'Noto Sans HK', sans-serif;
font-size:50px;
font-weight:500;
line-height:50px;
text-align:center;
margin-bottom:10px;
}
h2 {
font-family:'Noto Sans HK', sans-serif;
letter-spacing: 4px;
font-weight:100;
font-size:13px;
line-height:13px;
text-align:center;
padding-top:10px;
margin-bottom:25px;
}
h3 {
color:#2b445e;
font-family:'Noto Sans HK', sans-serif;
font-size:25px;
font-weight:500;
line-height:25px;
text-align:center;
margin-top:0px;
margin-bottom:0px;
}
h33 {
display:inline-block;
color:#2b445e;
font-family:'Noto Sans HK', sans-serif;
font-size:25px;
font-weight:500;
line-height:25px;
text-align:center;
padding-top:24px;
padding-bottom:10px;
}
h4 {
color:#2b445e;
font-family:'Noto Sans HK', sans-serif;
font-weight:100;
font-size:16px;
line-height:18px;
text-align:center;
padding-top:10px;
margin-bottom:25px;
}
h44 {
display:inline-block;
color:#2b445e;
font-family:'Noto Sans HK', sans-serif;
font-weight:100;
font-size:16px;
line-height:18px;
text-align:center;
padding-top:0px;
margin-bottom:0px;
}
h5 {
color:#2b445e;
font-family:'Noto Sans HK', sans-serif;
font-weight:100;
font-size:16px;
line-height:18px;
text-align:center;
}
.cardtitle {
color:#fff;
font-family:'Noto Sans HK', sans-serif;
font-size:16px;
font-weight:100;
line-height:18px;
text-align:center;
justify-content:center;
align-items:center;
margin-top:0px;
margin-bottom:0px;
}
.carddescription {
display:inline-block;
color:#fff;
font-family:'Noto Sans HK', sans-serif;
font-size:14px;
font-weight:100;
line-height:18px !important;
text-align:center;
justify-content:center;
align-items:center;
margin-top:0px;
margin-bottom:0px;
}
.gamefiller {
width:100%;
display:block;
color:rgba(255,255,255, 1.0);
font-family:'Noto Sans HK', sans-serif;
font-size:30px;
font-weight:500;
line-height:25px;
text-align:center;
justify-content:center;
align-items:center;
border-top:0px dotted #c9952c;
border-bottom:1px dotted #c9952c;
padding:70px 0px 70px 0px;
}
.menuback a {
color:#FFF;
font-family:'Noto Sans HK', sans-serif;
font-weight:200;
font-size:18px;
line-height:20px;
text-align:center;
}
.menuback a:hover {
color:#FFF;
text-decoration: underline;
font-family:'Noto Sans HK', sans-serif;
font-weight:200;
font-size:18px;
line-height:20px;
text-align:center;
}
.container {
display:flex;
width:370px;
padding-left:0px;
padding-right:0px;
margin-left:auto;
margin-right:auto;
justify-content:center;
align-items:center;
flex-direction:column;
}
/*
 * Styles for the deck of cards
 */
.deck {
width:100%;
background:#2b445e;
background-image:url('../images/mmam_background2.svg');
background-repeat:repeat;
background-position:center;
vertical-align:middle;
text-align:center;
padding:33px 25px 33px 25px;
border-radius:10px;
display:flex;
flex-wrap:wrap;
justify-content:space-around;
align-items:center;
margin: 0 0 20px;
}
.deck .card img {
width: 100%;
height: 100%;
display: none;
}
.deck .card.show img {
display: inline;
}
.deck .card.match img{
display: inline;
}
.deck .card{
height:3.7rem;
width:3.7rem;
margin:0.4rem 0.4rem;
background:#ffffff;
background-image:url('../images/mmam_logo.svg');
background-size:80%;
background-position:center;
vertical-align:middle;
background-repeat:no-repeat;
text-align:center;
font-size:0;
color:#ffffff;
border-radius:10px;
cursor:pointer;
display:flex;
justify-content:center;
align-items:center;
box-shadow:3px 2px 10px 0 rgba(46, 61, 73, 0.5);
}
.deck .card.open {
transform:rotateY(0);
background:#c9952c;
cursor:default;
animation-name:flipInY;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-duration: .75s;
}
.deck .card.show {
font-size: 33px;
}
.deck .card.match {
cursor: default;
background: #E5F720;
font-size: 33px;
animation-name: rubberBand;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-duration: .75s;
}
.deck .card.unmatched {
animation-name: pulse;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-duration: .75s;
background: #e2043b;
}
.deck .card.disabled {
pointer-events: none;
opacity: 0.9;
}
.logofooter{
display:block;
height:60px;
width:160px;
margin:20px;
background-image:url('../images/mmam_logo_gold.svg');
background-size:100%;
background-position:center;
vertical-align:middle;
background-repeat:no-repeat;
text-align:center;
font-size:10;
color:#ffffff;
}

/** Styles for the Score Panel*/

.score-panel {
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
}
.score-panel .stars {
margin: 0;
padding: 0;
display: inline-block;
margin: 0 5px 0 0;
}
.score-panel .stars li {
list-style: none;
display: inline-block;
}
.score-panel .restart {
float: right;
cursor: pointer;
}
.fa-star {
color: #FFD700;
}
.timer {
display: inline-block;
margin: 0 1rem;
}
/* Styles for congratulations modal*/
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.0);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
} 
.popup {
font-family:'Noto Sans HK', sans-serif;
color:#2b445e;
letter-spacing:0px;
font-weight:500;
font-size:20px;
line-height:25px;
margin:85px auto;
padding-top:40px;
padding-bottom:30px;
padding-left:30px;
padding-right:30px;
border:solid 0px;
background:#fff;
border-radius:10px;
width:400px;
position:relative;
transition:all 5s ease-in-out;
box-shadow:3px 2px 10px 0 rgba(46, 61, 73, 0.5);
}
.popup h2 {
margin-top: 0;
color: #2b445e;
font-family:'Noto Sans HK', sans-serif;
letter-spacing: 0px;
font-weight:500;
font-size:30px;
line-height:35px;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color:#c9952c;
}
.popup .close:hover {
color:#2b445e;
}
.popup .content-1,
.content-2 {
font-size:15px;
line-height:16px;
overflow: auto;
text-align: center;
}
.show {
visibility: visible !important;
opacity: 100 !important;
}
#starRating li {
display: inline-block;
}
#play-again {
font-family:'Noto Sans HK', sans-serif;
background-color:#c79437;
font-size:16px;
display: block;
margin:10px auto 10px auto;
padding:10px;
width:175px;
height:auto;
color: #ffffff;
border:solid 3px white;
border-radius: 10px;
}
#play-again:hover{
background-color:#2b445e;
outline:none !important;
}
/* animations */
@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);
}
}
/* For Tablets and larger screens****************/
@media (max-width: 768px) {
h1 {
font-family:'Noto Sans HK', sans-serif;
font-size:40px;
font-weight:500;
line-height:40px;
text-align:center;
margin-bottom:10px;
}
}
/****** Media queries***************************/
@media (max-width: 320px) {
.deck {
width: 100%;
padding:33px 25px 33px 25px;

}
.deck .card {
height: 4.7rem;
width: 4.7rem;
margin:0.1rem 0.1rem;
}
}
/* For Tablets and larger screens****************/
@media (min-width: 768px) {
h2 {
font-family:'Noto Sans HK', sans-serif;
letter-spacing: 5px;
font-weight:100;
font-size:20px;
line-height:20px;
text-align:center;
margin-bottom:30px;
}
.container {
display:flex;
width:768px;
padding-left:30px;
padding-right:30px;
margin-left:auto;
margin-right:auto;
justify-content:center;
align-items:center;
flex-direction:column;
} 
.popup {
font-family:'Noto Sans HK', sans-serif;
color:#2b445e;
letter-spacing:0px;
font-weight:500;
font-size:20px;
line-height:25px;
margin:290px auto;
padding-top:40px;
padding-bottom:30px;
padding-left:30px;
padding-right:30px;
border:solid 0px;
background:#fff;
border-radius:10px;
width:400px;
position:relative;
transition:all 5s ease-in-out;
box-shadow:3px 2px 10px 0 rgba(46, 61, 73, 0.5);
}
.deck {
width:680px;
height:680px;
background-image:url('../images/mmam_background.svg');
}
.deck .card {
height:135px;
width:135px;
margin:0.2rem 0.2rem;
}
.popup {
width:400px;
}
}