body { font: 1em sans-serif; padding-top:.5em ; margin:0 }
img { width: 100%; display: block; margin-top:.5em; margin-bottom:.5em }
nav { text-align: center; max-width:40em; }
nav a { margin-right:1em; }
.hd { font-size: 1em; display: none }
article { margin-bottom: 2em; max-width:40em; margin-left:20em; border-left: dotted 1px black }
footer ul { list-style-type: none; background: white }
footer li { font-size: .9em; margin-bottom:.1em }
footer a { text-decoration: none }
footer span { font-size: .9em; color: gray }
footer span a { color: gray }
footer span a:hover { color: black }
.eof { clear: both; text-align: right }
h1,h2,h3,h4 {font-size: 1em; padding-left:.5em; padding-right:.5em }
.maud a { text-decoration: none; color: gray; font-size:.9em; }
.maud { text-align: center; max-width: 40em; margin: auto; margin-left: 20em }
h2 a { text-decoration: none }
h2,h1,.date { display: inline}
hr { border: 0; border-bottom: 1px solid black }
h1,h2,.date { text-align: right; display: inline-block }
h1 + h2, .date + h2 { display: block; text-align: left }
.fib { font-size: .8em }
.fib a { color: gray; text-decoration: none }
.fib a:hover { color: black }
a { color: black }
a:hover { color: gray }
pre {overflow: scroll;padding: .5em; background: whitesmoke }
p { padding-left: 1em; padding-right: 1em; line-height: 1.3em }
.pim { padding:0 }
._ { list-style-type: none }
._ span { font-size: .9em }
._ li { margin-bottom: .3em; }
._ a { text-decoration: none }
.files a { text-decoration: none }
.files { font: 1.1em monospace; list-style-type: none }
.rope { text-align: center; max-width:40em; margin-left:20em }
.convo p {max-width:50%; margin:auto;margin-bottom:.5em;}
footer { position: absolute; top:2em; left:0; max-width: 20em}
.drop { display: none }

#play,.poem { font: 1em monospace }
.poem { margin-bottom: 2em }

@keyframes fade { from { opacity:0; } to { opacity:1; }} 

#ft:target { animation: fade linear .7s }

@media (prefers-color-scheme: dark) {
 body{background:#282828;color:#bcbcbc }
 a{color: white }
 footer a:hover {color: gray}
 footer ul { background: #282828; }
 pre {background: black; color: gray }
 .fib a:hover { color: #bbb }
 hr { border-color: gray }
 article  {border-left: dotted 1px gray }
 .tl { filter: invert(100%) ; opacity: .8}
}

@media only screen and (max-width: 56em) {
footer ul { float: left; }
footer { display: block; margin: auto; max-width:40em; position: relative }
body article { margin: auto }
.drop { display: inline }
nav { margin: auto }
.maud { margin: auto }
.rope {margin: auto}
}