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

* {
    margin: 0;
}

body {
    overflow-x: hidden;
}

.container_main {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
    padding-top: 4rem;
    max-width: 52rem;
    position: relative;
    margin: auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container_main > * {
    max-width: 32rem;
}

.wide {
    width: 100%; 
}

@media (min-width: 54rem) {
    .wide {
        position: relative;
        width: 52rem;
        max-width: calc(100vw - 1rem - 2 * 1rem);
        clear: right;
    }
  
    .wideIfPossible {
        position: relative;
        width: 52rem;
        max-width: calc(100vw - 1rem - 2 * 1rem);
        clear: right;
    }
}

.widefixed {
    position: relative;
    width: 52rem;
    clear: right;
}

.verywide {
    position: relative;
    min-width: calc(100vw - calc(2rem + 0.5 * calc(100vw - 52rem)));
    max-width: calc(100vw - 1rem - 2 * 1rem);
    clear: right;
}

.verywidefixed {
    position: relative;
    min-width: calc(100vw - calc(2rem + 0.5 * calc(100vw - 52rem)));
    clear: right;
}

.aside:not(.inline) {
    display: none;
}

/* Used to prevent linebreaks just before a sidenote indicator. */
.nowrap {
    white-space: nowrap;
}

.aside_counter {
    display: none;
}

.preview {
    background: var(--nearly-white);
    box-shadow: 5px 5px 10px 0px rgba(68, 68, 68, 0.80);
    padding: 1rem;
    max-width: calc(100vw + 1rem - 2rem);
    position: absolute;
    border: 1px solid #DDDDDD;
    border-left: 3px solid var(--green);
    overflow: hidden;
}

.preview .aside {
    display: none;
}

.preview.previewwide {
    max-width: calc(8px + 100vw - calc(var(--padding-left) + var(--padding-right) + 0.5 * calc(100vw - var(--max-width-slightlywide))));
}

.preview.previewslightlywide {
    max-width: calc(var(--max-width-slightlywide) + 8px);
}

.preview_content > *:first-child {
    margin-top: 0;
}

.preview_content > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 54rem) {
  .container_main > * {
    margin: auto;
  } 
}

@media (min-width: 54rem) {
    .aside, code .aside {
        display: initial;
        /* display: block; */
        float: right;
        clear: right;
        position: relative;
        width: 18rem;
        margin-right: -20rem;
        font-size: 0.9rem;
        margin-bottom: 1em;
        white-space: normal;
    }
    
    .aside a.ref.type, .aside a.ref.symbol, .aside code, .aside a.ref.param, .aside a.ref.value, .aside a.ref.member, .aside a.ref.fn, .aside .path  {
      font-size: 0.85rem;
    }
    
    .aside figcaption {
      font-size: 0.9rem;
    }

    .aside:not(.inline) {
        display: initial;
    }

    .aside_counter {
        display: initial;
        vertical-align: super;
        font-size: 0.7em;
    }

    .preview .aside_counter {
        display: none;
    }

    .aside > .aside_counter {
        margin-right: 0.2rem;
    }

    .preview {
        max-width: calc(32rem + 1rem);
    }

    .preview .aside {
      display: none;
  }
}

@media (min-width: 84rem) {
  .toc {
    font-size: 1rem;
    width: 15rem;
    position: fixed;
    top: 4em;
    transform: translateX(-16em) translateY(2rem);
    height: 0;
    overflow: visible;
  }
  
  .toc li {
    list-style: none;
    padding-left: 0.5em;
    line-height: 1;
    margin: 0.6em 0 !important;
  }
  
  .toc li.tocActive {
    list-style-type: "☞";
  }
  
  .toc_top {
    display: block !important;
  }
  
  nav.toc > ol {
    padding: 0; 
  }
  
  .toc code {
    font-size: 0.9rem;
    background: none;
  }
}

:root {
    --light-green: rgb(156, 194, 149);
    --green: rgb(28, 175, 0);
    --dark-green: rgb(0, 94, 18);
    --nearly-black: rgb(17, 17, 17);
    --nearly-nearly-black: rgb(19, 50, 21);
    --nearly-white: rgb(255, 253, 252);
    --nearly-nearly-white: rgb(255, 252, 250);
    
    --wong-orange: rgb(230, 159, 0);
    --wong-sky-blue: rgb(86, 180, 233);
    --wong-green: rgb(0, 158, 115);
    --wong-yellow: rgb(240,228,66);
    --wong-blue: rgb(0, 114, 178);
    --wong-vermillion: rgb(213, 94, 0);
    --wong-purple: rgb(204, 121, 167);

    --color-comment: #484f57;
    --color-punctuation: #484f57;
    --color-keyword: #d73a49;

    --color-type: #6f42c1;
    --color-value: #032f62;
    --color-member: #22863a;
    --color-symbol: #005cc5;
    --color-fn: #735c0f;

    --color-comment-type: #4f397a;
    --color-comment-value: #3a5b83;
    --color-comment-member: #356a41;
    --color-comment-symbol: #446993;
    --color-comment-fn: #544000;
}

