body {
	margin: 0;
	padding: 0;
}

h2 {
	margin: 0;
}

#landing-page {
	background-image: url('./imgs/audi.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	height: 100vh; /*maybe height too large*/
}

.title-background {
	background: #070707;
	width: fit-content;
	margin: auto;
	padding: 10px;
}

.title {
	text-align: center;
	color: #D0D3D4;
	font-size: 2em;

}

/* nav slider*/

.nav-slider {
	padding: 15px;
	cursor: pointer;
	z-index: 4;
}

.line {
	background: #eee;
	height: 3px;
	margin: 5px;
	width: 30px;
	z-index: 4;
}

.line:nth-child(1) {
	margin-top: 0;
	z-index: 4;
}

/* nav slider section*/

.nav-slider-section {
	background: rgba(0,0,0,0.8);
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	transform: translateX(-100%);
	z-index: 4;
}

.close-nav-slider {
	border: none;
	outline: none;
	float: right;
	background: transparent;
	color: #F1C40F;
	font-size: 1.5em;
	padding: 15px;
	cursor: pointer;
	z-index: 4;
}

.nav-links-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	z-index: 4;
}

.nav-links-container li {
	list-style-type: none;
	text-align: center;
	padding: 10px;
	z-index: 4 !important;
}

.nav-links {
	list-style-type: none;
	text-decoration: none;
	color: #eee;
	font-size: 1.5em;
	z-index: 4 !important;
}



.openNav {
	animation: openNav 0.5s forwards;
	z-index: 4;
}

.closeNav {
	animation: closeNav 0.5s forwards;
	
}

@keyframes openNav {
	100% {
		transform: translateX(0%);
	}
}

@keyframes closeNav {
	0% {
		transform: translateX(0%);
	}

	100% {
		transform: translateX(-100%);
	}
}

#menu {
	background: #000;
}

.menu-title {
	color: #D0D3D4;
	text-align: center;
	padding: 25px;
	font-size: 2em;
}

#infop {
	font-size: 1em;
	color: #eee;
}

.menu-price {
	float: right;
}

/*restaurant info */

#restaurant-info {
	background: black;
	padding-top: 54px;


}

.restaurant-info-title {
	color: #D3CAC8;
	text-align: center;

}

.info-container {
	display: grid;
	grid-template-columns: 1fr;
}

.address-content, .business-hours, .contact-content {
	padding: 10px;
}

.address, .hours {
	font-size: 1em !important;
	text-align: center;
}

.phone {
	font-size: 1em !important;
	text-align: center;
	margin-bottom: 0;
}

@media screen and (min-width: 768px) {
	.info-container, {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.address-content, .business-hours {
		border-right: 1px solid #eee;
		padding: 30px;
	}
	.contact-content {
		padding: 30px;
	}

}