/* The CSS clamp(MIN, PREFERRED, MAX)
restricts a value between a minimum and maximum limit, while dynamically applying a preferred scale (like viewport width) in between. It takes three parameters.

1rem = 16px by default in most browsers.
vw = 1% of horiz pixels in device, 
2vw = 16 pixels on a device with 800 horiz pixels
      This allows for adjusting to device resolution.
	  cell vs tablet vs. large monitor



This style is to help make fonts scale and be readable
	on both cell phones and PC windows  
	
	The specific math formula 1vw + 0.75rem creates a fluid font size that scales smoothly between mobile and desktop screens. It combines screen width tracking with a stable base size.Here is exactly how the browser calculates that specific value.
	
	Breaking Down the MathThe formula adds two different units together:1vw (1% of Viewport Width): This is the dynamic part. If a mobile screen is 400 pixels wide, 1vw is 4px. If a desktop monitor is 1600 pixels wide, 1vw becomes 16px.0.75rem 
	
	(The Base Size): This is the stable, accessible part. Based on the standard 16px browser default, 0.75rem is always 12px.
	
	How It Changes Across Screens
	When the browser loads your page, it instantly adds those two values together based on the user's screen size:
	
	On a small mobile phone (400px wide screen):\(\text{4px\ }(1vw)+\text{12px\ }(0.75rem)=\mathbf{16px}\text{\ font\ size}\)
	
	On a tablet (800px wide screen):\(\text{8px\ }(1vw)+\text{12px\ }(0.75rem)=\mathbf{20px}\text{\ font\ size}\)
	
	On a standard laptop (1400px wide screen):\(\text{14px\ }(1vw)+\text{12px\ }(0.75rem)=\mathbf{26px}\text{\ font\ size}\)
	
	Why This Specific Combination is Used
	If you only use 1vw by itself, the text will shrink to an unreadable 4 pixels on a mobile screen.By adding + 0.75rem, you are guaranteeing a safety floor. 
	
	The text will never drop below that base 12px value from the rem side, while the vw side gently coaxes the text to grow larger as the screen expands.
	*/
	
    <style>
        .body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;

            /* Responsive font size with minimum and maximum limits */
			/* clamp(minimum, preferred in viewport units, maximum); 
						If preferred fits, it uses preferred.  */
            font-size: clamp(24px, 2vw, 24px);
            line-height: 1.6;
        }

        .h1 {
            font-size: clamp(32px, 5vw, 56px);
            color: #333;
        }

        .h2 {
            font-size: clamp(24px, 3vw, 36px);
            color: #555;
        }
           /* dot before .p says this is a style.
		      vw - 1% percent of screen, scales based on number of pixels on device.
			  rem = rem means 16 pixels on most browsers.*/
			  
        .p {
            font-size: clamp(24px, 28px, 32px); 
        }
			 
		.ol {
			font-size: clamp(24px, 28px,32px);
				
			/*   
            font-size: clamp(18px, 2vw, 24px);
			*/
        }
		
		.li {
            font-size: clamp(24px, 32px, 36px);
        }
*/
        .container {
            max-width: 1200px;
            margin: auto;
        }
    </style>