@import "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.0.0/build/styles/github-dark.min.css";

@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap');

@import "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.0.0/build/styles/github-dark.min.css";

:root {
  --font-family-serif: Charter, Palatino, 'Palatino Linotype', "Droid Serif", serif;
  --font-family-sans: -apple-system, system-ui, sans-serif;
  --font-family-mono: 'PT Mono', monospace;

  --font-size-xsmall: 0.85rem;
  --font-size-small: 0.9rem;
  --font-size-normal: clamp(1.1rem, 3vw, 1.4rem);
  --font-size-big: clamp(1.5rem, 4vw, 2rem);
  --font-size-xbig: clamp(2.5rem, 5vw, 4rem);

  --font-xsmall: var(--font-size-xsmall) / 1.1 var(--font-family-sans);
  --font-xsmall-bold: bold var(--font-xsmall);
  --font-small: var(--font-size-small) / 1.5 var(--font-family-sans);
  --font-small-bold: bold var(--font-small);
  --font-text: var(--font-size-normal) / 1.5 var(--font-family-serif);
  --font-text-bold: bold var(--font-text);
  --font-title: bold var(--font-size-big) / 1.2 var(--font-family-serif);
  --font-display: bold var(--font-size-xbig) / 1 var(--font-family-serif);

  --color-brand: rgb(0, 186, 192);
  --color-brand-dark: rgb(0, 113, 141);
  --color-white: #FFF;
  --color-black: hsl(216deg, 15%, 13%);
  --color-foreground:     hsl(216deg, 15%, 13%);
  --color-foreground-50:  hsl(216deg, 15%, 40%);
  --color-background:     hsl(216deg, 15%, 97%);
  --color-background-10:  hsl(216deg, 15%, 93%);
  --color-background-20:  hsl(216deg, 15%, 85%);
  --color-shadow: #0003

  /* Dark mode */
}

@media (prefers-color-scheme: dark) {

:root {
    --color-foreground:     hsl(216deg, 15%, 90%);
    --color-foreground-50:  hsl(216deg, 15%, 50%);
    --color-background:     hsl(216deg, 15%, 10%);
    --color-background-10:  hsl(216deg, 15%, 13%);
    --color-background-20:  hsl(216deg, 15%, 20%);
    --color-shadow: #000
}
  }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  font: var(--font-text);
  color: var(--color-foreground);
  background-color: var(--color-background);
  min-width: 320px;
}

a {
  color: var(--color-brand)
}

a:hover {
    text-decoration: none;
  }

code {
  font-family: var(--font-family-mono);
  background-color: var(--color-background-10);
  border-radius: 2px;
  font-size: 0.85em;
  padding: 0 2px;
  display: inline-block;
}

pre code {
  border-radius: 4px;
}

dt {
  font-weight: bold;
  margin-top: .5em;
}

.ly-main {
  display: grid;
  grid-template-areas: "navbar navbar navbar"
                       "menu content ."
                       ". footer .";
  grid-template-columns: 0 minmax(0, 1fr) 0;
  grid-template-rows: 85px 1fr auto;
  grid-column-gap: 5vw;
  align-content: start
}

@media (min-width: 800px) {

.ly-main {
    min-height: 100vh;
    grid-template-columns: calc(5vw + 15rem) minmax(0, 1fr) 0;
    grid-template-areas: "navbar navbar navbar"
                          "menu content ."
                          "menu footer ."
}
  }

.ly-navbar {
  grid-area: navbar;
  position: sticky;
  top: 0;
  z-index: 2;
}

.ly-menu {
  grid-area: menu;
  overflow-y: auto;
  height: calc(100vh - 85px);
  position: fixed;
  top: 85px;
  z-index: 1;
}

.ly-content {
  grid-area: content;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.ly-footer {
  grid-area: footer;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.scrollbar {
  --color: var(--color-brand);

  scrollbar-width: thin;
  scrollbar-color: var(--color) var(--color-background)
}

.scrollbar::-webkit-scrollbar {
    width: 10px;
  }

.scrollbar::-webkit-scrollbar-track {
    background: var(--color-background);
  }

.scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--color);
    border-radius: 5px;
    border: solid 2px var(--color-background);
  }

.logo {
  display: grid
}

.logo img {
    grid-area: 1 / 1 / span 2;
  }

.logo .logo-name {
    grid-area: 1 / 2;
    text-transform: lowercase;
    align-self: end;
    line-height: 1;
  }

