html {
	font-size:62.5%;
}
body {
	font-family: Arial, sans-serif;
	font-size:1.6em;
}

* {
	box-sizing: border-box;
}

#container {
	margin: 0 auto;
	width:95%;
}


.question {
	margin: 0 auto;
	width:90%;
	height:auto;
	margin-bottom:1%;
	padding:1%;
	font-weight:bold;
	line-height:1.3em;
	font-size:1.1em;
}

.answer {
	margin: 0 auto;
	width:90%;
	height:45px;
	border: 1px solid gray;
	margin-bottom:0.5%;
	padding:1%;
	cursor:pointer;
}

.explanation {
	margin: 0 auto;
	width:90%;
	height:auto;
	margin-bottom:1%;
	padding:1%;
	line-height:20px;
	font-style:italic;
	visibility:hidden;
}

#update {
	width: 90%;
	height:40px;
	margin:1% auto;
	text-align:center;
	visibility:visible;
}

#finish {
	width: 90%;
	height:40px;
	margin:0 auto;
	text-align:center;
	visibility:hidden;
}

input[type='submit'], input[type='button'] {
	width: 65%;
	height: 100%;
	background-color:navy;
	text-align: center;
	color: white;
	padding-top:8px;
	cursor:pointer;
	border-radius:8px;
	font:bold 16px Arial, sans-serif;
}


.photo_answer {
  flex: 33.33%;
  padding: 5px;
}

img {
  width: 100%;
}

figcaption {
   width: 100%;
   color:black;
   font-family: Arial, sans-serif;
   font-weight:700;
   padding: 0.25em 0.25em;
   font-size: 0.8em;
   line-height: 1.0em;
   text-align: center;
}

/* prevents the photo quiz elements from becoming abnormally big on a large screen */
@media only screen and (min-width: 1000px) {
	#container {
		width: 70%;
	}
}