/* The menu approach in this css file was largely pulled from an approach by
 * Anna Monus ( https://www.annalytic.com/ ), working from the all.min.css file
 * I found here:
 * https://webdesign.tutsplus.com/articles/best-practices-for-responsive-dropdown-menus--cms-35212
 * https://codepen.io/tutsplus/embed/bGVPVrY/
 * The rest of the CSS I wrote custom for my website ( https://b79.net ).
 * Every now & then I look at the various minimal CSS frameworks out there, but
 * end up writing my own custom CSS to keep things lightweight & dialed in to my
 * preferences. Some sort of grid would be nice at some point, but for now this
 * works for my simple needs. Mostly what I'm looking for is a way to have the
 * site render nicely on desktop and mobile, with a hamburger menu appearing on
 * mobile & no sideways scrolling. Note to future self, maybe a Flexbox approach:
 * https://webdesign.tutsplus.com/how-to-build-a-responsive-navigation-bar-with-flexbox--cms-33535t
 */

/* Basic styling */

* {
  box-sizing: border-box;
  padding: 0;
 /* margin: 0; */
}

html, body {
  height: 100%;
}

pre code {
  font-family: "DM Mono";
}

.site {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
}

body {
  color: #FFF;
  font-size: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: -0.2ex;
  height: 99%;
  font-size: 16px;
  background: #585850;
}


p {
  line-height: 1.6;
  margin-top: 0em;
  margin-bottom:1.5em;
  margin-left: auto;
  margin-right: auto;
}


h1 {
 /* font-variant: small-caps; */
  color: #d4cccc;
  font-weight: bold;
  font-size: 1.5em;
  margin-bottom: 1.125em;
  margin-top: 1.0em;
  margin-left: 20%;
  margin-right: 20%;
  max-width: 38em;
  text-align: center;
}

h2 {
  color: #d4cccc;
  font-weight: bold;
  font-size: 1.25em;
  margin-top: 0.8em;
  margin-left: 1.2em;
  text-align: left;
}

h3 {
  color: #d4cccc;
  font-weight: bold;
  font-size: 1.1em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0em;
  margin-bottom:0.4em;
  padding-bottom: 0.125em;
}
h3 + h3 {
  margin-top: 1.25em;
}

h2 > em {
  font-weight: normal;
  font-size: 0.842105em;
  padding-left: 0.625em;
}

h3 > em {
  font-weight: normal;
  padding-left: 0.375em;
}

.container h3 a:link {
  color: #60609a;
  border-bottom:1px solid #bbbba0;
}

.container h3 a:hover {border-bottom: none;}

.container h3 a:active {
  color: #33f;
  border-bottom: 1px solid #bbbba0;
}

.container li {
  margin-bottom: 0.25em;
}

  .container ul {
  list-style-type: '•  ';
  /* list-style-type: circle; */
  padding-left: 1.0em;
  margin-bottom: 0.75em;
  line-height: 1.6;
}

.container p + ul {
  margin-top: -1.25em;
}

nav {
  background: #f1eee8;
  padding: 0 15px;
  border-bottom: 1px solid #6abf50;
}

