/*   HiKenw.css   */   



 <!-- CSS-start.btm - FixCellPhnSmlFnt - Responsive_Adapts_IMAGES2DEVICE screen - scaleS down if DEVICE screen smaller than 600px, but will never exceed original size, thanks to CSS rules for images  --> 

    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f1f1f1;
            font-size: 16px; /* Set your desired base font size */
        }
        .container {
            max-width: 800px;
            margin: auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 20px 0;
        }
        @media screen and (max-width: 600px) {
            body {
                padding: 10px;
            }
            .container {
                padding: 10px;
            }
        }

  <!--  
RootBaseBody FONT Size: 16px = 1rem = 62.5%    
     em:  Relative to the font size of the parent element.
     rem (Root EM):  Relative to the root HTML element's font size     popular2013
     % (Percentage):  font-size: 62.5%, makes 1rem equal to 10px (if the browser default is 16px),
     vw:  Viewport Units (vw): This scales the text size with the width of the browser window (1vw = 1% of the viewport width).    popular2015
           font-size: 8vw; /* Heading size is 8% of the viewport width */

     prevent text from becoming too large or small, you can combine vw with the CSS clamp()

      iOS/Android Default: iOS suggests 17pt as a default (11pt minimum)
      Android frequently uses 16sp (scaled pixels) 

      Header Sizes: These are often set between 28px and 40px
      Line Height: A common recommendation is to set the line-height to 1.5x or 150% of the font size for better readability.

      Using 16px prevents BADmarks with mobile search ranking, as smaller fonts can negatively impact mobile-friendliness scores.

      Use CSS Media Queries: Apply different font sizes screen breakpoints (e.g., for screens smaller than 600px).
      css
      p {
          font-size: 16px; /* Default size for larger screens */
      }

      @media screen and (max-width: 600px) {
          p {
               font-size: 14px; /* Smaller size for mobile screens */
        }
      }

Google2026AI Recommended Approaches
Here are two effective methods for setting the root font size:
1. Using REM with Media Queries
Set a base font size on the <html>
Use media queries
Define all other font sizes and spacing (margins, padding) in REM units

Formula: font-size: clamp(min, preferred, max);
Example: font-size: clamp(1rem, 2vw + 1rem, 2rem);
 --> 

      body {
          font-size: 16px; /* Set your desired base font size */
          font-size: clamp(1rem, 2vw + 1rem, 2rem);
      }
      html {
          font-size: 16px; /* Base size   OR  font-size: 100%;    100% of user's browser default */
          font-size: clamp(1rem, 2vw + 1rem, 2rem);
      }
      p {
          font-size: 16px; /* Set your desired base font size */
          font-size: clamp(1rem, 2vw + 1rem, 2rem);
      }

      h1 {
          font-size: 2.5rem; /* 2.5 x 16px = 40px */
      }
      h2 {
          font-size: 2rem; /* 32px */
      }
      h3 {
          font-size: 1.25rem; /* 20px */
      }
      h4 {
          font-size: 1.125rem; /* 18px */
      }




 <!-- CSS-end.btm - FixCellPhnSmlFnt - Responsive_Adapts_IMAGES2DEVICE screen - scaleS down if DEVICE screen smaller than 600px, but will never exceed original size, thanks to CSS rules for images  --> 







html, body{
    font-size: 16px;
    font: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

table,td{
    font-size: 18px;
    font: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

h1{
    font: bold 1.7em/1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}

h4{
    font:  1.7em/1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}

h2{
    font: bold 1.5em/1em Arial, Helvetica, sans-serif;
}

h5{
    font:  1.5em/1em Arial, Helvetica, sans-serif;
}

h3{
    font: bold 1.2em/1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}    

 .myfont, input[type="text"], input[type="number"] {
    font-size: 140.2%;
    font-family: inherit;
}

textarea, text, button, input, select{
	font-family:inherit;
	font-size:140.2%;
	margin:0
}

form, fieldset{
  position: relative;
	font-size:140.2%;
}

label {
  width: 15em;
	font-size:140.2%;
}

a:hover {
    text-decoration: underline;
}

.container {
    font-size:160.2%;
}

#goFORMid   {
    font-size:140.2%;
}

#MyGOtxtBXid {
    text-align: center;

    font-family: Verdana; font-weight: bold; 
    font-size: 140.2%; 
    color: #800000; 
    background-color: #ffff80;
}


