:root 
{
  --header-height: 60px;
  --max-content-width: 900px;
  --sidebar-width: 340px;
  --sidebar-text-size: 100%;

  --main-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --title-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --code-font: "Fira Code", Consolas, Courier, monospace;
  --code-font-weight: 500;
  --code-font-size: 1em;

  /* --sol- colors from  Solarized by Ethan Schoonover: https://ethanschoonover.com/solarized/ */
  --sol-base-color-03:    #002b36;
  --sol-base-color-02:    #073642;
  --sol-base-color-01:    #586e75;
  --sol-base-color-00:    #657b83;
  --sol-base-color-0:     #839496;
  --sol-base-color-1:     #93a1a1;
  --sol-base-color-2:     #eee8d5;
  --sol-base-color-3:     #fdf6e3;
  
  --sol-accent-yellow:    #b58900;
  --sol-accent-orange:    #cb4b16;
  --sol-accent-red:       #dc322f;
  --sol-accent-magenta:   #d33682;
  --sol-accent-violet:    #6c71c4;
  --sol-accent-blue:      #268bd2;
  --sol-accent-cyan:      #2aa198;
  --sol-accent-green:     #859900;

  --sol-background-color-deep: var(--sol-base-color-03);
  --sol-background-color: var(--sol-base-color-02);
  --sol-neutral-dim: var(--sol-base-color-01);
  --sol-neutral: var(--sol-base-color-0);
  --sol-neutral-emphasis: var(--sol-base-color-1);

  --accent-subtle:            #314a72;
  --accent-main:              #6495ed;
  --accent-bright:            #8eb7ff;

  --background-far:           #080d0e;
  --background-main:          #131616;
  --background-menu:          #171c21;
  --background-emphasis:      #252d35;

  --foreground-main:          #cbd1d6;
  --foreground-emphasis:      #e6edf3;

  --link-main:                var(--accent-main);
  --link-hover:               var(--accent-bright);
  --link-press:               var(--foreground-emphasis);

  --sidebar-text-main:        var(--foreground-main);
  --header-button:            var(--foreground-main);
  --header-button-hover:      var(--accent-bright);
  --header-button-press:      var(--foreground-emphasis);
  --sidebar-shadow-color:     rgba(0, 0, 0, 0.8);

  --section-border: var(--accent-subtle);
  --subsection-border: var(--background-emphasis)
}


@media(hover: hover)
{
  :root
  {
    --sidebar-width: 309px;
    --sidebar-text-size: 90%;
  }
}


@media (prefers-color-scheme: light)
{
  :root
  {
    --sol-background-color-deep: var(--sol-base-color-3);
    --sol-background-color: var(--sol-base-color-2);
    --sol-neutral-dim: var(--sol-base-color-1);
    --sol-neutral: var(--sol-base-color-00);
    --sol-neutral-emphasis: var(--sol-base-color-01);

    --foreground-main:      #404040;
    --foreground-emphasis:  #202020;

    --background-emphasis:  #8eb7ff;
    --background-main:      #fcfcfc;
    --background-far:       #e6e6e6;
    --background-menu:      #e0e0e0;

    --accent-subtle:        #ADCBFF;
    --accent-main:          #5076ba;
    --accent-bright:        #6495ed;

    --header-button:        var(--background-main);
    --header-button-hover:  var(--link-hover);
    --header-button-press:  var(--link-main);
    --sidebar-shadow-color: rgba(0, 0, 0, 0.4);

    --section-border: var(--accent-main);
    --subsection-border: var(--accent-subtle)
  }
}


body
{
  font-family: var(--main-font);
  margin: 0px;
  padding: 0px;
  color: var(--foreground-main);
  background-color: var(--background-main);
}

b
{
  color: var(--foreground-emphasis);
}

h1,
h2,
h3,
h4,
h5
{
  font-family: var(--title-font);
  font-weight: 600;
  color: var(--foreground-emphasis);
}

h2,
h3
{
  margin-top: 70px;
}

h2,
h3
{
  border-top: 1px solid var(--section-border);
}

