:root {
  --red: #C5004A;
  --darkred: #7F0036;
  --lightgray: #e0e0e0;
  --gray: #C0C0C0;
  --darkgray: #333;
  --navy: #17050F;
  --blue: #082840;
  --white: #fff;
  --darkpurple: #2a002a;
  --cream: #eee9e9;
  --icepink: #ecdde8;
}

html,
body {
  margin: 10px;
  font-family: system-ui, sans-serif;
  color: var(--darkpurple);
  background-color: var(--icepink);
  padding: 1em;
}
p:last-child {
  margin-bottom: 0;
}
body::after {
    display: inline-block;
    margin-right: 5px;
  content:"This content doesn't \show up in the DOM. \A \It just shows up in the \Text of the \page. \A \A Could you build an entire site just outside the reach of the DOM, of accessibility devices and crawlers? \A While many programmers despair at the new ways to cross CSS and content, \a the new capabilities CSS provides are fascinating. \A \A But how is this kind of content accessible? \A Can it be made SEO friendly? \A How can this tool be used for good? \A \A And can it be used for bad? \A \A original experiment at \Ahttps://mathiasbynens.be/demo/css-without-html by Mathias Bynens, \A thank you Mathias! \A \A \A" url(https://images.pexels.com/photos/1207953/pexels-photo-1207953.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=400) "\A \A \A" url(/img/flashing-construction-sign.gif);
    background-size: 80%;
  white-space: pre; 
  /* This needs to be on the ::after (and not just on `body`)
     for it to work in Firefox 3.6.x and up. */
}