/* Create a custom Coda color scheme. */
[data-md-color-scheme="coda"] {
  /* Theme overrides. */
  --md-primary-fg-color: #006838; /* Emerald */
  --md-accent-fg-color: #EE5A29; /* Tomato Soup */
  --md-code-hl-color: #FFE6C9; /* Peach */

  /* Custom variables. */
  --coda-external-link-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M256 64c0-17.67 14.3-32 32-32h127.1c5.2 0 9.4.86 13.1 2.43 2.9 1.55 7.3 3.84 10.4 6.87 0 .05 0 .1.1.14 6.2 6.22 8.4 14.34 9.3 22.46V192c0 17.7-14.3 32-32 32s-32-14.3-32-32v-50.7L214.6 310.6c-12.5 12.5-32.7 12.5-45.2 0s-12.5-32.7 0-45.2L338.7 96H288c-17.7 0-32-14.33-32-32zM0 128c0-35.35 28.65-64 64-64h96c17.7 0 32 14.33 32 32 0 17.7-14.3 32-32 32H64v288h288v-96c0-17.7 14.3-32 32-32s32 14.3 32 32v96c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128z"/></svg>')
}

/* Don't use link colors in the announcement banner, for readability. */
.md-announce a {
  color: inherit;
  text-decoration: underline;
}

/* Ensure <button> and <a> buttons have the same height. */
.md-button {
  line-height: 1.6em;
}

/* Size in-line image to be the same size as the text. */
img.inline-icon {
  height: 1em;
}

img.screenshot {
  border-radius: 8px;
  box-shadow: 0 0 24px rgba(0,0,0,var(--opacity-shadow-normal,.15));
}

li.yes, li.no {
  padding-left: 0.5rem;
}

li.yes {
  list-style-type: "✅";
}

li.no {
  list-style-type: "❌";
}

div.yes pre code {
  background-color: #f1f9f1;
}

div.no pre code {
  background-color: #f9f1f1;
}

/* Add an icon next to external links in the nav. */
.md-sidebar a[href]:where(
  [href^="https://"],
):after {
  background-color: currentColor;
  mask-image: var(--coda-external-link-image);
  -webkit-mask-image: var(--coda-external-link-image);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  content:"";
}

.landing-row {
  display: flex;
  gap: 5em;
}

.landing-row-reverse {
  flex-direction: row-reverse;
}

@media (max-width: 800px) {
  .landing-row {
    flex-direction: column-reverse;
    gap: 0;
  }
}

.landing-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tutorial-row {
  display: grid;
}

@media (min-width: 1000px) {
  .tutorial-row {
    gap: 2em;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.tutorial-row > * {
  overflow: auto;
}

.tutorial-row img.screenshot {
  box-shadow: none;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.box-row {
  display: grid;
  gap: 1em;
}

@media (min-width: 800px) {
  .box-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.box-item {
  border: .05rem solid var(--md-default-fg-color--lightest);
  padding: 0 2em;
  display: flex;
  flex-direction: column;
}

.box-item p:first-of-type {
  flex: 1;
}

/* Hide the anchor link for headings in boxes. */
.box-item .headerlink {
  display: none;
}