@media only screen and (max-width:319px){ body{ font-size: 1em; }}
@media only screen and (min-width:320px) and (max-width: 480px){ body{ font-size: 1em; }}
@media only screen and (min-width:481px) and (max-width: 640px){ body{font-size: 1em; }}
@media only screen and (min-width:641px) and (max-width: 960px){ body{font-size: 1em; }}
@media only screen and (min-width:961px) and (max-width: 1024px){ body{font-size: 1em; }}
@media only screen and (min-width:1025px) and (max-width: 1280px) { body{font-size: 1em }}
@media only screen and (min-width:1281px) { body{font-size: 1em; }}


body{
	background-color: lightcyan;
	font-family: Arial, Helvetica Tahoma;
}	

main{
	width:	600px;
	margin:	auto;
}

div{
	margin:	auto;
}
h1{
	text-align:	center;
}
h2{
	text-align: center;
}
h3{
	text-align: left;
}

p{
	
}

footer{
	position: fixed;
	bottom: 0;
	width: 100vw;
	text-align: center;
	background-color: lightcyan;
}

a:link, a:visited {
	color: black;
}
a:hover{
	color: grey;
}

.begin{
	display: none;
}
a:hover .end{
	display: none;
}
a:hover .begin{
	display: inline-block;
}

.code{
	color: blue;
	background: white;
	border: black solid 2px;
	padding-left: 1em;
	padding-right: 1em;
}

.background-clear{
	background-color: transparent;
}

.aucl{
	display: inline-block;
	min-width: 190px;
	
}

.auci{
	width: 50px;
	text-align: right;
}

#image{
	position: absolute;		
}
#background-image{
	z-index: -1;
	position: absolute;
	visibility: hidden;
}
#banner{
	text-align:	center;
	font-size: 2em;
	font-weight: bold;
	max-width:auto;
	margin-top: .67em;
	margin-bottom: .67em;
}
#p1{
	text-align:	center;
}
#p2{
	text-align:	center;
}

#results{
	text-align:	left;
}
div#preview{
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}




/*Navigation css for desktop and mobile.*/
/*Desktop*/
@media only screen and (min-width: 820px){
	nav{
		text-align: center;
	}
	.nav-button{
		display: none;
	}	
	.nav-content{
		display: inline;
	}
	.nav-link {
		display: inline-block;
		text-decoration:none;
		margin-top:		.1em;
		margin-left:	1em;
		margin-right:	1em;
		margin-bottom:.1em;
	}	
}
/*Mobile*/
@media only screen and (max-width: 819px){
	nav{
		z-index: 1;
	}	
	.nav-content{
		display: none;
		position: absolute;
		width: 15em;
	}
	.nav-link{
		display: block;
		text-decoration:none;
		margin-left:	.5em;
		margin-top:		.5em;
		margin-bottom:	.5em;		
	}	
	nav:hover .nav-content {
		display: block;
		background-color: white;
	}
}
@media only screen and (max-width: 600px){
	main{
			width: auto;
	}
}
/*End Navigation css for desktop and mobile.*/