@font-face {
  font-family: "Crimson Pro Medium";
  src: url("/fonts/static/CrimsonPro-Medium.ttf") format("truetype"); }
@font-face {
  font-family: "Crimson Pro Medium Italic";
  src: url("/fonts/static/CrimsonPro-MediumItalic.ttf") format("truetype"); }
@font-face {
  font-family: "Crimson Pro Bold";
  src: url("/fonts/static/CrimsonPro-Bold.ttf") format("truetype"); }
@font-face {
  font-family: "Crimson Pro Bold Italic";
  src: url("/fonts/static/CrimsonPro-BoldItalic.ttf") format("truetype"); }
.font__normal, html,
body {
  font-family: "Crimson Pro Medium"; }

.font__italic, h1, .toc-block-blurb,
.toc-block-date, .footer-date-line {
  font-family: "Crimson Pro Medium Italic"; }

.font__bold, h2, h3, h4, h6 {
  font-family: "Crimson Pro Bold"; }

.font__italic--bold, .index-block-tag {
  font-family: "Crimson Pro Bold Italic"; }

@font-face {
  font-family: "Red Hat Mono Medium";
  src: url("/fonts/static/RedHatMono-Medium.ttf") format("truetype"); }
@font-face {
  font-family: "Red Hat Mono Medium Italic";
  src: url("/fonts/static/RedHatMono-MediumItalic.ttf") format("truetype"); }
@font-face {
  font-family: "Red Hat Mono Bold";
  src: url("/fonts/static/RedHatMono-Bold.ttf") format("truetype"); }
@font-face {
  font-family: "Red Hat Mono Bold Italic";
  src: url("/fonts/static/RedHatMono-BoldItalic.ttf") format("truetype"); }
.monofont__normal, pre,
code,
pre > code {
  font-family: "Red Hat Mono Medium"; }

.monofont__italic {
  font-family: "Red Hat Mono Medium Italic"; }

.monofont__bold {
  font-family: "Red Hat Mono Bold"; }

.monofont__italic--bold {
  font-family: "Red Hat Mono Bold Italic"; }

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html,
body {
  font-size: 23px;
  line-height: 145%; }

