#page_wrapper {
	width: 45%;
	margin: 0 auto;
	text-align: left;
	padding-top: 80px;
	padding-bottom: 100px;
	min-height: 600px;
}

#input_container {
	width: 100%;
	text-align: left;
	background-color: var(--background-whitesmoke);
	padding: 1.5em 2em 2em 2em;
	border-radius: 1em;
}

#page_title {
	text-align: center;
	margin-bottom: 1em;
}

#page_description {
	text-align: left;
	margin-bottom: 2em;
}

body.night_mode #page_description {
	color: #ccc;
}

#result_text {
	color: var(--text-default);
	text-align: center;
	margin-top: 50px;
}

a {
	color: dodgerblue;
}

a:hover {
	color: var(--color-link-hover);
}

form {
}

label {
	display: block;
	margin: 10px 0;
}

input {
	width: 100%;
	padding: 15px;
	margin-bottom: 20px;
	border-radius: 10px;
	outline: none;
	border: 1px solid silver;
}


textarea {
	font-family: 'Roboto', sans-serif;
	width: 100%;
	height: 150px;
	border-radius: 10px;
	padding: 15px;
	outline: none;
	border: 1px solid silver;
	white-space: pre-wrap;
}

body.night_mode input,
body.night_mode textarea {
	background-color: var(--background-whitesmoke);
	color: var(--text-default);
}

input:focus, textarea:focus {
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

.submit_button {
	margin: 1em 0;
}

.submit_button.disabled {
	pointer-events: none;
	cursor: not-allowed;
	opacity: 0.5;
}

div.recaptcha_info {
	font-size: 0.875em;
	margin: 0.5em 0;
	color: red;
}

/********************

	MEDIA QUERIES

*********************/
 /* Larger Devices, Wide Screens */
@media only screen and (max-width : 1500px) {

	#page_wrapper {
		width: 50%;
	}

}

 /* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

	#page_wrapper {
		width: 60%;
	}

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

	#page_wrapper {
		width: 70%;
	}

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

	#page_wrapper {
		width: 80%;
	}

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

	#page_wrapper {
		width: 90%;
		padding-top: 80px;
	}

	textarea {
		height: 100px;
	}

	#input_container {
		padding: 1em 1.5em;
	}

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

/********************

	END MEDIA QUERIES

*********************/