.contact-container {
	box-sizing: border-box;
	max-width: 800px;
	margin: 0 auto;
	padding-left: calc(var(--unit) * 2);
	padding-right: calc(var(--unit) * 2);
	margin-left: auto;
	margin-right: auto;
	margin-top: calc(var(--unit) * 2);
	margin-bottom: calc(var(--unit) * 2);
}

.contact-container h1 {
	margin-bottom: var(--unit);
}

.honeypot {
    position: absolute;
    left: -9999px;
}

.contact-form-field {
    box-sizing: border-box;
    font-size: var(--textsize);
    padding-left: 10px;
    margin-top: 0;
    margin-bottom: calc(var(--unit) * 1.5);
    background-color: var(--background-color);
    color: var(--text-color);
    border: 2px solid var(--text-color);
    min-height: 60px;
    width: 100%;
}

.contact-form-textarea {
    min-height: 200px;
	white-space: inherit;
}

.contact-form-button {
	-webkit-appearance: none;
	display: block;
	box-sizing: border-box;
	font-size: var(--textsize);
	padding: 0 20px;
	margin-top: calc(var(--unit) * 1.5);
	margin-bottom: calc(var(--unit) * 1.5);
	background-color: var(--text-color);
	color: var(--background-color);
	border: 3px solid var(--text-color);
	min-height: 60px;
}

@media only screen and (min-width: 880px) {
	.contact-container {
		margin-top: calc(var(--unit) * 6);
	}
}