:root {
  /* Converts default rem 16px to 10px, so N.nrem is Nnpx */
  font-size: 62.5%;

  /* Allow for a full-width banner at the top... */
  --header-size: 0px; /* px is essential when used in a calc() */
  --header-nav-display: none; /* ... but don't use one */

  /* Menu */
  --menu-width: min(25rem, 50vw);
  --content-width: 72.5rem;
  /* see @media (min-width: 975px) in media-queries.css */

  --ratio: 0.25;
  --icon-size: calc(var(--ratio) * var(--menu-width));
  --list-width: calc(var(--menu-width) - 1rem);
  --repo-size: 11.8rem;
  --items-height: calc(
    100vh
    - var(--icon-size)
    - var(--repo-size)
    - var(--header-size)
  );
  --svg-margin: 0.64rem;
  --gap:        0.8rem;
  --fill:       0.4rem;

  /* Color settings for light mode */
  --darkly:   #222e;
  --lightly:  #fffe;
  --border:   #888;
  --selected: #ddd;
  --radio-bg: #0002;
  --radiover: #0003;

  /* Body */
  --black:     #000;
  --darker:    #080808;
  --dark:      #222;
  --skipping:  #2c2c2c;
  --skip:      #666;
  --mid:       #888;
  --download:  #cccc;
  --light:     #ddd;
  --lighter:   #fff1;
  --white:     #fff;
  --cta:       #060;  /* Call To Action color */
  --ctabor:    #080;
  --btn-down:  #040;

  /* Details */
  --alert:     #f99;
  --challenge: #ecf;
  --env:       #aef;
  --feedback:  #beb;
  --note:      #dfd;
  --pivot:     #9cf;
  --question:  #fbd;
  --sandbox:   #fec;
  --solution:  #d9f6;
  --story:     #cfe;
  --tip:       #fe9;
  --tldr:      #77b;
  --trouble:   #fc9;
  --warn:      #fbb;
  --code:      #0001;
  --codeblock: #000c;

  /* Paging / Theme */
  --shadow:    #0008;
  --subdue:    #fffc;
  --subdued: linear-gradient(var(--subdue), var(--subdue));

  --text:      var(--dark);
  --bg:        var(--white);
  --mixer:     var(--lighter);
  --active:    var(--cta);
  --menu-bg:   var(--lightly);

  --invert:   0; /* Used to invert SVG images in dark mode */

  /* Links */
  --link-color:   #840;
  --link-visited: #a50;


  --min-width: calc(var(--content-width) + var(--menu-width));

  /* Paging/Theme dimensions and inactive opacity */
  --pad:    calc(var(--icon-size) / 7);
  --size:   calc(var(--icon-size) - 4 * var(--pad));
  /* opacities */
  --dim:    0.5;
  --dimmer: 0.2;
  --dimmer: 0.2;
  --glow:   0.8;

  /* Footer */
  --footer-height: 3.2rem;
  --footer-top: calc(100vh - var(--footer-height))
}

body:has(#theme-dark:checked) {
  --text:      var(--light);
  --bg:        var(--dark);
  --mixer:     var(--darker);
  --active:    var(--white);
  --menu-bg:   var(--darkly);
  --invert:    1;

  --selected:  #000;
  --radio-bg:  #fff2;
  --radiover:  #fff3;
  --skip:      #666;

  /* Details */
  --alert:     #800;
  --challenge: #609;
  --env:       #069;
  --feedback:  var(--cta);
  --note:      #040;
  --pivot:     #03c;
  --question:  #907;
  --sandbox:   #a86;
  --solution:  #4069;
  --story:     #088;
  --tip:       #c90;
  --tldr:      #004;
  --trouble:   #c60;
  --warn:      #630;
  --code:      #fff1;
  --codeblock: #0006;

  /* Paging / Theme */
  --shadow:    #000;
  --subdue:    #000c;
  --subdued:   linear-gradient(var(--subdue), var(--subdue));

  /* Links */
  --link-color:   #fc9;
  --link-visited: #fdb;
}

body {
  background-color: var(--bg);
  color: var(--text);
  margin: 0;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  counter-reset: fig menu;
}