body {
  position: relative;
  margin: 0;
  padding: 0;
  text-align: center;
  background: linear-gradient(to bottom, #ffffb3, #b3ffe6, #b3f9ff);
  color: #023b21; }

#carapace {
  position: relative;
  width: 100%;
  /* max-width: $wrap_max_width; */
  /* height: 100%; */
  margin: 0 auto 100vh auto;
  padding: 10px 0px 10px 0px;
  text-align: center;
  background: linear-gradient(to bottom, #ffffb3, #b3ffe6, #b3f9ff);
  border-bottom: 5px solid; }

.body-wrap,
.index-wrap,
.toc-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
  text-align: center; }

.body-wrap {
  padding: 60px 0px 60px 0px; }
  @media screen and (min-width: 720px) {
    .body-wrap {
      padding: 90px 20px 90px 20px; } }
  @media screen and (min-width: 960px) {
    .body-wrap {
      padding: 120px 0px 120px 0px; } }
  @media screen and (min-width: 1200px) {
    .body-wrap {
      padding: 150px 0px 150px 0px; } }

.index-wrap {
  padding: 60px 20px 60px 20px; }
  @media screen and (min-width: 400px) {
    .index-wrap {
      padding: 60px 20px 60px 20px; } }
  @media screen and (min-width: 720px) {
    .index-wrap {
      padding: 90px 20px 90px 20px; } }
  @media screen and (min-width: 960px) {
    .index-wrap {
      padding: 120px 0px 120px 0px; } }
  @media screen and (min-width: 1200px) {
    .index-wrap {
      padding: 150px 0px 150px 0px; } }

.toc-wrap {
  padding: 60px 0px 60px 0px; }
  @media screen and (min-width: 400px) {
    .toc-wrap {
      padding: 60px 0px 60px 0px; } }
  @media screen and (min-width: 720px) {
    .toc-wrap {
      padding: 90px 0px 90px 0px; } }
  @media screen and (min-width: 960px) {
    .toc-wrap {
      padding: 120px 0px 120px 0px; } }
  @media screen and (min-width: 1200px) {
    .toc-wrap {
      padding: 150px 0px 150px 0px; } }

.footer-wrap {
  position: relative;
  margin: 60px auto 0 auto;
  padding: 0;
  text-align: center; }

.list-wrap {
  margin: 60px auto 60px auto;
  padding: 0;
  font-size: 0;
  width: 100%;
  max-width: 640px; }

h1, h2, h3, h4, h6, h6 {
  display: block;
  position: relative;
  padding: 0 20px 0 20px;
  line-height: 100%;
  font-weight: 600; }

h1 {
  margin: 0 auto 30px auto; }

h2, h3, h4, h6, h6 {
  display: block; }

h2 {
  margin: 60px auto 0 auto; }

h3, h4, h5, h6 {
  margin: 30px auto 0 auto; }

@media screen and (max-width: 399px) {
  h1 {
    font-size: 1.65rem; }

  h2 {
    font-size: 1.50rem; }

  h3 {
    font-size: 1.35rem; }

  h4 {
    font-size: 1.25rem; }

  h5 {
    font-size: 1.15rem; }

  h6 {
    font-size: 1.00rem; } }
@media screen and (min-width: 400px) {
  h1 {
    font-size: 1.75rem; }

  h2 {
    font-size: 1.60rem; }

  h3 {
    font-size: 1.55rem; }

  h4 {
    font-size: 1.25rem; }

  h5 {
    font-size: 1.15rem; }

  h6 {
    font-size: 1.00rem; } }
@media screen and (min-width: 720px) {
  h1 {
    font-size: 2.00rem; }

  h2 {
    font-size: 1.85rem; }

  h3 {
    font-size: 1.65rem; }

  h4 {
    font-size: 1.35rem; }

  h5 {
    font-size: 1.15rem; }

  h6 {
    font-size: 1.00rem; } }
@media screen and (min-width: 960px) {
  h1 {
    font-size: 2.50rem; }

  h2 {
    font-size: 2.00rem; }

  h3 {
    font-size: 1.85rem; }

  h4 {
    font-size: 1.65rem; }

  h5 {
    font-size: 1.35rem; }

  h6 {
    font-size: 1.00rem; } }
p,
li {
  position: relative;
  font-size: 1.00rem; }

p,
pre,
blockquote,
.body-wrap ol,
.body-wrap ul {
  margin: 20px auto 0 auto;
  padding: 0;
  text-align: left; }
  p:first-child,
  pre:first-child,
  blockquote:first-child,
  .body-wrap ol:first-child,
  .body-wrap ul:first-child {
    margin-top: 0; }

p,
blockquote,
.body-wrap ol,
.body-wrap ul {
  width: 100%;
  max-width: 640px; }
  @media screen and (max-width: 719px) {
    p,
    blockquote,
    .body-wrap ol,
    .body-wrap ul {
      padding: 0 20px 0 20px; } }
  @media screen and (min-width: 720px) {
    p,
    blockquote,
    .body-wrap ol,
    .body-wrap ul {
      padding: 0; } }

p,
ul,
ol,
pre,
code,
blockquote {
  line-height: 152%; }

blockquote > * {
  max-width: none;
  width: 100%;
  padding: 0 0px 0 10px; }
  @media screen and (max-width: 719px) {
    blockquote > * {
      border-left: 2px solid rgba(2, 59, 33, 0.3); } }
  @media screen and (min-width: 720px) {
    blockquote > * {
      border-left: 2px solid rgba(2, 59, 33, 0.3); } }

pre {
  width: 100%;
  max-width: 100%;
  padding: 0;
  text-align: center; }

pre,
code,
pre > code {
  font-size: 18.4px;
  line-height: 155%;
  overflow: auto; }

pre > code {
  display: inline-block;
  margin: 0 auto;
  padding: 0 20px 0 20px;
  text-align: left;
  font-size: 18.4px; }

.body-wrap p + ol,
.body-wrap p + ul {
  margin-top: 0; }

@media screen and (max-width: 499px) {
  .body-wrap ol,
  .body-wrap ul {
    list-style-position: inside; } }
@media screen and (min-width: 500px) {
  .body-wrap ol,
  .body-wrap ul {
    list-style-position: outside; } }

.body-wrap ul {
  list-style-type: disc; }

li {
  margin: 0;
  padding: 0; }

.img-block {
  position: relative;
  display: block;
  margin: 30px auto 30px auto;
  padding: 0;
  width: 100%;
  text-align: center; }

.blockimg {
  display: block;
  margin: 30px auto 30px auto;
  padding: 0;
  max-width: 100%; }

img {
  max-width: 100%; }

.index-block {
  position: relative;
  margin: 60px auto 60px auto;
  padding: 0;
  max-width: 640px;
  font-size: 1.00rem;
  text-align: left; }

.index-block-tag {
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 1.25rem;
  line-height: 100%;
  text-align: left;
  text-transform: none; }

.index-block-list {
  position: relative;
  margin: 5px 0px 0 20px;
  padding: 0;
  text-align: left;
  list-style: none; }

.index-list-item {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 1.00rem;
  line-height: 145%; }

a {
  position: relative;
  text-decoration: none;
  color: #023b21; }

.body-wrap a {
  text-decoration: underline #008075 3px;
  -webkit-text-decoration: underline #008075; }
.body-wrap a:hover {
  text-decoration: none;
  background-color: #80ffc0; }
.body-wrap a:active {
  text-decoration: none;
  background-color: #ffff80; }
.body-wrap a:visited {
  text-decoration: underline #0073e6 3px;
  -webkit-text-decoration: underline #0073e6; }

.nav-wrap a,
.index-wrap a {
  color: #023b21; }
.nav-wrap a:visited,
.index-wrap a:visited {
  color: #008035; }
.nav-wrap a:hover,
.index-wrap a:hover {
  color: #006a80; }
.nav-wrap a:active,
.index-wrap a:active {
  color: #ffff80; }

.image-block {
  position: relative;
  min-height: 100vh;
  width: 100%;
  margin: 60px 0px 60px 0px;
  border: 0; }

.img-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%; }

.slide-img {
  display: block;
  max-width: 90%;
  max-height: 85vh;
  margin: 0 auto 0 auto;
  padding: 0;
  text-align: center; }
  @media screen and (max-width: 719px) {
    .slide-img {
      max-width: 100%; } }
  @media screen and (min-width: 720px) {
    .slide-img {
      max-width: 90%; } }

.image-caption {
  margin: 0 auto;
  width: 95%;
  font-size: 0.88rem;
  text-align: center; }

.toc-block {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 40px 30px 40px 30px;
  font-size: 1.00rem;
  border: 0; }

.toc-block-title {
  margin: 0 auto 10px auto;
  font-size: 1.23rem;
  line-height: 123%;
  text-align: center;
  text-transform: none; }
  @media screen and (min-width: 400px) {
    .toc-block-title {
      font-size: 1.24rem; } }
  @media screen and (min-width: 720px) {
    .toc-block-title {
      font-size: 1.25rem; } }
  @media screen and (min-width: 960px) {
    .toc-block-title {
      font-size: 1.26rem; } }

.toc-block-blurb,
.toc-block-date {
  position: relative;
  margin: 10px auto 0 auto;
  padding: 0;
  text-align: center;
  line-height: 125%; }

.toc-block-date {
  font-size: 0.88rem;
  color: #2C2C2C; }

.toc-wrap-link {
  margin: 0;
  padding: 0;
  border: 0;
  color: #2C2C2C;
  text-decoration: none; }
  .toc-wrap-link:hover .toc-block {
    background-color: #80ffc0; }
  .toc-wrap-link:hover .toc-txt-wrap {
    background-color: #ffff80; }
  .toc-wrap-link:active .toc-block {
    background-color: #0073e6; }
  .toc-wrap-link:active .toc-txt-wrap {
    background-color: #80ffc0; }
  .toc-wrap-link:visited .toc-block-title {
    color: #0073e6; }

.nav-wrap {
  position: relative;
  margin: 60px auto 60px auto;
  padding: 0;
  text-align: center;
  font-size: 0; }

.nav-item {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: 0.88rem; }

.nav-item--left,
.nav-item--right {
  width: 25%;
  font-family: "Crimson Pro Bold";
  text-transform: uppercase; }

.nav-item--center {
  margin: 0 10px 0 10px;
  text-align: center;
  transform: rotate(45deg); }

.nav-item--left {
  text-align: right; }

.nav-item--right {
  text-align: left; }

.footer-date-line {
  position: relative;
  margin: 0 auto;
  padding: 0;
  font-size: 0.88rem;
  color: #2C2C2C; }

@media screen and (max-width: 719px) {
  .footer-date-cell {
    display: block;
    margin: 0 auto; } }
@media screen and (min-width: 720px) {
  .footer-date-cell {
    display: inline;
    margin: 0; } }

#bg-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-size: 0;
  z-index: -1; }

#bio-title-case > div, #bio-title-case > h1 {
  margin: 10px auto 10px auto;
  padding: 0; }
#bio-title-case > div {
  font-size: 0.88rem;
  line-height: 123%; }

.blocky {
  margin: 15px 0px 15px 0px; }