.menu1 a {font-family: "DM Mono";}
.menu1 a:link {font-family: "DM Mono"; font-size: 1.15em; font-weight: normal; color: #33FF33; text-decoration: none;}
.menu1 a:visited {font-family: "DM Mono"; font-size: 1.15em; font-weight: normal; color: #33FF33; text-decoration: none;}
.menu1 a:hover {font-family: "DM Mono"; font-size: 1.15em; font-weight: normal; color: #33FF33; text-decoration: underline;}
.menu1 a:active {font-family: "DM Mono"; font-size: 1.15em; font-weight: bold; color: #99CCFF; text-decoration: none;}

.menu a:link {font-family: "DM Mono"; font-size: 1.1em; font-weight: normal; color: #33FF33; text-decoration: none; line-height: 1em;}
.menu a:visited	{font-family: "DM Mono"; font-size: 1.1em; font-weight: normal; color: #33FF33; text-decoration: none; line-height: 1em;}
.menu a:hover {font-family: "DM Mono"; font-size: 1.1em; font-weight: normal; color: #33FF33; text-decoration: underline; line-height: 1em;}
.menu a:active {font-family: "DM Mono"; font-size: 1.1em; font-weight: bold; color: #99CCFF; text-decoration: none; line-height: 1em;}
.menu a.linked {font-family: "DM Mono"; font-size: 1.1em; font-weight: bold; color: #99CCFF; line-height: 1em;}
.menu .linked {font-family: "DM Mono"; font-size: 1.1em; font-weight: bold; color: #E8E8D8; line-height: 1em;}
.menu a:active.linked {font-weight: normal;}


.menu table { max-width: 450px; }
.menu td { white-space: nowrap; }

.menu1 table { max-width: 450px; }
.menu1 td { white-space: nowrap; }


.subnav a {font-size: 1.1em; line-height: 1em;}
.subnav a:link {font-weight: normal; color: #33FF33; text-decoration: none;}
.subnav a:visited {font-weight: normal; color: #33FF33; text-decoration: none;}
.subnav a:hover {font-weight: normal; color: #33FF33; text-decoration: underline;}
.subnav a:active {font-weight: bold; color: #99CCFF; text-decoration: none;}

span.bold {color: #E8E8D8; font-weight: bold;}

.banner {
  font-family: "DM Mono";
  font-size: 34px;
  font-weight: normal;
  color: #E8E4D8; 
  text-align: center;
  margin-top: 4px;
  white-space: nowrap;
  display: block;
}

.titlepage {
  margin-left: auto;
  margin-right: auto;
  font-size: 24px;
  font-weight: normal;
  font-style: italic;
  color: #F8F8F0; 
  text-align: center;
  white-space: nowrap;
  display: block;
}


.logo td { text-align: right; }

.logo a {
  font-family: "DM Mono";
  text-decoration: none;
  font-size: 24px;
  padding-right: 0.2em;
  padding-left: 0.2em;
}

.logo a:link {color: #E8E8D8; font-weight: normal; text-decoration: none;}
.logo a:visited {color: #E8E8D8; font-weight: normal; text-decoration: none;}
.logo a:hover {color: #E8E8D8; font-weight: normal; text-decoration: underline;}
.logo a:active {color: #c0c0c0; font-weight: bold; text-decoration: none; outline: none;}

/* a {
color: #333;
text-decoration: none;
} */

.menu,
.submenu {
  list-style-type: none;
}

.item {
  padding: 10px;
}

.item a {
  font-family: monospace;
  font-size: 1.2em;
  text-decoration: none;
  border-bottom: none;
  white-space: nowrap;
  color: #33f;
}

.item a:link {
  font-weight: normal;
}
.item a:visited {
  font-weight: normal;
  color: #33f;
}

.item a:hover {
  font-weight: bold;
  color: #99aaff;
}

.item a:active {
  font-weight: normal;
  color: #33f;
}

/* style the sub-menu names */
.subitem a {
  font-size: 1.1em;
  color: #32814B;
}
.subitem a:hover {
  color: #80b17d;
  }

.item.button {
  padding: 9px 5px;
}

/*
.item:not(.button) a:hover,
.item a:hover::after {
  color: #ccc;
}
*/

.container {
  flex: 1 0 auto;
  /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5em;
  padding-right: 1em;
  max-width: 45em;
  overflow:auto;
 /* padding-bottom: 20px; */
}

.container a {
  text-decoration: none;
  padding-bottom: 0.125em;
}

.container a:link {
  color: #99CCFF;
  border-bottom:1px dotted #99CCFF;
}

/*
.container a:visited {
  color: #ff0c;
} */

.container a:hover {
  border-bottom: none;
}
.container a:active {
  color: #466991;
  border-bottom:1px solid #466991;
}

.container a:visited {
  color: #AABBDD;
  border-bottom:1px dotted #99CCFF;
}

img {display: block;
     margin-left: auto;
     margin-right: auto;
     padding-right: 0.5em;
     margin-top: 0em;
     margin-bottom: 0.8em;
    /* width: 100%; */
    max-width: 320px;
     height: auto;
    }

video {display: block;
     margin-left: auto;
     margin-right: auto;
     padding-right: 0.5em;
     margin-top: 1.9375em;
     margin-bottom: 2em;
     width: 100%;
     max-width: 600px;
     height: auto;
    }

img + br + em {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: -3.0625em;
  margin-bottom: 1.125em;
}

video + br + em {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: -3.0625em;
  margin-bottom: 1.125em;
}

img + br + img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: -2.5em;
}


#centered-text {
  text-align: center;
}

#centered-text img {
   max-width: 300px;
   margin-top: 0em;
   margin-bottom: .7em;
}


.header,
.footer {
  flex-shrink: 0;
  /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
}


.footer {
  margin-left: auto;
  margin-right: auto;
  max-width: 24em;
 /* padding-top: 0.3em; */
  padding-bottom: 0.3em;
  text-align: center;
  border-top: 1px solid #3366CC;
  white-space: nowrap;
  font-size: 0.85em;
  color: #6abf50;
}

.footer a {
  color: #99CCFF;
  text-decoration: none;
  border-bottom: none;
}

.footer a:hover {
  color: #99CCFF;
  border-bottom:1px dotted #99CCFF;
}

.footer a:active {
  color: #466991;
  border-bottom: none;
}


/* For mobile devices */
@media screen and (max-width: 450px) {
    .menu table {
        width: 22em !important;
        margin-left: auto;
        margin-right: auto;
	}
    .menu1 table {
        width: 23em !important;
	}
	.logo td {
		text-align: center !important;
    }
}




/**** webfonts.css ***/
/*!
 * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * (I deleted some lines in this fontawesome section ... JfM 2023/07/03 Mon 01:42 -0700)
 */

.fa,.fab,.fad,.fal,.far,.fas {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1
}

.fa-lg {
  font-size: 1.33333em;
  line-height: .75em;
  vertical-align: -.0667em
}

.fa-xs {
  font-size: .75em
}

.fa-sm {
  font-size: .875em
}

.fa-1x {
  font-size: 1em
}

.fa-2x {
  font-size: 2em
}

.fa-3x {
  font-size: 3em
}

.fa-4x {
  font-size: 4em
}

.fa-5x {
  font-size: 5em
}

.fa-6x {
  font-size: 6em
}

.fa-7x {
  font-size: 7em
}

.fa-8x {
  font-size: 8em
}

.fa-9x {
  font-size: 9em
}

.fa-10x {
  font-size: 10em
}

.fa-fw {
  text-align: center;
  width: 1.25em
}

.fa-ul {
  list-style-type: none;
  margin-left: 2.5em;
  padding-left: 0
}

.fa-ul>li {
  position: relative
}

.fa-li {
  left: -2em;
  position: absolute;
  text-align: center;
  width: 2em;
  line-height: inherit
}

.fa-border {
  border: .08em solid #eee;
  border-radius: .1em;
  padding: .2em .25em .15em
}

.fa-pull-left {
  float: left
}

.fa-pull-right {
  float: right
}

.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left {
  margin-right: .3em
}

.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right {
  margin-left: .3em
}

.fa-spin {
  -webkit-animation: fa-spin 2s linear infinite;
  animation: fa-spin 2s linear infinite
}

.fa-pulse {
  -webkit-animation: fa-spin 1s steps(8) infinite;
  animation: fa-spin 1s steps(8) infinite
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}

.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg)
}

.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1)
}

.fa-flip-vertical {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1)
}

.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"
}

.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical {
  -webkit-transform: scale(-1);
  transform: scale(-1)
}

:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270 {
  -webkit-filter: none;
  filter: none
}

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em
}

.fa-stack-1x,.fa-stack-2x {
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%
}

.fa-stack-1x {
  line-height: inherit
}

.fa-stack-2x {
  font-size: 2em
}

.fa-inverse {
  color: #fff
}

.fa-500px:before {
  content: "\f26e"
}

.fa-accessible-icon:before {
  content: "\f368"
}

.fa-align-right:before {
  content: "\f038"
}


.fa-bars:before {
  content: "\f0c9"
}

.fa-times:before {
  content: "\f00d"
}

.fa-caret-down:before {
  content: "\f0d7"
}

.fa-caret-left:before {
  content: "\f0d9"
}

.fa-caret-right:before {
  content: "\f0da"
}

.fa-caret-square-down:before {
  content: "\f150"
}

.fa-caret-square-left:before {
  content: "\f191"
}

.fa-caret-square-right:before {
  content: "\f152"
}

.fa-caret-square-up:before {
  content: "\f151"
}

.fa-caret-up:before {
  content: "\f0d8"
}


.fa-font:before {
  content: "\f031"
}

.fa-font-awesome:before {
  content: "\f2b4"
}

.fa-font-awesome-alt:before {
  content: "\f35c"
}

.fa-font-awesome-flag:before {
  content: "\f425"
}

.fa-font-awesome-logo-full:before {
  content: "\f4e6"
}

.fa-fonticons:before {
  content: "\f280"
}

.fa-fonticons-fi:before {
  content: "\f3a2"
}


.sr-only {
  border: 0;
  clip: rect(0,0,0,0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}

.sr-only-focusable:active,.sr-only-focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto
}

@font-face {
  font-family: "DM Mono";
  font-style:normal;
  font-display:block;
  src: url(../webfonts/DMMono-Regular.ttf);
}

@font-face {
  font-family: "DM Mono";
  font-style: italic;
  font-display: block;
  src: url(../webfonts/DMMono-Italic.ttf);
}

/* https://rsms.me/inter/#usage
   "self host inter font (regular and bold) on a server" https://github.com/rsms/inter/discussions/497 */
:root { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: 'Inter var', sans-serif; }
}

@font-face {
  font-family:"Font Awesome 5 Brands";
  font-style:normal;
  font-weight:400;
  font-display:block;
  src:url(../webfonts/fa-brands-400.eot);
  src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),
      url(../webfonts/fa-brands-400.woff2) format("woff2"),
      url(../webfonts/fa-brands-400.woff) format("woff"),
      url(../webfonts/fa-brands-400.ttf) format("truetype"),
      url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")
}

.fab {
  font-family: "Font Awesome 5 Brands"
}

@font-face {
  font-family:"Font Awesome 5 Free";
font-style:normal;
font-weight:400;
font-display:block;
src:url(../webfonts/fa-regular-400.eot);
src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),
    url(../webfonts/fa-regular-400.woff2) format("woff2"),
    url(../webfonts/fa-regular-400.woff) format("woff"),
    url(../webfonts/fa-regular-400.ttf) format("truetype"),
    url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")
}

.fab,.far {
  font-weight: 400
}

@font-face {
  font-family:"Font Awesome 5 Free";
  font-style:normal;
  font-weight:900;
  font-display:block;
  src:url(../webfonts/fa-solid-900.eot);
  src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
      url(../webfonts/fa-solid-900.woff2) format("woff2"),
      url(../webfonts/fa-solid-900.woff) format("woff"),
      url(../webfonts/fa-solid-900.ttf) format("truetype"),
      url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")
}

.fa,.far,.fas {
  font-family: "Font Awesome 5 Free"
}

.fa,.fas {
  font-weight: 900
}