/* General body styling */
html {
	box-sizing : border-box;
}


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


body {
	width : 100%;
	height : 100%;
	margin : 0;
	padding : 0;
	color : #fff;
}


body {
    background : linear-gradient(to bottom right, #EE7752, #E73C7E, #23A6D5, #23D5AB);
	background-size : 400% 400%;
	animation : Gradient 50s ease infinite;
	font-family : 'Lato', cursive;
}


h1 {
	font-family : 'Lato', sans-serif;
	font-weight : 300;
}


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

/* Header  and score styles*/
.game-header {
	font-weight : 600;
	text-align : center;
	padding-top : 100px;
}


.header-sub {
	text-align : center;
	font-weight : 100;
	margin : 0;
}


.header-sub a {
	color : #fff;
}


.score-panel {
	text-align : left;
	margin-bottom : 20px;
	font-size : 20px;
}


.score-panel .stars {
	margin : 0;
	padding : 0;
	display : inline-block;
	margin : 0 10px 0 0;
	float : left;
}


.score-panel .stars li {
	list-style : none;
	display : inline-block;
	color : #ffd700;
}


.timer {
	margin : 2px;
	float : right;
}


.score-panel .restart {
	float : right;
	cursor : pointer;
	padding-right : 20px;
	display : inline-block;
}

/* Cards Styling */

.deck {
	width : 660px;
	min-height : 680px;
    background : linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
	padding : 32px;
	border-radius : 10px;
	box-shadow : 12px 15px 20px 0 rgb(46 61 73 / 0.5);
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	align-items : center;
	margin : 0 0 3em;
}


.deck .card {
	height : 125px;
	width : 125px;
	background : #2e3d49;
	font-size : 0;
	color : #ffffff;
	border-radius : 8px;
	cursor : pointer;
	display : flex;
	justify-content : center;
	align-items : center;
	box-shadow : 5px 2px 20px 0 rgb(46 61 73 / 0.5);
}


.deck .card.open {
	transform : rotateY(0);
	background : #02b3e4;
	cursor : default;
}


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


.deck .card.match {
	cursor : default;
	background : #02ccba;
	font-size : 40px;
}

.deck .card.unmatched {
	background : red;
	cursor : default;
}


.deck .card.disabled {
	pointer-events : none;
}

/* Popup Styling */
.message {
	position : fixed;
	background : rgb(0 75 255 / 0.4);
	transition : opacity 400ms;
	visibility : hidden;
	opacity : 0;
	top : 0;
	bottom : 0;
	left : 0;
	right : 0;
}


.showup {
	margin : 72px auto;
	padding : 21px;
	background : #ff69b4;
	border-radius : 6px;
	width : 88%;
	position : relative;
	font-family : 'Lato', sans-serif;
}


.showup h2 {
	font-family : 'Lato', serif;
	font-weight: 600;
}


.showup .close {
	position : absolute;
	top : 21px;
	right : 32px;
	transition : all 200ms;
	font-size : 32px;
	font-weight : bold;
	text-decoration : none;
	color : #333;
}


.popup .close:hover {
	color: #E5F720;
}


.showup .congratulation, .stats {
	max-height : 50%;
	overflow : auto;
	text-align : center;
}


.show {
	visibility : visible;
	opacity : 1;
}


.message h2 {
	text-align : center;
}


#star-rating li {
	display : inline-block;
}


#play-again {
	border-radius : 5px;
	background-color : #96beff;
	color : #ffffff;
	padding : 10px;
	font-size : 30px;
	display : block;
	margin : auto;
	width : auto;
}

/* Background animation */

@keyframes Gradient {
	0% {
		background-position : 0% 50%;
}
	50% {
		background-position : 100% 50%;
}
	100% {
		background-position : 0% 50%;
	}
} 

/*
 * Media queries
 */

/* For mobile phone */
@media screen and (max-width: 700px) {
    body {
        display: flex;
        justify-content: center;
        font-weight: 100;
        font-size: 15px;
        background : linear-gradient(to bottom right, #EE7752, #E73C7E, #23A6D5, #23D5AB);
		background-size : 400% 400%;
		animation : Gradient 50s ease infinite;
    }
    
    .deck {
        margin: 0 2px;
        min-height: auto;
        padding: 0;
        width: 100%;
    }
    
    .deck .card {
        flex-basis: 24%;
        margin: 1px;
    }
    
    .message {
        top: 10%;
    }
    
    @keyframes Gradient {
	0% {
		background-position : 0% 50%;
}
	50% {
		background-position : 100% 50%;
}
	100% {
		background-position : 0% 50%;
	}
} 

}

/* Tablet and higher resolution screens */
@media screen and (min-height: 750px) {
    body {
        display: flex;
        justify-content: center;
        background : linear-gradient(to bottom right, #EE7752, #E73C7E, #23A6D5, #23D5AB);
		background-size : 400% 400%;
		animation : Gradient 50s ease infinite;
    }
    @keyframes Gradient {
	0% {
		background-position : 0% 50%;
}
	50% {
		background-position : 100% 50%;
}
	100% {
		background-position : 0% 50%;
	}
} 

}