.orange, .orange a {
    color: var(--wong-orange)
}

.sky-blue, .sky-blue a {
    color: var(--wong-blue)
}

.green, .green a {
    color: var(--wong-green)
}

.yellow, .yellow a {
    color: var(--wong-yellow)
}

.blue, .blue a {
    color: var(--wong-blue)
}

.vermillion, .vermillion a {
    color: var(--wong-vermillion)
}

.purple, .purple a {
    color: var(--wong-purple)
}

body {
    color: var(--nearly-black);
    background: var(--nearly-white);
}
body, .normal_text {
    font-size: 1.1rem;
}

body, .normal_text, code .aside {
    font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
}

strong {
    font-variant: all-small-caps;
    font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {
  padding-top: 0.5em;
  margin-bottom: 0.5em;
}

p {
    line-height: 1.45;
    margin: 1em 0;
}

.aside {
    color: var(--nearly-nearly-black);
}

.aside.long {
    border: 1px solid var(--light-green);
    border-width: 1px 0;
}

/* since `important` is evil... */
body .katex {
    font-size: inherit;
    line-height: inherit;
}

aside.long {
  border: 1px solid var(--light-green);
  border-width: 1px 0;
  padding: 1em 0.75em;
  margin: 2em 0;
}
  
figcaption {
  font-size: 1rem;
}

p.introductory  {
  font-size: 1.5rem;
}

.path {
  white-space: nowrap;
}

.path_segment {
  padding: 0.1em 0.3em;
  transform: skewX(-13deg);
  display: inline-block;
  margin: 0 1px;
  background: rgba(0, 0, 0, 0.05);
}

.path_segment_txt {
  transform: skewX(13deg);
  display: inline-block;
}

.path_segment:first-child {
  border-radius: 3px 0 0 3px;
}

.path_segment:last-child {
  border-radius: 0 3px 3px 0;
}

.path_segment:only-child {
  border-radius: 3px;
}

.path_segment:nth-child(even) {
   color: rgb(86,180,233);

}

.path_segment:nth-child(odd) {
  color: rgb(0,114, 178);
  background: rgba(0, 0, 0, 0.08);
}

code.pseudocode {
  color: var(--nearly-nearly-black);
  line-height: 1.5em;
  margin: 1em 0;
  display: block;
  border-radius: 0;
  border-radius: 5px;
  padding: 0.6em 0.5em ;
}

.pseudocode p {
  margin: 0;
  margin-top: 1em;
}

.pseudocode p:first-child {
  margin-top: 0;
}

.composite_type_def .locindent {
  margin-left: 2rem;
}

.preview code.pseudocode {
  margin: 0;
}

.parent_type {
  margin-top: 0.5em;
}

.pseudocode dfn {
  font-style: normal;
}

.hl_kw {
  color: var(--color-prettylights-syntax-keyword);
}

.hl_punct {
  color: var(--color-punctuation);
}

.hl_doccom {
  color: var(--color-comment);
  display: inline-block;
  border-left: dotted #0000004c 2px;
  padding-left: calc(2ch - 2px);
  text-decoration: inherit;
}

.item_spacing:not(:first-child) {
  margin-top: 1em;
}

a {
  color: var(--nearly-black);
  transition: 100ms all;
  text-decoration: none;
}

a.external, a.internal:not(.ref, dfn > a) {
  color: var(--dark-green);
  text-decoration: underline;
}

a.external:hover, a.internal:not(.ref, dfn > a):hover {
  color: var(--green)
}

a.external:after {
  display: inline;
  content: '↗';
  font-family: ui-sans-serif;
  font-size: 0.9em;
  text-decoration: none;
  text-decoration-thickness: 0;
}

a[aria-disabled=true] {
  color: grey;
}

a[aria-disabled=true]:hover {
  color: grey;
}

dfn {
  font-style: italic;
}

a.ref, .enclosing a {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgb(112, 132, 132);
}

.orange a.ref, .orange a.type, .orange a.value, .orange a.symbol {
  color: var(--wong-orange);
}

.sky-blue a.ref, .sky-blue a.type, .sky-blue a.value , .sky-blue a.symbol {
  color: var(--wong-blue);
}

.green a.ref, .green a.type, .green a.value, .green a.symbol {
  color: var(--wong-green);
}

.yellow a.ref, .yellow a.type, .yellow a.value, .yellow a.symbol {
  color: var(--wong-yellow);
}

.blue a.ref, .blue a.type, .blue a.value, .blue a.symbol {
  color: var(--wong-blue);
}

.vermillion a.ref, .vermillion a.type, .vermillion a.value, .vermillion a.symbol {
  color: var(--wong-vermillion);
}

.purple  a.ref, .purple a.type, .purple a.value , .purple a.symbol {
  color: var(--wong-purple);
}

a.ref:hover, dfn > a:hover, .enclosing a:hover {
  background: rgba(255, 228, 0, 0.199);
  text-decoration-color: var(--nearly-black);
  border-radius: 5px;
}

code, a.ref.type, a.ref.member, a.ref.symbol, a.ref.value, a.ref.fn, dfn > a.type, dfn > a.member, dfn > a.value, dfn > a.symbol, dfn > a.fn, .path {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  font-size: 1.05rem;
  word-break: break-word;
  font-style: normal;
}

a.type, .enclosing.type a {
  color: var(--color-type);
}

a.member, .enclosing.member a {
  color: var(--color-member);
}

a.symbol, .enclosing.symbol a {
  color: var(--color-symbol);
}

a.value, .enclosing.value a {
  color: var(--color-value);
}

a.fn, .enclosing.fn a {
  color: var(--color-fn);
}

.hl_doccom a.ref {
  color: inherit;
}

.hl_doccom a.type, .hl_doccom .enclosing.type a {
  color: var(--color-comment-type);
}

.hl_doccom a.member, .hl_doccom .enclosing.member a {
  color: var(--color-comment-member);
}

.hl_doccom a.symbol, .hl_doccom .enclosing.symbol a {
  color: var(--color-comment-symbol);
}

.hl_doccom a.value, .hl_doccom .enclosing.value a {
  color: var(--color-comment-value);
}

.hl_doccom a.fn, .hl_doccom .enclosing.fn a {
  color: var(--color-comment-fn);
}

.hl_kw {
  color: var(--color-keyword);
}

/* Highlighting in tooltips */
.defined_here {
  color: var(--nearly-black);
  text-decoration: none;
  background: rgba(255, 228, 0, 0.309);
  border-radius: 5px;
  padding: 0.2em;  
}

.rss_item_title {
  font-weight: bold;
}

.rss_item_time {
  color: var(--dark-green)
}

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--green), rgba(0, 0, 0, 0));
}
code {
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.2em;
    border-radius: 10%;
    word-break: break-word
}

