Problem description

You have headings (<h1>, <h2>), paragraphs (<p>), and list items (<li>) within your document. Your task is to establish a 1rem baseline grid using a CSS custom property and apply it to the line-height and margin-bottom of all these text elements, ensuring uniform vertical spacing.

Goal

Use only HTML and CSS to:

1. Define --rhythm as 1rem in :root.

2. Apply line-height: var(--rhythm); and margin-bottom: var(--rhythm); to <h1>, <h2>, <p>, and <li>.

Constraints

• Only CSS is allowed.

• Use rem units and CSS variables.

• CSS file must be named styles.css.

• Do not alter the HTML structure beyond the provided skeleton or add inline styles.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.