/* Load the normalize reset sheet first */
@import url("/css/normalize.css");
/* Load the default color theme which will apply to everything
 * until something else changes it. Changes require DOM elements
 * which may not be present yet.
 */
@import "/css/scheme-default.css";
/* Load in the sheets to control navigation and UI elements */
@import "/css/nav-menus.css";
@import "/css/ui-settings.css";
/* Load in whatever fonts have been selected for the site */
@import "/css/fonts.css";

/* Load in any available color schemes desired. List may grow. */
@import "/css/scheme-solarized.css";
@import "/css/scheme-freshmint.css";


/*  Variables for consistency and simple modifications later
 *  possiblity for themes to change these elements if every designed to do so
 */
:root {
  --icon-fontFace: 'SymbolaRegular', Arial, Helvetica, sans-serif;
  --main-fontFamily: 'GenLight', Arial, Helvetica, sans-serif;
  --menu-fontFace: 'FuturaRennerRegular', Arial, Helvetica, sans-serif;
  --menu-fontSize: .95rem;
  --accent-fontFace: 'CelticaBook', Arial, Helvetica, sans-serif;
  --terminal-fontFace: 'Effects Eighty', monospace;
  --menu-timing: .5s;
  --logo-size: 80px;
  --radius-effect: 5px;
}

/*  Global styles and overrides beyond what the reset sheet above has done */
body {
  margin: 0;
  padding: 0;
  line-height: 1.15;
  font-family: sans-serif;
}
body * {
  box-sizing: border-box;
}
label {
  cursor: pointer;
}
.hidden-control {
  display: none;
}
sub, sup {
  position: static;
  font-size: .7em;
}
sub {
  vertical-align: sub;
}
sup {
  vertical-align: super;
}


/* Background and text colors standardized   */
h2 {
  padding-bottom: 1em;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
}
h1 {
  font-size: 2em;
  line-height: 2.3;
}
h2 {
  font-size: 1.75em;
  line-height: 2;
}
h3 {
  font-size: 1.5em;
  line-height: 1.7;
}
h4 {
  font-size: 1.25em;
  line-height: 1.4;
}
h1, h2, h3, h4, h5, h6,
.surface-page {
  background-color: var(--colors-page);
  color: var(--colors-onPage);
}
h2, .surface-page {
  box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  z-index: 3;
}
.menu-font {
  font-family: var(--menu-fontFace);
}
.surface-foot {
  background-color: var(--colors-foot);
  color: var(--colors-onFoot);
  box-shadow: 2px 2px 3px rgba(0,0,0,0.4);
}
.surface-head {
  background-color: var(--colors-head);
  color: var(--colors-onHead);
  box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}
.surface-menu {
  background-color: var(--colors-menu);
  color: var(--colors-onMenu);
  box-shadow: 3px 3px 24px rgba(0,0,0,0.4);
}
.nav-link, .nav-link:visited, .nav-link:hover, .nav-link:focus, .nav-link:visited {
  color: var(--colors-onMenu);
  text-decoration: none;
}
.surface-ctrl {
  background-color: var(--colors-ctrl);
  color: var(--colors-onCtrl);
  box-shadow: 5px 5px 24px rgba(0,0,0,0.4);
}
.surface-primary {
  background-color: var(--colors-primary);
  color: var(--colors-onPrimary);
}
.surface-code {
  background-color: var(--colors-code);
  color: var(--colors-onCode);
}
.surface-error {
  background-color: var(--colors-error);
  color: var(--colors-onError);
}
.surface-input {
  background-color: whitesmoke;
  color: black;
}
.onCtrl {
  color: var(--colors-onCtrl);
}

/* Some commonly used formatting for elements */
.pad-3rem {
  padding: 0.3rem;
}
.nowrap {
  white-space: nowrap;
}
.block-up {
  display: inline-block;
}
.grooved {
  border: 3px groove var(--colors-border);
}
.ridged {
  border: 5px ridge var(--colors-border);
}
.inset {
  border: 2px inset rgb(224,224,224);
}
.input-field {
  flex-grow: 2;
  height: auto;
}
.soft-corner {
  border-radius: var(--radius-effect);
}
.super-soft-corner {
  border-radius: calc(2 * var(--radius-effect));
}
.shift-in-1 {
  margin-left: .5em;
}
.shift-in-2 {
  margin-left: 1em;
}
/*  Build the page layout   */
/*   Container for everything. Used so that the color scheme data will
 *   be available for everything on page. Also allows a control point
 *   for the font scaling and modal overlays.
 **/
#scheme-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0;
}

