@import url('https://fonts.googleapis.com/css2?family=Vollkorn&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@700&family=Vollkorn&display=swap');
:root {

  --border: 0.0625rem solid var(--color-border);
  --border-card: var(--border);
  --border-code: var(--border);
  --cosmos: #24344c;

  --royal-1: #8f3931;
  --gray-1: #202224;
  --gray-2: #2D2D2D;
  --gray-3: #555759;
  --gray-4: #6e7072;
  --gray-5: #848688;
  --gray-6: #aaacae;
  --gray-7: #c6c8ca;
  --gray-8: #dcdee0;
  --gray-9: #f0f1f2;
  --gray-10: #f8f8f8;
  --turq-light: #5dc9e2;
  --turq-med: #50b7e0;
  --turq-dark: #007d9c;
  --abbey: #3f4042;
  --blue: #bfeaf4;
  --blue-light: #f2fafd;
  --black-1: #000;
  --black-2: #111111;
  --deep-cerulian: #007F9f;
  --green: #3a6e11;
  --green-light: #5fda64;
  --pink: #c85e7a;
  --pink-light: #fdecf1;
  --purple: #542c7d;
  --shark: #2B2D2F;
  --slate: #253443; /* Footer background. */
  --tundora: #414141;
  --white: #fff;
  --yellow: #fddd00;
  --yellow-light: #fff8cc;
  --testimonial: #007F9f;

  --color-text-link: var(--turq-dark);
  --color-brand-primary: var(--royal-1);
  --color-background: var(--white);
  --color-text: var(--gray-1);
}
[data-theme='dark'] {
    --border-card: 0.0625rem solid transparent;
    --border-code: 0.0625rem solid var(--tundora);

    --color-brand-primary: var(--turq-dark);
    --color-background: var(--gray-1);
    --color-border: var(--gray-4);
    --color-text: var(--gray-9);
    --color-text-link: var(--turq-med);
}

body {
    font-family: 'Vollkorn', Helvetica, Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji';
    max-height: 100%;
    line-height: 1.4;
}

*,
:before,
:after {
  box-sizing: border-box;
}




h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.ln {
    user-select: none;

    display: inline-block;
    width: 8ch;
}

html {
    scroll-padding-top: 70px;
}


html,
.Site {
    max-height: 100%;
    min-height: 100vh;
}

ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}

a,
a:link,
a:visited {
    color: var(--color-text-link);
    text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.Site {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.SiteContent {
    background: var(--color-background);
    flex: 1;
}

#blog h1.small {
    font-weight: bold;
    font-size: 1rem;
}
#blog a.head {
    color: black;
    text-decoration: none !important;
}
#blog a.head:hover {
    text-decoration: underline;
}
#blog #content .author {
    font-style: italic;
}
#blog #content .Article {
    margin-bottom: 50px;
}
#blog #content .Article p {
    text-align: justify;
}
#blog #content .date {
    color: var(--color-text-subtle);
}
#blog #content .tags {
    color: #999;
    font-size: smaller;
}
#blog #content .iframe, #content .image {
    margin: 20px;
}
#blog #content .title {
    margin: 20px 0;
}
#blog #content img {
    max-width: 100%;
}
#blog .Article {
    max-width: 42rem;
}
#blog .Article[data-slug='/blog/go-fonts'] {
    font-family: Go, sans-serif;
}
#blog .Article[data-slug='/blog/go-fonts'] pre,
/* #blog .Article[data-slug='/blog/go-fonts'] code { */
/*     font-family: 'Go Mono', monospace; */
/* } */
/* #blog pre, #blog code { */
/*     font-family: monospace; */
/* } */

.Article {
    color: var(--color-text);
    margin: 0 auto 1.875rem;
    max-width: 75.75rem;
    padding: 0 1.5rem;
}

.Article pre {
    margin-left: 1.5rem;
}
.Article.Doc img {
    background-color: var(--white);
}


li {
}

.Article ul {
  margin: 0;
}
.Article ul {
  list-style-type: none;
}
.Article ul > li {
  text-indent: -5px;
}
.Article ul > li:before {
  content: "— ";
  text-indent: -5px;
}