.logo .logo-description {
    grid-area: 2 / 2;
    font-style: normal;
    align-self: start;
  }

.button {
  --color: var(--color-white);
  --background: var(--color-brand);
  --background-hover: var(--color-brand-dark);

  display: inline-block;
  text-decoration: none;
  font: var(--font-small-bold);
  color: var(--color);
  background: var(--background);
  padding: 1em;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 200ms;
  text-align: center
}

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

.button.is-secondary {
    --color: var(--color-brand);
    --background: var(--color-background-10);
    --background-hover: var(--color-background-20);
  }

.landing {
  min-height: 100vh;
  display: grid;
  padding: 5vw;
  justify-content: center;
  align-content: center;
  box-sizing: border-box;
  row-gap: 2.5vh;
  grid-template-columns: minmax(0, 1fr);
}

.landing-code pre {
  margin: 0 auto;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}

.landing-header {
  margin-top: auto;
  justify-self: center;
  align-items: center;
  display: flex;
  flex-direction: column
}

.landing-header img {
    width: clamp(130px, 36vw, 500px);
    height: clamp(88px, 25vw, 340px);
  }

.landing-header .logo-name {
    margin: 0;
    font-size: clamp(2rem, 3.5vw, 4.5rem);
    letter-spacing: -0.01em;
    line-height: 1.1;
    width: 100%;
    text-align: center;
    color: #00BAC0;
  }

.landing-header .logo-description {
    margin: 0;
    font-family: var(--font-family-sans);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    line-height: 1.1;
    width: 100%;
    color: var(--color-foreground-50);
    font-weight: 300;
    text-align: center;
  }

.landing-buttons ul {
  list-style: none;
  margin: 0;
  padding: 2rem 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.landing-footer {
  margin-bottom: auto;
  font: var(--font-xsmall);
  color: var(--color-foreground-50);
  justify-self: center;
}

.navbar {
  display: flex;
  background: var(--color-background);
  box-shadow: 0 1px 10px var(--color-shadow);
  padding: 10px 5vw;
}

.navbar-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  -moz-column-gap: .5rem;
       column-gap: .5rem
}

.navbar-links > li {
    display: flex;
    align-items: center
  }

.navbar-links > li.has-separator {
      border-right: solid 1px var(--color-background-20);
      padding-right: 1rem;
      margin-right: .5rem;
    }

@media (max-width: 1000px) {
      .navbar-links > li.not-mobile {
        display: none;
      }
    }

@media (max-width: 700px) {

.navbar-links > li {
      display: none
  }
    }

.navbar-links svg {
    display: block;
    width: 28px;
    height: 28px;
    fill: var(--color-foreground);
    padding: 8px;
    border-radius: 50%;
  }

.navbar-links a {
    display: block;
    font: var(--font-xsmall)
  }

.navbar-links a:hover {
      text-decoration: none
    }

.navbar-links a:hover svg {
        background-color: var(--color-background-20);
      }

.navbar-logo {
  color: inherit;
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
  outline: 0
}

.navbar-logo img {
    width: 64px;
    height: 64px;
    padding-right: 20px;
  }

.navbar-logo strong {
    font-size: 2.2rem;
  }

.navbar-logo em {
    font: var(--font-xsmall);
    color: var(--color-foreground-50);
  }

.navbar-search {
  flex: 1 1 auto;
  margin: 0 1rem;
  align-self: center;
  max-width: 400px
}

@media (max-width: 500px) {

.navbar-search {
    display: none
}
  }

lume-search::part(input) {
  font: var(--font-small);
  display: block;
  width: 100%;
  border-radius: 1.5rem;
  border: solid 2px var(--color-shadow);
  padding: .5em 1em;
  background: var(--color-white);
  color: var(--color-black);
}

lume-search::part(input):focus {
  outline: 0;
  box-shadow: 0 0 0 2px var(--color-brand);
  border-color: var(--color-brand-dark);
}

lume-search::part(label) {
  font: var(--font-small);
}

lume-search::part(items) {
  margin-top: 2px;
  background: var(--color-white);
  padding: .5rem 0;
}

lume-search::part(item) {
  background: var(--color-white);
  color: var(--color-black);
  padding: .3rem .5rem;
  font: var(--font-small);
}

lume-search::part(active) {
  background: var(--color-brand);
  color: var(--color-white);
}

