html, body, h1, h2, div, form, p, ul, li, iframe, figure { margin: 0; border: 0; padding: 0; list-style: none; }
 .hidden { display: none; }

 html { background: white; color: black; text-shadow: 0.1em 0.1em 0.25em silver; }
 h1 { color: hsla(45, 100%, 50%, 1.0); text-shadow: 0 0 0.25em black; }
 h1 { color: black; text-shadow: 0 0 0.25em white; }
 h1 span:first-child { background: url(https://www.hixie.ch/resources/images/astrophy/original) top right repeat-x; }
 h1 span:last-child { background: url(https://www.hixie.ch/resources/images/astrophy/original) top left repeat-x; }
 .links, .comics { background: rgba(255, 255, 255, 0.5); }
 :link { color: hsla(240, 100%, 50%, 1.0); }
 :visited { color: hsla(300, 100%, 25%, 1.0); }
 :link small { color: hsla(240, 25%, 75%, 1.0); }
 :visited small { color: hsla(300, 25%, 75%, 1.0); }
 :link:active, :visited:active { text-shadow: none; position: relative; top: 1px; left: 1px; }
 img { border: none; }
 html { font: 500 15px sans-serif; }
 h1 { font: 900 4.5em serif; text-align: center; min-height: 70px; }
 h1 :link, h1 :visited { text-decoration: none; color: inherit; }

 @media (min-width: 40rem) {
   .reminder { position: fixed; top: 0; left: 0; bottom: 0; width: 28rem; height: 100%; background: white; }
   .body { position: fixed; top: 0; bottom: 0; left: 28rem; right: 0; overflow: scroll; }
 }
 @media (max-width: 40rem) {
   .reminder { display: none; }
 }

 body { text-align: center; }
 h1 { display: table; width: 100%; }
 h1 > * { display: table-cell; }
 h1 > a { padding: 0 0.25em; }
 h1 > span { width: 50%; }
 .body > div + div { border-top: solid 0.3em; margin-top: 0.75em; }
 iframe { display: block; }
 h2 { margin: -0.75em 0 0.5em 0; }
 h2 span { padding: 0 0.5em 0.1em 0.5em; background: black; color: white; text-shadow: 0 0 0.25em yellow; border: solid black; border-radius: 0.5em; }

 .forms { margin-top: 0.75em; margin-bottom: 2.5em; padding-top: 0.5em; padding-bottom: 0.5em; }
 .forms > div { display: inline-block; background: rgba(255, 255, 128, 1.0); border-radius: 0.75em; padding: 0.2em 0.5em; margin: 0.25em; }

 .links > div { padding: 0 1em; display: inline-block; vertical-align: top; margin: 0 0 2em 0; width: 10em; }

 .comics > h2 { text-align: center; }
 .comics > h2 ~ * { margin: 4em 0 8em; }
 .comics img { display: block; margin: auto; max-width: 100%; }

 #connectionStatus { position: fixed; top: 22px; right: 2em; padding: 0.25em 0.5em; }
 #connectionStatus:not(.connected) { border: dotted black; background: yellow; color: black; }
 #connectionStatus.connected { border: solid transparent; text-shadow: 0 0 0.5em white; color: green; }

 .xkcd { margin-top: 4em; }
 #xkcd-message { white-space: pre-wrap; display: block; margin: 0 10%; }
 #dnd-message iframe { width: 100%; height: auto; }

 body.up { border: solid green; }
 body.up h1 { text-shadow: 0 0 0.5em green; }
 body.up h2 span { background: #006600; color: white; border-color: green; }
 body.up div { border-color: green; }

 body.down { border: solid red; }
 body.down h1 { text-shadow: 0 0 0.5em red; }
 body.down h2 span { background: maroon; color: white; border-color: red; }
 body.down div { border-color: red; }