:root > * {
  font-optical-sizing: auto;
  --accent: #6750a4;
  --button-color: var(--accent);
  --dark-accent: #9b93c4;
  --text-color: #000;
  --background-color: #f2f6f7;
  --surface-color: #fff;
  --keyword-color: var(--accent);
  --string-color: #ce9178;
  --number-color: #b5cea8;
  --variable-color: var(--accent);
  --comment-color: #6a9955;
  --error-text-color: #f44747;
  --error-background-color: #ac4142;
  --md-admonition-bg-color: var(--code-background);
  --md-default-bg-color: var(--background-color);
  --md-default-fg-color: var(--text-color);
  /* --md-typeset-a-color: var(--accent); */
  --md-accent-fg-color: var(--accent);
  --md-primary-fg-color: var(--accent);
  --md-typeset-mark-color: var(--dark-accent);
  --md-code-bg-color: var(--code-background);
  --md-code-fg-color: var(--text-color);
  --md-accent-fg-color--transparent: var(--dark-accent);
  /* --md-accent-fg-color: var(--md-default-fg-color);
  --md-accent-bg-color: var(--md-default-bg-color);
   */
  --md-mermaid-sequence-actor-bg-color: var(--md-mermaid-node-bg-color);
  --md-mermaid-node-bg-color: #1f2020;
  --md-mermaid-sequence-box-bg-color: var(--code-background);
  --md-primary-fg-color--dark: var(--background-color);
}

.grid.team {
  grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, 14rem), 1fr)
    ) !important;
}

.cards {
  li {
    overflow: hidden !important;
    border: none !important;
    border-radius: 8px !important;
  }

  img {
    margin-left: -16px;
    margin-right: -16px;
    margin-top: -16px !important;
    min-width: calc(100% + 32px);
  }
}

.team {
  li {
    width: 295px;
  }
}

section {
  margin-bottom: 60px !important;
}

.md-tabs__item--active {
  border-bottom: 3px solid var(--md-accent-bg-color) !important;
}

.md-typeset a {
  text-decoration: none !important;
}

[data-md-component="sidebar"] {
  width: 360px !important;

  .md-sidebar__inner {
    padding-right: 0 !important;
  }
}

:not(.cards) > ul > li:has(.twemoji) {
  margin-left: 0 !important;

  &::marker {
    content: " ";
  }

  .twemoji {
    svg {
      fill: var(--accent) !important;
    }
  }
}

.md-button {
  --md-default-fg-color--lightest: var(--button-color);
  --md-default-fg-color--light: var(--background-color);
  padding: 10px 24px 10px 18px !important;
  font-size: 14px;
  font-weight: 500;
  place-items: center;
  display: inline-flex !important;

  .twemoji {
    padding-right: 8px;
    vertical-align: baseline;
  }

  &.whatsapp {
    --md-primary-fg-color: #25d366;
    --md-primary-bg-color: #111b21;
    --md-accent-fg-color: var(--background-color);
    --md-accent-bg-color: #25d366;
  }
}

@media screen and (min-width: 76.25em) {
  [data-md-component="sidebar"] {
    display: none !important;
  }
}

@media screen and (max-width: 76.25em) {
  [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    transform: translateX(360px) !important;
  }

  [data-md-component="sidebar"] {
    left: -360px !important;
    top: 0;
    height: 100%;
    background-color: var(--surface-color) !important;
  }

  .md-nav__title,
  .md-nav > * {
    box-shadow: none !important;
    background-color: var(--surface-color) !important;
  }
}

.md-nav__title {
  color: var(--text-color) !important;
}

.md-nav__list,
.md-nav__item {
  box-shadow: none !important;
  border-top: none !important;
}

rect {
  fill: var(--md-mermaid-node-bg-color) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  max-width: 750px;
  place-self: center;
  text-align: center;
  margin-left: -5px !important;
  padding-left: 5px;
  border-radius: 6px;

  a {
    color: var(--text-color);
  }
}

.md-typeset {
  font-size: 16px !important;
}

h1 {
  font-size: 24px !important;
  font-weight: bold !important;
  margin: 0 !important;
}

h2 {
  margin-top: 10px !important;
  font-size: 18px !important;
}

h3 {
  font-size: 18px !important;
  font-weight: bold !important;
}

