pre {
  font-size: 100% !important;
}
code {
  font-size: 90% !important;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 1rem 0;
  width: 100%;
}
ul li {
  margin-left: 1rem;
}

.top-100px {
  top: 100px;
}

/* No preference or prefers light */
:root:not([data-prefers-color-scheme='dark']),
html[data-prefers-color-scheme='light'] {
  --color-bg-canvas: rgb(255, 255, 255);
  --color-bg-canvas-shadow: rgba(255, 255, 255, 0);
  --color-bg-canvas-tertiary: #f6f8fa;
  --color-text-primary: #24292e;
  --color-markdown-code-bg: rgba(27, 31, 35, 0.05);
  --color-accent-fg: #0969da;
}
/* Prefers dark */
html[data-prefers-color-scheme='dark'] {
  --color-bg-canvas: rgb(13, 17, 23);
  --color-bg-canvas-shadow: rgba(13, 17, 23, 0);
  --color-bg-canvas-tertiary: #161b22;
  --color-text-primary: #c9d1d9;
  --color-markdown-code-bg: rgba(240, 246, 252, 0.05);
  --color-accent-fg: #58a6ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-prefers-color-scheme='light']) {
    --color-bg-canvas: rgb(13, 17, 23);
    --color-bg-canvas-shadow: rgba(13, 17, 23, 0);
    --color-bg-canvas-tertiary: #161b22;
    --color-text-primary: #c9d1d9;
    --color-markdown-code-bg: rgba(240, 246, 252, 0.05);
    --color-accent-fg: #58a6ff;
  }
}

body {
  background-color: var(--color-bg-canvas);
  color: var(--color-text-primary);
}

a {
  color: var(--color-accent-fg);
}

.min-height-full {
  min-height: 100vh
}

.main-header {
  height: 5rem;
  z-index: 1;
  background-image: linear-gradient(to top, var(--color-bg-canvas-shadow), var(--color-bg-canvas) 25%);
}

:root {
  --logo-width: 18rem;
}

.logo {
  min-width: var(--logo-width);
}

.sidebar {
  height: calc(100vh - 5rem);
  top: 5rem;
  min-width: var(--logo-width);
}

@media only screen and (max-width : 768px) {
  .main-header {
    height: auto;
    background: none;
  }

  .sidebar {
    height: auto;
  }

  .logo.bg-gray {
    background-color: inherit !important;
    min-width: 9rem;
  }
}


/* Sidebar */
/* NB: `!important` is already used; so it’s required here */
.bg-gray {
  background-color: var(--color-bg-canvas-tertiary) !important;
}

/* Code Blocks & Syntax */
.markdown-body .highlight pre,
.markdown-body pre {
  background-color: var(--color-bg-canvas-tertiary);
  overflow: auto;
}

/* Inline Code */
.markdown-body code,
.markdown-body tt {
  background-color: var(--color-markdown-code-bg);
}

/* Tables */
.markdown-body table tr:nth-of-type(odd) th,
.markdown-body table tr:nth-of-type(odd) td {
  background-color: var(--color-bg-canvas);
}
.markdown-body table tr:nth-of-type(even) th,
.markdown-body table tr:nth-of-type(even) td {
  background-color: var(--color-bg-canvas-tertiary);
}

/* Override Primer .tooltipped default aria-label */
.code-tooltip:after {
  content: attr(data-title);
  text-align: left;
  font-size: 100%;
}
/* :after text will be announced by AT, this adds a separation between textContent and :after text */
.code-tooltip:before {
  content: ': ';
  font-size: 0;
}
.code-tooltip {
  scroll-margin-top: 150px;
}


/* Prev and next links */
.prev-next-links {
  display: flex;
  gap: 16px;
}

.prev-next-links__button {
  border: solid 1px;
  padding: 16px;
  border-radius: 4px;
  flex: 1;
}