body {
	font-family: Arial, Helvetica, sans-serif; font-size: 1em;
	width: 100%; min-height: 100%; margin:0; background: url("../img/congruent_outline.png");
}

	input, select, option {
		width: 100%; height: 3em; margin: 0.2em 0;
		box-sizing: border-box; text-align: center; text-align-last: center; 
	}

	input[type=button] {
		font-family: Arial, Helvetica, sans-serif; color: white; font-weight: bold;
		background: #6A247F; border: none; border-radius: 0.3em;
		width: 50%; margin: 1.3em auto 0;
	}

	input[type=button]:hover {
		background: #9F36BF; cursor: pointer; box-shadow: 0 0 0.3em #9F36BF;
	}

	input[type=button]:focus {
		outline: 0;
	}

	b {
		font-weight: bold;
	}

header {
	text-align: center; color: #fff; background: #6A247F;
	width: 100%; padding: 2.25em 0 0.25em 0; margin-bottom: 3em; cursor: default;
}

.main {
	background: #fff; width: 50%; 
	padding: 1em; margin: -2em auto 3em; float: none; box-sizing: border-box;
}

	.description {
		margin-top: 0.4em;
	}

	.input {
		text-align: center; width: 100%;
	}

	#error {
		color: red; margin-top: 1em; font-size: 0.9em;
		padding: 1em; background: rgba(0, 0, 0, 0.2); display: none;
	}

	#output {
		font-family: Consolas, Monaco, monospace; font-size: 0.9em;
		padding: 1em; margin-top: 1em; background: rgba(0, 0, 0, 0.2); display: none;
	}

#instructionslink {
	text-align: right;
}

	#instructionslink a {
		font-size: 0.8em; color: #6A247F; cursor: pointer;
	}

	#instructionslink a:hover {
		color: #BE40E5;
	}

#overlay {
	background: rgba(0,0,0,0.5); overflow: hidden; transition: 0.5s;
	top: 0; left: 0; width: 0; min-height: 100%; z-index: 10; position: absolute;
}

	.overlaycontainer {
		color: #ccc; list-style: none; background: rgba(0,0,0,0.8);
		width: 80%; padding: 2em; margin: 6em 10%; display: block; box-sizing: border-box;
	}

		#overlaycontainertop {
			width: 100%; float: left; box-sizing: border-box; 
		}

		#cross {
			height: 2em; float: right; cursor: pointer;
		}

		#cross:hover {
			opacity: 0.5;
		}

		.overlaycontainer h2 {
			text-align: center;
		}

		.overlaycontainer ol {
			padding: 0; margin: 0; 
		}

		.overlaycontainer ul {
			margin-top: 1em; 
		}

		.overlaycontainer li {
			margin: 1em 0; 
		}

		.overlaycontainer img {
			max-width: 100%;
		}

		.overlayimg {
			text-align: center; width: 100%; margin: 0.5em 0; padding: 0; 

		}

footer {
	font-size: 0.8em; text-align: center; color: silver; background: #000;
	width: 100%; position: fixed; bottom: 0; padding: 0.3em; box-sizing: border-box;
}

	footer a {
		color: #BE40E5;
	}

	footer a:hover {
		color: #D448FF;
	}

@media only screen and (max-width: 700px) {

/*	header {
		margin-bottom: 1em;
	}*/

	.main {
		width: 350px; /*margin: 1em auto;*/
	}

	.overlaycontainer {
		width: 100%; margin: 6em 0;
	}

@media only screen and (max-width: 375px) {
	header {
		margin: 0 0 1em;
	}

	.main {
		width: 100%; padding: 0.2em 0 0; margin: -1em 0 1em;
	}

	.input {
		cursor: default;
	}

	select {
		font-weight: bold; background: inherit; cursor: pointer;
	}

	input[type=text], select {
		background: inherit; width: 90%; border-style: none none solid none; border-bottom: 1px solid #9e9e9e;
		outline: none; margin: -0.2em 0 0.6em; 
	}

	input[type=text]:focus, select:focus {
		color: #6A247F; border-bottom: 1px solid #9F36BF; box-shadow: 0 1px 1px -1px #9F36BF;
	}

	footer {
		position: relative; margin-top: -1.2em;
}

/* Background pattern from subtlepatterns.com */