Problem description

Given a heading element (e.g., <h1>), implement CSS rules so that its font size is fluid, scaling smoothly between a defined minimum and maximum font size as the viewport width changes.

Goal

Use CSS properties to ensure the heading text remains legible and aesthetically pleasing across a range of screen sizes by implementing fluid typography.

Constraints

• The solution must use an external stylesheet named styles.css.

• Do not use JavaScript.

• Support all modern browsers.

• The font size must scale between a minimum of 24px and a maximum of 48px.

• Viewport widths should be between 320px and 1200px.

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.