@import "colours.css";
@import "fonts.css";
@import "columns.css";
@import "paragraph.css";
@import "character.css";
@import "formControls.css";
@import "lists.css";

/* Layout styles */

body {
   color: hsl(var(--fg-hue),10%);
   background-color: hsl(var(--bg-hue),95%);
   padding: 0 10px;  
   justify-content: center; 
}
body header h1 {
   font-weight: bolder;
   font-size: 4em;
   margin: 1em;
}

main {
   padding: 0.3em;
   margin: 0em 1em 0em 1em;
   justify-content: center; 
}

header {
   font-family:"FreeSans";
}
header>p {
   visibility: visible;
   font-weight: bold;
   font-size: 2.25em;
   text-transform: capitalize;
   margin: 1em 1em;
}
header p:first-child {
   font-weight: bolder;
   font-size: 3.25em;
}

article {	
   max-width: 1000px;
   justify-content: center; 
   display: block;
   margin-left: auto;
   margin-right: auto;
         
}

article, section {
   padding: 0.3em;
   margin: 0em 1em 0em 1em;
}

section::after {
   content: url(../image/hr4.svg);
   display: flex;
   /*object-fit:scale-down;*/
   justify-content: center;
   margin-left:auto;
   margin-right:auto;
   width:50%;
   height:auto;
   column-span:all;
}      
   
aside {
	float: right;
	clear: right;
	width: 30%;
	margin: 0em 1em;
	background-color: hsl(var(--highlight-hue),85%);
   box-shadow:   6px 9px 12px hsla(var(--shadow-hue),50%,0.33);
   padding: 0.5ex 1em;
}

/* footer */
 footer { 
   font-size: 0.75em;
   text-indent: 0;
 }
/* details */


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

/* summary */


@media print {
   body { 
   padding-left: 1em;
   padding-right: 1em;
   }


   main, article, section {
      padding: 0em;
      margin: 0;
   }
   
   article {
      page-break-before: right;
   }
   
   nav { display: none; }
   
   header {
      page-break-inside: avoid;
   }
   
   footer {
      page-break-before: avoid; 
      page-break-inside: avoid;
   }
   
   details { 
      open: open;
      page-break-before: avoid; 
      page-break-inside: avoid; 
   }
}