h1 + h2,
h1 + h3,
h2 + h3
{
  margin-top: inherit;
  border-top: none;
}


code,
.index
{
  font-family: var(--code-font);
  font-weight: var(--code-font-weight);
  font-size: var(--code-font-size);
}

.index.not-code
{
  font-family: var(--main-font);
  font-weight: inherit;
  font-size: inherit;
}

.index
{
  border: 1px solid var(--background-emphasis);
  padding: 10px;
  margin-bottom: 80px;
}

.index > h3:first-of-type,
.index > h4:first-of-type,
.member-list > dd > h5:first-child
{
  padding-top: 0;
  margin-top: 0;
}

.index li
{
  list-style-type: none;
}

.index li:not(:last-of-type)
{
  padding-bottom: 5px;
}

h1
{
  font-size: 3em;
}

h2
{
  font-size: 2.3em;
}

h3
{
  font-size: 1.8em;
}

h4
{
  font-size: 1.4em;
}

h5
{
  font-size: 1.0em;
}

a[name],
[id]
{
  /* When navigating to anchors, they should scroll below the header. */
  scroll-margin-top: calc(var(--header-height) + 10px);
}

.sidebar-container
{
  position: fixed;
  touch-action: none;
  background-color: var(--background-menu);
  height: calc(100vh - var(--header-height));
  left: 0px;
  top: var(--header-height);
  width: var(--sidebar-width);
  margin: 0px;
}

.sidebar-frame
{
  width: 100%;
  height: 100%;
  margin: 0px;
  border: none;
}

.content-outer
{
  margin: 0px;
  margin-left: var(--sidebar-width);
  margin-top: var(--header-height);
  width: calc(100% - var(--sidebar-width));
  max-width: var(--max-content-width);
  padding: 30px;
  box-sizing: border-box;
}

.content-outer::after
{
  content: "";
  background-color: var(--background-far);
  position: fixed;
  left: calc(var(--sidebar-width) + var(--max-content-width));
  top: 0;
  height: 100vh;
  width: 100vw;
}

main
{
  margin: 0px;
  overflow-wrap: break-word;
  position: relative;
}

a,
a:visited,
a:hover,
a:active,
a:focus
{
  --transition-time: 80ms;
  text-decoration-color: var(--accent-subtle);
  color: var(--link-main);
  box-shadow: inset 0 0px 0 0px var(--accent-subtle);
  transition: color var(--transition-time) ease-in-out, background-color var(--transition-time) ease-in-out, box-shadow var(--transition-time) ease-in-out, text-decoration-color var(--transition-time) ease-in-out;
}

@media(hover: hover)
{
  a:hover:not(.img)
  {
    box-shadow: inset 0 -4px 0 0 var(--accent-subtle);
  }
}

a:active:not(.img)
{
  color: var(--link-press);
  text-decoration-color: transparent;
  box-shadow: inset 0 -4px 0 0 var(--link-hover);
}


.spaced-dl > dd
{
  margin-bottom: 20px;
}

/* Syntax highlighting */
.syntax-cpp,
.syntax-hlsl
{
  background-color: var(--sol-background-color-deep);
  color: var(--sol-neutral);
}

.syntax-identifier
{
  color: var(--sol-neutral-emphasis);
}

.syntax-keyword
{
  color: var(--sol-accent-blue);
}

.syntax-comment
{
  color: var(--sol-accent-cyan);
}

.syntax-operator
{
  color: var(--sol-accent-blue);
}

.syntax-preprocessor
{
  color: var(--sol-accent-blue);
}

.syntax-cr-type
{
  color: var(--sol-accent-green);
}

.syntax-string
{
  color: var(--sol-accent-orange);
}

.syntax-number
{
  color: var(--sol-accent-yellow);
}

/* Header Stuff */


.header
{
  z-index: 20;
  position: fixed;
  top: 0px;
  left: 0px;
  margin: 0px;
  width: 100vw;
  height: var(--header-height);

  background-color: var(--background-emphasis);

  background-image: url("images/cr-logo-small.png");
  background-repeat: no-repeat;
  background-position: center center;
}

