/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* End of CSS Reset */

body {
	background-color: black;
	color: white;
}

header {
	position: sticky;
	margin: 15px;
}

header section {
	display: grid;
	grid-template-columns: 1fr 50px;
}

header section i {
	display: block;
	font-size: 40px;
	margin-top: 10px;
	grid-column: 2/3;
	grid-row: 1/3;
}

header h1 {
	font-size: 40px;
	font-family: 'Cinzel', serif;
}

header h2 {
	font-size: 25px;
	font-family: 'Lato', sans-serif;
	grid-row: 2/3;
}

#mobile-nav {
	display: block;
	position: fixed;
	top: 0;
	left: -120%;
	background-color: rgb(56, 4, 4);
	padding: 25px;
	width: 100%;
	height: 100%;
	z-index: 1;
	animation-fill-mode: both;
}

.open {
	animation-name: open-mobile-nav;
	animation-duration: 0.5s;
	animation-direction: initial;
}

.closed {
	animation-name: close-mobile-nav;
	animation-duration: 0.5s;
}

@keyframes open-mobile-nav {
	from {
		left: -120%;
	}
	to {
		left: 0;
	}
}

@keyframes close-mobile-nav {
	from {
		left: 0;
	}
	to {
		left: -120%;
	}
}

#mobile-nav i {
	float: right;
	margin-right: 55px;
	font-size: 40px;
}

#mobile-nav a {
	display: block;
	color: white;
	font-size: 40px;
	text-decoration: none;
	margin: 50px 0;
	font-family: 'Lato', sans-serif;
	width: fit-content;
}

#mobile-nav .active {
	border-bottom: solid 5px white;
	padding-bottom: 15px;
}

nav {
	display: none;
}

#centered-main {
	text-align: center;
	font-size: 22px;
}

main section {
	background-image: url(images/indexhero.jpg);
	height: 200px;
	background-size: cover;
	background-position: right;
}

main section h1 {
	text-align: center;
	font-size: 40px;
	font-family: 'Cinzel', serif;
	padding: 25px 0 40px 0;
	text-shadow: 2px 2px 10px black;
}

main section a {
	float: left;
	margin-left: 30px;
	font-size: 2px;
	background: rgb(99,9,14);
	background: linear-gradient(180deg, rgba(99,9,14,1) 0%, rgba(147,21,13,1) 30%, rgba(99,9,14,1) 100%);
	border-radius: 50px;
	padding: 10px 25px;
	color: white;
	text-decoration: none;
	box-shadow: 0 0 35px 10px rgba(0,0,0,0.7), 0px 0px 25px 5px rgba(99,9,14,1) inset;
	font-family: 'Lato', sans-serif;
	animation-name: pop-in;
	animation-duration: 0.3s;
	animation-fill-mode: both;
	opacity: 0;
}

main section a:nth-of-type(even) {
	animation-delay: 0.15s;
	float: right;
	margin-right: 30px;
	margin-left: 0;
}

@keyframes pop-in {
	from {
		font-size: 10px;
		padding: 5px 25px;
		opacity: 0;
	}
	to {
		font-size: 25px;
		padding: 10px 25px;
		opacity: 1;
	}
}

main article {
	display: block;
	padding: 10px 20px;
}

main article:nth-of-type(even) {
	background-color: rgb(53, 8, 8);
	grid-template-columns: 1fr 400px;
}

main article img {
	width: 150px;
	animation-name: fade-in;
	animation-duration: 0.5s;
	padding: 15px 20px 0 20px;
	float: left;
}

main article:nth-of-type(even) img {
	float: none;
	width: 90%;
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

main article p {
	margin: 10px 20px;
	font-size: 25px;
	line-height: 35px;
	font-family: 'Lato', sans-serif;
	animation-name: fly-in;
	animation-duration: 0.5s;
}

main article:nth-of-type(even) p {
	animation-name: fly-in-alt;
}

@keyframes fly-in {
	from {
		margin-left: 125px;
		opacity: 0;
	}
	to {
		margin-left: 20px;
		opacity: 1;
	}
}

@keyframes fly-in-alt {
	from {
		margin-left: -20px;
		opacity: 0;
	}
	to {
		margin-left: 20px;
		opacity: 1;
	}
}

main #menu, main #rvpark, main #catering {
	background-image: url(images/menuhero.jpg);
	text-align: center;
	height: 150px;
}

main #rvpark {
	background-image: url(images/rvparkhero.jpg);
}

main #catering {
	background-image: url(images/cateringhero.jpeg);
	background-position-y: -750px;
}

