:root {
  --strong: hsl(240deg 100% 0%);
  --primary: hsl(240deg 10% 20%);
  --secondary: hsl(240deg 20% 40%);
  --separator: hsl(240deg 20% 82%);
  --surface: hsl(240deg 20% 82%);
  --background: hsl(240deg 92.5% 97.5%);
  --tint: hsl(240deg 100% 100%);
  --bg-strong: hsl(240deg 100% 99%);

  --info-bg: hsl(210deg 100% 95%);
  --info-border: hsl(210deg 50% 67%);
  --info-text: hsl(210deg 80% 40%);

  background: var(--background);
  color: var(--primary);
}

@media (prefers-color-scheme: dark) {
  :root {
    --strong: hsl(240deg 100% 100%);
    --primary: hsl(240deg 10% 80%);
    --secondary: hsl(240deg 15% 70%);
    --separator: hsl(240deg 20% 18%);
    --surface: hsl(240deg 20% 18%);
    --background: hsl(240deg 25% 8%);
    --tint: hsl(240deg 50% 4%);
    --bg-strong: hsl(240deg 100% 1%);

    --info-bg: hsl(225deg 80% 7.5%);
    --info-border: hsl(225deg 100% 20%);
    --info-text: hsl(210deg 100% 78%);
  }
}

* { box-sizing: border-box }

html { margin: 0 }

body {
  margin: 0;
  font-family: system-ui;
}

#bridge-container {
  resize: both;
  overflow: scroll;
  border: 1px solid var(--separator);
  display: grid;
  place-content: center;
  padding: 1rem;
  min-width: 240px;
  max-width: 100vw;
}

#root {
  letter-spacing: 0.5px;
  margin: auto;
  color: var(--primary);

  & h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin: 1.5em 0 .25em 0;
    color: var(--strong);
    line-height: 1.3;
  }

  & h3, h4, h5, h6 { font-weight: 500 }

  & h1 {
    margin: 0;
    font-size: 2.5rem;
  }

  & h2 { font-size: 2rem }
  & h3 { font-size: 1.5rem }
  & h4 { font-size: 1.25rem }
  & p {
    margin: .7em 0 .5em 0;
    line-height: 1.7;
  }

  & code, pre {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
    background: var(--bg-strong);
    border-radius: .5rem;
    border: 1px solid var(--separator);
    overflow: scroll;
    line-height: 1.5;
  }

  & code {
    font-size: .875rem;
    padding: .25em .375em;
  }

  & pre { padding: .75em 1.25em; }

}

#root > header {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 14px;
  padding: 1.25rem 0.5rem 1.25rem 1rem;
  align-items: center;
  max-width: 1024px;
  margin: auto;

  & nav {
    display: flex;
    gap: .25rem;
    flex-grow: 1;
    justify-content: flex-end;

    & a {
      border: 1px solid transparent;
      border-radius: .25rem;
      height: fit-content;
      padding: .5rem 1rem;
      color: var(--strong);
      text-align: center;
      text-decoration: none;

      &:hover { border: 1px solid rgb(217, 70, 239) }

      &:active { opacity: .4 !important }

      &.selected {
        border: 1px solid rgb(217, 70, 239);
        color: var(--strong);
        &:hover { opacity: .7 }
      }
    }

  }
}

#root > main {
  display: flex;
  gap: 1rem;
  flex-direction: column;
  align-items: center;

  & header {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
    text-align: center;
    background: var(--tint);
    width: 100vw;
    padding: 2rem .5rem;

    & p {
      font-size: 1.3rem;
      margin: .2em 0;
      max-width: 40ch;
    }
  }

  & #example-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;

    & #bridge-container {
      border-radius: .5rem;
      box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    }

  }

  & hr {
    width: 100%;
    max-width: 80ch;
    border: transparent;
    border-top: 1px solid var(--separator)
  }

  & article {
    max-width: 80ch;
    width: 100%;
    padding: 0 1rem;
    margin-bottom: 2rem;

    & h2 {
      display: flex;
      gap: .75rem;
      align-items: center;

      & svg {
        width: 1em; height: 1em;
      }
    }
    & h2:not(:first-child) {
      border-top: 1px solid var(--separator);
      padding-top: 2rem;
    }

    & a {
      text-decoration: underline;
      color: var(--info-text);
    }

    & pre { margin: 1.5em -0.25em }

    & .info {
      background: var(--info-bg);
      border: 1px solid var(--info-border);
      padding: .75rem;
      margin: 1rem 0;
      border-radius: .5rem;

      & > *:first-child { margin-top: 0 }
      & > *:last-child { margin-bottom: 0 }
    }
  }

}

#root > footer {
  background: var(--tint);
  width: 100vw;
  margin-top: 2rem;
  line-height: 1.7;

  & > div {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .875rem;
    padding: 1.25rem;
    max-width: 1024px;
    margin: auto;
  }

  & nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    text-align: right;
    justify-content: flex-end;
    flex-grow: 1;

    & section {
      display: flex;
      flex-direction: column;

      & > header, span {
        display: inline-block;
        padding: .25rem .5rem;
        border-radius: .5rem;
      }

      & header { font-weight: 500 }

      & a { color: var(--secondary) }

      & a:hover span {
        background: var(--bg-strong);
        color: var(--primary)
      }

      & a:active { opacity: .4 }
    }
  }
}

@media screen and (max-width: 640px) {
  article pre { font-size: 0.75rem }
  #bridge-container { resize: none }
  .desktop-only { display: none }
}