/* 
  Safari on iOS lets you sometimes see *above* the top of the page, so add a little
  blocker so that you can't.
*/
.header::before
{
  content: " ";
  position: fixed;
  top: -2000px;
  left: 0px;
  width:100vw;
  height: 2001px;

  background-color: var(--background-emphasis);
}


#sidebar-button
{
  position: relative;
  height: 46px;
  width: 46px;
  margin-top: 7px;
  margin-left: 7px;

  background-color: transparent;
  border: none;
  visibility: hidden;
}

#sidebar-button::before
{
  content: "";
  position: absolute;
  left: 6px;
  top: 9.5px;
  width: 30px;
  height: 5px;
  background: var(--header-button);
  box-shadow: 
    0 9px 0 0 var(--header-button),
    0 18px 0 0 var(--header-button);
}

@media(hover: hover)
{
  #sidebar-button:hover::before
  {
    background: var(--header-button-hover);
    box-shadow: 
      0 9px 0 0 var(--header-button-hover),
      0 18px 0 0 var(--header-button-hover);
  }
}

#sidebar-button:active::before
{
  background: var(--header-button-press);
  box-shadow: 
    0 9px 0 0 var(--header-button-press),
    0 18px 0 0 var(--header-button-press);
}


.lr-table
{
  display: grid;
  grid-template-columns: auto auto;
}

.lr-table > div
{
  padding: 25px 5px;
  border-bottom: 1px solid var(--subsection-border);
}

.lr-table > div:first-child,
.lr-table > div:nth-child(2)
{
  border-top: 1px solid var(--subsection-border);
}


.member-list
{
  border-color: var(--background-emphasis);
  margin-bottom: 100px;
}

.member-list dt
{
  color: var(--foreground-emphasis);
}


.member-list > dt
{
  background-color: var(--background-menu);
  font-family: var(--code-font);
  font-weight: var(--code-font-weight);
  font-size: var(--code-font-size);
  border: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  min-height: 44px;
  padding-left: 8px;
  padding-right: 8px;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  color: var(--foreground-emphasis);
  border-color: var(--background-emphasis);
}

.member-list > dd
{
  margin: 0;
  padding: 20px;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid var(--background-emphasis);
  border-color: var(--background-emphasis);
}

.member-list > dd:not(:last-of-type)
{
  margin-bottom: 80px;
}

.code-definition
{
  border: 1px solid var(--background-emphasis);
  padding: 20px;
  overflow-x: auto;
}

.code-definition pre,
.code-definition code
{
  padding: 0;
  margin: 0;
  font-family: var(--code-font);
  font-weight: var(--code-font-weight);
  font-size: 0.9em;
}

.member-list > dd:last-of-type
{
  border-bottom: 1px solid var(--background-emphasis);
}

.member-list > dd > section
{
  padding-left: 20px;
}

.image-right
{
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  margin: 0px;
  align-items: start;
}

.image-right > div > p:first-of-type
{
  margin-top: 0px;
} 

.image-right > div > p:last-of-type
{
  margin-bottom: 0px;
} 

.image-right > img
{
  margin-left: auto;
  border: 1px solid var(--foreground-main);
}


.captioned-image,
.caption
{
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.captioned-image > img
{
  border: 1px solid var(--foreground-main);
  max-width: 100%;
}

.captioned-image > label,
.caption
{
  font-size: 0.8em;
}

.centered-image-row
{
  display: flex;
  flex-direction: row;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
}

.centered-image-row .sub,
.centered-image-row a,
.centered-image-row a:visited,
.centered-image-row a:hover,
.centered-image-row a:active,
.centered-image-row a:focus
{
  display: flex;
  border: 1px solid var(--accent-subtle);
}

@media(hover: hover)
{
  .centered-image-row a:hover
  {
    border-color: var(--link-hover)
  }
}

.centered-image-row a:active
{
    border-color: var(--link-press)
}


.centered-image-row img
{
  max-width: 100%;
}


/* Sidebar stuff */


.sidebar
{
  overscroll-behavior: contain;
  box-sizing: border-box;
  background-color: var(--background-menu);
  margin: 0;
  padding: 0;
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--sidebar-text-main);
  font-size: var(--sidebar-text-size);

  --sidebar-padding-x: 25px;
  --sidebar-padding-y: 6px;
  --sidebar-sub-menu-indent: 15px;

  /* This margin is here because Safari won't let me scroll to the bottom if there isn't just a ton of padding */
  padding-bottom: 120px;
}

