html {
  --background: #efeff1;
  --foreground: #fbfbfb;
  --border: #dedde2;
  --copy: #252329;
  --link: rgb(1, 88, 135);

  font-family: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif;
  font-size:16px;
  line-height:1.5;
  color:var(--copy);
  scroll-behavior:smooth;
  background-color: var(--background);
  padding:0;
  margin:0;
}
html:lang(fr) *[lang]:not(:lang(fr)):not(access-settings),
html:lang(en) *[lang]:not(:lang(en)):not(access-settings)
{
  display:none;
}
body {
  padding:0;
  margin:0;
}
header {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  position:fixed;
  top:0;
  width:100%;
  z-index:1;
  border-bottom:1px solid var(--border);
  background-color: var(--background);

  h1 {
    flex:1;
    text-align:center;
    padding-bottom:0.3rem;
    margin:0;
    font-size:2rem;
    white-space: nowrap;
    margin-left:2rem;

    a {
      color:var(--copy);
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .toolbar {
    display:flex;
    align-items:center;
    padding:0.3rem;
    github-link{
      margin:0.3rem 0.5rem 0 1rem;
      a {
        color:var(--copy);
      }
    }
  }
}
a {
  color:var(--link);
}
main {
  margin:auto;
  margin-top:3rem;
  max-width:80ch;
  padding-left:1.6ch;
}
section {
  padding:0.5em 1em;
  scroll-margin-top: 28vh;
}
section.selected {
  box-shadow:0px 0px 10px #bbb;
}
#styles ul {
  padding-left:1.5rem;
}
code-example {
  margin:1rem 0;
}