main {
	width: 80%;
	margin: 0 auto;
}

form {
	position: relative;
	width: 80%;
	margin: 2rem auto 2rem auto;
}

.title > h1,
.title > h4 {
	text-align: center;
}

input {
	font-size: 0.8rem;
	width: 100%;
	padding: 0.5rem;
	margin-bottom: 1.5rem;
	border: none;
	border-bottom: 1px solid lightgray;
	outline: none;
}

select {
	appearance: none;
	font-size: 0.8rem;
	width: 100%;
	height: 2.2rem;
	padding: 0.5rem;
	margin-bottom: 1.5rem;
	border: none;
	border-bottom: 1px solid lightgray;
	border-radius: none;
	box-shadow: none;
	outline: none;
}

textarea {
	font-size: 0.8rem;
	width: 100%;
	height: 10rem;
	padding: 0.5rem;
	margin-bottom: 1.5rem;
	resize: vertical;
	border: 1px solid lightgray;
	border-radius: 8px;
    outline: none;
}

#contactSubmit{
    display: block;
    font-family: bebasNeue-Regular, sans-serif;
    font-size: 1rem;
    padding: 0.8rem;
    margin: 0 1rem 0 auto;
    background-color: yellow;
    border: 1px solid yellow;
    border-radius: 8px;
    box-shadow: none;
}

#contactSubmit:hover{
    background-color: black;
    color: yellow;
}
#contactSubmit:active{
    scale: 0.95;
}

label {
	position: absolute;
	transform: translateY(0.5rem) translateX(0.5rem);
	color: rgb(153, 153, 153);
    background-color: white;
	font-size: 1rem;
	transition: transform 0.5s ease, color 0.5s ease, font-size 0.5s ease, padding 0.5s ease;
}

.active {
    font-family: bebasNeue-Regular, sans-serif;
    letter-spacing: 1px;
	transform: translateY(-0.75rem) translateX(1rem);
	color: #000;
	font-size: 0.8rem;
    padding: 0.2rem;
}

.active::after {
	content: ':';
}

.grid-2 {
	display: flex;
	justify-content: center;
	gap: 1rem;
}

.grid-2 > div {
	width: 100%;
}

@media (max-width: 400px){

	.grid-2{
		flex-direction: column;
	}

}