/* Font */
@font-face {
  font-family: 'Fabiana';
  src: url("./programs/fabiana/Fabiana/Fabiana-font.woff") format('woff'), url("./programs/fabiana/Fabiana/Fabiana-font.svg") format('svg'), url("./programs/fabiana/Fabiana/Fabiana-font.ttf") format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Fabiana';
  font-weight: bold;
  src: url("./programs/fabiana/Fabiana/Fabiana-bold-font.woff") format('woff'), url("./programs/fabiana/Fabiana/Fabiana-bold-font.svg") format('svg'), url("./programs/fabiana/Fabiana/Fabiana-bold-font.ttf") format('truetype');
  font-display: swap;
}
/* Italic font actually works out-of-the-box as faux italic. Bold does not.*/

/* Structure */
body {
  font-family: Fabiana, sans-serif;
  text-align: justify;
  line-height: 1.7em;
  hyphens: auto;
}
body.nomenu {
  max-width: 60em;
  margin: auto;
  padding-left: 0.5em;
  padding-right: 0.5em; 
  margin-bottom: 2em; 
  margin-top: 1em;
}
h1, div.title {
  font-weight: bold;
  font-size: 200%;
  text-align: center;
  margin-bottom: 1em;
  line-height: 1.7em;
  page-break-after : avoid;
  page-break-inside: avoid;  
}
h2 {
  clear: both;
  font-weight: normal;
  font-size: 150%;
  margin-bottom: 1em;
  margin-top: 2em;
  padding-left: 5%;
  padding-right: 5%;
  text-align: center;
  border-top-width: thin;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: thin;
  border-style: solid;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  page-break-after : avoid;
  page-break-inside: avoid;  
}
h3 {
  clear: both;
  font-weight: normal;
  font-size: 120%;
  padding-left: 5%;
  padding-right: 5%;
  border-top-width: thin;
  border-left-width: 0em;
  border-right-width: 0em;
  border-bottom-width: thin;
  border-style: solid;
  margin-top: 2em;
  margin-bottom: 1em;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  text-align: left;
  page-break-after : avoid;
  page-break-inside: avoid;  
}
h4 {
  clear: both;
  font-weight: normal;
  font-size: 100%;
  padding-left: 0em;
  border-top-width: 0em;
  border-left-width: 0em;
  border-right-width: 0em;
  border-bottom-width: thin;
  border-style: solid;
  margin-top: 2em;
  margin-bottom: 1em;
  padding-bottom: 0em;
  text-align: left;
  page-break-after : avoid;
  page-break-inside: avoid;  
}
h5 {
  font-size: 100%;
  text-decoration: underline;
  font-weight: normal;
  padding-left: 0em;
  margin-top: 2em;
  margin-bottom: 1em;  
  page-break-after : avoid;
  page-break-inside: avoid;  
}

/* HTML Elements*/
p {
  margin-top: 1em;
  margin-bottom: 0em;
  padding-top: 0em;
  padding-bottom: 0em;
}
li {
  padding: 0em;
  margin: 0em;
}  
ul, ol {
  padding: 0em;
  margin: 0em;
  margin-left: 1.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;  
}
ol {
  margin-left: 2.5em;
}
table {
  font-size: inherit;
  margin: auto;
  margin-top: 1em;
  margin-bottom: 2em;
  border: none;
  border-collapse: collapse;
}
td, th {
  font-size: inherit;
  padding: 0em;
  margin: 0em;
  padding-right: 3em;
  border-bottom: 1px solid lightgray;
  vertical-align: top;
  text-align: left;
}
th:last-child, td:last-child {
   padding-right: 0em;
}
a, a:visited {
  text-decoration: none;
  color: blue;
}
dt {
  margin-top: 1em;
  font-weight: bold;
  page-break-after: avoid;  
}
dd {
  margin-left: 1em;
}
aside:before {
  content: "Remark: ";
}  
aside {
  font-size: 90%;
  margin-top: 2em;
  line-height: 1.5em;
}
div.sample {
  font-style: italic;
  padding-left: 2em;
  padding-top: 1em;
  padding-bottom: 1em;
}

