/*
Copyright 2020 Karl J. Obermeyer

This is basic styling for text elements only. Stack other styles on top of this
to tweak text and add multimedia for specific applications, e.g., publication
lists, research vignettes, blog posts, style guides, and food recipes.
*/

* {
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: 'Roboto', sans-serif, monospace;
  /*font-family: "lucida console", monospace;*/
  /*font-family: "Arial, Helvetica", sans-serif;*/
  font-weight: 400;
  /*outline: 1px solid red !important;*/
}

html {
  scroll-behavior: smooth;
}

/* Global dark-mode mode switch via adding class to outer html tag */
html.dark-mode {
  filter: invert(1);
}
.dark-mode img.dark-mode-immune,
.dark-mode video.dark-mode-immune {
  /* Counter-inversion for tagged images/videos */
  filter: invert(1);
}


h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}
:root {
  --heading-scale: 0.85;   /* Heading scale factor */
}
/*
Scale heading font sizes from defaults. Each pre-product value is the standard
browser default except for h3, which I increased slightly from the standard.
*/
h1 { font-size: calc(2em   * var(--heading-scale)); }
h2 { font-size: calc(1.5em * var(--heading-scale)); }
h3 { font-size: calc(1.3em * var(--heading-scale)); } /* Standard is 1.17em */
h4 { font-size: calc(1em   * var(--heading-scale)); }
h5 { font-size: calc(0.83em * var(--heading-scale)); }
h6 { font-size: calc(0.67em * var(--heading-scale)); }
/* Scale also spacing and line height */
h1, h2, h3, h4, h5, h6 {
  margin-block: calc(0.5em * var(--heading-scale)); /* top & bottom margin */
  line-height: 1.25;                                 /* unitless = stays readable */
}

header .by {
  font-size: 1.3em;
  margin: 0.6em auto 0.7em auto;
}
header .date {
  font-size: 1.1em;
  margin: 0.3em auto 0.2em auto;
}

a {
  color: rgb(1, 1, 156);
  text-decoration: none;
}

a:visited {
  color: rgb(133, 1, 133);
}

a:hover, a:focus {
  text-decoration: underline;
}

table {
  border-collapse: collapse;
}

header {
  width: 100%;
  text-align: center;
}

body {
  background-color: white;
  margin: 3px auto 0 auto;
  padding: 0 5px 0 5px;
  max-width: 800px;  /* default 960 */
  min-width: 320px;  /* default 320 */
}

/* ToC (Table of Contents) */
.toc-ul {
  list-style-type: none;
  padding-left: 0;
}
.toc-ul ul {
  list-style-type: none;
  padding-left: 0;
  text-indent: 2ch;
}

dt {
  font-weight: bolder;
}

code, pre {
  background-color: #f2f2f2;
}

code {
  border-radius: 3px;
}

pre {
  background-color: #f2f2f2;
  padding: 3px;
  border-radius: 5px;
  white-space: pre-wrap;
}



/* --- Main Content --- */

main {
  max-width: 800px;  /* default 960 */
  margin: 0 auto 0 auto;
  min-width: 320px;  /* default 320 */
  padding: 0;
}

.weak-page-separator-div {
  background-color: black;
  border: 1px solid black;
  border-radius: 1.5px;
  height: 3px;
  margin: 2em 3px 1em 3px;
}

.page-separator-div {
  background-color: black;
  border: 1px solid black;
  border-radius: 3px;
  height: 6px;
  margin: 2em 3px 1em 3px;
}

article {
  margin: 0 auto 0 auto;
  overflow-wrap: break-word;
  width: 95%;
  word-wrap: break-word;
}



/* --- Footer --- */

footer {
  border-top: 1px solid black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  text-align: center;
  margin: 3rem auto 5px auto;
  padding: 1rem 0 0 0;
}

.copyright {
  width: 100%;
}