main #menu h1, main #rvpark h1, main #catering h1 {
	padding-top: 50px;
	margin: auto;
}


main #menu-holder {
	background: none;
	height: fit-content;
	display: block;
}

main #menu-holder img {
	width: 100%;
	padding: 0;
}

main article p a {
	color: rgb(241, 50, 36);;
	text-decoration: none;
	transition: 0.2s;
	margin: 5px 0;
	font-size: 20px;
}

main #form, main form {
	margin: 0 15px;
	padding: 0;
}

main form p {
	width: 100%;
	margin: 25px 0;
	animation: none;
}

main form p span {
	margin-left: 5px;
	color: rgb(236, 110, 79);
}

main form p input, main form p textarea {
	margin: 10px 0 0 -10px;
	padding: 0 15px;
	border: 0;
	height: 50px;
	width: calc(100% - 10px);
	font-size: 20px;
	background-color: rgb(35, 35, 35);
	color: rgb(212, 212, 212);
	font-family: 'Lato', sans-serif;
	transition: 0.2s;
}

main form p textarea {
	padding: 15px;
}

main form h4 {
	color: rgb(236, 110, 79);
	font-family: 'Lato', sans-serif;
	font-size: 17px;
	text-align: center;
	width: fit-content;
	margin: auto;
}

main form p #send-button {
	width: calc(100% + 15px);
}

#address {
	display: none;
}

#form iframe {
	margin: 25px auto 25px auto;
	width: calc(100% - 10px);
}

footer {
	margin-bottom: 25px;
}

footer h1 {
	text-align: center;
	font-size: 18px;
	margin: 15px 0;
	font-family: 'Lato', sans-serif;
	color: rgb(202, 202, 202);
}

footer h1 a {
	color: rgb(202, 202, 202);
	text-decoration: none;
	transition: 0.15s;
}

