.breadcrumbs {
  text-transform: uppercase;
  background: #F1F3F4;
  padding: 10px 20px;
  font-weight: bold;
  font-size: 14px; }
  .breadcrumbs i {
    margin: 0 10px; }
  .breadcrumbs a {
    text-decoration: none;
    color: inherit; }
    .breadcrumbs a:hover {
      color: #02b046; }

.pagination {
  margin-top: 20px;
  display: flex; }
  .pagination > * + * {
    margin-left: 5px; }
  @media (max-width: 800px) {
    .pagination {
      justify-content: space-between;
      margin-top: 10px; } }
  .pagination .first,
  .pagination .next,
  .pagination .prev,
  .pagination .last,
  .pagination .page {
    border: 1px solid rgba(0, 0, 0, 0.05);
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    background: #FFF;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    height: 40px;
    color: #666; }
    .pagination .first a,
    .pagination .next a,
    .pagination .prev a,
    .pagination .last a,
    .pagination .page a {
      text-transform: uppercase;
      justify-content: center;
      text-decoration: none;
      align-self: stretch;
      align-items: center;
      color: currentColor;
      display: flex;
      flex: 1; }
  .pagination .page {
    width: 40px; }
    .pagination .page.current {
      border-color: transparent;
      background: #02b046;
      color: #FFF; }
    @media (max-width: 800px) {
      .pagination .page {
        display: none; } }
  @media (max-width: 800px) {
    .pagination .first,
    .pagination .next,
    .pagination .prev,
    .pagination .last {
      flex: 1; } }
  .pagination .first a,
  .pagination .next a,
  .pagination .prev a,
  .pagination .last a {
    padding: 0 20px; }
    @media (max-width: 800px) {
      .pagination .first a,
      .pagination .next a,
      .pagination .prev a,
      .pagination .last a {
        font-size: 12px;
        padding: 10px;
        height: auto; } }
.packages {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 13px 13px;
  display: grid; }

.package {
  background: #F6f6f6;
  border-radius: 3px;
  flex-direction: column;
  display: inline-flex; }
  .package__row {
    padding: 15px;
    display: flex;
    flex: 1; }
    .package__row__left {
      flex: 1; }
  .package__summary {
    font-size: 14px;
    opacity: 0.75; }
  .package img {
    border-radius: 2px;
    margin-right: 5px;
    height: 20px;
    width: 20px; }
  .package__name {
    margin-bottom: 3px;
    font-weight: 600;
    font-size: 18px; }
    .package__name a {
      text-decoration: none;
      color: #02b046; }
  .package__latest_version {
    color: rgba(255, 255, 255, 0.5);
    font-weight: normal;
    font-size: 14px;
    display: inline; }
  .package__pushed_at {
    margin-right: 10px;
    margin-left: 10px; }
    .package__pushed_at span {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; }
  .package__stars {
    flex: 0 0 auto; }
  .package__stars, .package__pushed_at {
    align-items: center;
    display: flex; }
    .package__stars svg, .package__pushed_at svg {
      fill: currentColor;
      margin-right: 5px;
      flex: 0 0 auto; }
  .package__infos {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    white-space: nowrap;
    align-items: center;
    font-size: 14px;
    display: flex; }
    .package__infos a {
      text-decoration: none;
      margin-right: auto;
      color: inherit;
      display: flex;
      flex: 0 0 auto; }

.version {
  grid-template-columns: 300px 1fr;
  display: grid; }

.sidebar a {
  text-decoration: none;
  color: #333;
  align-items: center;
  font-weight: 600;
  display: flex;
  height: 20px;
  margin: 7px 0; }
  .sidebar a .type-badge {
    flex: 0 0 auto; }
  .sidebar a span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; }
  .sidebar a.active, .sidebar a:hover {
    color: #02b046; }

.install__grid {
  column-count: 2;
  column-gap: 40px; }
  @media (max-width: 1200px) {
    .install__grid {
      column-count: 1; } }
.install__section--with-margin {
  margin-top: 40px; }

.install__instructions a {
  text-decoration: none;
  color: #02b046; }

.install__title {
  border-bottom: 1px dashed #CCC;
  padding-bottom: 10px;
  margin-bottom: 10px;
  align-items: center;
  display: flex;
  font-weight: 600;
  font-size: 24px; }
  .install__title svg {
    margin-right: 10px;
    height: 24px;
    width: 24px; }

.install__snippet {
  font-family: Source Code Pro;
  line-height: 1.5;
  font-size: 14px;
  background: #252d3c;
  border-radius: 5px;
  padding: 15px; }

.nav {
  border-bottom: 1px solid #E9E9E9;
  background: #FFF;
  color: #333;
  overflow: hidden;
  width: 100%; }
  .nav__wrapper {
    align-items: center;
    display: flex;
    max-width: 1620px;
    min-height: 80px;
    padding: 15px 60px;
    margin: 0 auto; }
    @media (max-width: 1200px) {
      .nav__wrapper {
        padding: 15px 40px; } }
    @media (max-width: 960px) {
      .nav__wrapper {
        padding: 15px 20px; } }
  .nav__mobile-menu-toggle {
    align-items: center;
    display: flex;
    text-transform: uppercase;
    font-weight: bold;
    color: inherit;
    cursor: pointer; }
    .nav__mobile-menu-toggle svg {
      fill: currentColor;
      margin-left: 10px; }
    @media (min-width: 1101px) {
      .nav__mobile-menu-toggle {
        display: none; } }
  .nav__brand {
    margin-right: auto;
    font-size: 24px;
    flex: 0 0 auto; }
  .nav__item + .nav__item {
    margin-left: 35px; }
  .nav__item {
    line-height: 52px;
    height: 50px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    font-weight: bold;
    color: inherit;
    align-items: center;
    display: flex; }
    .nav__item svg {
      margin-right: 10px;
      position: relative;
      top: 1px; }
    .nav__item.active {
      color: #02b046; }
    .nav__item svg {
      fill: currentColor; }
    @media (max-width: 1100px) {
      .nav__item {
        display: none; } }
.mobile-menu {
  background: white;
  justify-content: center;
  align-items: center;
  display: none;
  padding: calc((100vh - 400px) / 2) 0;
  position: fixed;
  z-index: 1000;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0; }
  .mobile-menu--open {
    display: grid; }
  .mobile-menu__close {
    position: absolute;
    right: 20px;
    top: 20px; }
  .mobile-menu__item + .mobile-menu__item {
    margin-top: 20px; }
  .mobile-menu__item {
    max-width: 200px;
    width: 100%;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    color: inherit;
    align-items: center;
    display: flex; }
    .mobile-menu__item svg {
      margin-right: 10px;
      height: 30px;
      width: 30px; }
  @media (max-width: 1200px) and (orientation: landscape) {
    .mobile-menu {
      grid-template-columns: 1fr 1fr;
      align-content: center;
      padding: 0 20vw; } }
.landing-section {
  --border-color: rgba(0,0,0,0.3);
  --gradient-color-end: #FFFFFF00;
  --gradient-color: #FFF;
  --bold-color: #333;
  --color: #666;
  background: var(--background-color);
  position: relative;
  min-height: 85vh;
  padding: 100px 60px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 800px) min-content;
  justify-content: center;
  align-items: center;
  grid-gap: 100px;
  display: grid; }
  .landing-section h3 {
    font-family: 'M PLUS Rounded 1c';
    color: var(--bold-color);
    font-size: 36px;
    margin: 0; }
  .landing-section hr {
    margin: 25px 0;
    border: 0;
    border-bottom: 1px dashed var(--border-color); }
  .landing-section p, .landing-section ul {
    color: var(--color);
    line-height: 1.6;
    font-size: 18px; }
    .landing-section p svg, .landing-section ul svg {
      fill: currentColor; }
  .landing-section b {
    color: var(--bold-color); }
  .landing-section li + li {
    margin-top: 12px; }
  .landing-section > * {
    direction: ltr; }
  .landing-section > svg {
    fill: var(--background-color);
    position: absolute; }
    .landing-section > svg:first-of-type {
      transform: translateY(calc(-100% + 2px));
      top: 0; }
    .landing-section > svg:last-of-type {
      transform: translateY(calc(100% - 2px)) rotate(180deg);
      bottom: 0; }
  .landing-section__content {
    background: radial-gradient(closest-side, var(--gradient-color) 65%, var(--gradient-color-end));
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.1); }
    .landing-section__content .btn {
      margin-top: 10px; }
    .landing-section__content code {
      background: #282c34;
      border-radius: 2px;
      font-weight: 400;
      padding: 3px 6px;
      color: #EEE; }
  .landing-section--inverse {
    direction: rtl; }
  .landing-section--green {
    --border-color: rgba(255, 255, 255,0.3);
    --color: rgba(255, 255, 255, 0.9);
    --gradient-color: var(--gradient-color-end);
    --background-color: #459f56;
    --bold-color: #FFF; }
  .landing-section--purple {
    --border-color: rgba(255, 255, 255,0.3);
    --color: rgba(255, 255, 255, 0.9);
    --gradient-color: var(--gradient-color-end);
    --background-color: #9e2cbf;
    --bold-color: #FFF; }
  .landing-section--orange {
    --border-color: rgba(255, 255, 255,0.3);
    --color: rgba(255, 255, 255, 0.9);
    --gradient-color: var(--gradient-color-end);
    --background-color: #db6a41;
    --bold-color: #FFF; }
  @media (max-width: 1200px) {
    .landing-section {
      padding: 80px 40px;
      grid-gap: 50px; } }
  @media (max-width: 960px) {
    .landing-section {
      grid-template-columns: 1fr;
      grid-gap: 30px;
      padding: 60px 20px;
      direction: rtl; }
      .landing-section .btn {
        width: 100%; }
      .landing-section hr {
        margin: 10px 0; }
      .landing-section h3 {
        font-size: 24px; }
      .landing-section p, .landing-section ul {
        font-size: 14px; } }
.landing-snippet {
  box-shadow: 0 5px 20px -5px rgba(0, 0, 0, 0.7);
  width: 600px;
  margin: 0;
  font-family: Source Code Pro;
  font-size: 16px;
  color: white; }
  .landing-snippet code {
    border-radius: 5px;
    padding: 30px; }
  @media (max-width: 1200px) {
    .landing-snippet {
      font-size: 14px;
      width: 420px; }
      .landing-snippet code {
        padding: 20px; } }
  @media (max-width: 960px) {
    .landing-snippet {
      width: 100%; } }
.landing-hero {
  padding: 40px 60px;
  grid-template-columns: minmax(200px, 860px) min-content;
  grid-gap: 2vw;
  justify-content: center;
  align-items: center;
  display: grid;
  flex: 1;
  min-height: calc(100vh - 80px);
  position: relative; }
  .landing-hero__left, .landing-hero__right {
    position: relative;
    z-index: 1; }
  .landing-hero__left {
    background: radial-gradient(closest-side, white, rgba(255, 255, 255, 0));
    padding: 50px;
    left: -50px;
    top: -50px; }
  .landing-hero h1 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    line-height: 1.3;
    font-weight: 700;
    font-size: 36px;
    margin: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 600px; }
  .landing-hero h2 {
    font-weight: normal;
    font-size: 18px;
    margin: 0;
    margin-bottom: 40px;
    max-width: 600px; }
  @media (max-width: 1350px) {
    .landing-hero h1 {
      font-size: 30px; } }
  @media (max-width: 1200px) {
    .landing-hero {
      padding: 40px; }
      .landing-hero h1 {
        font-size: 32px; }
      .landing-hero h2 {
        font-size: 16px; }
      .landing-hero__left {
        top: -30px; } }
  @media (max-width: 960px) {
    .landing-hero {
      grid-template-columns: 1fr;
      grid-gap: 50px;
      padding: 20px;
      padding-bottom: 60px; }
      .landing-hero h1 {
        font-size: 28px; }
      .landing-hero__left {
        padding: 0;
        padding-top: 20px;
        left: 0;
        top: 0; } }
.landing-cta {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  display: flex;
  height: 60vh; }
  @media (max-width: 960px) {
    .landing-cta {
      padding: 60px 20px;
      display: block;
      height: auto; } }
  .landing-cta .btn-group {
    margin: 0 auto; }
  .landing-cta h3 {
    font-family: 'M PLUS Rounded 1c';
    font-size: 40px;
    text-align: center;
    margin: 0; }
    @media (max-width: 960px) {
      .landing-cta h3 {
        font-size: 34px; } }
  .landing-cta p {
    text-align: center;
    font-size: 24px;
    color: #666;
    margin: 0;
    margin-top: 10px;
    margin-bottom: 50px; }
    @media (max-width: 960px) {
      .landing-cta p {
        margin-bottom: 30px;
        font-size: 20px; } }
.guide .guide-content, .version__docs {
  line-height: 1.75;
  font-size: 18px;
  color: #444; }
  .guide .guide-content > *:first-child, .version__docs > *:first-child {
    margin-top: 0; }
  .guide .guide-content > *:last-child, .version__docs > *:last-child {
    margin-bottom: 0; }
  @media (max-width: 1200px) {
    .guide .guide-content, .version__docs {
      font-size: 16px; } }
  .guide .guide-content img, .version__docs img {
    max-width: 100%; }
  .guide .guide-content h1, .version__docs h1, .guide .guide-content h2, .version__docs h2, .guide .guide-content h3, .version__docs h3, .guide .guide-content h4, .version__docs h4, .guide .guide-content h5, .version__docs h5 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 700;
    line-height: 1.5;
    color: #333;
    margin: 0;
    margin-bottom: 20px; }
  .guide .guide-content h1, .version__docs h1 {
    border-bottom: 4px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 0.3em;
    font-size: 2em; }
    .guide .guide-content h1 small, .version__docs h1 small {
      font-weight: 500;
      font-size: 14px;
      display: block;
      color: #999; }
    @media (max-width: 1200px) {
      .guide .guide-content h1, .version__docs h1 {
        font-size: 1.7em; } }
  .guide .guide-content h2, .version__docs h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 0.3em;
    margin-top: 2em;
    font-size: 1.5em; }
    @media (max-width: 1200px) {
      .guide .guide-content h2, .version__docs h2 {
        font-size: 1.3em; } }
  .guide .guide-content h3, .version__docs h3 {
    margin-top: 1.5em;
    font-size: 1.25em; }
  .guide .guide-content li > ul, .version__docs li > ul {
    margin-top: 0;
    margin-bottom: 0; }
  .guide .guide-content li > pre, .version__docs li > pre,
  .guide .guide-content li + li,
  .version__docs li + li,
  .guide .guide-content li > ul,
  .version__docs li > ul {
    margin-top: 7px; }
  .guide .guide-content ul, .version__docs ul {
    padding-left: 30px; }
  .guide .guide-content code:not(.hljs), .version__docs code:not(.hljs) {
    white-space: pre;
    background: #EEE;
    padding: 3px 6px;
    border-radius: 2px; }
  .guide .guide-content code, .version__docs code {
    font-family: Source Code Pro; }
  .guide .guide-content pre, .version__docs pre {
    background: #252d3c;
    border-radius: 5px;
    line-height: 1.5;
    font-size: 16px;
    padding: 10px; }
    .guide .guide-content pre code:not(.hljs), .version__docs pre code:not(.hljs) {
      background: transparent;
      color: transparent; }
  .guide .guide-content b, .version__docs b, .guide .guide-content strong, .version__docs strong {
    color: #333; }
  .guide .guide-content p, .version__docs p, .guide .guide-content ul, .version__docs ul, .guide .guide-content ol, .version__docs ol, .guide .guide-content pre, .version__docs pre, .guide .guide-content blockqoute, .version__docs blockqoute {
    margin: 0;
    margin-bottom: 15px; }
  .guide .guide-content a, .version__docs a {
    text-decoration: none;
    color: #02b046; }
  .guide .guide-content p.hint, .version__docs p.hint {
    grid-template-columns: min-content 1fr;
    grid-gap: 10px;
    display: grid;
    background: #EEE;
    padding: 20px; }
    .guide .guide-content p.hint svg, .version__docs p.hint svg {
      align-self: center;
      margin-right: 10px;
      height: 24px;
      width: 24px; }
    .guide .guide-content p.hint code:not(.hljs), .version__docs p.hint code:not(.hljs) {
      background: #DDD; }
    @media (max-width: 1200px) {
      .guide .guide-content p.hint, .version__docs p.hint {
        grid-template-columns: 1fr; }
        .guide .guide-content p.hint svg, .version__docs p.hint svg {
          display: none; } }
    .guide .guide-content p.hint--warning, .version__docs p.hint--warning {
      border-left: 4px solid orangered; }
      .guide .guide-content p.hint--warning svg, .version__docs p.hint--warning svg {
        fill: orangered; }
    .guide .guide-content p.hint--info, .version__docs p.hint--info {
      border-left: 4px solid #3884ff; }
      .guide .guide-content p.hint--info svg, .version__docs p.hint--info svg {
        fill: #3884ff; }
  .guide .guide-content table, .version__docs table {
    border-collapse: collapse;
    width: 100%; }
    .guide .guide-content table th, .version__docs table th, .guide .guide-content table td, .version__docs table td {
      text-align: left;
      padding: 8px; }
    .guide .guide-content table tr + tr td, .version__docs table tr + tr td {
      border-top: 1px solid #EEE; }
    .guide .guide-content table thead th, .version__docs table thead th {
      border-bottom: 2px solid #e6ecf1;
      font-weight: bold;
      color: #999; }
  .guide .guide-content blockqoute, .version__docs blockqoute {
    border-left: 4px solid #EEE;
    display: block;
    padding: 20px;
    color: #666; }
  .guide .guide-content hr, .version__docs hr {
    margin: 30px 0;
    border: 0;
    border-top: 3px double #EEE; }

.footer {
  background: url(/assets/interlaced-ddab471c1dd62f0b15c032f6a0580f40f58a760d5df1808c7522a27c8ab92b62.png);
  border-top: 1px solid #EEE;
  padding: 60px; }
  @media (max-width: 800px) {
    .footer {
      padding: 30px; } }
  .footer a {
    color: inherit; }
  .footer__content {
    max-width: 1620px;
    margin: 0 auto;
    grid-template-columns: 1fr minmax(600px, 1fr);
    grid-gap: 100px;
    display: grid; }
    @media (max-width: 1100px) {
      .footer__content {
        grid-template-columns: 1fr;
        grid-gap: 60px; } }
  .footer__infos {
    align-self: center;
    font-size: 14px; }
    .footer__infos p {
      line-height: 1.75;
      margin: 20px 0;
      color: #444; }
    .footer__infos span {
      color: #777; }
  .footer__columns {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-gap: 40px;
    display: grid; }
  .footer__column {
    line-height: 1.7; }
    .footer__column strong {
      margin-bottom: 10px;
      display: block; }
    .footer__column a {
      text-decoration: none;
      align-items: center;
      display: flex; }
      .footer__column a svg {
        margin-right: 7px;
        height: 16px;
        width: 16px;
        fill: currentColor; }
      .footer__column a:hover {
        color: #02b046; }

.guide {
  grid-template-columns: minmax(330px, 1fr) 900px 1fr;
  padding-bottom: 100px;
  display: grid; }
  .guide--wide {
    grid-template-columns: minmax(400px, 1fr) 900px 1fr; }
  @media (max-width: 1330px) {
    .guide {
      grid-template-columns: 300px 1fr; } }
  @media (max-width: 1200px) {
    .guide {
      grid-template-columns: 1fr;
      padding-bottom: 0; } }
  .guide__nav {
    align-items: center;
    margin-top: 70px;
    display: flex; }
    .guide__nav > *:last-child {
      margin-left: auto; }
    @media (max-width: 710px) {
      .guide__nav {
        margin-top: 40px;
        grid-gap: 10px;
        display: grid; }
        .guide__nav > *:last-child {
          margin-left: 0; } }
  .guide .guide-content a.guide__nav__button {
    box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
    border: 1px solid #EEE;
    border-radius: 6px;
    max-width: 350px;
    min-width: 250px;
    padding: 20px;
    text-decoration: none;
    font-weight: 600;
    color: #333;
    justify-content: space-between;
    align-items: center;
    display: flex; }
    @media (max-width: 710px) {
      .guide .guide-content a.guide__nav__button {
        max-width: initial; } }
    .guide .guide-content a.guide__nav__button > * + * {
      margin-left: 40px; }
    .guide .guide-content a.guide__nav__button svg {
      fill: #999; }
    .guide .guide-content a.guide__nav__button:hover {
      border-color: #02b046;
      color: #02b046; }
      .guide .guide-content a.guide__nav__button:hover svg {
        fill: #02b046; }
    .guide .guide-content a.guide__nav__button label {
      display: block;
      font-size: 12px;
      color: #999; }

.page {
  padding: 40px 60px;
  max-width: 1620px;
  margin: 0 auto; }
  .page__errors {
    background: #ffbaba;
    border-radius: 6px;
    color: #821e1e;
    padding: 10px 20px;
    margin-bottom: 30px; }
  .page__header {
    margin-bottom: 40px;
    align-items: center;
    display: flex; }
    @media (max-width: 1200px) {
      .page__header {
        display: block; } }
    .page__header__actions {
      margin-left: auto; }
      @media (max-width: 1200px) {
        .page__header__actions {
          margin-top: 20px; } }
  .page__package {
    border-bottom: 2px dashed rgba(0, 0, 0, 0.1); }
    .page__package strong {
      font-weight: 600;
      font-size: 24px; }
    .page__package p {
      margin: 0;
      margin-bottom: 20px;
      font-size: 16px;
      color: #999; }
  .page--blog {
    max-width: 900px; }
  .page__title {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 36px;
    line-height: 1;
    margin: 0;
    margin-bottom: 15px; }
  .page__description {
    margin: 0;
    color: #666; }
  @media (max-width: 1200px) {
    .page {
      padding: 40px; } }
  @media (max-width: 960px) {
    .page {
      padding: 20px;
      padding-bottom: 40px; } }
.toc {
  transition: opacity 320ms;
  display: grid; }
  .toc__wrapper {
    border-right: 1px solid #EEE;
    transition: transform 320ms;
    box-sizing: border-box;
    padding-right: 50px;
    margin-right: 50px; }
  .toc__spacer {
    margin-top: 20px; }
  .toc__page {
    text-decoration: none;
    font-weight: 600;
    display: block;
    color: #333;
    margin-top: 5px;
    /* It's only used for the blog posts. */ }
    .toc__page.active, .toc__page:hover {
      color: #02b046; }
    .toc__page div {
      align-items: center;
      display: flex; }
    .toc__page svg {
      fill: currentColor;
      margin-right: 7px; }
    .toc__page small {
      margin-bottom: 15px;
      display: block;
      color: #AAA; }
  .toc__pages > .toc__pages {
    padding-left: 15px;
    margin-left: 5px;
    margin-top: 7px;
    border-left: 1px dashed #CCC; }
  .toc__section {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    color: #999;
    margin-bottom: 5px; }
    .toc__section:not(:first-child) {
      margin-top: 30px; }
  @media (max-width: 1200px) {
    .toc {
      background: rgba(20, 20, 20, 0.9);
      position: fixed;
      z-index: 500;
      bottom: 0;
      right: 0;
      left: 0;
      top: 0;
      pointer-events: none;
      opacity: 0; }
      .toc--open {
        pointer-events: auto;
        opacity: 1; }
      .toc--open .toc__wrapper {
        transform: translateX(0); }
      .toc__wrapper {
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
        overflow-y: auto;
        transform: translateX(-330px);
        background: white;
        padding: 20px;
        width: 280px;
        margin: 0; } }
.toc-mobile {
  -webkit-touch-callout: none;
  display: none;
  margin-bottom: 15px;
  padding: 10px 15px;
  border-radius: 3px;
  background: #EEE;
  cursor: pointer;
  font-weight: bold;
  justify-content: space-between;
  align-items: center; }
  @media (max-width: 1200px) {
    .toc-mobile {
      display: flex; } }
.type-badge {
  justify-content: center;
  display: inline-flex;
  align-items: center;
  margin-right: 7px;
  border-radius: 2px;
  font-weight: bold;
  font-size: 12px;
  height: 20px;
  width: 20px;
  color: #FFF; }
  .type-badge[data-type="property"] {
    background: #23aaaa; }
    .type-badge[data-type="property"]::before {
      content: "P"; }
  .type-badge[data-type="state"] {
    background: black; }
    .type-badge[data-type="state"]::before {
      content: "S"; }
  .type-badge[data-type="function"] {
    background: black; }
    .type-badge[data-type="function"]::before {
      content: "F"; }
  .type-badge[data-type="component"] {
    background: #369e58; }
    .type-badge[data-type="component"]::before {
      content: "C"; }
  .type-badge[data-type="provider"] {
    background: #ff7b00; }
    .type-badge[data-type="provider"]::before {
      content: "P"; }
  .type-badge[data-type="record"] {
    background: #673ab7; }
    .type-badge[data-type="record"]::before {
      content: "R"; }
  .type-badge[data-type="module"] {
    background: #be08d0; }
    .type-badge[data-type="module"]::before {
      content: "M"; }
  .type-badge[data-type="store"] {
    background: #d02e2e; }
    .type-badge[data-type="store"]::before {
      content: "S"; }
  .type-badge[data-type="enum"] {
    background: #00bbb5; }
    .type-badge[data-type="enum"]::before {
      content: "E"; }

.entity {
  padding: 10px 0; }
  .entity + a + .entity {
    border-top: 1px solid #EEE;
    padding-top: 30px;
    margin-top: 15px; }
  .entity__body {
    padding-top: 20px;
    margin-left: 20px; }
    .entity__body > *:first-child {
      margin-top: 0; }
    .entity__body > *:last-child {
      margin-bottom: 0; }
    .entity__body .hljs {
      max-width: 880px;
      font-size: 16px;
      line-height: 1.5;
      overflow: auto; }
      @media (max-width: 1000px) {
        .entity__body .hljs {
          max-width: calc(100vw - 90px); } }
  .entity__argument {
    display: flex; }
  .entity__argument + .entity__argument::before {
    margin-right: 10px;
    color: #AAA;
    content: ","; }
  .entity__operator {
    margin: 0 5px;
    color: #AAA; }
  .entity__operator + .entity__operator {
    margin-left: 0; }
  .entity__type {
    color: #f77900; }
  .entity__name {
    text-decoration: none;
    font-weight: 600;
    color: #29C; }
  .entity__default {
    border: 1px solid #EEE;
    border-radius: 2px;
    background: #F6F6F6;
    font-size: 16px;
    padding: 10px;
    margin: 0;
    margin-left: 5px; }
    .entity__default--block {
      font-family: Source Code Pro;
      display: inline-block;
      white-space: pre-wrap;
      padding-right: 50px;
      margin-left: 30px;
      margin-top: 15px; }
  .entity__signature {
    font-family: Source Code Pro;
    align-items: center;
    font-size: 18px;
    display: flex;
    flex-wrap: wrap; }

.btn-group {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  max-width: 600px;
  grid-gap: 20px;
  display: grid; }

.btn {
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.45), 0 -1px 2px rgba(0, 0, 0, 0.15) inset;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 16px;
  border: 0;
  border-radius: 100px;
  font-weight: bold;
  padding: 0 40px;
  padding-bottom: 2px;
  height: 50px;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  transition: transform 320ms;
  transform: translateY(0);
  cursor: pointer; }
  .btn:hover {
    transform: translateY(-5px); }
  .btn svg {
    position: relative;
    top: 1px;
    margin-right: 10px;
    fill: currentColor;
    flex: 0 0 auto; }
  .btn--primary {
    background: linear-gradient(#02d655, #02b046); }
  .btn--secondary {
    background: linear-gradient(#ff7847, #ff5c21); }
  .btn--tertiary {
    background: linear-gradient(#7f7ab6, #6761a8); }
  .btn--neutral {
    background: linear-gradient(#464646, #333); }
  .btn--big {
    font-size: 20px;
    height: 63px; }
    @media (max-width: 1200px) {
      .btn--big {
        font-size: 16px;
        height: 44px; } }
* {
  box-sizing: border-box;
  min-height: 0;
  min-width: 0; }

html {
  scrollbar-color: #999 #DDD; }

body {
  font-family: Open Sans;
  flex-direction: column;
  overflow-y: scroll;
  background: #FFF;
  min-height: 100vh;
  display: flex;
  color: #444;
  margin: 0; }

article {
  min-height: calc(100vh - 100px);
  flex: 1; }

.hljs {
  filter: saturate(2);
  scrollbar-color: #878d99 #282c34;
  scrollbar-width: thin; }

.posts-small {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 30px;
  display: grid; }

.post-small {
  background: #F6F6F6;
  border-radius: 4px;
  display: block;
  padding: 20px; }
  .post-small a {
    text-decoration: none;
    font-weight: 600;
    font-size: 20px;
    display: block;
    color: inherit; }
    .post-small a:hover {
      color: #02b046; }
  .post-small small {
    color: #999; }

.landing {
  background: url(/assets/dot-grid-7d92a1ccf1c9d05ca1ef33233029f6f2f0b46283c51fb78401e0e121201bd2f7.png); }

.input-search {
  position: relative; }
  .input-search svg {
    position: absolute;
    right: 11px;
    top: 11px;
    fill: #333; }
  .input-search input {
    border: 2px solid rgba(0, 0, 0, 0.1);
    padding: 0 10px;
    height: 36px;
    width: 100%; }
    .input-search input:focus {
      outline: none;
      border-color: #02b046; }

.add-package {
  max-width: 300px;
  grid-gap: 10px;
  justify-items: start;
  display: grid; }
  .add-package input:not(.btn) {
    padding: 15px;
    font-family: inherit;
    border: 2px solid #DDD;
    border-radius: 6px; }
  .add-package label {
    font-size: 14px;
    font-weight: 600;
    display: block; }

svg {
  max-width: 100%; }