@charset "utf-8";
/* PetMEM Styles */

html{
	font-size: 2vw;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px;}
::-webkit-scrollbar-track { background: transparent;}
::-webkit-scrollbar-thumb {
    background: #737373;
    border-radius: .2rem;
}
::-webkit-scrollbar-thumb:hover {
    /* background: var(--lightgrey); */
}

@font-face {
    font-family: earthFont;
    src: url(Earth2073.ttf);
}

@keyframes flipF {	
   	0% {transform: rotateY(-180deg);}
    100%{transform: rotateY(0deg);}
}
@keyframes flipB {
    0% {transform: rotateY(0deg);}
    100% {transform: rotateY(180deg);}
}
/*
@keyframes final{
	0% {transform: scale(2); opacity: 0;}
	50% {transform: scale(1); opacity: 1;}
	100% {transform: scale(0); opacity: 0;}
}
*/


@media (max-width: 768px) {
	.btn{ font-size: 3vw !important; }

	/* messages */
	#game-message > div{ 
		font-size: 5vw !important; 
		padding: 4vw !important;
	}
	#game-message > div > p{ font-size: 4vw !important; }
	.bar{ font-size: 2vw !important; }

	#score-score{ font-size: 6vw !important; }
	#score-score > div{ font-size: 3vw !important; }

	#score-title{ font-size: 3vw !important;	}
	#score-title > p{ font-size: 2vw !important;	}

	.cardp{ font-size: 2vw !important; }

	.tab-link{
		border-top-left-radius: 10px !important;
		border-top-right-radius: 10px !important;
	}

	/* Help */
	.tab-content{
		font-size: 3.5vw !important;
	}
	.tab-content > span, .tab-content dt{
		font-size: 4vw !important;
	}
	

/* 	div {
	  font-size: 5vw;
	}
	#game-message > div:not(p){
		font-size: 7vw;
	}
	#game-message > p{
		font-size: 5vw;
	}
	.bar{
		font-size: 2vw !important;
	}
	#score-title{
		font-size: 3vw !important;
	}
	#score-help{
		font-size: 2vw !important;
		padding: 5px 3px;
		height: 2vw !important;
		border-width: 0.1vw;
	} */
}



h1{
	font-size: 15px;
}


body{
	font-family: earthFont;
	background-color: #737373;
	margin: 0px;
}
#wrapper{
	margin: 0px;
	
}

#menuscreen{
	text-align: center;
	position: absolute;
	background: #333; /* For browsers that do not support gradients */
	
    background: -webkit-linear-gradient(#333, #ccc); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#333, #ccc); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#333, #ccc); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#333, #ccc); /* Standard syntax */
	left: 0px;
	top: 0px;
	width: 100%;
	height:100%;
	display: none;	
}

/* Splash */
#menuscreen > img{
	display: block;
	margin: 0 auto;
	max-width: 100%;	
}

#main-container{
	/*position: relative;*/
	margin: 0px;
	width: 100%;	
	height:100%;
}

.btnHolder{
	position: absolute;	
	display:block;
	width: 100%;
	align-content: center;
}

.btn{
	text-align: center;
	cursor:pointer;
	font-size: 20px;
	display: inline;
	margin: 10px;
	padding: 5px auto;
	border-radius: 15px;
	background-color: #FFFFFF;
	border-width: 2px;
	border-style: solid;
	border-color: #000;
	max-width: 200px;
}

/******************* Tutorial ***********************/
.backscreen{
	display: none;
	position: fixed;
	left:0px;
	right:0px;
	width: 100%;
	height:100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 7;
}

#tutor{	
	position: fixed;
	background-color:#9E9E9E;
	border-style: solid;
	margin: 10%;	
	text-align: left;
	width: 80%;
	height: calc( 100vh - 21% ) ;
	overflow: hidden;
	border-radius: 20px;
	padding-bottom: 20px;
	
}



.tab-container {
	max-height: 100%;
	overflow-y: scroll;
	margin-bottom: 50px;
}

/* Tabs */
ul.tabs{
	margin: 0px;
	padding: 0px;
	padding-left: 10px;
	padding-top: 10px;
	list-style: none;
}
ul.tabs li{
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	
	color:#565555;
	background-color: #ccc;	
	display: inline-block;
	padding: 10px 15px;
	cursor: pointer;
}
ul.tabs li.current{
	background: #fff;
	color: #000;
}

.tab-content{
	display: none;
	background: #fff;
	padding: 15px;
	overflow-y: auto;
	max-height: 100%;
}
.tab-content > span{
	text-align: center;
	color: #009900;
	display: block;
	font-size: 25px;
}
.tab-content.current{
	display: inherit;	
}

.closeX{
	display: flex;
	justify-content: center;
	align-content: center;
	border-radius: 50%;
	background-color: #000;
	color: #fff;
	position: absolute;
	top: 10px;
	right:10px;
	cursor: pointer;
	padding: 0; 
	width: 20px;	
	height: 20px;
	/* text-align: center; */
}
.closeX > div{
	text-align: center;
	padding: 0;
}