/* Desktop */
@media screen and (min-width: 641px) {
	/* http://meyerweb.com/eric/tools/css/reset/ 
	   v2.0 | 20110126
	   License: none (public domain)
	*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	/* End of CSS Reset */

	body {
		background-color: black;
		color: white;
	}

	header {
		margin: 25px;
	}

	header section {
	    display: flex;
	    align-items: flex-end;
	}

	header section i {
		display: none !important;
	}

	header h1 {
	    font-size: 50px;
		font-family: 'Cinzel', serif;
	}

	header h2 {
	    font-size: 35px;
		padding-left: 25px;
		padding-bottom: 6px;
		font-family: 'Lato', sans-serif;
	}

	nav {
	    display: flex;
	    width: 100%;
	    justify-content: space-around;
		margin-top: 25px;
		border: 0 solid white;
		border-width: 0 1px;
		font-family: 'Lato', sans-serif;
	}

	#mobile-nav {
		display: none;
	}

	nav a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		border: 0 solid white;
		border-width: 0 1px;
		color: white;
		text-decoration: none;
		font-size: 22px;
		height: 40px;
		transition: 0.2s;
	}

	nav .active {
		background-color: rgb(10, 10, 10);
		color: rgb(230, 230, 230);
	}

	nav a:active {
		color: rgb(161, 52, 38);
		letter-spacing: -1px;
	}

	nav a:hover {
		background-color: rgb(20, 20, 20);
		letter-spacing: 1px;
	}

	#centered-main {
		text-align: center;
		font-size: 25px;
	}

	main section {
		background-image: url(images/indexhero.jpg);
		height: 500px;
		background-size: cover;
		background-position: right;
	}

	main #menu, main #rvpark, main #catering, main #contact {
		background-image: url(images/menuhero.jpg);
		background-position-y: -500px;
		text-align: center;
		height: 300px;
	}

	main #rvpark {
		background-image: url(images/rvparkhero.jpg);
	}

	main #catering {
		background-image: url(images/cateringhero.jpeg);
		background-position-y: -750px;
	}

	main section h1 {
		font-size: 100px;
		padding: 100px 75px 50px 75px;
		font-family: 'Cinzel', serif;
		width: fit-content;
		text-shadow: 2px 2px 10px black;
	}

	main #menu h1, main #rvpark h1, main #catering h1, main #contact h1 {
		margin: auto;
		padding-top: 100px;
	}

	main section a {
		margin: 25px 50px 0 75px;
		font-size: 20px;
		background: rgb(99,9,14);
		background: linear-gradient(180deg, rgba(99,9,14,1) 0%, rgba(147,21,13,1) 30%, rgba(99,9,14,1) 100%);
		border-radius: 50px;
		padding: 5px 25px;
		color: white;
		text-decoration: none;
		box-shadow: 0 0 35px 10px rgba(0,0,0,0.7), 0px 0px 25px 5px rgba(99,9,14,1) inset;
		transition: 0.5s;
		font-family: 'Lato', sans-serif;
		animation-name: pop-in;
		animation-duration: 0.3s;
		animation-fill-mode: both;
		opacity: 0;
		float: none;
	}

	main section a:nth-of-type(even) {
		animation-delay: 0.15s;
		float: none;
	}

	main section a:hover {
		box-shadow: 0 0 45px 20px rgba(0,0,0,0.7), 0px 0px 25px 5px rgba(99,9,14,1) inset;
		background: linear-gradient(180deg, rgba(147,21,13,1) 0%, rgb(172, 51, 20) 30%, rgba(147,21,13,1) 100%);
	}

	@keyframes pop-in {
		from {
			font-size: 20px;
			padding: 5px 25px;
			opacity: 0;
		}
		to {
			font-size: 30px;
			padding: 15px 35px;
			opacity: 1;
		}
	}

	main article {
		display: grid;
		grid-template-columns: 400px 1fr;
		padding: 75px;
	}

	main article:nth-of-type(even) {
		background-color: rgb(53, 8, 8);
		grid-template-columns: 1fr 400px;
	}

	main article img {
		width: 400px;
		animation-name: fade-in;
		animation-duration: 0.5s;
	}

	@keyframes fade-in {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	main article p {
		margin: 25px 50px;
		font-size: 26px;
		line-height: 40px;
		font-family: 'Lato', sans-serif;
		animation-name: fly-in;
		animation-duration: 0.5s;
	}

	main article:nth-of-type(even) p {
		animation-name: fly-in-alt;
	}

	@keyframes fly-in {
		from {
			margin-left: 125px;
			opacity: 0;
		}
		to {
			margin-left: 50px;
			opacity: 1;
		}
	}

	@keyframes fly-in-alt {
		from {
			margin-left: -50px;
			opacity: 0;
		}
		to {
			margin-left: 50px;
			opacity: 1;
		}
	}

	main #menu-holder {
		background: none;
		height: fit-content;
		display: grid;
		grid-template-columns: 2fr 1fr 2fr;
		gap: 15px;
	}

	main #menu-holder img {
		width: 100%;
		padding: 0;
	}

	main #menu-holder #last {
		grid-column: 3/4;
	}

	main article p a {
		color: white;
		text-decoration: none;
		transition: 0.2s;
		font-size: 20px;
	}

	main article p a:hover {
		color: rgb(219, 25, 25);
		letter-spacing: 1px;
	}

	main #form, main form {
		margin: auto;
		width: 750px;
	}

	main #form {
		animation-name: form-fly-in;
		animation-duration: 0.5s;
		display: grid;
		grid-template-columns: 100%;
	}

	@keyframes form-fly-in {
		from {
			padding-left: 500px;
			opacity: 0;
		}
		to {
			padding-left: 0;
			opacity: 1;
		}
	}

	main form p {
		width: 100%;
		margin: 25px 0;
		animation: none;
	}

	main form p span {
		margin-left: 5px;
		color: rgb(236, 110, 79);
	}

	main form p input, main form p textarea {
		margin: 10px 0 0 -10px;
		padding: 0 20px;
		border: 0;
		height: 50px;
		width: 100%;
		font-size: 20px;
		background-color: rgb(20, 20, 20);
		color: rgb(139, 139, 139);
		font-family: 'Lato', sans-serif;
		transition: 0.2s;
	}

	main form p input:hover, main form p textarea:hover, main form p input:focus, main form p textarea:focus {
		background-color: rgb(51, 51, 51);
		color: white;
	}

	main form p textarea {
		padding: 15px 20px;
	}

	main form h4 {
		color: rgb(236, 110, 79);
		font-family: 'Lato', sans-serif;
		font-size: 17px;
		text-align: center;
	}

	main form p #send-button {
		width: calc(100% + 40px);
	}

	#address {
		display: none;
	}

	#form iframe {
		margin: 25px auto 25px auto;
		width: calc(100% + 30px);
	}

	footer {
		margin-bottom: 25px;
	}

	footer h1 {
		text-align: center;
		font-size: 22px;
		margin: 15px 0;
		font-family: 'Lato', sans-serif;
		color: rgb(202, 202, 202);
	}

	footer h1 a {
		color: rgb(202, 202, 202);
		text-decoration: none;
		transition: 0.15s;
	}

	footer h1 a:hover {
		font-size: 25px;
	}

	footer h1 a:active {
		color: rgb(161, 52, 38);
		font-size: 22px;
	}
}