*{
	padding: 0;
	margin: 0;
	color:rgb(2, 27, 70);
}

body{
	font-family: 'Cormorant Garamond', serif;
  box-sizing: border-box;
	padding-right: 3%;
	padding-left: 3%;
	text-align: center;
}

main {
	background-color: beige;
}

 header {
	background-color:rgb(2, 27, 70);
	height: 5rem;
	text-align: center;
	width: 100%;
}

header h2 {
	line-height: 5rem;
	color: white;
	font-size: 1.2rem;
}

.subject {
 border-bottom: rgb(2, 27, 70) solid 3px;
 padding-bottom:2px;
 margin-bottom: 1rem;

}
section h1 {
	padding-top: 1.5rem;
}

section p {
	color: grey;
	padding-top: 0.5rem;
	padding-bottom:1.5rem;
	border-bottom:rgb(2, 27, 70) solid 5px;
}

fieldset {
	border: none;
	margin-bottom: 1.5rem;
}

.contact-info {
	text-align: left;
	padding-bottom: 2rem;
	border-bottom: rgb(2, 27, 70) solid 3px;
}

.contact-info legend {
 padding-bottom:1rem;
 font-size: 1.5rem;
 font-weight: bolder;
 text-align: left;
 margin-left: 3%;
}

.contact-info input {
	height:3rem;
	width: 94%;
	background-color: white;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	margin-left: 3%;
	border: none;
	border-radius: 5px;
	font-size: 100%;
	outline: 0;
}

input:focus {
	border: 2px solid rgb(2, 27, 70);
	transition: 0.3s;
}

.contact-info select {
	height:3rem;
	width: 94%;
	background-color: white;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	margin-left: 3%;
	border: none;
	border-radius: 5px;
	outline: 0;
}

select:focus {
	border: 2px solid rgb(2, 27, 70);
	transition: 0.3s;
}

.contact-info label {
	margin-left: 3%;
}

.zipcode {
	display: block;
}
input[id="zip"] {
	width: 50%;
}

select {
	transition: 0.3s;
  color:rgb(200, 200, 200);
}

::placeholder {
	position: relative;
	left: 70%;
	font-style: italic;
	color: rgb(200, 200, 200);
	}
	
	.newsletter {
		text-align: left;
	}

.newsletter legend {
	font-size: 1.5rem;
	font-weight: bolder;
	text-align: left;
	margin-left: 3%;
}

.newsletter p {
	padding-top: 1.2rem;
	padding-bottom: 0.5rem;
	margin-left: 3%;
}

.newsletter input {
	position: relative;
	margin-left: 0px;
	margin-left: 3%;
}

.newsletter textarea {
	height:5rem;
	width: 94%;
	background-color: white;
	border: none;
	border-radius: 5px;
	resize: none;
	margin-top: 0.5rem;
	margin-bottom: 20px;
	font-size: 100%;
	outline: 0;
	transition: 0.3s;
	margin-left: 3%;
}

textarea:focus {
	border: 2px solid rgb(2, 27, 70);
}

button {	
	height:4rem;
	width: 94%;
	background-color: rgb(123, 173, 154);
	color: white;
	border: none;
	border-radius: 5px;
	font-size: 1.5rem;
	font-family: 'Cormorant Garamond', serif;
	font-weight: bold;
	outline: none; 
	margin-left: 3%;
	margin-bottom: 1.5rem;
}

button:active {
	position: relative;
	left: 3px;
	top: 3px;

}

footer {
 	padding-bottom: 2rem;
}

footer p{
	color: grey;
	font-style: italic;

}

@media(min-width:768px) {
	main {
		max-width: 700px;
		margin: auto;
	}

	.container {
		display: flex;
		align-items: center;
		margin-right: 3%;
	}

	.container input,
	.container select {
		width: 70%;
		flex-grow: 1;
	}

	.container label {
		width: 25%;
	}

	::placeholder {
		left: 80%;
		}
	#zip {
		flex-grow: 0;
		width: 30%;
	}
}