.tut{
	background-color: #ddd;
	border-radius: 20px;
	border-style: solid;
/*	display: block;
	margin: 10px;
	padding: 20px;
	width: auto;*/	
	padding:10px;
	margin: 10px;
	overflow: auto;
}

.tutInner{
	/*background-color: #4F4F4F;*/
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	padding: 20px;
	overflow: auto;
}

.tab-content > img{
	width: 40%;
	margin: 20px;	
	float: left;
}

dl{
	
}
dt{
	color: #009900;
	font-size: 22px;
}

/******** Score ************/
#score-container{
	border-radius: 0px 0px 25px 25px;
	background-color: #C9C9C9;
	/* display: grid; */
	width: 98%;
	/* height: 150px; */
	margin-left: 1%;
	margin-right: 1%;
	
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-style: solid;
	
	border-color: #000;
	border-width: 2px;
	/* grid-template-columns: 40% 10% 40%;
	grid-template-rows: 75% 25%;	 */
}

/* Title Text */
#score-title{
	text-align: right;
	font-size: 18px;
	padding: 1rem;
	/* padding: 1rem; */
	/* grid-column: 3/5;
	grid-row:1; */
	/* margin: 5px;
	padding-right: 20px;
	padding-left: 30px;
	padding-top: 20px; */
	
}

#score-title > p{
	font-size: 14px; 
}

/*Help Btn*/
#score-help{
	height: fit-content;
	/* width:auto; */
	/* grid-column: 2/3;
	grid-row:1;	 */
	/* float:left; */
	/* height: 25px; */
}

/* Main Score holder Box*/
#score-score{
	font-size: 30px;
	text-align: center;
	/* height: fit-content; */
	/* grid-column: 1;
	grid-row:1; */
	/* width: 90%; */
	margin: 5px 5%;
	align-self: center;
	/* margin: 10px; */
	padding: 10px 0.5vw;
	
	background-color: #EFEFEF;
	border-radius: 10px;
	border-width: thin;
	border-style: solid;
}

#score-score > div{
	margin-top: 10px;
	font-size: 14px;
}

#score-bar{
	padding: 10px;
	font-size: 15px;
	/* margin-right: 10px; */
	/* grid-column: 1/5;
	grid-row:2; */
}

/************************ GAME ****************************/

#game-container{
	display: flex;
	flex-direction: column;
	flex: auto;
	align-content: center;
	/*height:100%;*/
}

#game-message{
	cursor:pointer;
	/* display: flex;
	align-items: center;
	justify-content: center; */
}


.barHolder{ 
	position: relative;
}

.bar{
	position: absolute;
	left: 0px;
	top:0px;
	text-align: right;
	font-size: 12px;	
	border: thin solid black;
	border-radius: 20px;
	color: #363636;
	padding: 0px 1rem;
	display: flex;
	align-content: center;
}

.message{
	position: fixed;
	left:0px;
	right:0px;
	width: 100%;
	height:100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 5;
	display: none;
	margin: 0px;	
}

#game-message > div{
	text-align: center;
	font-size: 25px;	
	width:auto;
	height:auto;
	margin-left:20%;
	margin-right:20%;
	margin-top:10%;
	background-color: #D1D1D1;
	border-color: #000000;
	border-radius: 15px;
	border-style: solid;
	border-width: medium;
	padding: 25px;
}

.message > div > p{	 font-size: 15px; }

/* Rows */
.cardRow{
	display: flex;
	flex-direction: row;
	flex: 1 0;
	justify-content: center;
	margin-top: 10px;
}

/* Smaller Media */
@media screen and (max-width: 500px) {
	.cards{	
		min-height: 20vh;
	}
}

@media screen and (min-width: 500px) {
	.cards{	
		min-height: 23vh;
		/* min-height: 100px; */
		
	}
}
/* Main Card */
.cards{
	cursor:pointer;
	flex-shrink: 1;
	width: 175px;	
	margin: 10px;
	perspective: 600px;
	overflow: visible;	
}

/* Final Anim cards */
.cardsFinal{
	width: 175px;
	display: none;
	top:0px;
	left:0px;
	position: absolute;
}

.cardsFinal > img{
	width: 100%;
	height: 100%;
}

.cardsInner, .cardsEffects, .cardsFinal{
	position: absolute;
	top: 0px;
	left: 0px;
}

/* the inner card style (front/back)*/
.cardsInner{
	backface-visibility: hidden;	
    transition: all 2s ease-in-out;	
	animation-duration: 500ms;	
	animation-fill-mode: forwards;
}
/* Right, Wrong divs */
.cardsEffects{

}

.cardp{
	text-align: center;
	position: absolute;
	font-size: 20px;
	top: 10px;
	right: 10px;
	display: none;
	padding: 1vw;
	background-color: #fff;
	border-style: solid;
	border-width: thin;
	border-radius: 5px;
	color: #000;
}

.cardp > div{
	padding: 3px;
	font-size: 16px;
	color:red;
}

.tenpxfont{
	font-size: 8px;
}

/* The Images in the cards */
.cardsInner > img, .cardsEffects > img{
	width: 100%;
	height: 100%;
}