footer>nav>ul {
    display: flex;
    gap: 1ch;
    padding: 0;
}

nav ul li {
    list-style: none;
}

footer {
    margin: 1em 0 0 0;
    border-top: 2px solid rgb(225, 225, 225);
    /* margin: 5em auto 0 auto; */
    padding: 0.5em 0;
    clear: right;
}

footer p {
    font-variant-numeric: oldstyle-nums;
}

footer .funder img {
  max-width: 9em;
}

footer .sponsor img {
  max-width: 4em;
}

main {
  flex: 1;
  margin-bottom: 2rem;
}

main nav ul li:has(> a) {
    list-style-type: none;
}

main nav ul li:has(> a):after {
    content: '→';
    margin-left: 0.5ch;
}

main nav ul li:has(> a[aria-disabled=true]):after {
    content: '→'
}

ul {
    padding-inline-start: 1.25em;
}

li {
    margin: 0.5em 0;
}

img {
    max-width: 100%;
}

h1 img {
  width: 32rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5em;
  border-radius: 4px
}

main aside table {
  width: 100%
}

tbody {
  border-top: 1px solid var(--light-green);
  border-bottom: 1px solid var(--light-green);
}

td, th {
 font-size: 1rem;
 font-weight: normal;
 text-align: center;
 padding: 0.5em;
 vertical-align: middle;
}

figure {
  margin: 1.5em 0;
}

/* encodingdef styling */

.encodingdef {

}

.encodingdef tbody {
  border: none;
}

.encodingdef td, .encodingdef th {
  text-align: left;
  vertical-align: top;
}

.encodingdef.withoutremarks tr {
  border-width: 1px 0;
  border-style: dotted;
  border-color: var(--light-green)
}

.encodingdef.withoutremarks tr:first-child {
  border-top-style: solid;
}

 .encodingdef.withoutremarks tr:last-child {
  border-bottom-style: solid;
}

.encodingdef.withremarks tr {
  border-right: 1px solid var(--light-green);
}

.encodingdef.withremarks tr:first-child {
  border-top: none;
}

.encodingdef.withremarks tr:last-child {
  border-bottom: none;
}

.encodingdef td.bitCount, .encodingdef th.bitCount {
  width: auto;
  white-space: nowrap;
  border: none;
  text-align: right;
}

.bitDef .aside, .bytesDef .aside {
  margin-bottom: 0;
}

.bitDef {
  width: 100%;
  border-top: 1px dotted var(--light-green)
}

.bytesDef {
  border-top: 1px solid var(--light-green);
  border-bottom: 1px solid var(--light-green);
}

ol.toc_children {
  padding-left: 1em;
}

.toc a {
  text-decoration: none !important;
}

.toc li {
  margin: 0.35em 0;
}

.toc_top {
  display: none;
}

.clearright {
  clear: right;
}

.proposal {
  background-image: url('/named_assets/proposal-bg.png');
  background-size: 240px;
}

.bg {
  background-image: url('/named_assets/bg.png');
  background-size: 480px;
}

nav.toc > ol {
  padding-left: 1.5em;
}
@media (min-width: 32rem) {
  body {
    font-size: 1.2em;
  }
}