.contact-form {
	width: 50%;
	max-width: 500px;
	background-color: rgb(var(--white));
	opacity: 85%;
	padding: 15px;
	box-shadow: 5px 5px 22px 5px rgb(var(--black));
	border-radius: 15px;
	overflow: hidden;
}

.contact-form h1 {
	padding-bottom: 15px;
}

.grid {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: repeat(3, 1fr) 100px;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	justify-items: center;
}

.contact-form .form-input {
	width: 100%;
	padding-left: 5px;
	resize: none;
}

.g-recaptcha {
	grid-column: 2;
	place-self: start;
}

.contact-form #submit {
	text-align: center;
	grid-column: span 2;
	padding: 10px 25px;
	border: none;
	border-radius: 15px;
	background-color: rgba(var(--tertiary), .45);
	box-shadow: inset 2px 2px 2px rgba(var(--tertiary), .75),
	            inset -2px -2px 2px rgba(50, 50, 255, .5);
}

.contact-form #submit:active {
	box-shadow: inset 2px 2px 2px rgba(50, 50, 255, .75),
                inset -2px -2px 2px rgba(var(--tertiary), .5);
}

.center-text {
	margin: 0;
	padding: 0;
	text-align: center;
}

.center {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Begin message styling */
.flash {
    list-style: none;
    text-align: center;
    background-color: rbg(var(--white));
    padding-left: 0;
    padding-bottom: 10px;
}

.message {
    background-color: rgb(var(--tertiary));
    width: auto;
    padding: 5px;
}

.error {
    background-color: rgb(255, 125, 125);
    padding: 5px;
}
/* End message styling */

@media only screen and (max-width: 767px) {
    .contact-form {
        width: 95%;
        overflow: hidden;
    }

    .contact-form .form-input {
	width: 75%;
    }

    .g-recaptcha {
        grid-column: span 2;
	place-self: end;
        scale: 75%;
    }
}