/* For everything... */
body {
	/*
		This colour blends into the photo used.
	*/
	background-color:#18080F;
	/*
		The background image is a photo I took of my shadow while standing on Ayer's Rock. 
	*/
	background-image:url(/images/bg.jpg);
	background-position:top;
	background-repeat:no-repeat;
	margin:0px;
}
/* For computers... */
@media (min-width:1025px) {
	h1 {
		cursor:default;
		font-size:350%;
		margin-bottom:0;
		margin-top:0;
	}
	p {
		cursor:default;
		font-size:125%;
	}
	
	.iSubmit {
		background-color:#4F0084;
		border:0;
		border-style:outset;
		border-bottom-left-radius:0px;
		border-bottom-right-radius:5px;
		border-top-left-radius:0px;
		border-top-right-radius:5px;
		color:#FFFFFF;
		cursor:pointer;
		font-size:154%;
		font-weight:bold;
	}
	.iSubmit:hover {
		background-color:#BC58FF;
	}
	.iText {
		font-size:150%;
		width:85%;
	}
	.fInstruction {
		font-size:84%;
		margin-left:1%;
	}
	
	#dMain {
		/*
			I chose a yellow background because it's the most energetic of the warm colors.
			It is associated with laughter, hope and sunshine.
			Accents of yellow in design makes the user feel optimistic and cheerful.
			However, too much yellow can be overwhelming.
			That is why I have only made the main 'div' yellow, rather than the entire background.
		*/
		background-color:#FFF600;
		border-radius:1em/5%;
		box-shadow:0px 0px 13px #000000;
		/*
			I chose a purple font colour as it's a nice contrast against the yellow background.
			Purple is also associated with creativity, royalty and weath and can make a design look more luxurious and wealthy.
		*/
		color:#4F0084;
		font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
		left:50%;
		margin-left:31.5%;
		margin-top:12.5%;
		padding:2%;
		width:37%;
	}
}

/* For tablets... */
@media screen and (min-width:767px) and (max-width:1024px) {
	h1 {
		font-size:350%;
		margin-bottom:0;
		margin-top:0;
	}
	p {
		font-size:125%;
	}
	
	.iSubmit {
		appearance:none;
		background-color:#4F0084;
		border:0;
		border-style:outset;
		border-bottom-left-radius:0px;
		border-bottom-right-radius:5px;
		border-top-left-radius:0px;
		border-top-right-radius:5px;
		color:#FFFFFF;
		cursor:pointer;
		font-size:154%;
		font-weight:bold;
	}
	.iSubmit:hover {
		background-color:#BC58FF;
	}
	.iText {
		font-size:150%;
		width:80%;
	}
	.fInstruction {
		font-size:84%;
		margin-left:1%;
	}
	
	#dMain {
		/*
			I chose a yellow background because it's the most energetic of the warm colors.
			It is associated with laughter, hope and sunshine.
			Accents of yellow in design makes the user feel optimistic and cheerful.
			However, too much yellow can be overwhelming.
			That is why I have only made the main 'div' yellow, rather than the entire background.
		*/
		background-color:#FFF600;
		border-radius:3%/5%;
		box-shadow:0px 0px 10px #000000;
		/*
			I chose a purple font colour as it's a nice contrast against the yellow background.
			Purple is also associated with creativity, royalty and weath and can make a design look more luxurious and wealthy.
		*/
		color:#4F0084;
		font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
		left:50%;
		margin-left:17%;
		margin-top:13%;
		padding:2%;
		width:66%;
	}
}

/* For mobile... */
@media screen and (max-width:766px) {
	h1 {
		font-size:400%;
		margin-bottom:0;
		margin-top:0;
	}
	p {
		font-size:200%;
	}
	
	.iSubmit {
		background-color:#4F0084;
		border:0;
		border-style:outset;
		border-bottom-left-radius:0px;
		border-bottom-right-radius:5px;
		border-top-left-radius:0px;
		border-top-right-radius:5px;
		color:#FFFFFF;
		cursor:pointer;
		font-size:300%;
		font-weight:bold;
	}
	.iSubmit:hover {
		background-color:#BC58FF;
	}
	.iText {
		font-size:300%;
		width:80%;
	}
	.fInstruction {
		font-size:125%;
		margin-left:1%;
	}
	
	#dMain {
		/*
			I chose a yellow background because it's the most energetic of the warm colors.
			It is associated with laughter, hope and sunshine.
			Accents of yellow in design makes the user feel optimistic and cheerful.
			However, too much yellow can be overwhelming.
			That is why I have only made the main 'div' yellow, rather than the entire background.
		*/
		background-color:#FFD700;
		border-radius:3%/5%;
		box-shadow:0px 0px 10px #000000;
		/*
			I chose a purple font colour as it's a nice contrast against the yellow background.
			Purple is also associated with creativity, royalty and weath and can make a design look more luxurious and wealthy.
		*/
		color:#4F0084;
		font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
		left:50%;
		margin-left:2%;
		margin-top:1%;
		padding:2%;
		width:75%;
	}
}