.sidebar > ul
{
  overflow-y: scroll;
}

.sidebar a:active
{
  background-color: var(--link-main);
}

.sidebar .top-level > p,
.sidebar .top-level > a
{
  color: var(--accent-main);
  text-transform: uppercase;
  font-weight: 600;
  padding-left: var(--sidebar-padding-x);
  padding-right: var(--sidebar-padding-x);
  padding-bottom: var(--sidebar-padding-y);
  padding-top: var(--sidebar-padding-y);
  margin: 0;
}

.sidebar p,
.sidebar a
{
  display: block;
  color: var(--foreground-main);
  margin: 0;
  padding-left: var(--sidebar-padding-x);
  padding-right: var(--sidebar-padding-x);
  padding-top: var(--sidebar-padding-y);
  padding-bottom: var(--sidebar-padding-y);
  text-decoration: none;
  box-shadow: none;
}

.sidebar ul
{
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: hidden;
}

.sidebar .current-page
{
  background-color: var(--background-emphasis);
}

.sidebar ul li
{
  margin-top: 2px;
  margin-bottom: 2px;
}

.sidebar ul li li p,
.sidebar ul li li a
{
  padding-left: calc(var(--sidebar-sub-menu-indent) + var(--sidebar-padding-x));
}

.sidebar ul li li li p,
.sidebar ul li li li a
{
  padding-left: calc(2*var(--sidebar-sub-menu-indent) + var(--sidebar-padding-x));
}

.sidebar ul li li li li p,
.sidebar ul li li li li a
{
  padding-left: calc(3*var(--sidebar-sub-menu-indent) + var(--sidebar-padding-x));
}

.sidebar ul li li li li li p,
.sidebar ul li li li li li a
{
  padding-left: calc(4*var(--sidebar-sub-menu-indent) + var(--sidebar-padding-x));
}

.sidebar .top-level
{
  margin-bottom: var(--sidebar-padding-y);
}

.sidebar .top-level:first-child
{
  margin-top: var(--sidebar-padding-x);
}

@media(hover: hover)
{
  .sidebar ul li p:hover,
  .sidebar ul li a:hover
  {
    background-color: var(--link-main);
    color: var(--foreground-emphasis);
  }
}

.sidebar ul li p:active,
.sidebar ul li a:active
{
  background-color: var(--link-press);
  color: var(--link-main);
}

.sidebar > ul > li
{
  margin: 0px;
  padding: 0px;
}

.sidebar li.collapsed ul
{
  display: none;
}


/* Flowcharts */

