:root {
  --dark: #1e1e1e;
  --dark-more: #111111;
  --light: #efefef;
  --light-less: #bbbbbb;
  --primary-light: #ffed24;
  --primary: #ffca24;
  --primary-dark: #ffac24;
  --gray-light: #bababa;
  --gray: #707070;
  --gray-dark: #303030;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#app {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  background-color: var(--dark);
  color: var(--light);
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}

h1 {
  position: relative;
  font-weight: 500;
  margin-top: 3rem;
  margin-bottom: 1rem;
  scroll-margin-top: 4.2rem;
}
h1:first-child {
  margin-top: 1.5rem;
}

h2 {
  position: relative;
  font-weight: 500;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  scroll-margin-top: 4.2rem;
}

h3 {
  position: relative;
  font-weight: 500;
  margin-top: 2rem;
  margin-bottom: 1rem;
  scroll-margin-top: 4.2rem;
}

.docs-container {
  width: 100%;
  max-width: 852px;
  margin: 0 auto;
  padding: 0 1rem;
}

.docs-container.stretch {
  max-width: 1248px;
}

.link,
.markdown-container a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.link:hover,
.link:active,
.markdown-container a:hover,
.markdown-container a:active {
  color: var(--primary-light);
}

/* Heading autolink */
.markdown-container a.anchor {
  display: inline-block;
  opacity: 0.2;
  padding-left: 0.25rem;
  color: var(--primary);
  transition: opacity 0.2s ease;
  transform: translateY(4px);
}

.markdown-container a.anchor:hover {
  opacity: 1;
}

.markdown-container a.anchor svg {
  display: block;
}

button,
.button {
  cursor: pointer;
  background-color: var(--gray-dark);
  color: var(--light);
  border: none;
  border-radius: 100px;
  padding: 0.5rem 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

button:hover,
button:active,
.button:hover,
.button:active {
  background-color: var(--gray);
}

button.large,
.button.large {
  font-size: 1.1rem;
  padding: 0.6rem 1.2rem;
}

button.primary,
.button.primary {
  background-color: var(--primary-dark);
  color: var(--dark);
}

button.primary:hover,
button.primary:active,
.button.primary:hover,
.button.primary:active {
  background-color: var(--primary);
}

.markdown-container p {
  color: var(--light-less);
  line-height: 1.8;
}

.markdown-container ul,
.markdown-container ol {
  padding-left: 1.2rem;
}

.markdown-container ul li,
.markdown-container ol li {
  margin: 0.5rem 0;
}

.markdown-container code::before,
.markdown-container code::after {
  content: '`';
}

.markdown-container code {
  color: white;
}

.astro-code {
  line-height: 1.6;
}

.markdown-container .astro-code {
  padding: 1rem;
  border-radius: 0.5rem;
}

.markdown-container > .astro-code {
  margin: 1rem 0;
}

.markdown-container .astro-code > code::before,
.markdown-container .astro-code > code::after {
  content: '';
}

.markdown-container .astro-code > code {
  color: initial;
}

.markdown-container blockquote {
  border-left: 4px solid var(--primary);
  background-color: #ffc82420; /* --primary */
  color: var(--light);
  padding: 0.2rem 1rem;
  margin: 1rem 0;
}

.markdown-container blockquote p {
  color: var(--light);
}

.markdown-container blockquote > *:first-child {
  margin-top: 0.5rem;
}

.markdown-container blockquote > *:last-child {
  margin-bottom: 0.5rem;
}

.markdown-container table {
  border-collapse: collapse;
}

.markdown-container table th,
.markdown-container table td {
  border: 1px solid #bababa20;
  padding: 0.5rem 0.8rem;
}

.markdown-container table th {
  background-color: var(--dark-more);
  font-weight: 500;
}

.markdown-container table td {
  background-color: #ffffff10;
}

.markdown-container table tr:nth-child(even) td {
  background-color: #ffffff20;
}

@media (min-width: 768px) {
  .markdown-container p {
    font-size: 1.02em;
  }

  .markdown-container > .astro-code {
    margin: 1rem -1rem;
  }

  .markdown-container a.anchor {
    position: absolute;
    top: calc(50%);
    right: 100%;
    padding-left: 0;
    padding-right: 8px;
    transform: translateY(-50%);
  }
}

@media (pointer: fine) {
  .markdown-container a.anchor {
    opacity: 0;
  }

  .markdown-container h1:hover > a.anchor,
  .markdown-container h2:hover > a.anchor,
  .markdown-container h3:hover > a.anchor {
    opacity: 1;
  }
}