/* Some lines may be commented out for freeCodeCamp */
#content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--content-width);
  height: 100vh;
  margin: 0 auto;
  padding: 0; /* 1.6rem; */

  overflow: auto;

  /* Ensure short content is pushed to the top */
  & > .spacer {
    order: 1;
    flex: 1;
  }

  /* Links */
  a {
    color: var(--link-color);
    /* text-decoration: none; */
  }
  a:hover {
    text-decoration: underline;
  }
  a:visited {
    color: var(--link-visited);
  }
  a.external {
    color: #9cf;
  }
  a.external span {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    background-image: url("./images/external.svg");
    margin-left: 0.2rem;
  }
  a.external:visited {
    color: #bdf;
  }

  a[download] {
    border: 1px outset var(--download);
    border-radius: var(--gap);
    padding: var(--fill) var(--gap);
  }

  /* Header */
  header {
    text-align: center;
    border-bottom: 1px solid var(--mid);

    & h1 {
      margin: 1.2rem 0 0;
    }
    /* Subtitle */
    & h3 {
      margin-top: 0;

      &::empty {
        height: 0;
      }
    }
    /* Month of last update */
    & h4 {
      position: absolute;
      top: 0.6rem;
      right: 3.6rem;
      margin: 0;
      opacity: var(--dimmer);
      text-decoration: none;
    }

    /* Link to organization home page */
    a {
      position: absolute;
      right: 0;

      img {
        width: 3rem;
        filter: invert(var(--invert));
        opacity: var(--dimmer);

        &:hover {
          opacity: 1;
        }
      }
    }
  }

  p,
  li {
    line-height: 2.8rem;
  }


  #content-header,
  #content-footer {
    height: var(--footer-height);
    margin: var(--footer-height) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.6rem;
    order: 2;

    & button {
      display: inline-block;
      background-color: transparent;
      color: inherit;
      box-sizing: border-box;
      border: 1px outset #000;
      border-radius: var(--fill);
      width: var(--footer-height);
      height: var(--footer-height);
      cursor: pointer;

      &.previous {
        margin-right: var(--gap);
      }

      /* Use !important to ignore Dark theme generic bg color */

      /* The #next button must be listed before #next-name so that
        button:hover + span will work. But it must be displayed
        _after_ the name.
      */
      &.next {
        background-color: var(--cta)!important;
        margin-left: var(--gap);
        order: 1;

        /* Force black arrow to be almost white when not :hover */
        & img {
          filter: invert(0.9);
        }
      }

      & img {
        margin: 0;
        height: 2.25rem;
        width: 2.25rem;
        /* Black in Light mode, white in Dark mode */
        filter: invert(var(--invert));
        background-color: transparent!important;
      }

      &:hover {
        border-color: var(--cta)
      }

      &:hover:active {
        border-style: inset;
        background-color: var(--btn-down)!important;

        /* Make arrow fully white on :hover */
        & img {
          filter: invert(1);
        }
      }

      &:disabled {
        background-color: transparent;
        opacity: var(--dimmer);
        pointer-events: none; /* to prevent reactions to :hover */
      }
    }

    /* Push the previous-name and next-name spans apart */
    & .spacer {
      flex: 1;
      order: 0;
    }

    & span {
      cursor: pointer;
      -webkit-user-select: none; /* Safari */
              user-select: none;
    }

    & button:hover + span {
      color: var(--active);
    }
  }

  /* Don't use nav#content-header with no full-width banner*/
  #content-header {
    display: var(--header-nav-display);
  }
}

/* No menu or footer if no sections */
#content:not(:has(section)),
body:not(:has(#pages:checked)) {
  & ~ #menu,
  #article-header,
  #article-footer
   {
    display: none;
  }

  & {
    box-shadow: 0 0 1.6rem #0003;
  }
}

/* Show non last-of-type sections after last-of-type */
section[data-item] {
  padding-top: var(--header-size);
  order: 1;
}
section[data-item]:last-of-type {
  order: 0
}

body:has(#pages:checked) {
  /* Hide all sections, including last if there's a :target... */
  section[data-item],
  section[data-item]:target ~ section[data-item]:last-of-type {
    height: 0;
    width: 0;
    overflow: hidden;
  }

  /* ...but show the :target if there is one, or last, if not */
  section:target,
  section:last-of-type {
    height: auto;
    width: auto;
    overflow: auto;
    padding: 0;
  }

  /* In #pages mode, show a nav bar above the page, except for
     the first "page"
   */
  & :not(:has(:target)),
  &:has(:target:last-of-type) {
    #content-header {
      display: none;
    }
  }
}

/* If there is a full-width banner, ensure start of :target
   is not hidden behind it
*/
section:target {
  padding-top: var(--header-size);
}

/* freeCodeCamp only: If there is a cover image and #paging
   is used, only show the cover image and author slug on
   the first "page"
 */