/*  The page header: logo, title, site menu control  */
#site-header {
  position: relative;
  top: 0;
  left: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: var(--logo-size) 1fr var(--logo-size);
  justify-content: space-between;
  align-items: center;
}
@media screen and (min-width: 40.5rem) {
  #site-header {
    align-items: start;
  }
}
#site-logo {
  box-sizing: border-box;
  width: var(--logo-size);
  height: var(--logo-size);
  padding: 2px;
  align-self: start;
}
#logo-img {
  width: calc(var(--logo-size) - 4px);
  height: calc(var(--logo-size) - 4px);
  border-radius: calc(var(--logo-size) / 2);
  background-color: var(--colors-ctrl);
}
#title-bar {
  font-size: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#site-header-title {
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  flex-grow: 3;
}
#page-title {
  font-size: .95em;
  font-family: var(--accent-fontFace);
}
#page-tagline {
  font-size: 1em;
  font-family: var(--menu-fontFace);
}
@media screen and (min-width: 405px) {
  #title-bar {
    min-height: var(--logo-size);
  }
  #site-header-title {
    font-size: calc((100vw - 405px) / (648 - 405) * (30 - 16) + 16px);
  }
  #page-title {
    font-size: 1.4em;
  }
  #page-tagline {
    font-size: 1em;
  }
}
@media screen and (min-width: 648px) {
  #title-bar {
    flex-direction: column;
    justify-content: space-between;
  }
  #site-header-title {
    font-size: calc((100vw - 648px) / (1160 - 648) * (33 - 15) + 15px);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  #page-title {
    font-size: 1.3em;
  }
  #page-tagline {
    font-size: 1em;
  }
  #page-tagline::before {
    content: '\a0\2014\a0';
  }
}
@media screen and (min-width: 1160px) {
  #site-header-title {
    font-size: 32px;
    justify-content: space-around;
  }
  #page-tagline::before {
    content: '';
  }
}
#nav-container {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 4;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#hero-box {
  width: 100%;
  height: 250px;
  background-color: goldenrod;
}
#hero-box:empty {
  display:none;
}
#site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 8;
  padding-right: 2px;
  width: 100%;
  height: calc(var(--logo-size) / 2 + 6px);
  display: grid;
  grid-template-columns: auto calc(var(--logo-size) / 2);
  align-content: space-between;
  align-items: center;
}
#copyright {
  font-size: .625rem;
  padding: .3rem;
}
#page-container {
  position: relative;
  top: 0;
  left: 0;
  text-align: left;
  margin: 0 25px;
  padding: 0 0 calc(var(--logo-size) / 2 + 25px);
  font-family: var(--main-fontFamily);
  line-height: 1.35;
  min-height: 100vh;
}
@media screen and (min-width: 48rem) {
  #page-container {
    margin-left: calc(9.55rem + .15 * (100vw - 48rem));;
  }
}
@media screen and (min-width: 57rem) {
  #page-container {
    margin-left: calc(9.55rem + .15 * (100vw - 57rem));
    margin-right: calc(9.55rem + .15 * (100vw - 57rem));
    line-height: calc(1.35em + 2.5 * (100vw - 57rem) / (1920 - 912));
  }
}
@media screen and (min-width: 90rem) {
  #page-container {
    margin-left: 14.5rem;
    margin-right: 14.5rem;
  }
}

/*  Adjusting the font-size in response to user selection */

#font-size-1:checked ~ #scheme-container #page-container {
  font-size: 0.68rem;
}
#font-size-2:checked ~ #scheme-container #page-container {
  font-size: 0.825rem;
}
#font-size-3:checked ~ #scheme-container #page-container {
  font-size: 1.10rem;
}
#font-size-4:checked ~ #scheme-container #page-container {
  font-size: 1.31rem;
}
#font-size-5:checked ~ #scheme-container #page-container {
  font-size: 1.75rem;
}
#font-size-6:checked ~ #scheme-container #page-container {
  font-size: 2.31rem;
}
#font-size-7:checked ~ #scheme-container #page-container {
  font-size: 3rem;
}

/*  Styles for content */
h2 {
  position: sticky;
  top: 0;
}
.image-float {
  float: left;
  margin: 5px 10px 10px 0;
  max-width: 75vw;
  object-fit: contain;
}
.image-float-right {
  float: right;
  margin: 5px 0 10px 10px;
  max-width: 75vw;
  object-fit: contain;
}
.terminal-case {
  font-family: var(--terminal-fontFace);
  line-height: .93;
  vertical-align: middle;
}
span.terminal-case {
  display: inline-block;
  padding: 2px 3px 0;
  border-radius: var(--radius-effect);
  font-size: .93em;
}
.italic {
  font-style: oblique;
}
.bold {
  font-weight: 700;
}