body[layout='layout-home'] .markdown-body .call-to-action:nth-of-type(2) {
  background: linear-gradient(to right, #555, #222);
}

body[layout='layout-home'] .markdown-body .call-to-action:nth-of-type(2):hover {
  background: #000;
}

.markdown-body img {
  width: 100%;
}

.markdown-body a {
  text-decoration: underline;
}

.markdown-body .page-title {
  margin-top: 64px;
}

#main-header a {
  font-weight: normal;
}

#main-header a.active {
  font-weight: bold;
}

#main-header .active {
  display: block;
}

#main-header a[href='/blog/'] {
  display: none;
}

@media screen and (min-width: 1024px) {
  #main-header a[href='/blog/'] {
    display: block;
  }
}

mdjs-preview {
  margin-bottom: 20px;
}

mdjs-preview::part(iframe) {
  border-color: var(--primary-lines-color);
}

/* === Side nav === */
rocket-navigation ul {
  padding-top: 4px;
  padding-bottom: 4px;
}

rocket-navigation > ul > li > ul {
  padding-left: 0;
}

rocket-navigation ul > li:last-of-type {
  padding-bottom: 0;
}

rocket-navigation > ul > li > a {
  font-weight: normal;
}

rocket-navigation > ul > li > a.active {
  font-weight: bold;
}

rocket-navigation > ul > li > ul > li a {
  padding-left: 13px;
}

rocket-navigation li.active:not(.anchor) > a {
  font-weight: bold;
}

rocket-navigation ul > li > a {
  display: inline-block;
}

rocket-navigation ul > li > ul > li a {
  border-left: 2px solid transparent;
}

rocket-navigation ul > li.active > ul > li.current a {
  border-left-color: var(--primary-color);
}

rocket-navigation ul > li.active > ul > li.current > ul {
  display: none;
}

/* only apply on components list (li > 6) */
rocket-navigation > ul > li:nth-last-child(n + 6) > a,
rocket-navigation > ul > li:nth-child(n + 6) > a {
  font-size: 16px;
  text-transform: none;
  color: var(--primary-text-color);
}

rocket-navigation > ul > li:nth-last-child(n + 6) > a:hover,
rocket-navigation > ul > li:nth-child(n + 6) > a:hover {
  color: var(--primary-color);
}

rocket-navigation > ul > li:nth-last-child(n + 6) > ul,
rocket-navigation ul > li:nth-child(n + 6) > ul {
  display: none;
}

rocket-navigation > ul > li:nth-last-child(n + 6).active > ul,
rocket-navigation ul > li:nth-child(n + 6).active > ul {
  display: block;
}

.markdown-body mdjs-preview > [slot='story'],
.markdown-body mdjs-preview > [slot='story'] :where(img, button, p, h1, h2, h3, h4, h5, h6) {
  all: initial;
}

.markdown-body mdjs-preview > [slot='story'] {
  /** keep user-agent behaviors for browser elements */
  display: revert;
  /** relevant inherited props (like font styles) should be kept */
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}