@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

:root{
	--bottomCharacterMargin: 55px;
	--characterAreaHeight: calc(100dvh - 310px);/* dvh = device height incuding status bar */
	--animalSizeRatio: .2;
	--bagHeight: calc(var(--characterAreaHeight) * .7); /* make bag 70% of total area */
	--animalHeight: calc(calc(var(--characterAreaHeight) / 1.5) * var(--animalSizeRatio));
}

#confetti-canvas{
	position: absolute;
	left: 0;
	top: 0;
}

body{
	margin:0;
	overflow:hidden;
	font-family: 'Roboto';
}

#alertOverlay {
  position: fixed; 
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(51,51,51, 0.8);
	z-index:10000;
}

#alertBar {
	text-align:center;
	margin: auto;
	position: absolute;
	height:100%;
	top: 0; left: 0; bottom: 0; right: 0;
	display: block;  
	padding:5px;
	border-radius: 7px;
	border: 2px solid #000;
	background-color: yellow;
	max-width:95%;
}

#loadingOverlay {
  position: fixed; 
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(51,51,51, 0.8);
	z-index:10010;
}

#loadingBar {
  text-align:center;
  margin: auto;
  position: absolute;
  height:100%;
  top: 0; left: 0; bottom: 0; right: 0;
  display: block;  
  padding:5px;
  border-radius: 7px;
  border: 2px solid #000;
  background-color: yellow;
  max-width:95%;
}

#floatingTextFrame{
	left: 0;
    /* line-height: 200px; */
    /* margin-top: -100px; */
    position: absolute;
    text-align: center;
    top: 70px;
    width: 90%;
	margin-left: 5%;
    font-size: 30px;
    font-weight: bold;
    color: #3ab81e;
    z-index: 1000000;
}

#primary{
	background: #FFFDE5;
	background-image: url('../img/Animal-Pals-Splash-Screen.jpg');
	background-size: 100% 100%;
	width: 100vw;
	height:100dvh;

	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;  
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
}

#finishedSub{
  padding: 4px;
  height:calc(100dvh - 50px);
  overflow-y: scroll;
}

.boxStyle{
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5), -1px -1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5), -1px 1px 0 rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 1px 3px 14px -3px rgba(0,0,0,1);
	-moz-box-shadow: 1px 3px 14px -3px rgba(0,0,0,1);
	box-shadow: 1px 3px 14px -3px rgba(0,0,0,1);
}

.boxStyle.noshadow {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	}

.topBar{
	background: #005826;
	color:#FFF;
	font-weight: bold;
	text-align: center;
	font-size: 1.2em;
	padding:5px 0 5px 0;
	border-bottom: 1px solid #000;
}
.topBar span{
	white-space: nowrap;
}

#codeArea{
	text-align: center;
	
}

#enterCodeText, #catEnterCodeText{
	font-size: 1.2em;
	font-weight: bold;
	margin: 20px 0 10px 0;
	font-family: 'Lato', sans-serif;
}

#scanLine, #catScanLine{
	text-align: center;
}

#codeField, #catCodeField{
	display:inline-block;
	font-family: 'Roboto', sans-serif;
	font-size:28px;
	line-height:40px;
	height: 40px;
	text-align:right;
	margin:3px 0 2px 5px;
	border:solid 1px #707070;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF;
	width:115px;
	padding: 0 30px 0 5px;
	box-sizing:border-box;
	outline-color: rgb(118, 118, 118);
}
#codeField::-webkit-input-placeholder {
  color:#ffb6b6;
}
#catCodeField{
  width:165px;
}
#clearButton, #catClearButton{
	margin-left: -32px;
	position: absolute;
	padding-top: 10px;
}
#catClearButton{
  padding-top: 17px;
}

