<meta name = "format-detection" content = "telephone=no">
<section class="menu">
	<h1 class="heading-1">The Bun Shop</h1>
	<ul class="menu-items">
		<li class="item">Short Ribs Burger
			<span class="description">Our butcher's best blend topped with a cheddar cheese sauce</span>
			<span class="serving">Served on a pretzel bun aside house-made dill pickles</span>
		</li>	
		<li class="item">Bacon, Egg & Cheeseburger
			<span class="description">A rich, hangover breakfast with traditional toppings</span>
			<span class="serving">Served on a toasted brioche bun aside cumin-crusted oven fries</span>
		</li>
		<li class="item">Wild Mushroom Turkey Burger
			<span class="description">Chanterelles and shiitakes atop a lean patty lathered with chipotle mayonnaise</span>
			<span class="serving">Served on a sesame bun aside Mexican grilled corn</span>
		</li>
	</ul>
	<p class="price">$12.00 13 14 15 16 17 18 19 $20 21 22 23 24 25 26</p>
</section>

$cream: #f2eee1;
$brown: #2d1006;
$rose: #70273b;
$taupe: #776150;

section {
  display: block;
}

html {
  font-size: 62.5%;
} 

body {
  background-color: $cream;
  margin: 0;
  padding: 0;
}

h1, ul, li, span, p {
  margin: 0;
  padding: 0;
}

.menu {
  padding: 40px 0;
  padding: 4rem 0;
  text-rendering: optimizeLegibility;
  @media screen and (max-width: 650px) {
      padding: 25px 0;
      padding: 2.5rem 0;
    }
  .heading-1 {
    font-family: "alpha-echo", helvetica, arial, sans-serif;
    font-size: 120px;
    font-size: 12rem;
    font-size: 13.5vw;
    font-weight: 400;
    font-style: normal;
    line-height: .8;
    text-align: center;
    color: $brown;
    margin: 0;
    margin-bottom: 40px;
    margin-bottom: 4rem;
    @media screen and (max-width: 650px) {
      margin-bottom: 20px;
      margin-bottom: 2.0rem;
    }
  }
  .menu-items {
    list-style-type: none;
      .item {
        font-family: "de-walpergens-pica-sc", georgia, serif;
        font-size: 40px;
        font-size: 4rem;
        font-size: 3.7vw;
        font-weight: 400;
        font-style: normal;
        letter-spacing: 2px;
        letter-spacing: .2rem;
        text-transform: lowercase;
        line-height: .9;
        text-align: center;
        color: $rose;
        margin: 0 5% 30px;
        margin: 0 5% 3rem;
        @media screen and (max-width: 650px) {
          font-size: 6vw;
        }
        .description {
          display: block;
          font-family: "de-walpergens-pica", georgia, serif;
          font-size: 30px;
          font-size: 3.0rem;
          font-size: 2.8vw;
          line-height: 1.2;
          letter-spacing: 0;
          text-transform: none;
          color: $taupe;
          padding: 10px 0 5px;
          padding: 1rem 0 .5rem;
          @media screen and (max-width: 650px) {
          font-size: 4.3vw;
          }
        }
        .serving {
          display: block;
          font-family: "de-walpergens-pica", georgia, serif;
          font-size: 22px;
          font-size: 2.2rem;
          font-size: 2.2vw;
          font-style: italic;
          line-height: 1.1;
          letter-spacing: 0;
          text-transform: none;
          color: $taupe;
          @media screen and (max-width: 650px) {
          font-size: 3.8vw;
          }
        }
      }
  }
  .price {
    font-family: "de-walpergens-pica", georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 30px;
    font-size: 3.0rem;
    font-size: 2.8vw;
    line-height: 1;
    text-align: center;
    color: $brown;
    margin-bottom: 0;
    @media screen and (max-width: 650px) {
       font-size: 4.3vw;
    }
  }
}