@layer page {
  :root {
    /* Colors */
    --_color-primary: var(--color-purple); /* links */
    --_color-secondary: var(
      --color-pure-red
    ); /* headings, hovered links, focus outline, halo  */

    --_header-color-primary: var(--color-light-grey);
    --_header-color-secondary: var(--_color-secondary);
  }

  .about__list-item {
    margin-bottom: var(--spacing-3);
  }

  .credits__tables {
    overflow: auto;
    scrollbar-width: thin;
  }

  /* the About me heading has a larger scroll-margin-top so the page's main heading is apparent  */
  #aboutme {
    scroll-margin-top: var(--content-margin-top);
  }

  .code > span:nth-child(1) {
    color: var(--color-green);
    display: inherit;
  }

  .code > span:nth-child(4) {
    color: var(--color-green);
  }

  .code > span:nth-child(2) {
    color: var(--color-fuschia);
  }

  .code > span:nth-child(3) {
    color: var(--color-blue);
  }

  .code > span:nth-child(5) {
    color: var(--color-blue);
  }
}