h4 {
  font-size: 14px !important;
}

code * {
  font-size: 13px !important;
}

h5 {
  font-size: 12px !important;
  text-transform: uppercase !important;
  margin: 0 0 5px 0 !important;
}

h6 {
  font-size: 12px;
  text-transform: uppercase;
  color: #999;
  margin: 0 0 5px 0;
}

summary {
  &::before {
    background-color: var(--accent) !important;
  }

  background-color: transparent !important;
}

details {
  background-color: var(--md-admonition-bg-color) !important;
  border-color: var(--accent) !important;

  & code {
    padding: 0 !important;
    background-color: transparent !important;
  }
}

.md-tabs,
.md-header {
  background-color: var(--accent);
  color: var(--surface-color);
}

*::selection {
  background-color: var(--dark-accent);
}

img {
  border-radius: 6px;
}

.highlight {
  border-radius: 6px;
  color: var(--text-color);

  .err {
    color: var(--error-text-color);
    background-color: var(--error-background-color);
  }

  .c,
  .cd,
  .cm,
  .c1,
  .cs {
    color: var(--comment-color);
  }

  .nb,
  .p,
  .pi {
    color: var(--text-color);
  }

  .gd {
    color: var(--error-background-color);
  }

  .gh {
    color: #6a9fb5;
    font-weight: bold;
  }

  .si,
  .se,
  .cp,
  .o,
  .ow,
  .k,
  .kn,
  .kp,
  .kr,
  .kc,
  .kt,
  .kd,
  .kv {
    color: var(--keyword-color);
  }

  .mi {
    color: var(--number-color);
  }

  .gi,
  .nt,
  .nn,
  .nc,
  .na,
  .no {
    color: var(--variable-color);
  }

  .sr,
  .s,
  .sb,
  .sc,
  .sd,
  .s2,
  .sh,
  .sx,
  .s1,
  .dl,
  .m,
  .mf,
  .mh,
  .il,
  .mo,
  .mb,
  .ss,
  .mx {
    color: var(--string-color);
  }
}

/* ----------------------------------------------------------------------------
 * Rules
 * ---------------------------------------------------------------------------- */

/* Landing page container */
.mdx-container {
  /* 20px */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(192deg, 23.81%, 95.88%, 1)' /></svg>")
    no-repeat bottom,
    linear-gradient(
      to bottom,
      var(--md-primary-fg-color),
      hsla(280, 67%, 55%, 1) 99%,
      var(--md-default-bg-color) 99%
    );
  width: 100%;
  left: 0;
  top: 0;
  padding-top: 20px;
}

/* Slate theme */
[data-md-color-scheme="slate"] .mdx-container {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(230, 15%, 14%, 1)' /></svg>")
    no-repeat bottom,
    linear-gradient(
      to bottom,
      var(--md-primary-fg-color),
      hsla(230, 15%, 25%, 1) 99%,
      var(--md-default-bg-color) 99%
    );
}

/* Landing page hero */
.mdx-hero {
  text-align: center;
  margin: 0 1rem;
  /* 16px */
  color: var(--md-primary-bg-color);
}

/* Hero headline */
.mdx-hero h1 {
  margin-bottom: 1.25rem;
  /* 20px */
  font-weight: 700;
  color: currentColor;
}

/* Mobile portrait */
@media (max-width: 480px) {
  .mdx-hero h1 {
    font-size: 1.75rem;
    /* 28px */
  }
}

/* Hero content */
.mdx-hero__content {
  padding-bottom: 7.5rem;
  /* 120px */
}

/* Tablet landscape + */
@media (min-width: 1024px) {
  .mdx-hero {
    display: flex;
    align-items: stretch;
  }

  .mdx-hero__content {
    max-width: 23.75rem;
    /* 380px */
    padding-bottom: 14vw;
    margin-top: 2.375rem;
    /* 70px */
  }
}

/* Buttons */
.mdx-hero .md-button {
  margin-top: 0.625rem;
  /* 10px */
  margin-right: 0.625rem;
  color: var(--md-primary-bg-color);
}

.mdx-hero {
  perspective: 1px;
  transform-style: preserve-3d;
}

.mdx-hero::before {
  transform: translateZ(-1px) scale(2);
}