@import url('https://fonts.googleapis.com/css2?family=Poppins&display=block');
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=block');


:root {
	--background-blue: #11334E;
	--max-width: 850px;
}

body{
	color: #fff;
	}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body, input, button, select, option, textarea {
  	font-family: "Poppins", "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
  	font-size: 1rem;
  	line-height: 1.5;
  	color: #fff;
	}

img, video{ width: 100%; }	

/* LINKS -----------------------*/
a, a:link, a:visited, a:focus, .link{
	color: #229cc1;
	text-decoration: none;
	cursor: pointer;
	}
a:hover, .link:hover{ color: #49bfe3; }

#outer-wrapper{
	position: relative;
	max-width: var(--max-width);
	min-height: 95vh;
	background-color: var(--background-blue);
	padding-top: 2rem;
	padding-bottom: 2rem;
	z-index: 500;
	margin: 0 0 .5rem 0;
	}
#outer-wrapper.desert{
	min-height: 90vh;
	padding-bottom: 10rem;
	background-image: url("../images/desert-bg.svg");
	background-position-y: 101%;
	background-position-x: -30px;
    background-repeat: no-repeat;
    background-size: 450px;
	}


.center{ text-align: center; }

.side-padding{
	padding-left: 1rem;
	padding-right: 1rem;
	}
.right{ text-align:right; }

h1{
	text-align: center;
	font-family: "Poppins";
    font-weight: bold;
    font-size: 2rem;
    line-height: 2.25rem;
    padding: 1rem 0 2rem 0;
	}
h1>span{ 
	page-break-inside: avoid; 
	display:inline-block; 
	}	
h1.side-padding{
	padding-left: 5rem;
	padding-right: 5rem;
	}

h2{
	font-size: 1.25rem;
	line-height: 1.75rem;
	padding: 1rem 0;
	}

h2.banner{
	background-color: #fff;
	color: #253543;
	padding: .5rem;
	width: 100%;
	text-align: center;
	}

p {
	font-size: 1.15rem;
	line-height: 2rem;
	padding: .75rem 0;
	}
p + h2, ul + h2{ padding-top: 2rem; }

.hidden{ display:none; }

ul{
	margin: .75rem 0 .75rem 1rem;
	}	
li{
	font-size: 1.1rem;
	line-height: 1.4rem;
	padding: .5rem 0;
	}


#about #outer-wrapper.desert{ padding-bottom: 12rem; }
#about h2{ 
	padding-top: 2rem;
	padding-bottom: .5rem; 
	}	
#about p, li{ font-size: 1rem; }
#about li { padding: .35rem; }
#about h1 + h2{ padding-top: 0; } 
#about a, #about a:link, #about a:visited, #about a:focus, #about .link{ color: #8dc0d5; }
#about a:hover, #about .link:hover{ color:#b6dae9; }


#about footer a, #about footer a:link, #about footer a:visited, #about footer a:focus, #about footer .link{ color: #5996af; }
#about footer a:hover, #about footer .link:hover{ color: #013449; }


#options-wrapper{
	position: absolute;
	top: .5rem;
	right: .5rem;
	width: 4.25rem;
	background-color: #70899b;
	border-radius: .5rem;
	border: 2px solid #fff;
	z-index: 100;
	font-size: .75rem;
	line-height: .8rem;
	font-weight: bold;
	overflow: hidden;
	height: 85px;
	transition: height .3s ease-in-out;
	text-align: center;
	}	
#options-wrapper.open{ height: 435px; }

#options-wrapper>div{ 
	padding: .5rem .25rem; 
	cursor: pointer;
	}
#options-wrapper img{
	border: .2rem solid transparent;
	border-radius: 50%;
	width: 3rem;
	padding: .3rem;
	transition: transform .5s ease-in-out;
	transform: rotate(0deg);
	}
#options-wrapper.open div#options img{ transform: rotate(180deg);}	

@media (hover: hover) {
	#options-wrapper>div:hover img{ border-color: var(--background-blue); }	
	}



