html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 800px), print {
  html, body {
    min-width: 100vw;
  }
}

body {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: stretch;
  align-items: stretch;
}
@media screen and (max-width: 800px), print {
  body {
    flex-direction: column;
    overflow-x: hidden;
  }
}
body header {
  flex-grow: 0;
  flex-shrink: 0;
  width: 6rem;
  max-width: 20vw;
}
@media screen and (max-width: 800px), print {
  body header {
    padding: 0;
    flex-grow: 0;
    width: 100vw;
    height: auto;
    max-width: stretch;
    min-height: fit-content;
  }
}
body main {
  flex-grow: 80;
  /*flex-shrink: $side-first-length;
  max-width: stretch;*/
}
@media screen and (max-width: 800px), print {
  body main {
    max-width: 100vw;
    overflow-x: hidden;
    min-height: max-content;
  }
}
body header {
  position: sticky;
  top: 0;
  left: 0;
  height: 100vh;
}
@media screen and (max-width: 800px), print {
  body header {
    height: auto;
  }
}
body header > nav ul {
  display: block;
  list-style: none;
  margin: 0;
  padding-inline: 0;
}
@media screen and (max-width: 800px), print {
  body header > nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;
  }
}
body header > nav ul li {
  width: 100%;
}
@media screen and (max-width: 800px), print {
  body header > nav ul li {
    margin: 0;
  }
}
body header > nav ul a {
  display: block;
  padding: 1em;
}
@media screen and (max-width: 800px), print {
  body header > nav ul a {
    flex-grow: 1;
    text-align: center;
  }
}
body main h1 {
  margin-top: 0;
}
body main div.h1-sub {
  margin-top: -1.5rem;
  font-size: 1.2rem;
}
body main article figure {
  max-width: 40%;
  overflow: clip;
}
body main article figure.left {
  float: left;
  margin: 0 1em 1em 0;
}
body main article figure.right {
  float: right;
  margin: 0 0 1em 1em;
}
body main article figure img {
  max-width: 100%;
  min-width: 1em;
}

html, body {
  background: #cfdae4;
  color: #304353;
  font-family: Georgia, serif, "Fira Code", "Courier New";
  font-size: 16px;
}

a:link, a:hover, a:focus, a:visited {
  color: #4b657c;
}

header {
  background: #4b657c;
  color: #cfdae4;
}
@media screen and (max-width: 800px), print {
  header {
    box-shadow: #304353 0 0.2em 0.5em 0.05em;
  }
}
header > nav ul li a:link, header > nav ul li a:hover, header > nav ul li a:focus, header > nav ul li a:visited {
  color: #cfdae4;
  text-decoration: none;
}
header > nav ul li.current {
  background: #65849f;
}
header > nav ul li.current a:link, header > nav ul li.current a:hover, header > nav ul li.current a:focus, header > nav ul li.current a:visited {
  font-weight: bold;
  text-decoration: none;
}

main {
  box-shadow: inset #304353 0.2em 0.2em 0.5em 0.05em;
  padding: 2em;
}
@media screen and (max-width: 800px), print {
  main {
    box-shadow: inset #304353 0.2em 0 0.5em 0.05em;
  }
}
main div.h1-sub {
  color: #65849f;
  font-family: serif;
}
main hr {
  border-color: #98b5cd #b3c8db #b3c8db #98b5cd;
}
main figure {
  margin: 1em 0;
}

footer {
  background: #304353;
  color: #cfdae4;
}

div#uc {
  display: flex;
  flex-flow: column nowrap;
  flex-basis: 32rem;
  justify-content: flex-start;
  align-items: center;
}
div#uc div.uc-line {
  display: flex;
  flex-flow: row nowrap;
}
div#uc div.uc-line div {
  width: 1em;
  height: 1em;
  box-sizing: border-box;
  border: 0.5em solid;
}
div#uc div.uc-line div.uc-block1 {
  border-color: #cdb198 #4b657c #4b657c #cdb198;
}
div#uc div.uc-line div.uc-block2 {
  border-color: #4b657c #cdb198 #cdb198 #4b657c;
}
div#uc h1 {
  display: inline-block;
  width: 32rem;
  height: 2rem;
  margin: 0.2rem 0;
  text-align: center;
  flex-grow: 0;
  overflow: hidden;
  font-size: 1.8rem;
}

/*# sourceMappingURL=uc.css.map */