.fancyButton{
	/* text */
	text-decoration: 		none;
	font-weight: 			bold;
	text-shadow: 			1px 1px 0 hsl(88, 70%, 30%),
-1px -1px 0 hsl(88, 70%, 30%),
1px -1px 0 hsl(88, 70%, 30%),
-1px 1px 0 hsl(88, 70%, 30%),
0px 1px 0 hsl(88, 70%, 30%),
1px 0px 0 hsl(88, 70%, 30%),
0px -1px 0 hsl(88, 70%, 30%),
-1px 0px 0 hsl(88, 70%, 30%),rgba(255,255,255,.5) 0 1px 0;	
	
/* layout */
padding: .1em .4em 0 .4em;
display: inline-block;
border-radius: 	8px;
/* margin-bottom: 30px; */
	
	
/* effects */
	border-top: 		1px solid rgba(255,255,255,0.8);
	color: 				hsl(0, 0%, 100%) !important;
	
	background-color: 	hsl(88, 70%, 60%);
	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	border: 1px solid rgba(2, 42, 19, 0.21) !important;
}

.fancyButton[data-size="medium"]{
  font-size: 1.2em;
}
.fancyButton[data-color="red"]{
  background-color: 	hsl(0, 70%, 60%);
  box-shadow: inset rgba(255,254,254,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */          hsl(20, 70%, 40%) 0 .1em 3px, hsl(15, 70%, 30%) 0 .3em 1px, /* color border */         rgba(255,0,0,0.2) 0 .5em 5px
}

#goButton, #catGoButton{
	height:30px;
	width: 50px;
	font-size:1.5em;
}

#scanButton, #startGPSButton{
	height:35px;
	text-align: center;
	font-size:1.5em;
	margin-bottom: 10px;
}

#characterSection{
	display: grid;
	grid-template-columns: auto 40px;
}

#characterSide{
	grid-column: auto;
	text-align: center;
}

#animalPic{
	/* max-width: calc(var(--characterHeight) - 200px); *//* sets width, current height matches but may need adjustment */
	height: var(--animalHeight); /* 75% of the area */
	position: absolute;
	left: -40px;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	z-index: 1;
	bottom: calc((var(--bagHeight) + var(--bottomCharacterMargin)) - (var(--animalHeight) *.5));/* (Height of bag & bottom margin) - .5 of animal height to make animal's center be at top of bag */
}

@keyframes shake {
	0% {
		transform: translateY(0px);
	  }
	50% {
	  transform: translateY(50%);
	}
	100% {
	  transform: translateY(0);
	}
}
  
#animalPic.shake {
	animation: shake 500ms infinite alternate;
}


#bagPic, #veggieIcons{
	/* max-width: 100%; */
	height: var(--bagHeight);
	position: absolute;
	bottom: 55px;
	left: -40px;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	z-index: 2;
}
#veggieIcons{
	/* background: #ff000073; */
    width: 50%;
	aspect-ratio: 1/1;
	height: calc(var(--bagHeight) - 10px);
}
#veggieIcons img{
	width: 20%;
	/* transform:rotate(25deg); */
}

#progressContainer{
	height: var(--characterAreaHeight);
}

#progressIcons{
	overflow: visible;
    position: absolute;
    z-index: 20;
	height: var(--characterAreaHeight);
}
#progressIcons img{
	position: absolute;
    left: -3px;
}
#scoreDisplay{
	position: absolute;
    writing-mode: vertical-lr;
    text-orientation: upright;
    bottom: 10px;
    right: -33px;
    font-size: 1.5em;
    letter-spacing: -0.15em;
    color: #285e04;
    font-weight: bold;
    -webkit-text-stroke: 0.4px white;
}

#progressOuter {
    width: 30px;
    height: var(--characterAreaHeight);
    border: 2px solid #285e04;
    overflow: hidden;
    position: relative;
    border-radius: 15px;
}

#progressInner{
    width: 100%;
    overflow: hidden;
    position: absolute;
	background: rgb(184,164,7);
	background: linear-gradient(80deg, rgba(184,164,7,1) 0%, rgba(239,255,6,1) 50%, rgba(184,164,7,1) 100%);
    bottom: 0;
    height: 2%;
}



