@font-face {
   font-family: 'CLIG';
   font-style: normal;
   font-weight: 400;
   src: url(https://fonts.clig.dev/iAWriterDuospace-Regular.woff2) format('woff2');
}
@font-face {
   font-family: 'CLIG';
   font-style: italic;
   font-weight: 400;
   src: url(https://fonts.clig.dev/iAWriterDuospace-Italic.woff2) format('woff2');
}
@font-face {
   font-family: 'CLIG';
   font-style: normal;
   font-weight: 600;
   src: url(https://fonts.clig.dev/iAWriterDuospace-Bold.woff2) format('woff2');
}
@font-face {
   font-family: 'CLIG';
   font-style: italic;
   font-weight: 600;
   src: url(https://fonts.clig.dev/iAWriterDuospace-BoldItalic.woff2) format('woff2');
}
@font-face {
   font-family: 'CLIG';
   font-style: normal;
   font-weight: 800;
   src: url(https://fonts.clig.dev/EditorialNew-Regular.woff2) format('woff2');
}
@font-face {
   font-family: 'CLIG-PRE';
   font-style: normal;
   font-weight: 400;
   src: url(https://fonts.clig.dev/iAWriterMonoS-Regular.woff2) format('woff2');
}
@font-face {
   font-family: 'CLIG-PRE';
   font-style: normal;
   font-weight: 600;
   src: url(https://fonts.clig.dev/iAWriterMonoS-Bold.woff2) format('woff2');
}

* {
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
   letter-spacing: inherit;
   vertical-align: baseline;

   margin: 0;
   padding: 0;

   color: inherit;
   text-decoration: none;
   text-underline-offset: 0.3em;
   text-decoration-thickness: 1px;
}

html {
   font-family: 'CLIG';
   font-weight: 800;
   font-size: 1vw;
   -webkit-font-smoothing: antialiased;
   text-align: left;
}

body {
   font-size: 3.8rem;
   line-height: 1.4;
}
@media (min-width: 600px) {
   body {
      font-size: 3.5rem;
   }
}
@media (min-width: 750px) {
   body {
      font-size: 2.5rem;
   }
}
@media (max-width: 750px) and (orientation: landscape) {
   body {
      font-size: 2.4rem;
   }
}
@media (min-width: 751px) and (max-width: 999px) and (orientation: landscape) {
   body {
      font-size: 2.1rem;
   }
}
@media (min-width: 1000px) {
   body {
      font-size: 1.6rem;
   }
}
@media (min-width: 1200px) {
   body {
      font-size: 17px;
   }
}
@media (min-width: 1600px) {
   body {
      font-size: 20px;
   }
}

@media (min-width: 901px) {
   body {
      display: grid;
      grid-template-columns: 25% 75%;
      grid-gap: 0;
   }
   #TableOfContents {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      box-sizing: border-box;
      margin-top: 100vh;
   }
   #TableOfContents > ul {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      padding: calc(1.7em *0.5) 0;
      height: 100vh;
      box-sizing: border-box;
      overflow: auto;
   }
   main {
      grid-column: 1 / 3;
      grid-row: 1 / 2;
      box-sizing: border-box;
   }
}

@media (min-width: 901px) and (min-height: 800px) {
   #TableOfContents > ul {
      padding-top: calc(1.7em * 1.5);
   }
}

#TableOfContents {
   text-align: left;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: 100;
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
}

/* Don't show authors in table of contents */
#TableOfContents a[href='#authors'] {
   display: none !important;
}

/* Fix ToC vertical alignment from authors link being hidden */
#TableOfContents > ul > li:nth-child(2) {
   padding-top: 0;
}

#menu-button {
   display: none;
}

@media (max-width: 900px) {
   .menu-open {
      overflow: hidden;
   }
   #menu-button {
      display: inline-block;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      text-align: right;
      padding: calc(1.7em *0.5) 1.7em;
      z-index: 200;
      border: none;
      background: none;
      cursor: pointer;
   }
   .menu-open #menu-button {
      display: none;
   }
   #TableOfContents {
      display: none;
      position: fixed;
      overflow: scroll;
      padding: calc(1.7em *0.5) 0 1.7em;
   }
   .menu-open #TableOfContents {
      display: block;
   }
}