button{
	padding: .5rem 1rem;
	border-radius: .5rem;
	font-family: "Quicksand";
	font-weight: 1000;
	font-size: 1.3rem;
	letter-spacing: .2rem;
	outline: none;
	border: none;
	cursor: pointer;
	margin: .5rem;
	background-color: #55b7d5;
	box-shadow: 0 .4rem 0 #2b8dab;
	}
button:hover{ 
	background-color: #2b8dab; 
	box-shadow: 0 .4rem 0 #0d627c;
	}	

/* white */
button.white{
	background-color: #fff;
	color: #223643;
	box-shadow: 0 .4rem 0 #52cddf;
	}
button.white:hover{ 
	background-color: #b5f6ff; 
	box-shadow: 0 .4rem 0 #34a9bb;
	}

/* blue */
button.blue{
	color: #000;
	background-image: linear-gradient(#a1d9f7, #7fc2ec); 
	box-shadow: 0 .4rem 0 #2b8dab;
	}
button.blue:hover{ 
	background-image: linear-gradient(#7fc2ec, #4a99cb); 
	box-shadow: 0 .4rem 0 #0d627c;
	}	

button.complete {
	user-select: none;
	filter: brightness(.5);
	pointer-events: none;
	}




#intro-splashscreen{ 
	padding: .5rem; 
	margin: 0 auto;
	text-align: center;
	position: relative;
	max-width: 30rem;
	}

#intro-splashscreen img#background{
	border: .5rem solid #55b7d5;
	border-radius: 50%;
	animation: scaleBg 1s ease-in-out forwards;
	}
@keyframes scaleBg {
	0% { transform: scale(0); }
	70% { transform: scale(1.15); }
	100% { transform: scale(1); }
	}
#intro-splashscreen img#character{
	position: absolute;
	width: 50%;
    top: 20%;
    left: 50%;
    transform: translateX(-50%) scale(0);
	animation: scaleCharacter .75s ease-in-out .5s forwards;
	}
@keyframes scaleCharacter {
	from { transform: translateX(-50%) scale(0) rotate(500deg); }
	to { transform: translateX(-50%) scale(1) rotate(0deg); }
	}
#intro-splashscreen button{
	bottom: -.5rem;
    position: absolute;
    min-width: 10rem;
    left: 50%;
    transform: translateX(-50%) scale(0);
    animation: scaleButton .75s ease-in-out 1s forwards;
	}
@keyframes scaleButton{
	0% { transform: translateX(-50%) scale(0); }
	70% { transform: translateX(-50%) scale(1.15); }
	100% { transform: translateX(-50%) scale(1); }
	}


#intro-subtext{
	font-size: 1.5rem;	
	line-height: 2rem;
	padding-top: 2rem;
	}







#topic-select-wrapper{ 
	margin: 3rem 1rem; 
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
	}
.card-wrapper{ 
	padding: .5rem; 
	width: 13rem;
	margin: 0 auto;
	text-align: center;
	cursor: pointer;
	}	
.card-wrapper:hover{
	outline: .4rem solid #55b7d5;	
	border-radius: 1rem;
	}	
.card {
	display: flex;
	flex-wrap: wrap;
	height: 16rem;
	padding: 1rem;
    border-radius: .75rem;
    border: .5rem solid #fff;
    pointer-events: none;
	}
.card .title{ 
    font-size: 1.25rem;
    text-transform: uppercase;
    line-height: 1.4rem;
    font-weight: bold;
    color: #000;
	}
.card img{
	align-self: flex-end;
	background-repeat: no-repeat;
	background-position: center;
	height: 10rem;
	}

