.contact_form {
	padding: 0 50px;
}
@media only screen and (max-width: 500px) {
	.contact_form {
		padding: 0 10px;
	}
}
.contact_form form {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	/*width: 90vw;*/
	max-width: 400px;
	gap: 20px;
	padding: 16px 10px;
	background-color: #2a398f;
	border-radius: 4px;
	box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.5),
									0 0 10px 0 rgba(0,0,0,0.3);
}
.contact_form input,
.contact_form textarea {
	padding: 5px;
	border: none;
	/*box-shadow: 0 1px 5px rgba(0, 0, 0, .5);*/
	border-radius: 4px;
	outline: none;
	box-shadow: 0 0 5px 0 rgba(0,0,0,1);
	transition: all 0.15s ease-in-out;
}
.contact_form textarea {
	height: 200px;
	resize: none;
}
.contact_form input[type="text"]:hover,
.contact_form input[type="text"]:focus,
.contact_form input[type="email"]:hover,
.contact_form input[type="email"]:focus,
.contact_form textarea:hover,
.contact_form textarea:focus {
	transform: scale(1.02);
}
.contact_form input[type="submit"] {
	cursor: pointer;
	font-weight: bold;
	/*background-color: rgba(50, 50, 50, 0.2);*/
	color: #2a398f;
	transition: all 0.15s ease-in-out;
}
.contact_form input[type="submit"]:hover {
  /*background-color: rgba(50, 50, 50, 0.1);*/
	background-color: #27ae60;
	color: #fff;
}


.form_message {
  margin: 20px auto;
  width: 50%;
  max-width: 500px;
  padding: 15px;
  border-radius: 8px;
  font-weight: bold;
  text-align: center;
  animation: fadeIn 0.5s ease-in-out;
}
.form_message.success {
  background-color: #d4edda;
  color: #155724;
  border: 2px solid #155724;
}
.form_message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 2px solid #721c24;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}