/*<!--section:docs-->

### `sup`er &nbsp; and &nbsp; `sub`headings

<article><br>

# <sup style>Parent page</sup> Page title <sub style>Subtitle</sub>

</article>

How it works:
```css */
sup[style] {
  display: block;
  font-size: min(50%, 0.75rem);
  letter-spacing: 0.0625em;
  text-transform: uppercase;
}
sub[style] {
  display: block;
  line-height: 1.1;
  bottom: 0;
  font-weight: 300;
  opacity: 75%;

  &:where(h1 > *) {
    font-size: 50%;
  }
}
/*```

### Teasers

<article style="padding-inline: 2rem">
  <a href="https://blades.dev/" role="button" class="outline">
    <h4>Blades CSS</h4>
    Fully compatible and actively maintained successor to Pico CSS.
  </a>
</article>

How it works:
```css */
a[role="button"]:has(h1, h2, h3, h4, h5, h6) {
  text-align: start;
  border-width: 1px 0 0 1px;
  margin: 0 0 0.5rem -1rem;
}
/*```

### `.opt`ional content

How it works:
```css */
.opt:not(.does-not-exist) {
  @media (width < 1024px) {
    display: none;
  }
}
/*```

### Nicer GitHub favicons

<article>

https://github.com/anyblades/blades

</article>

How it works:
```css */
img[src*="?domain=github.com&"] {
  border-radius: 50%;

  @media (prefers-color-scheme: dark) {
    filter: invert(1);
  }
}
/*```

## Dark auto

`.dark-auto` automatically creates a simple dark version of any element:

<article data-theme="dark">
  <p>Look how cool <big class="dark-auto">🔥🕷️🐦‍⬛🐄🦓</big> can look in the dark!</p>
</article>

How it works:
```css */
/* Per https://picocss.com/docs/css-variables#css-variables-for-color-schemes */
:root {
  --blades-dark-filter: invert(100%) hue-rotate(180deg);
}
.dark-auto {
  /* Dark color scheme (Auto) */
  @media (prefers-color-scheme: dark) {
    filter: var(--blades-dark-filter);
  }
  /* Dark color scheme (Forced) */
  &[data-theme="dark"],
  &:where([data-theme="dark"] *) {
    filter: var(--blades-dark-filter);
  }
}
/*```

## Faded

`.faded` reduces the opacity of an element:

<article class="faded">
  Hover to unfade me!
</article>

How it works:
```css */
.faded {
  opacity: 50%;

  &:hover {
    opacity: 87.5%;
  }
}
/*```
<!--section--> */

/* Fix the scrollbar color when inverted by https://tailwindcss.com/docs/filter-invert */
.invert {
  ::-webkit-scrollbar {
    filter: invert(1) !important;
  }
}