:root {
  /*
    ------------------------
    Design tokens
    ------------------------
  */
  --yellow: hsl(38, 72%, 66%);
  --yellow-lightest: hsl(38deg 72% 86%);
  --yellow-lighter: hsl(38deg 72% 76%);
  --yellow-light: hsl(38deg 73% 73%);
  --yellow-dark: hsl(38deg 72% 59%);
  --yellow-darker: hsl(38deg 72% 59%);
  --yellow-darkest: hsl(38deg 72% 46%);

  --green: hsl(85deg 55% 54%);
  --green-lightest: hsl(85deg 55% 90%);
  --green-lighter: hsl(85deg 55% 62%);
  --green-light: hsl(85deg 55% 59%);
  --green-dark: hsl(85deg 55% 49%);
  --green-darker: hsl(85deg 55% 46%);
  --green-darkest: hsl(85deg 55% 38%);

  --forest: hsl(144deg 61% 20%);

  --blue: hsl(184, 49%, 76%);
  --blue-lightest: hsl(200deg 60% 99%);
  --blue-lighter: hsl(184deg 50% 87%);
  --blue-light: hsl(184deg 49% 84%);
  --blue-dark: hsl(184deg 49% 68%);
  --blue-darker: hsl(184deg 49% 65%);
  --blue-darkest: hsl(184deg 49% 53%);

  --red: hsl(14, 70%, 44%);
  --red-lightest: hsl(15deg 62% 94%);
  --red-lighter: hsl(14deg 70% 51%);
  --red-light: hsl(14deg 70% 48%);
  --red-dark: hsl(14deg 69% 40%);
  --red-darker: hsl(14deg 70% 37%);
  --red-darkest: hsl(14deg 70% 31%);

  --teal: hsl(175deg 84% 32%);
  --teal-dark: hsl(175deg 84% 28%);

  --black: hsl(0deg 0% 9%);

  /*
    ------------------------
    Docusaurus overrides
    ------------------------
  */
  --ifm-color-primary: var(--red);

  /*
    Increase the space between the sidebar and the main content.
  */
  --ifm-spacing-horizontal: 2rem;

  /*
    Links.
  */
  --ifm-link-color: var(--teal-dark);

  /*
    Stop the navbar title from changing color on hover.
  */
  --ifm-navbar-link-hover-color: inherit;

  /*
    When hovering "Previous" or "Next", match the link color.
  */
  --ifm-pagination-nav-color-hover: var(--teal-dark);

  /*
    Remove the left border on blockquotes.
  */
  --ifm-blockquote-border-left-width: 0px;
}

/*
  ------------------------
  Dark mode
  ------------------------

  So far just lighten links a little for a11y.
*/
[data-theme='dark'] {
  --ifm-link-color: var(--teal);
}

/*
  ------------------------
  Breadcrumbs
  ------------------------

  Correct the color on hover and increase the font weight.
*/
.theme-doc-breadcrumbs {
  --ifm-link-hover-color: var(--red);
  font-weight: var(--ifm-font-weight-semibold);
}

/*
  ------------------------
  Increase the font weight of links in the main content.
  ------------------------
*/
article a {
  font-weight: var(--ifm-font-weight-semibold);
}

/*
  ------------------------
  Decrease the size of the headers.
  ------------------------
*/
h1 {
  margin-top: 1.5rem;
  font-size: 2rem;
  line-height: 1.2;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

/*
  ------------------------
  Add some padding to the bottom of the sidebar
  ------------------------

  Without this, when you scroll all the way down,
  the content's too close to the bottom.
*/
.menu {
  padding-bottom: 2rem !important;
}

/*
  ------------------------
  Blockquotes
  ------------------------
*/
blockquote {
  background-color: var(--red-lightest);
  border-radius: 0.5rem;
  padding: 2rem;
}

[data-theme='light'] blockquote code {
  --ifm-code-background: hsl(14deg 70% 84%);
}

[data-theme='dark'] blockquote {
  background-color: hsl(210deg 3% 15%);
}

/*
  ------------------------
  Codeblock highlights
  ------------------------
*/
.docusaurus-highlight-code-line {
  display: block;
  background-color: hsl(196deg 79% 96% / 10%);
  margin: 0 calc(var(--ifm-pre-padding) * -1);
  padding: 0 var(--ifm-pre-padding);
}

[data-theme='dark'] .docusaurus-highlight-code-line {
  background-color: hsl(0deg 0% 0% / 30%);
}

/*
  ------------------------
  Images
  ------------------------
*/
.markdown img {
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: var(--ifm-global-radius);
}

/*
  ------------------------
  Video embeds
  ------------------------
*/
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  margin: 1rem 0;
}

.video-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

/*
  ------------------------
  For the GitHub logo in the navbar
  ------------------------
*/
.github-logo::before {
  content: '';
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

.github-logo:hover {
  opacity: 0.6;
}

[data-theme='dark'] .github-logo::before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

/*
  ------------------------
  For the generated index pages (e.g. docs/index)
  ------------------------
*/
.row .col--6 {
  padding: 0 0 0 2rem;
}

/*
  ------------------------
  Details
  ------------------------
*/
/* .alert {
  --ifm-alert-background-color: var(--green-lightest) !important;
  --ifm-alert-border-color: transparent !important;
  --docusaurus-details-decoration-color: var(--black) !important;
}

[data-theme="dark"] .alert {
  --ifm-alert-background-color: hsl(210deg 3% 15%) !important;
  --docusaurus-details-decoration-color: hsl(210deg 11% 96%) !important;
} */

/*
  ------------------------
  Hide dark mode things on light mode and vice versa.
  ------------------------
*/
[data-theme='light'] [data-mode='dark'] {
  display: none;
}

[data-theme='dark'] [data-mode='light'] {
  display: none;
}

/*
  ------------------------
  Get rid of the "Back to main menu" button on mobile
  ------------------------
*/
.navbar-sidebar__back {
  display: none !important;
}

/*
  ------------------------
  Fix code tab text alignment
  ------------------------
*/
.tabs__item li + li {
  margin-top: 0;
}
