/* Paragraph styles */

/*  Set the default font for the entire site  */

/* Consider san-serif fonts for monitor screens. Modern high resolution monitors are
 *   probably fine for fonts with serif, but small devices still tend to have low-resolution
 *   screens. Fonts without serifs tend to be more readable on these screens.  */
body {
   font-family: var(--default-serif);
   font-size: medium;
   font-weight: normal;
}


/*  Headings Have Title-case As Illustrated Here, And Are All Bold, sans-serif  */
h1, h2, h3, h4, h5, h6 {
   text-transform: capitalize;
   font-weight: bold;
   font-family: var(--default-sans);
   page-break-after: avoid;  /* do not separate headings from their paragraphs  */
}

   /* Since these are likely to be similar sizes to their paragraphs, we differentiate them with font-style and indentation */
h5, h6  {
   font-style: italic;
   text-indent: 3ex;
}

h1 { font-size: 183%;}
h2 { font-size: 166.667%;}
h3 { font-size: 150%;}
h4 { font-size: 133.333%;}
h5 { font-size: 100%;}
h6 { font-size: 83%;}

p, ul, ol, dl {
   text-indent: 3ex;
   text-align: justify;
   margin: 1em;
   font-family: inherit;
}
  
aside {
   text-indent: 3ex;
   text-align: left;
   margin: 1em;
   font-family: inherit;
   font-size: 92%;
}

picture {
   margin: 0 1.5em 1.5em 0;
   float: left;
   max-width: 33%;
   height: auto;
   box-shadow: 1ex 2ex 2.5ex  hsla(var(--shadow-hue),50%,0.33);
}

header picture * {
   margin: 1ex 2ex 1ex 1ex;
   float: left;
   max-width: 25%;
   padding: 1ex 2ex 1ex 1ex;
   height: auto;
   box-shadow: none;
}

figure {
   margin: 0 1ex 1ex 0;
   float: left;
   max-width: 25%;
   height: auto;
   box-shadow: 1ex 2ex 2.5ex  hsla(var(--shadow-hue),50%,0.33);
}

/* This limits the size of a horizontal rule to one-third of its container. This is a
 *   personal preference and can be altered or dismissed entirely. */
hr {
   display: block;
   margin-left:auto;
   margin-right:auto;
   width:33%;
   height:auto;
   size: contain;
   /* object-fit: scale-down; */
}

/* This is a stylised horizontal rule, in an SVG format, which ought to be scalable.
 *   (That is what the "S" in "SVG" is for ;-) ) */
hr::before {
   /* content: <img src="../image/hr.svg" alt="Smiley face" style="display:block;margin-left:auto;margin-right:auto;height:auto;width:33%;column-span:all;"/>; */
   content: url (/image/hr4.svg);
   display: block;
   margin-left:auto;
   margin-right:auto;
   height:auto;
   width:33%;
   justify-content:center;
   size: contain;
   object-fit: scale-down;
   /*content: url (../image/hr.before.svg) url(../image/hr.after.svg);*/
}

hr::after {
   content: url (image/hr.svg);
   display: block;
   margin-left:auto;
   margin-right:auto;
   height:auto;
   width:33%;
   size: contain;
   object-fit: scale-down;
   /*content: url (../image/hr.before.svg) url(../image/hr.after.svg);*/
}

/* LOW_RES SCREENS  */
/* No fonts with serifs on low-resolution screens */
@media screen and (max-width: 800px) {

   body {
      font-family:  var(--default-sans);
      font-size: medium;
      font-weight: normal;
   }

/*  Headings Have Title-case As Illustrated Here, And Are All Bold, Serif  */
   h1, h2, h3, h4, h5, h6 {
      text-transform: capitalize;
      font-weight: bold;
      font-family: var(--default-serif); /* Fonts with serifs are fine, fonts are larger */
      page-break-after: avoid;  /* do not separate headings from their paragraphs  */
   }

      /* Since these are likely to be similar sizes to their paragraphs, we set them
       *  aside with font-style and indentation */
   h5, h6  {
      font-family:  var(--default-sans); /* small fonts, therefore, no serifs */
      font-style: italic;
      text-indent: 3ex;
   }
}


/* PRINT */
@media print {

/* Serif fonts are a perfectly cromulent choice for print  */
body {
   font-family: var(--default-serif);
   font-size: 10pt;     /* re-define the default font-size in points  */
   font-weight: normal;
   }
  
aside {
   text-indent: 3ex;
   text-align: left;
   margin: 1em;
   font-family: inherit;
   font-size: 8pt;
   }
}