blockquote {
    font-size: inherit !important;
}

blockquote {
    font-style: italic;
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}

@media print {
    /* display: flex makes the printer slice text lines in half */
    .Site { display: block; }
}

.SiteContent {
    background: var(--color-background);
    flex: 1;
}

.NotFoundSiteContent {
    background: var(--cosmos);
    flex: 1;
}

.Site-footer {
    border-top: var(--border);
    color: var(--white);
    font-size: 0.875rem;
}
.Site-header {
    background: var(--color-brand-primary);
    border-bottom: none;
    box-shadow: 0 0.0625rem 0.125rem rgba(171, 171, 171, 0.3);
    top: 0;
    width: 100%;
    z-index: 10;
    position: sticky;
}

.Header,
.Container {
    margin: 0 auto;
}

.Header-nav {
  align-items: center;
  display: flex;
  height: 3.5rem;
  justify-content: space-between;
}


.Header-rightContent {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: flex-end;
  width: 100%;
}

.Header-logo {
    display: block;
    height: 2rem;
    margin-right: 2.25rem;
    width: 5.125rem;
}
.Header-logo--hidden {
    display: none;
}
.Header-logo--hidden {
    display: none;
}

.Header-menuItem {
  display: none;
}
.Header-menu {
  align-items: stretch;
  display: flex;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.Header--dark .Header-menuItem a:link,
.Header--dark .Header-menuItem a:visited {
  color: var(--white);
}
.Header-menuItem--active a:link,
.Header-menuItem--active a:visited {
  border-bottom-color: #00add8;
  font-weight: bold;
}

.Header-menuItem a:hover {
  border-bottom-color: var(--white);
  color: var(--color-text);
}

.Header-navOpen {
  background: no-repeat center/2rem url('/img/menu-24px-white.svg');
  border: none;
  height: 2.5rem;
  margin: auto 1rem;
  width: 2.5rem;
}

.Header-navOpen--white {
  background: no-repeat center/2rem url('/img/menu-24px-white.svg');
}

.Header--dark {
  border-bottom: none;
  color: var(--white);
}

@media only screen and (min-width: 57.7rem) {
  .Header, .PlayPage {
    padding: 0 1.5rem;
  }
  .Header-menuItem {
    align-items: stretch;
    display: inline-flex;
    flex: none;
  }
  .Header-menu {
    justify-content: flex-end;
  }
  .Header-navOpen {
    display: none;
  }
}
.Header-menuItem a:link,
.Header-menuItem a:visited {
  align-items: center;
  border-bottom: 0.1875rem solid transparent;
  border-top: 0.1875rem solid transparent; /* To ensure the text remains centered. */
  color: var(--color-text);
  display: inline-flex;
  margin: 0 0.3125rem;
  padding: 0 0.9375rem;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

@media only screen and (min-width: 32rem) {
  .Header-rightContent {
    width: 100%;
  }
}

.Header-menuItem a:hover {
  border-bottom-color: var(--white);
  color: var(--color-text);
}
.Header-navOpen {
  background: no-repeat center/2rem url('/img/menu-24px.svg');
  border: none;
  height: 2.5rem;
  margin: auto 1rem;
  width: 2.5rem;
}
.Header-navOpen--white {
  background: no-repeat center/2rem url('/img/menu-24px-white.svg');
}

.NavigationDrawer {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    font-weight: bold;
    background: var(--color-background);
    height: 100%;
    left: auto;
    max-width: 27rem;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform 100ms ease-in-out;
    width: 85%;
    z-index: 20;
}

.NavigationDrawer.is-active {
    transform: translateX(0);
}
.NavigationDrawer-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.NavigationDrawer-logo {
    display: block;
    height: 2rem;
    margin: 1rem 1rem;
    width: 5.125rem;
}
.NavigationDrawer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.NavigationDrawer-listItem {
    font-size: 1.125rem;
    margin: 0 0.5rem;
}
.NavigationDrawer-listItem a:link,
.NavigationDrawer-listItem a:visited {
    color: #111111;
    display: block;
    margin: 0 1rem;
    padding: 0.5rem;
}
.NavigationDrawer-listItem--active {
    background-color: #c3c3c3;
    border-radius: 0.4rem;
}
.NavigationDrawer-scrim {
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;
}
.NavigationDrawer.is-active + .NavigationDrawer-scrim {
    background-color: rgba(0, 0, 0, 0.32);
    display: block;
}

.Container {
    max-width: 75.75rem;
}

.Container--fullBleed {
    margin: 0;
    max-width: none;
}

.Footer {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    background-color: #253443;
}

.Footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 2rem 1.5rem 2.625rem 1.5rem;
}
.Footer-linkColumn {
    flex: 0 0 9.5rem;
}

a.Footer-link {
    color: var(--white);
    display: flex;
    flex: 1;
    font-size: 0.875rem;
    line-height: 2rem;
}
a.Footer-link--primary {
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-bottom: 0.5rem;
    margin-top: 0.75rem;
}

.Footer-bottom {
    align-items: center;
    border-top: var(--border);
    display: flex;
    margin: 0 1.5rem;
    min-height: 4.125rem;
}

.Footer-logo {
    align-self: flex-end;
    width: 5rem;
}

.Footer-square {
    align-self: flex-end;
    height: 1.5rem;
    margin-bottom: 1.3rem;
    text-align: right;
}

.Footer-listRow {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.Footer-listItem {
    align-items: center;
    display: flex;
    flex: 1 100%;
    justify-content: center;
    margin: 0.4rem 0;
    padding: 0 1rem;
}

#blogindex p.blogtitle a {
    font-weight: bold;
}
#blogindex p.blogsummary {
    margin-block-start: 0px;
}
#blogindex p.blogtitle {
    margin-block-end: 0px;
}
#blogindex div.prevnext {
    margin-top: 2em;
}