.flowchart-outer
{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flowchart
{
  border: 1px solid var(--background-emphasis);
  padding: 20px;
}

.flowchart rect,
.flowchart polygon
{
  fill: none;
  stroke-width: 1px;
  stroke: var(--accent-main);
}

.flowchart text
{
  fill: var(--foreground-main);
  font-family: var(--main-font);
  font-size: 0.9em;
  text-anchor: middle;
  dominant-baseline: middle;
}

.flowchart marker
{
  fill: var(--accent-main);
}

.flowchart .io > rect
{
  fill: var(--sol-background-color-deep);
}

.flowchart .shader > rect
{
  fill: var(--background-emphasis);
}

.flowchart line,
.flowchart path
{
  stroke: var(--accent-main);
}

/* svg diagrams */

.ntsc-diagram
{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ntsc-diagram > label
{
  text-align: center;
  font-size: 0.8em;
}

.ntsc-diagram svg
{
  border: 1px solid var(--background-emphasis);
  width: 100%;
}

.ntsc-diagram svg.centered
{
  width: inherit;
  max-width: 100%;
}

.ntsc-diagram svg path,
.ntsc-diagram svg line
{
  fill: none;
  stroke-width: 2px;
  stroke: var(--foreground-emphasis);
}

.ntsc-diagram svg circle
{
  stroke-width: 2px;
  stroke: var(--foreground-emphasis);
}

.ntsc-diagram svg circle:not(#demo-swatch)
{
  fill: var(--foreground-emphasis);
}


.ntsc-diagram .hsync-pulse,
.ntsc-diagram .vsync
{
  fill: var(--background-far);
}


.ntsc-diagram .visible-scanline
{
  fill: var(--background-menu);
}

.ntsc-diagram .phase-divider
{
  stroke: var(--accent-main);
  stroke-width: 1.0;
  stroke-dasharray: 7 7;
}

.ntsc-diagram text
{
  fill: var(--foreground-main);
  font-family: var(--main-font);
  font-size: 0.8em;
  text-anchor: middle;
  dominant-baseline: middle;
}

#phase-demo
{
  touch-action: none;
}

.ntsc-diagram text.faint
{
  fill: var(--accent-subtle);
}


.ntsc-diagram .faint-dotted
{
  stroke: var(--accent-subtle);
  stroke-dasharray: 7 7;
}

.ntsc-diagram line.faint,
.ntsc-diagram path.faint
{
  stroke: var(--accent-subtle);
}

#demo-label,
#demo-label2
{
  fill: #080d0e;
  font-size: 1.0em;
}

/* Media queries */


@media screen and (max-width: 1100px)
{
  .sidebar-container
  {
    z-index: 10;
    left: calc(-12px - var(--sidebar-width));
    transition: left 100ms;
    box-shadow: 6px 0px 6px var(--sidebar-shadow-color);
  }

  .content-outer
  {
    margin: 0;
    margin-top: var(--header-height);
    padding: 30px;
    width: 100%;
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
    min-height: calc(100vh - var(--header-height));
    box-sizing: border-box;

    transition: margin 100ms;
  }  

  .content-outer::before
  {
    content: "";
    background-color: var(--background-far);
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: calc((100% - var(--max-content-width)) / 2);
  }

  .content-outer::after
  {
    left: calc(var(--max-content-width) + (100% - var(--max-content-width)) / 2);
  }


  #sidebar-button
  {
    visibility: visible;
  }

  .sidebar-container.opened
  {
    left: 0px;
    transition: left 100ms;
  }

  body.sidebar-opened
  {
    overflow: hidden;
  }

  .sidebar-container.opened::before
  {
    content: "";
    position: fixed;
    background-color: var(--sidebar-shadow-color);
    overflow: hidden;
    left: -10px;
    top: -10px;
    width: 200vw;
    height: 200vh;
    touch-action: none;
    z-index: -1;
  }
}

@media screen and (resolution >= 1.5dppx)
{
  .header
  {
    background-image: url("images/cr-logo-large.png");
    background-size: auto 50px;
  }
  
  .ntsc-diagram svg path,
  .ntsc-diagram svg line
  {
    stroke-width: 0.8px;
  }
}

@media screen and (max-width: 600px)
{
  .header
  {
    background-image: url("images/cr-logo-tiny.png");
    background-size: auto auto;
  }

  .lr-table
  {
    display: block;
  }

  .lr-table > div,
  .lr-table > div:nth-child(2)
  {
    padding: 5px 5px;
    border-bottom: none;
    border-top: none;
  }

  .lr-table > div:first-child
  {
    border-top: 1px solid var(--subsection-border);
    border-bottom: none;
  }

  .lr-table > div:nth-child(2n)
  {
    border-bottom: 1px solid var(--subsection-border);
    padding-bottom: 25px;
  }

  .lr-table > div:nth-child(2n + 1)
  {
    padding-top: 25px;
  }
  
  .image-right
  {
    position: relative;
    display: block;
  }

  .image-right > div
  {
    min-height: 75px;
  }

  .image-right > img
  {
    width: 75px;
    height: 75px;
    float: inline-end;
    margin-left: 10px;
    margin-bottom: 10px;
  }
}