body {
  padding: 0;
  margin: 0;
  background: #bbb;
}

.mono { font: 1.1em monospace }

img { display: block;
  max-width: 100%;
 }

.rd {
  position: relative;
  display: inline-block;
  color: black;
}

#wj {
  max-width: 40em;
  margin: auto;
  padding:1.5em;
}

.right { text-align: right }
#wj p { text-indent: 1em; line-height: 1.5 }

.rd::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: black;
  animation: redact 2s forwards ease-out;
}

@keyframes redact {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

a { 
  color: black;
}

a:hover {
  opacity: .5;
}

.icon { display: block; margin: auto }

nav {
  padding: .5em;
  text-align: center;
}

nav * { 
  font-size: 1em;
}

footer {
  max-width: 40em;
  margin: auto;
  padding:.5em;
}

footer .list {
  text-align: center;
}

.list a {
  margin-left: .3em;
  margin-right: .3em;
}

.archive {
  list-style-type: none;
  padding:0;
  text-align: center;
}

.archive li {
  margin-bottom: .5em;
  display: inline-block;
  margin-right:1em;
  margin-left:1em;
}

.archive .date {
  display: block;
  font-size:.8em;
}

@media (prefers-color-scheme: dark) {

body {
  background: #282828;
  color: #bbb;
  }

a {
  color: white;
}

.icon, .i { filter:invert(1) }

}