figcaption {
    text-align: center;
}

.poem {
    text-align: center;
}

table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}


.NotFoundHeader {
  text-align: center;
  font-size: 100px;
  font-family: "Dosis";
  color: white; 
}

/* modal widget */

.close {
    float: right;
    font-size: 22.5px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    filter: alpha(opacity=20);
}
.close:hover, .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .5;
    filter: alpha(opacity=50);
}
button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}
.modal-open {
    overflow: hidden;
}

.modal-open {
    overflow: hidden;
}
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: none;
    overflow: auto;
    overflow-y: scroll;
}
.modal.fade .modal-dialog {
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    transform: translate(0, -25%);
    -webkit-transition: -webkit-transform .3s ease-out;
    -moz-transition: -moz-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
}
.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
.modal-dialog {
    position: relative;
    z-index: 1050;
    width: auto;
    margin: 10px;
}
.modal-content {
    position: relative;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    background-color: #000;
}
.modal-backdrop.fade {
    opacity: 0;
    filter: alpha(opacity=0);
}
.modal-backdrop.in {
    opacity: .5;
    filter: alpha(opacity=50);
}
.modal-header {
    min-height: 16.428571429px;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
    margin-top: -2px;
}
.modal-title {
    margin: 0;
    line-height: 1.428571429;
}
.modal-body {
    position: relative;
    padding: 20px;
}
.modal-footer {
    padding: 19px 20px 20px;
    margin-top: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}
.modal-footer:before, .modal-footer:after {
    display: table;
    content: " "}
.modal-footer:after {
    clear: both;
}
.modal-footer:before, .modal-footer:after {
    display: table;
    content: " "}
.modal-footer:after {
    clear: both;
}
.modal-footer:before, .modal-footer:after {
    display: table;
    content: " "}
.modal-footer:after {
    clear: both;
}
.modal-footer:before, .modal-footer:after {
    display: table;
    content: " "}
.modal-footer:after {
    clear: both;
}
.modal-footer:before, .modal-footer:after {
    display: table;
    content: " "}
.modal-footer:after {
    clear: both;
}
.modal-footer .btn+.btn {
    margin-bottom: 0;
    margin-left: 5px;
}
.modal-footer .btn-group .btn+.btn {
    margin-left: -1px;
}
.modal-footer .btn-block+.btn-block {
    margin-left: 0;
}
@media screen and (min-width:768px) {
    .modal-dialog {
    width: 600px;
    margin: 30px auto;
}
.modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}