/* Set base font size for root element */ html { font-size: 16px; /* 1 REM = 16px */ } /* Global body styling with REM units */ body { font-family: Arial, sans-serif; font-size: 1rem; /* 16px */ line-height: 1.5; } /* Example of content with scalable REM-based font sizes */ h1 { font-size: 2rem; /* 32px */ } p { font-size: 1rem; /* 16px */ } .small-text { font-size: 0.6875rem; /* 11px */ } /* Media query to adjust font size for smaller screens */ @media (max-width: 600px) { html { font-size: 14px; /* Reduce base font size for smaller screens */ } h1 { font-size: 1.75rem; /* 24.5px */ } p, .small-text { font-size: 0.875rem; /* 12.25px */ } }