/* Figures*/
figure {
  float: right;
  width: 30%;
  margin-top: 0em;
  margin-bottom: 2em;
  margin-left: 2em;  
  margin-right: 0em; 
  clear: both;
  page-break-inside: avoid;  
}
figure.left {
  float: left; 
  margin-right: 2em; 
  margin-left: 0em;
}  
figure.center {
  text-align: center;
  margin: auto;
  margin-top: 1em;
  width: 80%;
  margin-bottom: 1em;  
  float: none;
  clear: both;
}
figure img, figure video {
  width: 100%;
  image-orientation: from-image;
  height: auto;
  border: none;
}
figcaption {
  font-size: 80%;
  line-height: 1.5em;
  text-align: center;
  font-style: normal;
}
figure.pic figcaption {
  font-size: inherit;
}
figure.pic {
  clear: none;
  float: left;
  width: 20em;
  height: 23em;  
  margin: 2em;
  padding: 0em;
  text-align: center;
}
figure.pic img, figure.pic video {
  height: 15em;
  width: auto;
}

/* Styled classes*/
.button, .button:visited {
  color: #fff;
  background-color: #4CAF50;
  border: none;
  text-align: center;
  border-radius: 1em;
  padding: 1em;
  box-shadow: 0.5em 0.5em #999;
  margin-right: 2em;
}
.button a, .button a:visited {
  color: white;
  }
.buttonline {
  text-align: center;
  margin-top: 4em;
  margin-bottom: 4em;
}
.mobile {
  display: none;
}
.hidden {
  display: none;
}
.dark {
  padding-top: 0em;
  margin-top: 0em;
  font-size: 50%;
  color: gray;
}
.credit {
  padding-top: 0.5em;
  margin-top: 0em;
  font-size: 50%;
  color: gray;
}
.credit a {
  color: gray;
  border: none;
}
.math {
  font-family: Fabiana;
  font-style:normal;
  line-height: inherit;
}

/* Unique elements*/
div.share {
  text-align: right;
  clear: both;
}
.copyright {
  font-size: 80%;
  text-align: center;
  margin-bottom: 3em;
  margin-top: -1em;
}

/* Menu */
div#menu {
  display: none;
}
@media only screen and (min-device-width: 480px) and (min-width: 50em) {
  body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  div#menu {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0em;
    width: 25%;
    display: inline;
    height: 100%;
    overflow: auto;
    text-align: left;
    background-color: #9999FF;
    text-decoration: none;
    color: white;
  }
  div#menu a, div#menu a:link, div#menu a:visited {
    color: white;
    text-decoration: none;
  }
  div#menu ul {
    margin: 0em;
    margin-left: 1em;
	list-style-type: none;
  }
  div#menu>ul {
    margin-left: 0.5em;
  }
  div#main {
    padding-left: 2em;
    padding-right: 2em;    
    position: fixed;
    top: 0;
    left: 25%;
    right: 0;
    bottom: 0;
    overflow: auto;
  }
}

/* Print Style */
@media print {
  body {
    line-height: 1.7em; 
	font-size: 10pt;
  }  
  @page { 
   margin: 0.85cm; 
   orphans: 4;
   widows: 2;
  }  
  @page :left {
    margin-left: 0.5in;
    margin-right: 0.5in;
  }
  @page :right {
    margin-left: 0.5in;
    margin-right: 0.5in;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        color: #ccc;
        background: black;
		scrollbar-color: gray black;
    }
	a, a:visited {		
		color: #8fb7ff;
    }	
	div#menu {
		background-color: #5478b7;
		scrollbar-color: lightgray #5478b7;
	}
}
/* Narrow screen */
@media only screen and (max-device-width: 480px), only screen and (max-width: 50em) {
  th, td {
    padding-left: 0em;
    padding-right: 0.5em;    
  }
  body {
    text-align: left;
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
  .nomobile {
	  display: none;
  }
  .mobile {
    display: block;
  }
  div.share {
    text-align: left;
  }
  h1 {
	  text-align: left;
  } 
  h2, h3, h4 {
	  padding-left: 0em;
  }
  figure,
  figure.center,
  figure.left,
  figure.pic,
  figure.small {
    width: 100%;
    float: none;
    clear: both;
    margin-left: auto;
    margin-right: auto;
    height: auto;    
  }
  figure.center {
    max-width: none;
  }
  figure.pic img, figure.pic video {
    width: 100%;
    height: auto;
  }
  .button {
	display: block; 
	margin-bottom: 2em;
  }
}