#TableOfContents ul {
   list-style: none;
}

@media (min-width: 901px) {
   #TableOfContents > ul {
      max-width: 18em;
      margin: 0 auto;
   }
   #TableOfContents ul ul {
      letter-spacing: 0.025em;
   }
}

#TableOfContents > ul > li {
   padding: 0 1.7em;
}

#TableOfContents ul li + li {
   padding-top: calc(1.7em *0.25);
}

#TableOfContents ul ul {
   padding-top: 0.5em;
   padding-left: 1.7em;
   font-size: 75%;
}

#TableOfContents ul ul li {
   margin-top: 0;
   border-top: none;
   padding-top: 0;
}

#TableOfContents a {
   display: inline-block;
   opacity: 0.5;
   transition: opacity 0.3s ease;
}

#TableOfContents a:hover,
#TableOfContents a:focus {
   opacity: 1;
   text-decoration: underline;
}

#TableOfContents .active > a {
   opacity: 1;
}

@media (max-width: 900px) {
   #TableOfContents a {
      font-size: 200%;
      opacity: 1;
   }
}

main {
   padding: 0 1.7em;
}

@media (min-width: 901px) {
   #human-being-guidelines > section {
      padding-left: 25%;
   }
}

#human-being-guidelines > h1 {
   position: relative;
   height: 75vh;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
   box-sizing: border-box;
   padding: 0.5em 0 0;
   text-align: center;
   font-size: 15.5vw;
   left: -0.025em;
   line-height: 1;
   letter-spacing: -0.02em;
   max-width: 6em;
}
@media (max-width: 750px) and (orientation: landscape) {
   #human-being-guidelines > h1 {
      font-size: 10vw;
   }
}
@media (min-width: 750px) {
   #human-being-guidelines > h1 {
      font-size: 16.5vw;
   }
}
@media (min-width: 120vh) {
   #human-being-guidelines > h1 {
      font-size: 19vh;
   }
}
@media (min-width: 120vh) {
   #human-being-guidelines > h1 {
      font-size: 20vh;
      max-width: 6em;
      margin: 0 auto;
   }
}

#human-being-guidelines > h1 + p {
   position: relative;
   height: 25vh;
   display: table-cell;
   vertical-align: middle;
   margin: 0 auto;
   box-sizing: border-box;
   padding: 0 0 1.7em;
   text-align: center;
   max-width: 30.5em;
   left: 50vw;
   transform: translate(-57%, 0);
}

#human-being-guidelines > h1 + p a {
   display: inline;
}

.github-button {
   margin: 1.7em auto;
}

/* HACK: this makes the table of contents highlighting work when you click on a link in the table of contents */
section {
   margin-bottom: 1px;
}

section section:after {
   content: " ";
   display: block;
   width: 100%;
   height: calc(33vh - (1.7em * 2));
}

h2, h3 {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   margin: 0 0;
   padding: calc(1.7em *0.5) 7em calc(1.7em *0.5) 0;
   z-index: 50;
}

h3 {
   white-space: nowrap;
}

@media (min-width: 901px) and (min-height: 800px) {
   h2, h3 {
      padding-top: calc(1.7em * 1.5);
   }
}

h2:before, h3:before {
   content: "HBG: ";
}

@media (min-width: 750px) {
   h3:before {
      content: "HBG:"attr(data-parent-heading)" ";
   }
}


h2:before, h3:before {
   display: inline-block;
   font-weight: 400;
   padding-right: 0.5em;
   position: relative;
   opacity: 0.5;
}

h2:after, h3:after {
   content: " ";
   position: absolute;
   top: calc(1.7em *-0.5);
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
}

h4, h5, h6 {
   padding: calc(1.7em *0.5) 0;
}

h1 a.permalink {
   display: none;
}

a.permalink::before {
   content: "#";
}

