<div class="menu">

	<div class="title">
		<img src="https://anniedotexe.github.io/hosted-assets/codepenchallenge/foodtruck/truck.png" alt="Truck">
		<h1>Now Serving</h1>
	</div>

	<div class="menu-container">
		<div class="row">
			<div class="menu-section">
				<img src="https://anniedotexe.github.io/hosted-assets/codepenchallenge/foodtruck/burger.png" alt="Burger">
				<div class="menu-items burgers">
					<h2>Burgers</h2>
					<p>Hamburger <span>$3.00</span></p>
					<p>Cheeseburger <span>$3.50</span></p>
					<p>Double Cheese Burger <span>$4.50</span></p>
					<p>Veggie Burger <span>$3.00</span></p>
				</div>
			</div>

			<div class="menu-section">
				<img src="https://anniedotexe.github.io/hosted-assets/codepenchallenge/foodtruck/fries.png" alt="Fries">
				<div class="menu-items fries">
					<h2>Fries</h2>
					<p>Classic Fries <span>$2.00</span></p>
					<p>Chili Cheese Fries <span>$4.50</span></p>
					<p>Loaded Nacho Fries <span>$6.00</span></p>
					<p>Bulgogi Fries <span>$6.00</span></p>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="menu-section">
				<img src="https://anniedotexe.github.io/hosted-assets/codepenchallenge/foodtruck/taco.png" alt="Taco">
				<div class="menu-items tacos">
					<h2>Tacos</h2>
					<p>Carne Asada <span>$1.20</span></p>
					<p>Carnitas <span>$1.20</span></p>
					<p>Chorizo <span>$1.20</span></p>
					<p>Al Pastor <span>$1.20</span></p>
				</div>
			</div>

			<div class="menu-section">
				<img src="https://anniedotexe.github.io/hosted-assets/codepenchallenge/foodtruck/drink.png" alt="Drink">
				<div class="menu-items drinks">
					<h2>Drinks</h2>
					<p>Soda <span>$1.00</span></p>
					<p>Cucumber Water <span>$1.50</span></p>
					<p>Iced Tea <span>$1.00</span></p>
					<p>Fresh Squeezed Lemonade <span>$2.00</span></p>
				</div>
			</div>
		</div>

	</div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Neucha&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	height: 100vh;
	display: grid;
	color: #ffffff;
	font-family: "Neucha", cursive;
	letter-spacing: 0.05em;
}

h1,
h2 {
	font-family: "Fredericka the Great", cursive;
	letter-spacing: 0.2em;
}

.menu {
	margin: auto;
	background: #313032;
	padding: 50px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.title {
	display: flex;
	align-items: center;
	gap: 100px;
	margin-bottom: 50px;
}

.title img {
	height: 100px;
}

h1 {
	font-size: 48px;
	text-transform: uppercase;
}

.menu-container {
	margin: 0 auto;
	display: flex;
	width: 825px;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
}

.row {
	display: flex;
	justify-content: space-around;
}

.menu-section {
	display: flex;
	align-items: center;
}

.menu-section img {
	height: 100px;
	margin-right: 25px;
}

h2 {
	font-size: 32px;
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid #ffffff;
}

.menu-items p {
	font-size: 20px;
	display: flex;
	gap: 50px;
	justify-content: space-between;
}