index.html

<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>¡mag¡ne</title>
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="peachpuff">
<meta name="color-scheme" content="dark light">
<meta name="description" content="imagine mural">

<style media="(prefers-color-scheme: dark)">
  ::selection { background: hotpink; color: #111 }
  :any-link { color: violet }
  :root { background: #212; color: violet }
  @media (prefers-contrast: more) {
    :root { color: peachpuff }
  }
</style>

<style media="(prefers-color-scheme: light)">
  ::selection { background: indigo; color: pink }
  :any-link { color: indigo }
  :root { background: violet; color: #212 }
  @media (prefers-contrast: more) {
    :root { background: peachpuff }
  }
</style>

<link rel="stylesheet" href="imagine.css" media="all">
<link rel="help" href="https://webmural.com/code">
<link rel="icon" href="luna.svg">

<figure class="bold pad" aria-label="imagine">
  <blockquote>
    <data value="imagine">¡mag¡ne</data>
  </blockquote>
  <figcaption>
    <a href="https://webmural.com">web<wbr>mural</a>
    <a href="https://webmural.com/pg">lips</a>
  </figcaption>
</figure>