.pointsTitle{
	text-align: center;
}

.pointsList{
	padding: 0;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 15px;
}

.pointsList>li{
	list-style: none;
	display: inline-block;
	width:35px;
	height: 35px;
	font-size: 1.5em;
	font-weight: bold;
	border: 2px solid #006838;
	background: #FFF;
	margin:3px;
	margin-bottom: 8px;
	position: relative;
	-webkit-box-shadow: 1px 3px 14px -3px rgba(0,0,0,1);
	-moz-box-shadow: 1px 3px 14px -3px rgba(0,0,0,1);
	box-shadow: 1px 3px 14px -3px rgba(0,0,0,1);
}
.pointsList>li.blank{
	visibility: hidden;
}

.pointsList>li>img.checkmark{
	position: absolute;
	left: 0;
	top:-10px;
	width: 35px;
}

.pointsList>li>img.vegIcon{
	position: absolute;
	left: 0;
	top:0;
	width: 35px;
}

.pointsList>li>span{
	visibility: hidden;
}

#bottomWrapper{
	position: absolute;
	bottom:0px;
	width:100%;
	color:#FFF;
	font-weight: bold;
	text-align: center;
}

#bottomTabs>ul{
	padding: 0;
	margin: 0;
	text-align: center;
}

#bottomTabs>ul>li{
	list-style: none;
	background: #005826;
	color:#FFF;
	font-size: 1.1em;
	font-weight: bold;
	display: inline-block;
	padding: 0 12px 3px 12px;
	margin:0 5px;
	
	border: solid #000;
	border-width: 1px 1px 0 1px;
	border-radius: 10px 10px 0 0;
	-webkit-box-shadow: 1px 3px 14px -3px rgba(0,0,0,1);
	-moz-box-shadow: 1px 3px 14px -3px rgba(0,0,0,1);
	box-shadow: 1px 3px 14px -3px rgba(0,0,0,1);
}

#bottomArea .boxStyle{
	border-radius:10px 10px 0 0;
	text-align: center;
	display: inline-block;
	vertical-align: bottom;
	font-size: 1.1em;
}


#mesh, #mazeMapOverlay, #mazeGPSOverlay{
	position: fixed;
	top:0;
	left:0;
	background: rgba(0, 0, 0, 0.5);
	width: 100vw;
	height: 100dvh;
	z-index: 99;
	/*display: none;*/
}

#mazeGPSOverlay{
  background: rgba(255, 255, 255, 0.95);
}

#mazeMapOverlay, #mazeGPSOverlay{
  padding: 0;
}

#mapImg{
  max-width: 100vw;
  max-height: 100dvh;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  overflow: hidden;
}

/* #mapImg.rotated{
	transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
    max-width: 100dvh;
    max-height: 100vw;
} */

#mapClose, #gpsClose{
  	font-weight:bold;
  	font-size:24px;
 	right:15px;
	top:15px;
	position: fixed;
	z-index: 101;
  	background: rgba(199, 199, 199, 0.8);
	border:1px solid #000;
	color: rgba(0,0,0,0.8);
	width: 25px;
	text-align: center;
}
#gpsClose{
  padding: 0;
  margin: 0;
}
#meshClose{
	right:2px;
	top:2px;
	position: absolute;
	z-index: 101;
}

#gpsClose{
  background: #FFF;
  border-radius:3px;
  border: gray solid 1px;;
  color: rgba(72, 72, 72, 0.81);
}



#overlay{
	width: calc(100vw - 28px);
	height: calc(100dvh - 28px);
	margin: 14px;
	padding:15px;
	z-index: 100;
	position: fixed;
	top:0;
	left:0;
	background: #FFFDE5;
	border: 1px solid #000;
	box-sizing: border-box;
  overflow-y: scroll;
}