.post-full:has(section:target:not(:last-of-type)) {
  figure.post-full-image,
  .post-full-author-header {
    display: none;
  }
}



/* CONTENT // CONTENT // CONTENT // CONTENT // CONTENT */

/* Browsers show h1 at h2 size inside first-level containers.
   If you really want an h1 header, you must counteract this.
   */
h1 {
  font-size: 3.2rem;
  text-align: center;
}

figure {
  position: relative; /* so credits show correctly */
  margin: 0;

  figcaption {
    margin: 1em 0 4.8rem;
    text-align: center;
    text-decoration: underline;

    &::before {
      counter-increment: fig;
      content: "Figure " counter(fig) ": ";
    }
  }
}

pre.wrap,
pre.wrap code,
pre.wrap code span
{
  white-space: pre-wrap !important; /* override Prism */
}


code b,
code b * {
  font-weight: bold;
  filter: brightness(1.1);
}


code i,
code i * {
  /* color: #776!important; */
  filter: brightness(0.9);
  font-style: normal;
}

code:not([class]) {
  background-color: var(--code);
  padding: 0 0.2em;
  font-size: 1.4rem;
  white-space: pre
}

h2, h3 {
  margin-top: 3.2rem;
}

h2 code:not([class]), /* :not([class]) needed for specificity */
h3 code:not([class]),
h4 code:not([class]) {
  font-size: 1em; /* Use em to ensure _relative_ size */
}

aside s,
code s,
code s * {
  color: #c00!important;
  text-decoration: line-through;
  font-style: italic;
  filter: none;
  text-decoration-thickness: 0.2rem;

  /* Don't let the user copy deleted text */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

code u,
code u * {
  background-color: var(--code);
  text-decoration: none;
}

aside,
blockquote {
  background-color: #020;
  padding: var(--fill) 1.6rem;
  border-left: 1.6rem solid #040;
  box-sizing: border-box;
}

blockquote {
  background-color: #5555;
  border-color: var(--mixer);
}

blockquote pre:has(code) {
  --bg-color: #333;
  background-color: var(--bg-color);
  padding: var(--gap);
}
blockquote pre code:not([id])
{
  /* background-color: var(--bg-color); */
  padding: 0;
}

aside.center {
  text-align: center;
  border-right: 1.6rem solid;
}

/* aside:not([class]) code {
  background-color: #353;
} */

aside:not([class]) pre,
aside:not([class]) code {
  background-color: #030;
}

aside.vscode {
  background-color: #224;
  border-left: 1.6rem solid #006;
}

aside.vscode pre,
aside.vscode code {
    background-color: #335;
}

aside.tip {
  background-color: #330;
  border-color: #973
}

aside.tip pre,
aside.tip p code {
    background-color: #440;
}

aside.warn {
  background-color: #320;
  border-color: #643
}

aside.alert {
  background-color: #200;
  border-color: #600;
}

aside.alert code {
  background-color: #633;
}

aside.question {
  background-color: #202;
  border-right: 1.6rem solid;
  border-color: #606;
}

aside.question code {
  background-color: #525;
}

aside.question blockquote {
  background-color: #424;
  border-color: #525;
}

cite {
  display: block;
  margin-top: var(--gap);
  text-align: right;
}

li,
br {
  margin-bottom: var(--gap);
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid var(--light);

  th {
    padding: var(--gap);
    text-align: left;
  }
  td {
    padding: var(--gap);
    border-bottom: 0.05rem solid var(--light);
  }
  th:last-child,
  td:last-child {
    border-left: 0.05rem solid var(--light);
  }

  thead {
    border-bottom: 0.05rem solid var(--light);
  }
}

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

img + .credit {
  /* Take out of the flow */
  position: absolute;
  /* Move up over bottom of older sibling image */
  padding: var(--gap);
  width: fit-content;
  background-color: #0008;
  transform: translateY(-100%);
  /* Hide until image is hovered over */
  opacity: 0;
  pointer-events: none;
  /* Show and hide gently */
  transition: opacity 0.5s;

  h4,
  p {
    margin: 0 !important;
  }

  a {
    color: var(--light);

    &:hover {
      color: var(--white);
    }
  }
}

img:hover + .credit,
div.credit:hover {
  opacity: 1;
  pointer-events: all;
  /* Pause before showing, so won't trigger on quick rollover */
  transition-delay: 1s;
}


/* Ensure feedback aside on #intro page wraps nicely on all
   screen sizes
 */
#intro .feedback-wide,
#conclusion .feedback-wide {
  display: block
}
#intro .feedback-small,
#conclusion .feedback-small {
  display: none
}