.blue{ background-image: linear-gradient(#94e0ff, #30baff); }
.card.blue img{ background-image: url('../images/card-background-spots/blue.svg');}

.gold{ background-image: linear-gradient(#fff29c, #f2cb3f); }
.card.gold img{ background-image: url('../images/card-background-spots/gold.svg');}

.orange{ background-image: linear-gradient(#ffb76b, #e6800c); }
.card.orange img{ background-image: url('../images/card-background-spots/orange.svg');}

.green{ background-image: linear-gradient(#b3eb8d, #7dbf2a); }
.card.green img{ background-image: url('../images/card-background-spots/green.svg');}

.purple{ background-image: linear-gradient(#d4d2ff, #958ee6); }
.card.purple img{ background-image: url('../images/card-background-spots/purple.svg');}

.card-wrapper.complete { pointer-events: none; }
.card-wrapper.complete .card {
	user-select: none;
	filter: brightness(.5);
	}







#content{ text-align:left; }
.term{
	text-decoration: underline;
	text-underline-offset: .35rem;
	color: #a2daff; 
	text-decoration-color: #a2daff;
	cursor: pointer;
	}
.term:hover{ 
	text-decoration-color: #6fc5ff;
	color: #6fc5ff;
	}
#results .term, #results .term:hover{
	text-decoration: none;
	color: unset;
	cursor: unset;
	}

#question-progress-bar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	}
#question-progress-bar div.number{
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #798f9f;
	border: 2px solid #798f9f;
	font-size: 1rem;
	font-weight: bold;
	border-radius: 50%;
	pointer-events: none;
	}
#question-progress-bar div.dash{
	pointer-events: none;
	height: 0;
	width: 1rem;
	border-top: 2px solid #798f9f;
	margin: 0 .25rem;
	}
#question-progress-bar div.number.solid{
	background-color: #fff;
	color: var(--background-blue);
	border-color: #fff;
	}	
#question-progress-bar div.dash.solid{
	border-color: #fff;
	}


#question-topic-wrapper{
	text-align: left;
	font-size: 1rem;
	text-transform: uppercase;
	font-weight: 200;
	color: #798f9f;
	margin: 2rem 0 .5rem 0;
	}



#topic-intro-wrapper .title{
	margin-top: 3rem;
	color: #000;
	font-size: 1.5rem;
	line-height: 2rem;
	padding: 1rem;
	font-weight: bold;
	text-align: center
	}
#topic-intro{
	margin: 1rem 0 2rem 0;
	display: grid;
	gap: 1rem;
	}
#topic-intro img{ 
	margin: 0 auto;
	width: min(16rem, 80%); 
	}



#choice-wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5%;
	padding: 1.5rem 0 3rem 0;
	}
#choice-wrapper>div{
	width: 40%;
	max-width: 12rem;
	outline: 2px solid #798f9f;
	padding: 1rem;
	cursor: pointer;
	border-radius: .5rem;
	text-align: center;
	}	
#choice-wrapper>div img{ width: 5rem; }	
#choice-wrapper > div:hover{ 
	background-color: #275470; 
	outline: .4rem solid #55b7d5;
	}	
#choice-wrapper .title{ 
	text-transform: uppercase; 
	font-size: 1.15rem;
	}

#question-character-feedback{
	width: 12rem;
	position: absolute;
	bottom: -2rem;
	right: .5rem;
	}	


#question-banner-feedback{
	padding: 1rem 2rem;
    font-family: poppins;
    font-weight: bold;
    font-size: 1.25rem;
    border-radius: 1.5rem;
    margin: .5rem 0;
    display: inline-block;
	}
#question-banner-feedback.correct{
	background-color: #2eef74;
	color: #134442;
	
	}
#question-banner-feedback.wrong{
	background-color: #a13739;
	color: #ffe5e4;
	}




#question-animation-wrapper{
	position: relative;
	margin: 4rem auto;
	}	
#poppers-wrapper{	
	position: absolute;
	width: 100%;
	top: -80%;
	left: 0;
	}




#question-feedback{ margin: 1rem 0 2rem 0; }


.score{
	background-color: #fff;
	border-radius: 1rem;
	padding: .25rem 1rem;
	display: inline-block;
	color: #000;
	border: .4rem solid #2eef74;
	font-size: 1.5rem;
	font-weight: bold;
	font-family: poppins;
	}

#topic-score-wrapper{
	margin: -.25rem auto 1rem auto;
	}
#topic-complete-splashscreen{ 
	padding: .5rem; 
	text-align: center;
	position: relative;
	}
