/* Layout styles */

* {
   box-sizing: border-box;
}

body {
   color: hsl(var(--fg-hue),20%);
   background-color: hsl(var(--bg-hue),95%);
   padding: 0 1ex;
   justify-content: center;
}

/* Header formatting, (general case) */
header {
      font-family: var(--default-sans);
      font-weight: bold;
      font-size: xx-large;
      text-transform: capitalize;
      margin: 1ex 1ex;
      page-break-inside: avoid;
      page-break-after: avoid;
}
header p:first-of-type {
      font-size: 93%;
      text-indent: 0ex;
}

header p {
      visibility: visible;
      font-size: 75%;
      text-indent: 0ex;
      margin: 0em 1ex;
}

/* Body specific formatting */
body > header {
   margin: 1ex;
   padding: 1ex 1ex;
   color: hsl(var(--fg-hue),0%);
   background-color: hsl(var(--bg-hue),100%);
}

body nav  {
   font-weight: bold;
   font-size: large;
   margin: 1ex;
}


main {
/*
   background-color: hsl(var(--fg-hue),95%);
*/
   padding: 0 1ex;
   margin: 0em 1ex 0em 1ex;
   justify-content: center;
}

article {
   display: flex;
   flex-wrap: wrap;
/*   overflow: auto; */
/*
   background-color: hsl(var(--bg-hue),95%);
*/
   padding: 0 1em;
   justify-content: center;
   margin-left: auto;
   margin-right: auto;
}

/* Article flex properties */
article>header {
   flex: 100%;
   order: 1;
}

article > p {
   flex: 100%;
   order: 2;
}

article > aside {
   flex: 30%;
   order: 4;
}

/*article > aside:first-of-type {
   flex: 24%;
   order: 6;
}*/

article > div {
   flex: 67%;
   order: 3;
/*
   background-color: hsl(var(--fg-hue),95%);
*/
   padding: 0.5em 1em;
   margin: 1em 1em 0em 1em;
}

article > section:first-of-type {
   flex: 67%;
   order: 3;
/*
   background-color: hsl(var(--fg-hue),95%);
*/
   padding: 0.5em 1em;
   margin: 1em 1em 0em 1em;
}

article > section {
      flex: 67%;
      order: 5;
      /*
       *  background-color: hsl(var(--fg-hue),95%);
       */
      padding: 0.5em 1em;
      margin: 1em 1em 0em 1em;
}

article > footer {
   flex: 100%;
   order: 99;
}

section::after {
   content: url(../image/hr4.svg);
   column-span: all;
   order: 11;
   flex: 100%;
   display:block;
   size: contain;
   object-fit: scale-down;
   justify-content: center;
   margin-left: auto;
   margin-right: auto;
   margin-top: 1em;
   width: 25%;
   height: auto;
}


/* aside */

article> aside {
   /*position: sticky;
   top: 2em;*/
        float: right;
        clear: right;
   border: 3px solid hsl(var(--highlight-hue),20%);
   margin: 0em 1ex;
   font-family: var(--default-serif);
   color: hsl(var(--fg-hue),20%);
   background-color: hsl(var(--bg-hue),80%);
   /* box-shadow:   6px 9px 12px hsla(var(--shadow-hue),50%,0.33); */
   padding: 0.5ex 1ex;
   max-width: 20em;
}



section aside {
   position: static;
	float: right;
	clear: right;
	width: 33%;
	margin: 0em 1ex;
   font-family: var(--default-serif);
   background-color: hsl(var(--highlight-hue),85%);
   box-shadow:   1ex 1.5ex 3ex hsla(var(--shadow-hue),50%,0.33);
   padding: 0.333ex 0.5ex;
   page-break-inside: avoid;
}

aside div {
   font-family: var(--default-sans);
}

/*
article::after {
      content: url(../image/hr2.svg);
      column-span: all;
      display:block;
      order: 12;
      flex: 100%;
      size: contain;
      object-fit: scale-down;
      justify-content: center;
      margin-left: 33%;
      margin-right: 33%;
      margin-top: 1em;
      width: 12%;
      height: auto;
}
 */



/* footer */
 footer {
   font-size: 0.75em;
   text-indent: 0;
   page-break-before: avoid;
   page-break-inside: avoid;
 }

/*
 footer::before {
   content: url(../image/hr4.svg);
   display: flex;
   object-fit:scale-down;
   justify-content: center;
   margin-left:auto;
   margin-right:auto;
   margin-top: 1em;
   width:20%;
   height:auto;
   column-span:all;
}
*/

/* details */

details p {
   font-size: smaller;
   text-indent: 0;
}

/* summary */

summary {

}

@media screen and (max-width:672px) {
   article > section {
      flex: 49%;
      order: 3;
/*
      background-color: hsl(var(--fg-hue),95%);
*/
      padding: 0.5em 1em;
      margin: 1em 1em 0em 1em;
   }

   article > aside {
      flex: 24%;
      order: 4;
   }
}

@media print {
   body {
   color: black;
   background-color: white;
   padding-left: 1em;
   padding-right: 1em;
   }


   main, article, section {
      padding: 0em;
      margin: 0;
   }

   article {
      page-break-before: right;
   }

   nav { display: none; }
  

article > aside {
   display: none;
   }

section aside {
   border: 0.5px solid hsl(var(--highlight-hue),50%);
   }

   header {
      page-break-inside: avoid;
      page-break-after: avoid;
   }

   footer {
      page-break-before: avoid;
      page-break-inside: avoid;
   }

   summary {
     
   }

   details {
      display: contents;
      page-break-before: avoid;
      page-break-inside: avoid;
   }
}