/* stylelint-disable */

body {
  font-family: sans-serif;
  color: #0c0c0d;
}

.sidebar {
  background-color: #f9f9fa;
}

/* The general sidebar link color. */
.sidebar ul li a {
  color: #0c0c0d;
}

/**
 * Add an underline to the current selected article by adding another pseudo-element. The
 * border property is not enough, as there is margin on the list elements.
 */
.sidebar ul li::before {
  /* This removes the "-" for the titles coming from the page inserted in the
   * sidebar. Indeed they go in the way of the underline below and aren't
   * especially nice either.
   */
  content: "";
}

/* Note that ::before is important here. Indeed we need to position the element
 * using margin-top, which gives the position relatively to the top of the
 * element. Note that the position context isn't the <li> but the full sidebar,
 * so that it extends towards the left of the sidebar.*/
.sidebar ul li.active::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: #0a84ff;
  z-index: 0;
  margin-top: 30px;
}

/* The active sidebar link. */
.sidebar ul li.active > a {
  border-right: none;
  border-bottom: 2px;
  font-weight: normal;
  color: #003eaa;
}

/* The first level of links in the sidebar. */
.sidebar-nav > ul > li > a {
  margin-top: 25px;
  font-size: 18px;
  font-weight: bold !important; /* Override the .active class */
}

/* Modify the profiler.firefox.com title in the sidebar. */
.sidebar > h1 {
  margin-left: 15px;
  margin-bottom: 30px;
  text-align: left;
  font-weight: bold;
}

.sidebar > h1 a {
  color: #0c0c0d;
}

/* Add the favicon image. */
.sidebar > h1::before {
  content: "";
  position: relative;
  top: 7px;
  width: 30px;
  height: 30px;
  display: inline-block;
  margin-right: 12px;
  background-image: url(../images/favicon.svg);
  background-position: 0;
  background-size: 100%;
}

/* Make it so that YouTube videos are responsive and full width. */
.youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.66%;
}

.youtube iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Makes it easier to read on big screens */
.markdown-section {
  max-width: 800px;
}

/* The markdown tables felt a little too tight. */
.markdown-section td,
.markdown-section th {
  padding: 8px 15px;
  line-height: 1.3;
}

/* Make the inline code blocks the same style as GitHub */
.markdown-section code,
.markdown-section pre {
  color: #0c0c0d;
  border-radius: 3px;
}

/* Code blocks in headers are sized weird. Use em rather than rem to make the sizing
 * relative to the context. */
.markdown-section code {
  /* Override: font-size: 0.8rem; */
  font-size: 0.8em;
}

/**
 * The emphasis fails accessibility guidelines.
 */
.markdown-section em {
  /* Use the same color as the surrounding text. */
  color: rgb(44, 62, 80);
  font-weight: bold;
}

@media screen and (max-width:768px) {
  /* Make the sidebar toggle not block the text, and be at the top of the screen */
  .sidebar-toggle {
    top: 0;
    bottom: auto;
    padding: 17px;
    background-color: rgba(255, 255, 255, 0.8);
  }

  body.close .sidebar-toggle {
    padding: 17px;
    background-color: transparent;
  }

  /* The search bar needs to accomodate the sidebar toggle */
  .search > .input-wrap {
    margin-left: 40px;
  }

  .app-nav li {
    margin: 0 0.25rem;
  }

  .app-nav a {
    font-size: 12px;
  }
}