/* Site-wide basics, loaded before every other stylesheet (src/_includes/head.html). */

body { margin: 0; }

/* Keep room for the scrollbar on every page, including pages too short to scroll and pages that are
   still loading, so the top bar and the page don't shift sideways when you move between pages. */
html { scrollbar-gutter: stable; }

/* A slim, rounded scrollbar in the site's slate tones, with no arrow buttons. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #f1f4f8; }
::-webkit-scrollbar-thumb {
  background: #c3ccd8;
  border: 3px solid #f1f4f8;
  border-radius: 999px;
  min-height: 40px;
}
::-webkit-scrollbar-thumb:hover { background: #9aa7b8; }
::-webkit-scrollbar-thumb:active { background: #7d8b9e; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: #f1f4f8; }

/* Firefox has no ::-webkit-scrollbar; it gets the same colors. Chrome skips this block, because the
   standard properties would replace the rounded thumb above. */
@supports (-moz-appearance: none) {
  html { scrollbar-color: #c3ccd8 #f1f4f8; }
}