@charset "utf-8";

#contactFormContainer {
	width: 70%;
	margin: 30px auto;
}

article h1 {
	background-image: linear-gradient(rgb(214,69,4), rgb(128,35,2));
	padding: 10px 3.473012111%;
	border: 5px solid rgb(214,69,4);
	border-radius: 25px 25px 0px 0px;
	font-size: 32px;
	line-height: 1em;
	color: white;
	text-align: center;
}

article p {
	border-left: 5px solid rgb(214,69,4);
	border-right: 5px solid rgb(214,69,4);
	font-size: 18px;
	padding: 10px 3.473012111% 0px 3.473012111%;
	text-align: center;
}

form {
	position: relative;
	border-left: 5px solid rgb(214,69,4);
	border-right: 5px solid rgb(214,69,4);
	border-bottom: 5px solid rgb(214,69,4);
	border-radius: 0px 0px 25px 25px;
	padding: 10px;
}

input, textarea {
	display: block;
	font-family: "Inconsolata", serif;
	font-weight: 600;
	width: 90%;
	padding: 10px;
	border-radius: 4px;
	margin: 5px auto;
	font-size: 18px;
}

textarea {
	resize: none;
}

input[type=submit] {
	position: relative;
	left: calc(50% - 75px);
	margin: 10px 0px;
	background-image: radial-gradient(rgb(214,69,4), rgb(64,15,1));
	width: 150px;
	color: white;
}

input[type=submit]:hover {
	background-image: radial-gradient(rgb(245,93,7), rgb(128,35,2));
}

.thankyou_message {
	font-size: 18px;
	padding: 10px 3.473012111% 0px 3.473012111%;
	text-align: center;
}

input:invalid {
  background-color: lightpink;
}

@media only screen and (max-width: 768px) {
	#contactFormContainer {
		width: 80%;
		margin: 30px auto;
	}
}

@media only screen and (max-width: 500px) {
	#contactFormContainer {
		width: 90%;
		margin: 30px auto;
	}
}