:root {
  color-scheme: light dark; /* change from light to dark and back according to device
			       preferences. See /default.css for example usages. */
  
  --n0: rgb(142,142 147);   /* iOS neutral grey */
  
  --l1: rgb(174 174 178);   /* least light grey */
  --d1: rgb(99 99 102);     /* least dark grey */
  
  --l2: rgb(199 199 204);
  --d2: rgb(72 72 74);
  
  --l3: rgb(209 209 214);
  --d3: rgb(58 58 60);
  
  --l4: rgb(229 229 234);
  --d4: rgb(44 44 46);
  
  --l5: rgb(242 242 247);    /* most light grey */
  --d5: rgb(28 28 30);       /* most dark grey  */

  --border: rgb(0 128 0 / 0.7);     /* border and accent color.          */   
  --action: rgb(242 186 22 / 1.00); /* denoting an event trigger. */ 

  --lheader: rgb(255 215 22 / 1.00); /* light header background */
  --dheader: rgb(242 186 22 / 1.00); /* dark header background  */
}

html {
  box-sizing:border-box;
  *, *:before,*:after { box-sizing:inherit; }

  body {
    margin: 0.0rem auto;
    padding: 0.0rem;
    font-family: system-ui, sans-serif;
    font-size: 1.0rem;
    line-height: 1.5;
    overflow: auto;
    max-width: 75.0rem;
    color: light-dark(var(--d5), var(--l5));
    background-color: light-dark(var(--l5), var(--d5));
    
    header {
      margin: 0.0rem;
      padding: 0.0rem;
      min-height: 6.0rem;
      border-radius: 0.5rem;
      background-color: light-dark(var(--lheader), var(--dheader));
    }
    
    main {
      margin: 0.0rem;
      padding: 0.0rem;
      min-height: calc(100vh - 10.0rem);
      border-radius: 0.5rem;
      background-color: light-dark(var(--l5), var(--d5));
    }
    
    footer {
      margin: 0.0rem;
      padding: 0.0rem;
      min-height: 4.0rem;
      border-radius: 0.5rem;
      color: light-dark(var(--l5), var(--l3));
      background-color: light-dark(var(--l1), var(--d3));
    }
  }
}