.menu {
  background: var(--color-background-10);
  padding-left: 5vw;
  padding-right: 1em;
  box-sizing: border-box
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

.menu > ul {
    margin-bottom: 2em;
  }

.menu li {
    margin: .25em 0;
  }

@media (max-width: 799px) {

.menu {
    display: none
}

    .menu.is-open {
      display: block;
      -webkit-animation: showMenu 200ms;
              animation: showMenu 200ms;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      box-shadow: 0 1px 10px var(--color-shadow);
      max-width: 80%;
    }
  }

@media (min-width: 800px) {

.menu {
    position: sticky
}
  }

.menu-links {
  font: var(--font-small)
}

.menu-links a {
    display: block;
    padding: .25em 1em;
    border-radius: 3px
  }

.menu-links a:hover {
      color: var(--color-foreground-gray);
      background-color: var(--color-background-20);
    }

.menu-links a[aria-current="page"] {
      color: var(--color-white);
      background-color: var(--color-brand);
      text-decoration: none;
    }

.menu-links strong {
    display: block;
    padding: 2em 1em .25em;
  }

.menu-button {
  cursor: pointer;
  background: none;
  font: var(--font-xsmall-bold);
  text-transform: uppercase;
  border: none;
  height: 100%;
  color: var(--color-brand);
  border-right: solid 1px var(--color-shadow);
  padding-right: 1rem;
  margin-right: .5rem
}

.menu-button:hover {
    text-decoration: underline;
  }

@media (min-width: 800px) {

.menu-button {
    display: none
}
  }

@-webkit-keyframes showMenu {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes showMenu {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

.article {
  font: var(--font-text);
  max-width: 40em;
}

.article-header {
  margin-bottom: 3rem
}

.article-header p {
    margin: 0;
  }

.article-header h1 {
    margin: 0;
    font: var(--font-display);
    letter-spacing: -0.015em;
  }

.article-nav {
  font: var(--font-small);
  display: flex;
  gap: 1em;
  margin-top: 1rem
}

.article-nav a {
    background: var(--color-background-10);
    border: solid 1px var(--color-background-20);
    color: var(--color-brand);
    border-radius: 4px;
    padding: .5em 1em;
  }

.article-nav img {
    vertical-align: middle;
    margin: 0 .5em 0 0;
  }

.article-content pre code {
    --color: var(--color-background-10);

    max-width: 100%;
    overflow-x: auto;
    border-radius: 4px
  }

@media (prefers-color-scheme: dark) {

.article-content pre code {
      border: solid 1px var(--color-background-20)
  }
    }

.article-content p {
    margin-top: 0;
  }

.article-content h2 {
    font: var(--font-title);
    margin-top: 2em;
    margin-bottom: .5em;
    letter-spacing: -0.01em;
  }

.article-content h3 {
    font-weight: bold;
    margin-top: 2em;
  }

.article-content .header-anchor {
    color: inherit;
    text-decoration: none;
    position: relative
  }

.article-content .header-anchor::before {
      content: "";
      display: block;
      background-image: url('data:image/svg+xml;utf-8,<svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill-rule="evenodd" fill="black" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>');
      width: 16px;
      height: 16px;
      position: absolute;
      left: -20px;
      top: .4em;
      visibility: hidden;
    }

.article-content .header-anchor:hover::before {
      visibility: visible;
    }

.article-content table {
    background-color: var(--color-background-10);
    border-collapse: collapse;
    font: var(--font-small);
    width: 100%;
    margin: 2em 0
  }

.article-content table code {
      background: var(--color-background-20);
    }

.article-content td,
  .article-content th {
    padding: .5em;
    text-align: left;
  }

.article-content th {
    border-bottom: solid 1px var(--color-background-20);
  }

.footer {
  color: var(--color-foreground-50);
  border-top: solid 1px var(--color-background-20);
  font: var(--font-xsmall);
}

.footer-pagination {
  list-style: none;
  margin: 0 0 3rem 0;
  padding: 0;
  display: flex;
  gap: 1em
}

.footer-pagination > li:last-child {
    margin-left: auto;
    text-align: right;
  }

.footer-pagination a {
    text-decoration: none;
    display: block;
    font: var(--font-text)
  }

.footer-pagination a:hover {
      text-decoration: underline;
    }

.footer-credits {
  text-align: center;
}

blockquote {
    border: solid 1px var(--color-background-20);
    padding: 1rem 1.5rem;
}

blockquote p {
    margin: 0;
}