footer {
	padding-bottom: 60px;
	height: clamp(250px, 28vw, 10000px);
	background-color: var(--dgrey);
}

footer a {
	color: var(--lgrey);
	text-decoration: none;
	transition: color 0.5s ease;
}

footer a:hover {
	color: var(--white)
}

footer ul {
	display: flex;
	justify-content: space-around;
	display: flex;
	gap: 10vw;
	padding-top: clamp(40px, 5vw, 10000px);
}

footer li {
	list-style: none;
}

footer #subscribecontainercontainer {
	display: flex;
	justify-content: center;
	background: linear-gradient(to bottom, var(--white) 50%, var(--dgrey) 50%);
}

footer #subscribecontainer {
	background-color: white;
	width: 75%;
	padding: clamp(20px, 3vw, 10000px);
}

footer #subscribecontainer p {
	font-size: clamp(12px, 2vw, 15px);
	padding-top: 20px;
	padding-top: 5px;
}

footer #email {
	font-size: clamp(10px, 2vw, 15px);
	width: 62vw;
	margin-top: 30px;
	height: 50px;
	background-color: var(--white);
	padding-left: 10px;
	font-family: serif;
}


footer #submit {
	font-size: clamp(10px, 2vw, 15px);
	width: clamp(80px, 10vw, 10000px);
	margin-top: 30px;
	height: 50px;
	background-color: var(--brown);
	color: var(--cream);
	font-family: serif;
	transition: color 0.5s ease;
}

footer #submit:hover {
	color: var(--hover);
}

@media screen and (max-width: 830px) {
	footer #email {
		font-size: clamp(10px, 2vw, 12px);
		width: clamp(160px, 45vw, 10000px);
		height: 30px
	}

	footer #submit {
		font-size: clamp(10px, 2vw, 12px);
		height: 30px;
	}
}

input[type="submit"] {
  cursor: pointer;
}

#subscribecontainer input:user-invalid, #subscribecontainer textarea:user-invalid {
	border: 2px solid red;
}