nav {
	width: 100%;
	background-color: lightskyblue;
}

nav ul{
	overflow: hidden;
	list-style-type: none;
}

nav ul li {
	float: left;
	/*margin-right: 10px;*/
}

nav ul li a {
	display: inline-block;
	color: #fff;
	background-color: lightskyblue;
	font-weight: bold;
	text-decoration: none;
	padding: 10px 20px;
}

nav ul li a:hover {
	color: #000;
	background-color: mediumaquamarine;
}

h1 {
	display: block;
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h2 {
    display: block;
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h3 { 
    display: block;
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

body {
	background-color: snow;
}

.container{
	height: 300px;
	/*border-style: solid;*/
	position: relative;
}

.card {
	position: absolute;
	width: 100%;
	height: 100%;
	transition: transform 1s;
	transform-style: preserve-3d;
}

.card div {
	position: absolute;
	height: 80%;
	width: 50%;
	padding: 10px;
	font-size: 200%;
	text-align:center;
	border: 1px 1px 1px 1px;
	border-style:solid;
	border-radius: 25px;
	top: 10%;
	left: 25%;
	display: table;
	backface-visibility: hidden;
}


.card .cardQuestion {
	background: lightskyblue;
}
.card .cardAnswer {
	background: mediumaquamarine;
	transform: rotateY(180deg);
}

.card.flipped {
	transform: rotateY(180deg);
}

#cardText, #cardAnswerText {
	display:table-cell;
	vertical-align: middle;
}

#buttonTable {
	margin: auto;
}

#buttonTable td {
	padding-left: 5px;
	padding-right: 5px;
}

.cardButtons {
	font-size: 1.2em;
}

#instructions {
	margin-left: 10px;
}

#sampleQuestions {
	height: 50%;
	width: 50%;
	margin-top: 10px;
	padding-bottom: 10px;
	border-style: solid;
	border-color: black;
	border-width: 1px;
}

#chooseFile {
	height: 20%;
	width: 20%;
	padding-left: 5px;
	padding-right: 5px;
	margin-top: 5px;
	border-style: solid;
	border-color: black;
	border-width: 1px;
}

@media only screen and (max-width: 900px) {	
	.card div {
		left: 10%;
		width: 80%;
	}
	
	#sampleQuestions {
		height: 90%;
		width: 90%;
	}
	
	#chooseFile {
		height: 65%;
		width: 65%;
	}
}