/* Internal links */

button[data-name] {
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  padding: 0;
  background-color: transparent;
  border: none;
  text-decoration: underline;
}

button[data-name]:hover {
  color: #fff;
}

[name^=anchor] {
  background-color: transparent;
  transition: background-color 2000ms ease-out;
}

[name^=anchor].highlight {
  background-color: #666;
  transition: background-color 0ms;
}


/* MENU / MENU / MENU / MENU / MENU / MENU / MENU / MENU */

#menu-icon {
  position: fixed;
  width: var(--icon-size);
  height: var(--icon-size);
  stroke: #fff;
  top: var(--header-size);
  left: 0;
  transition-property: left, opacity;
  transition-duration: .3s, .1s;
  transition-timing-function: linear, ease-in-out;
  opacity: var(--dimmer);
  filter: invert(var(--invert));

  &:hover {
    opacity: var(--glow);
  }
}

#menu-items {
  display: flex;
  flex-direction: column;
  margin-top: var(--icon-size);
  height: var(--items-height);
  overflow-y: auto;
  list-style-type: none;

  padding: 0 var(--gap);
}

#menu {
  position: fixed;
  top: var(--header-size);
  left: calc(-1 * var(--menu-width)); /* offscreen by default */
  width: var(--menu-width);
  background-color: var(--menu-bg);
  box-shadow: 1rem 0.2rem 1rem #0009;
  z-index: 9999;

  transition: left .4s linear;


  &.open {
    left: 0;

    & #menu-icon {
      opacity: var(--gap);
      left: calc(var(--menu-width) - var(--icon-size));
      transition-property: left, opacity;
      transition-delay: .1s, 0s;
      transition-timing-function: linear, ease-in-out;

      &:hover { /* boost specificiy */
        opacity: 1;
      }
    }
  }

  li {
    margin-top: var(--fill);
    border: var(--border) outset 1px;
    border-radius: var(--gap);
    color: var(--text);

    &:hover {
      color: var(--active);
    }

    &.target {
      border-style: inset;
      background-color: var(--selected)
    }

    a {
      display: inline-block;
      padding: var(--gap) 1.6rem;
      box-sizing: border-box;

      width: 100%;
      text-decoration: none;
      color: inherit;
      -webkit-user-select: none; /* Safari */
              user-select: none;

      &::before {
        counter-increment: menu;
        content: counter(menu) ". ";
      }
    }
  }
}


div#repo {
  padding: var(--gap) 0;
  border-top: 1px solid var(--mid);

  .feedback {
    text-decoration: underline;
  }
  img {
    height: var(--footer-height);
    width: var(--footer-height);
    margin: 0;
  }

  a {
    color: var(--text);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0;
    margin: var(--gap) 0;
    overflow-y: visible;

    &.repo {
      color: var(--white);
      background-color: var(--cta);
      margin-top: 1.6rem;
      padding: var(--gap) 0;
      border: 1px solid var(--ctabor);
      border-radius: var(--gap);
    }
  }
}

.temp {
  color: #888;
}

#validate + label::before {
  content: "Show solution"
}

#validate + label + div pre {
  display: none;
  background: #202;
}

#validate:checked + label::before {
  content: "Hide solution"
}

#validate:checked + label + div pre {
  display: block
}


/* DETAILS / DETAILS / DETAILS / DETAILS / DETAILS / DETAILS */