#topic-complete-splashscreen img#topic-complete-background{
	border: .4rem solid #2eef74;
	border-radius: 50%;
	width: 20rem;
	height: 20rem;
	}
#topic-complete-splashscreen img#topic-complete-character{
	position: absolute;
	width: 12rem;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
	}
#topic-complete-splashscreen button{
	bottom: -.5rem;
    position: absolute;
    min-width: 10rem;
    left: 50%;
    transform: translateX(-50%);
	}


#all-topic-scores-wrapper{ 
	margin: 2rem 0;
 	display: grid;
 	grid-template-columns: auto auto;
 	justify-content: center;
 	gap: 0 1rem;
 	align-items: center;
	}
#all-topic-scores-wrapper .score{
	border: .2rem solid #2eef74;
    font-size: 1.25rem;
	border-radius: .75rem;
	} 
img#game-complete-character{
	margin: 1rem auto;
	width: 14rem;
	display: block;
    }



/* Shows on menu when game is complete */
#game-complete-banner-wrapper{ 
	padding: 0 80px;
    position: relative;
    text-align: center;
    margin: 0 -15% 0 -15%;
    width: 130%;
	}
#game-complete-banner{
	padding: .75rem 3.5rem;
	background-image: linear-gradient(#57c00b, #32890a); 
	position: relative;
	z-index: 100;
	}
#game-complete-banner p { 
	padding: 0; 
	line-height: 1.25rem;
	}
#game-complete-banner-score{
	color: #FFDF5D;
	font-size: 1.75rem;
	font-weight: bold;
	line-height: 1.75rem;
	margin-top: .5rem;
	}
.banner-end{
	position: absolute;
	bottom: -40px;
	z-index: 0;
	width: 120px;
	aspect-ratio: 1/1;
	background-image: url("../images/banner-end.svg");
	}
#banner-end-left { left: 0; } 
#banner-end-right { 
	right: 0; 
	transform: scaleX(-1);
	}

#excellent-work h1{ 
	padding-bottom: 0;
	padding-top: 0;
	}
#excellent-work p{ padding-bottom: 1rem; }
#excellent-work img{
	margin: 1rem auto;
	max-width: 20rem;
	display: block;
    }


footer{ 
	position: relative;
	font-size: .9rem;
	margin: 0 auto 1rem auto; 
	padding: 0 .5rem;
	max-width: var(--max-width);
	z-index: 300;
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	}


.grecaptcha-badge { visibility: hidden; }	




/* REMOVES BLUE HIGHLIGHT WHEN ELEMENT IS CLICKED --------------------- */
a:active, img:active, .link:active, button:active, div:active{
	-webkit-touch-callout: none;
  	-webkit-tap-highlight-color: transparent;
  	outline: none;
	}	

@media print, (min-width:420px) { 
	
	p {
		font-size: 1.25rem;
		line-height: 2.25rem;
		}
	
	#outer-wrapper{ margin: 1rem auto .5rem auto; }
	#outer-wrapper.desert{ background-size: 550px; }
	.side-padding{
		padding-left: 3rem;
		padding-right: 3rem;
		}	
	#choice-wrapper{ padding-bottom: 7rem; }
	#choice-wrapper>div img { width: 7rem; }
    #question-character-feedback{
		width: 16rem;
		right: 2rem;
		bottom: -2.5rem;
		}

	#game-complete-banner-wrapper{
		margin: 1rem -5% 0 -5%;
    	width: 110%;
		}
	#game-complete-banner{ padding: 1.5rem 1rem; }
	#game-complete-banner-score{
		font-size: 2rem;
		margin-top: 1rem;
		}	

}


@media print, (min-width:620px) { 


	#topic-intro-wrapper .title{ margin-top: 6rem; }
	
	#topic-intro{
		margin: 3rem 0 2rem 0;
		grid-template-columns: 14rem auto;
		align-items: center;
		gap: 2rem;
	}
	#topic-intro img{ width:100%; }
}


@media print, (min-width:850px) { 
	#outer-wrapper{
		border-radius: 1rem;
		}
	
}