<h1>Shopping List</h1>

<h2>Food</h2>

<ol class="continuous-list">
  <li>Bread</li>
  <li>Eggs</li>
  <li>Apples</li>
  <li>Cereal</li>
  <li>Canned Soup</li>
  <li>Frozen Pizza</li>
  <li>Chocolate</li>
</ol>

<h2>Drink</h2>

<ol class="continuous-list">
  <li>Soda</li>
  <li>Milk</li>
  <li>Bottled Water</li>
  <li>Beer</li>
  <li>Wine</li>
</ol>

<h2>Toiletries</h2>

<ol class="continuous-list">
  <li>Toothpaste</li>
  <li>Toilet Paper</li>
  <li>Razors</li>
  <li>Soap</li>
</ol>

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

body {
  font-family: "Indie Flower", cursive;
  letter-spacing: 0.1rem;
  background-image: linear-gradient(90deg, #e8b6b6, 2px, rgba(255,255,255,0), 2px, rgba(255,255,255,0)), linear-gradient(0, #d9eaf3, 1px, rgba(255,255,255,0), 2px, rgba(255,255,255,0));
  background-position: 4rem 0;
  background-size: 100% 2.4rem;
  color: #111;
  padding: 2.2rem 0 0 5rem;  
  white-space: nowrap;

  /* Initialize Counter */
  counter-reset: listCounter;
}

h1 {
  font-size: 3.2rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

h2 {
  display: inline-block;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  border-bottom: 2px solid #111;
}

.continuous-list {
  font-size: 1.8rem;
  font-weight: 400;
  padding-left: 0.5rem;
  margin-bottom: 2.8rem;
}

.continuous-list li {
  margin-bottom: 0.6rem;
}

.continuous-list li::before {  
  content: counter(listCounter) ". ";  
  counter-increment: listCounter;
}