* {
	margin: 		0;
	padding: 		0;
	border-width:	0;
}

nav p{
	font-family: 	'Titillium Web', 'Exo';
	font-weight: 	700;
}

.duck {
	width:	50%;
}

body {
	background: 	#fcfcfc;
	display: 		flex;
	flex-direction: column;
	font-family: 	'Titillium Web', "Times New Roman", Times, serif;
}

#Title {
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.418);
	margin-bottom: 0px;
	width: 		100%;
	z-index: 10;
}

h1 {

	text-align:	center;
	font-size: 	75px;
	width: 		92%;
	padding: 		10px;
	/* border-bottom: 1px solid black; */
}

h2 {
	font-size: 	38px;
	font-weight: 	bold;
	text-align: 	center;
	color: 		#e51d1d;
}

h3 {
	font-size: 	25px;
	font-weight: 	bold;
	text-align: 	center;
}

p {
	font-size: 	27px;
	margin: 		15px;
}

#End {
	margin-top: 20px;
	box-shadow: 0 -6px 10px rgba(0, 0, 0, 0.418);
}

.bullet {
	font-size: 	20px;
	margin: 		30px;
}
.prettyprint{
	margin: 		70px 18vw;
	padding: 		50px 0px;
	font-family: 	'Cousine', monospace;
	background-color: 	#f4f4f4;
	border-radius: 25px 25px;
	color: 		#6d6d6d;
}
.question{
	padding: 		0px 50px 0px 50px;
}
#correctAnswer{
	color: 		green;
}
#coinCount{
	position:		sticky;
	top: 		90px;
	margin-right: 	30px;
	text-align:  	right;
	animation:      glowText       .7s 2.5s                    forwards,
}
#coinNumber{
	display: 		none;
}
#puzzleDescription{
	margin: 0 20vw;
}

img {
	image-orientation: from-image;
	margin: 10px;
}

figure {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-content: center;
}

div{
	display: 		flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: 	center;
}

#Divcol{
	flex-flow: column;
}

.transparent {
	width: 		100%;
	background-color: transparent;
	display: 		flex;
	justify-content: space-around;
	align-content: center;
	flex-flow: 	row wrap;
}
#MainPage{
	display: 		block;
}

input[type=text], textarea {
    	width: 		250px;
    	padding: 		15px 7px;
	border: 		none;
	border-bottom: 3px silver;
	border-radius: 3px;
	background: 	#c9ddc5;
	color: 		black;
	font-size: 	1em;
}


.question{
	text-align: center;
}
.textBox{
	text-align: center;
	padding-bottom: 200px;
}

button {
	background-color: 	#6ab1e8;
	border: 			none;
	color: 			white;
	padding: 			15px 32px;
	margin: 			15px 10px;
	text-align: 		center;
	text-decoration: 	none;
	/* display: 			inline-block; */
	font-size: 		16px;
	border-radius: 	3px;
	/* border: 			2px solid #ff7070; */
}

button:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

select {
	min-width: 		10%;
	max-width: 		20%;
	padding: 			5px;
	border: 			none;
	border-radius: 	4px;
	background: 		#f9a9c8;
	color: 			white;
}

@media only screen and (max-width: 998px) { /*Tablet View*/
	h1 {
	 	font-size: 55px;
	}

	#coinCount{
		position:		sticky;
		top: 		10px;
		margin-right: 	30px;
		text-align:  	right;
	}

	#puzzleDescription{
		margin: 0 5vw;
	}

	h2 {
		font-size: 27px;
	}

	p {
		font-size: 20px;
	}

	#introduction figure {
		height: 300px;
	}

	#introduction figure img {
		width: 243px;
	}

	#thankyous #pictures figure figcaption {
		font-size: 22px;
	}

	#thankyous #pictures figure #norman {
		width: 285px;
		height: 300px;
	}

	#thankyous #pictures figure #shep {
		width: 301px;
		height: 300px;
	}

	#satForm {
	flex-flow: column;
	}

	input[type=text], textarea {
		width: 60%;
	}

}

@media only screen and (max-width: 700px) { /*Where the introduction on the home page can't fit the picture and text*/

	#introduction {
		flex-direction: column;
		align-items: center;
	}


	input[type=text], textarea {
		width: 70%;
	}
	.prettyprint{
		margin: 		7px 2 vw;
		padding: 		50px 0px;
		font-family: 	'Cousine', monospace;
		background-color: 	#f4f4f4;
		border-radius: 25px 25px;
		color: 		#6d6d6d;
	}
}

@media only screen and (max-width: 399px) { /*Mobile Phone*/
	h1 {
		font-size: 40px;
	}

	h2 {
		font-size: 20px;
	}

	p {
		font-size: 12px;
	}

	div, #postList {
		margin: 5px 10px;
	}

	.transparent {
		margin: 2px;
	}

	#introduction figure {
		height: 247px;
	}

	#introduction figure img {
		width: 200px;
	}

	#thankyous #pictures figure figcaption {
		font-size: 22px;
	}

	#thankyous #pictures figure #norman {
		width: 200px;
		height: 210px;
	}

	#thankyous #pictures figure #shep {
		width: 200px;
		height: 199px;
	}

	input[type=text], textarea {
		width: 80%;
	}


}

#gridimage {
	max-width:	50%;
}

.titles {
	font-size: 	40px;
	color:		red;
}

a {
	font-size: 	27px;
}

#coinCount{
	position:		sticky;
	top: 		90px;
	margin-right: 	30px;
	text-align:  	right;
	animation-name: glowText;
	animation-duration: 1.5s;
}

@keyframes glowText {
	0%{
	    color:		black;
	}
	25%{
		color: 		#c9be58;
	}
	100%{
		color:		black;
	}
}