details {
  --nip: calc(var(--gap) * -1);
  --bg-color: var(--mid); /* default, if details has no class */
  border: 1px solid var(--bg-color);
  margin: 3.2rem 0 1.6rem;
  padding: var(--gap);
  background: var(--subdued), var(--bg-color);
  overflow: auto;

  &[open] {
    border-left-width: var(--fill);
    border-left-style: solid;
  }

  /* Don't number figures inside details, because they might
    be closed, which would upset the numbering system.
  */
  & figcaption::before {
    content: "";
    counter-increment: fig 0;
  }

  & summary {
    position: relative;
    font-size: 2rem;
    min-height: fit-content;
    font-weight: bold;
    padding: var(--gap);
    margin: var(--nip);
    background-color: var(--bg-color)!important;

    & h2 {
      display: inline;
      font-size: 1.5rem;
    }
  }

  & summary::after {
    display: inline-block;
    position: absolute;
    right: 0;
    width: 2.4rem;
    margin-right: var(--gap);
    filter: invert(var(--invert));

    & code:not([class]) { /* :not([class]) is for specificity */
      font-size: inherit;
    }
  }

  & p:first-of-type {
    margin-top: 2.4rem;
  }

  & p:last-of-type {
    margin-bottom: var(--gap);
  }
  & ul {
    box-sizing: border-box;
  }

  &.alert {
    --bg-color: var(--alert);

    & summary::after {
      content: url("svg/alert.svg");
    }
  }

  &.challenge {
    --bg-color: var(--challenge);

    & summary::after {
      content: url("svg/challenge.svg");
    }
  }

  &.sandbox {
    --bg-color: var(--sandbox);

    & summary::after {
      content: url("svg/sandbox.svg");
    }
  }

  &.solution {
    --bg-color: var(--solution);

    & summary::after {
      content: url("svg/solution.svg");
    }
  }

  &.hint {
    --bg-color: var(--solution);

    & summary::after {
      content: url("svg/hint.svg");
    }
  }

  &.env {
    --bg-color: var(--env);

    & summary::after {
      content: url("svg/env.svg");
    }
  }

  &.feedback {
    --bg-color: var(--feedback);

    & summary::after {
      content: url("svg/feedback.svg");
    }
  }

  &.note {
    --bg-color: var(--note);

    & summary::after {
      content: url("svg/note.svg");
    }
  }

  &.pivot {
    --bg-color: var(--pivot);

    & summary::after {
      content: url("svg/pivot.svg");
    }
  }

  &.question {
    --bg-color: var(--question);

    & summary::after {
      content: url("svg/question.svg");
    }
  }

  &.story {
    --bg-color: var(--story);

    & summary::after {
      content: url("svg/story.svg");
    }
  }

  &.tip {
    --bg-color: var(--tip);

    & summary::after {
      content: url("svg/tip.svg");
    }
  }

  &.tldr {
    --bg-color: var(--tldr);

    & summary::after {
      content: url("svg/tldr.svg");
    }
  }

  &.trouble {
    --bg-color: var(--trouble);

    & summary::after {
      content: url("svg/trouble.svg");
    }
  }

  &.warn {
    --bg-color: var(--warn);

    & summary::after {
      content: url("svg/warn.svg");
    }
  }

  /* Override prism for code inside a details element */
  :not(pre) > code[class*="language-"], pre[class*="language-"] {
    background: var(--codeblock);
  }

  pre.skip {
    background-color: var(--codeblock);
    color: var(--skip);

    & .skip {
      background-color: transparent;
    }
  }
}

/* PAGING // PAGING // PAGING // PAGING // PAGING // PAGING */

div.theme,
div.paging {
  position: absolute;
  display: flex;
  width: calc(var(--size) * 3.6);
  margin-left: var(--pad);
  margin-top: var(--pad);
  box-sizing:content-box;

  input {
    position: absolute;
    left: -999px
  }

  /* Default display with transparent border... */
  label {
    width: var(--size);
    height: var(--size);
    background-color: var(--radio-bg);
    padding: var(--pad);
    border: 1px solid transparent;

    img {
      opacity: var(--dim);
      filter: invert(var(--invert));
    }

    /* ...and transparent background for selected option */
    &:has(:checked) {
      background-color: transparent;
    }

    /* Hide unselected options unless :hover */
    &:not(:has(:checked)) {
      cursor: pointer;
      display: none;
    }
  }

  &:hover {
    label {
      /* Show all options */
      display: block;
      border-color: var(--radio-bg);

      /* Round the ends of the display */
      &:first-child {
        border-top-left-radius: var(--size);
        border-bottom-left-radius: var(--size);
      }
      &:last-child {
        border-top-right-radius: var(--size);
        border-bottom-right-radius: var(--size);
      }

      /* Highlight selected option */
      &:has(:checked) {
        border-color: var(--radio-bg);
        img {
          opacity: 1;
        }
      }

      /* Show rollover on unselected options */
      &:not(:has(:checked)) {
        box-shadow: inset 0px 0px 3px var(--shadow);

        &:hover {
          border-color: var(--radiover);
          background-color: var(--radiover);
        }
      }
    }
  }
}

div.paging {
  margin-left: 95px;
}

.skip {
  margin: calc(-1 * var(--gap)) 0;
  text-align: center;
  background-color: var(--skipping);
  font-size: 1.6rem;

  & * {
    color: var(--skip)
  }
}

.no-margin * {
  margin: 1em 0;
}

iframe {
  margin: 3.2rem auto;
  display: block;
  border: none;
  max-width: 100%!important
}