Problem description

Given a navigation menu (<nav> with <ul><li><a>), write CSS rules that enable the link text font size to adjust fluidly between 14px and 22px as the viewport width changes.

Goal

Use CSS to ensure navigation links remain legible and appropriately sized across different devices by implementing a fluid font sizing approach.

Constraints

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

• Do not use JavaScript.

• Support all modern browsers.

• Link font size must be between a minimum of 14px and a maximum of 22px.

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

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.