/* korriwan.com: frosted glass. Give an element the class `glass` and it becomes a pane: it blurs what is
   behind it by --frost and takes its opacity from --tint, which the slider in the header sets. The links,
   the round toggles, the tint control and the footer bar are all panes. A pane keeps its own border, shadow
   and shape, and may tint itself with a background of its own, as each link does with its fairy's colour. */
@layer components {
  .glass {
    background: var(--glass);
    -webkit-backdrop-filter: var(--frost);
    backdrop-filter: var(--frost);
  }
  /* where glass cannot blur what is behind it, it is made less see-through instead */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: var(--glass-strong); }
  }
}