a.permalink {
   font-weight: 400;
   text-decoration: none;
   margin-left: 1em;
   opacity: 0.5;
}

@media (max-width: 900px) {
   a.permalink {
      display: none;
   }
}

a.permalink:hover,
a.permalink:focus {
   opacity: 1;
   text-decoration: none;
}

a.permalink:hover::after,
a.permalink:focus::after {
   content: " permalink ";
   font-size: 60%;
   text-transform: uppercase;
   vertical-align: middle;
}

main p,
main ol,
main ul {
   margin: 1.7em 0;
   font-weight: 400;
}

main ol li,
main ul li {
   padding-left: 2.2em;
}

main ul li {
   list-style: none;
}

main ul li:before {
   content: " ";
   position: relative;
   float: left;
   margin-left: -1.7em;
   top: 0.4em;
   width: 0.6em;
   height: 0.6em;
   border-radius: 50%;
}

main ol {
   counter-reset: ordered-list;
}

main ol > li {
   list-style: none;
   counter-increment: ordered-list;
}

main ol > li:before {
   content: counter(ordered-list)". ";
   float: left;
   min-width: 2.2em;
   margin-left: -2.2em;
}

main a {
   text-decoration: underline;
}

main strong {
   font-weight: 600;
}

h2+p, h3+p {
   margin-top: calc(1.7em *0.5);
}

code {
   font-family: 'CLIG-PRE';
   padding: 0 0.25em;
}

pre {
   display: block;
   position: relative;
   width: 100%;
   box-sizing: border-box;
   margin: 7rem auto;
   padding: 2.5em 2px 2px;
   font-size: 14px;
   line-height: 1.8;
   color: white;
   border-radius: 7px;
   border: 1px solid;
}

pre code {
   display: block;
   overflow-x: auto;
   padding: 3em 3rem;
   border-radius: 1px 1px 5px 5px;
   font-weight: 400;
}

pre code strong {
   font-weight: 600;
}

@media (min-width: 750px) {
   #human-being-guidelines section p,
   #human-being-guidelines section ol,
   #human-being-guidelines section ul,
   #human-being-guidelines section pre,
   #human-being-guidelines section iframe {
      margin-left: auto;
      margin-right: auto;
      max-width: 78rem;
      position: relative;
      left: 3%;
   }
}

@media (min-width: 900px) {
   #human-being-guidelines section p,
   #human-being-guidelines section ol,
   #human-being-guidelines section ul,
   #human-being-guidelines section pre,
   #human-being-guidelines section iframe {
      max-width: 58rem;
      left: 0;
   }
}


#human-being-guidelines section iframe {
   display: block;
   margin: 0 auto!important;
   width: 100%!important;
}


body {
   color: rgba(0,0,0,1);
   background: rgba(255,255,255,1);
}
#TableOfContents {
   background: rgba(255,255,255,0.6);
}
h2:after, h3:after {
   background: rgba(255,255,255,1);
   box-shadow: 0 0 25px rgba(255,255,255,1);
}
main ul li:before {
   background: rgba(0,0,0,1);
}
code {
   background: rgba(126,126,126, 0.25);
}
pre {
   border-color: rgb(0,0,0);
}
pre code {
   color: rgb(255,255,255);
   background: rgb(0,0,0);
}
@media (prefers-color-scheme: dark) {
   body {
      color: rgba(230,230,230,1);
      background: rgba(0,0,0,1);
   }
   #TableOfContents {
      background: rgba(0,0,0,0.6);
   }
   h2:after, h3:after {
      background: rgba(0,0,0,1);
      box-shadow: 0 0 25px rgba(0,0,0,1);
   }
   main ul li:before {
      background: rgba(230,230,230,1);
   }
   code {
      background: rgba(126,126,126, 0.4);
   }
   pre {
      border-color: rgba(126,126,126, 0.4);
   }
   pre code {
      background: rgba(126,126,126, 0.4);
   }
}

a:focus, button:focus {
   color: rgb(255,255,255);
   background: rgb(31, 76, 255);
   outline: none;
   text-decoration: underline;
}