<h2>Ingredients for hand-made bread 🍞</h2>
<ol>
	<li>Bread Flour</li>
	<li>Instant Yeast</li>
	<li>Salt</li>
	<li>Water</li>
	<li>Cornmeal <span>(Optional)</span></li>
</ol>

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;700&display=swap');

/* General styling for the page */
body {
  background-color: #FFF5DD;
}

* {
  font-family: 'Fraunces', serif;
}

h2 {
  padding: 1rem;
  color: #1A1A1A;
}

ol {
  /* remove the default styling for the list */
  list-style: none;
  margin: 0;
  padding: 0 1rem;
  /* Initialize the counter */
  counter-reset: ingredients;
}

ol li {
  /* which counter to increment */
  counter-increment: ingredients;
  /* layout and spacing between the list items - unrelated to the custom counter stuff */
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  color: #4A4A4A;
}

ol li:before {
  /* this defines the content for the list item */
  content: counter(ingredients);
  /* these are the custom styles I'm applying to them */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(77, 171, 247, 0.16);
  color: #4DABF7;
  padding: 1rem;
  border-radius: 42px;
  height: 42px;
  width: 42px;
  font-size: 2rem;
  font-weight: 700;
  margin-right: .75rem;
}