html {
	font-family: "Ubuntu Mono", "Courier New", monospace;
	background: url("images/graphite_ghosts.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

h1 {
	letter-spacing: 7px;
	font-size: 4em;
	color: #ffff00;
	margin-top: 0;
}

form {
	width: 75%;
	margin: 0 auto 17% auto;
}

span {
	visibility: hidden;
} /* Hide span for accessibility -- it's there b/c screen readers can't read
     placeholder text */

.heading {
	text-align: center;
}

#subhead {
	font-size: 2em;
	position: relative;
	top: 20px;
}

#corp {
	font-size: 5em;
	font-weight: 600;
}

#button {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8px;
	height: 48px;
	width: 200px;
	background: #ffff00;
	border: none;
	font-family: inherit; /* Apparently it doesn't just inherit on its own */
	font-size: 180%;
	-webkit-transition: background .3s ease-in-out;
	-moz-transition: background .3s ease-in-out;
	-ms-transition: background .3s ease-in-out;
	-o-transition: background .3s ease-in-out;
	transition: background .3s ease-in-out;
	cursor: pointer;
	font-weight: 600;
}

#button:hover {
	background: black;
	color: #ffff00;
}

.inputs {
	display: block;
}

input {
	width: 100%;
	height: 40px;
	margin-top: 10px;
	margin-bottom: 20px;
	font-size: 40px;
	font-family: inherit;
	outline: none;
	border: 1px solid #ddd;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

input:focus {
	box-shadow: 0 0 5px rgba(81,203,238,1);
	border: 1px solid rgba(81,203,238,1);
}

/*input:focus:invalid {
	background-color: pink;
} /* Only applies invalid styling on focus. Otherwise, there's a quirk where
     browsers will put invalid styling on all required inputs immediately on
     load (if invalid styling exists) */

/*input:valid {
	background-color: white;
}*/

.invalid {
	background-color: pink;
}

@media all and (max-width: 825px) and (min-width: 600px) {
	input[placeholder] { /* Matches INPUTS with placeholder, not placeholder */
		font-size: 30px;
	}
} /* Need to shrink placeholder text as input shrinks w/ screen size */

@media all and (max-width: 600px) {
	input[placeholder] {
		font-size: 20px;
	}
}

label {
	color: #ffff00;
	font-size: 22px;
}

img {
	width: 40px;
	height: 40px;
	cursor: pointer;
	margin-bottom: 10px;
}