#qrScanCamera{
	max-height: calc(100dvh - 150px);
	max-width: calc((100dvh - 150px) / (4/3));
	width: calc(100vw - 60px);
	height: calc((100vw - 60px) / (3/4));
	background: #000;
}


/* Power Ups */
.pickABox{
	height: 80px;
}

/*Screen Size Media Queries*/
@media all and (min-height: 560px) {/*Average Phone*/
	#codeArea{
		margin-top: 40px;
		margin-bottom: 20px;
	}
}

/*Completion Page*/
.endingSmaller{
	font-size: .8em;
}

#entryForm>fieldset{
  border: none;
}

#entryForm>fieldset>input:first-child{
  border-radius: 5px 5px 0 0 ;
}

#entryForm>fieldset>input:last-child{
  border-radius: 0 0 5px 5px;
}

#entryForm input[type="text"]{
  float:left;
	font-family: 'Roboto', sans-serif;
  font-size:1em;
	border:solid 1px #939393;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF;
	padding: 0 30px 0 5px;
	box-sizing:border-box;
	outline-color: rgb(118, 118, 118);
  width:100%;
}

#entryForm input[type="checkbox"]{
  float: left;
}

#pointBreakdown{
	width: 100%;
	font-size: .8em;
}

#socialOptions{
  list-style: none;
  padding-left:10px;
}



/* Google Maps, needs adjustment */
#messageBar {
	text-align:center;
	margin: auto;
	position: absolute;
	height:100%;
	top: 0; left: 0; bottom: 0; right: 0;
	display: block;  
	padding:10px;
	border-radius: 7px;
	border: 2px solid #000;
	background-color: yellow;
	max-width:80%;
}
#map_canvas{
	width:100%;
	height:100dvh;
}
body{
	margin:0;
}
#icons{
	background:#99E699;
	border:1px solid #000;
	border-radius:5px;
	text-align:center;
}
#iconChoices{
	height:75px;
	overflow-y:auto;
}
#icons img{
	padding: 0 5px 5px 5px;
}
#iconcont{
	position: absolute; 
	left: 50%; 
	bottom:20px; 
	padding:2px; 
	width:98%;
}
.butStyle{
	background-color:#C00;
	display: block;
	border-radius:.6em;
	border:solid 2px #800;
	font-size:1em;
	font-weight:bold;
	padding: 6px 15px 6px 15px;
	margin-top:5px;
	color:#FFF;
	text-decoration:none;
	text-align:center;
	text-shadow: 0 0 10px #666;
	box-shadow: 0 0 10px #666;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	margin-right:5px;
}
.butStyle[data-inline="true"]
{
	display:inline-block;
	margin-bottom:5px;
	min-width:30px;
}


/* End Google Maps */









@media all and (min-height: 560px) and (min-width: 350px){/*Large Phone, iPhone 6*/
	body{
		font-size:1.2em;
	}
	.pointsList>li{
		width:40px;
		height: 40px;
	}
	.pointsList>li>img{
		position: absolute;
		width: 40px;
		height:auto;
		left: 0;
		top:-10px;
	}
	.pointsList>li>img.vegIcon, .pointsList>li>img.checkmark{
		width: 40px;
	}

}

@media all and (min-height: 700px) and (min-width: 400px){/*phablet*/
	/* body{
		font-size:1.4em;
	}
	.pointsList>li{
		width:48px;
		height: 46px;
	}
	.pointsList>li>img{
		position: absolute;
		width: 47px;
		height:auto;
		left: 0;
		top:-10px;
	}
	#clearButton{
		padding-top: 18px;
	}
	.fancyButton{
		padding: .2em .4em .3em .4em;
	}
	#triviaSelectList>tbody>tr>td{
		font-size:1.1em;
	} */
}

@media screen and (orientation:landscape) {
  #bottomWrapper{
    display: none;
  }
  body{
    overflow: auto;
  }
  #mesh, #primary, #mazeGPSOverlay{
    height: 100%;
  }
  #overlay{
    height: 100%;
  }
}