#calcFORMid {
    text-align: left;

    font-family: Verdana; font-weight: bold; 
    font-size: 140.2%; 
    color: #000000; 
    background-color: #ffffe0;
    padding-left: 10px;

}






/* Default Styles (Desktop/Large Screen) */
html {
  /* 62.5% of 16px default is 10px, so 1rem = 10px */
  font-size: 62.5%;
}
body {
    font-size: 1.6rem; /* Sets default text back to 16px */  
    font-family:  'Open Sans',  Roboto, Arial, Verdana,  Helvetica, Georgia,  Geneva, sans-serif;
/*     font-family: Verdana, Open Sans,   Helvetica, Georgia,  Geneva, sans-serif;  */
    font-size: 1.8rem;  /* Base size */
    font-weight: 400;
  max-width: 1200px;
  margin: 0 auto;
  width: 99%;
}

/* Mobile Styles (Screen widths 768px and down) */
@media (max-width: 768px) {
  body {
    font-size: 1.4rem; /* 14px; Smaller size for mobile */
    font-family:  'Open Sans',  Roboto, Arial, Verdana,  Helvetica, Georgia,  Geneva, sans-serif;
    font-size: 1.4rem;  /* Base size */
    font-weight: 400;
  }
}

p {
  font-size: 1.6rem; /* Equivalent to 16px */
}
li {
  font-size: 1.4rem; /* Equivalent to 14px */
}

/*  google uses 24px 400weigt for text and 42px 400 or 600weight for titles,   */
/*  H1 and H5 with HTML 62.5%   1.6rem;  Sets default text back to 16px  */
h1, h2, h3, h4, h5 {
  font-family:  'Open Sans',  Roboto, Arial;  /*  including !important to bypass explicit existing theme styling */
    font-weight: 600;
}

   /*  H1-H5 with HTML 62.5%   1.6rem;  Sets default text back to 16px  */
  /* clamp(MIN, PREFERRED, MAX) */
/*   Clamp for Headings (clamp(min, preferred, max)) */
h1 {
  /* Scales from 32px (3.2rem) to 42px (4.2rem) */
  font-size: clamp(3.2rem, 2.5356rem + 1.3870vw, 4.2rem); 
}

h2 {
  /* Scales from 28px (2.8rem) to 34px (3.4rem) */
  font-size: clamp(2.8rem, 2.4014rem + 0.8322vw, 3.4rem);
}

h3 {
  /* Scales from 24px (2.4rem) to 28px (2.8rem) */
  font-size: clamp(2.4rem, 2.1343rem + 0.5548vw, 2.8rem);
}

h4 {
  /* Scales from 22px (2.2rem) to 24px (2.4rem) */
  font-size: clamp(2.2rem, 2.0671rem + 0.2774vw, 2.4rem);
}

h5 {
  /* Scales from 20px (2rem) to 22px (2.2rem) */
  font-size: clamp(2rem, 1.8671rem + 0.2774vw, 2.2rem);
}
 /*  smooth scaling relative to the viewport,  */



.CENTERflex {
  display: flex;            /* Enables Flexbox */
  justify-content: center;  /* Centers horizontally (main axis) */
    /*    flex-wrap: wrap   ???   */
    /*      flex-direction: column;       Stacks items vertically */
    /*    align-items: center;      Centers vertically (cross axis) */
    /*   height: 100vh;                 Optional: Gives container height to show vertical centering */
}


    </style>
