body { font: 1em sans-serif; padding-top:.5em ; margin:0; padding-bottom:2em; background:#033557;color:white}
/* body { font: 1em sans-serif; padding-top:.5em ; margin:0; padding-bottom:2em; background:#4d4d4d;color:#fff} */
/* body { font: 1em sans-serif; padding-top:.5em ; margin:0; padding-bottom:2em; background:#282828;color:#bcbcbc } */
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:16em; border-left: dotted 1px white}
footer ul { list-style-type: none; background: white }
ul { list-style-type: none; }
.n a:hover { color: yellow }
footer li { font-size: .9em; margin-bottom:.1em; max-width: 12em }
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; max-width: 40em; margin-left: 16em }
/* h1,h2,h3,h4 {font-size: 1em; padding-left:.5em; padding-right:.5em; clear:both} */
h1,h2,h3,h4 {font-size: 1em; padding-left:.5em; padding-right:.5em; clear:both;
  font-family: 'Anastasia', monospace;
}
.maud a { text-decoration: none; color: gray; font-size:.9em; }
.maud { text-align: center; max-width: 40em; margin: auto; margin-left: 16em }
h2 a { text-decoration: none }
h2,h1,.date { display: inline; clear: both}
hr { border: 0; border-bottom: 1px solid black }
h1,h2,.date { text-align: right; display: inline-block;clear:both }
h1 + h2, .date + h2 { display: block; text-align: left }
.fib { font-size: .8em ; clear: both }
.fib a { color: gray; text-decoration: none }
.fib a:hover { color: black }
/* a { color: black } */
a{color: lightgray}
a:hover { color: gray }
/* a:hover { color: white} */
/* a:hover { color: #033557} */
pre {overflow: scroll;padding: .5em; background: whitesmoke }
p { padding-left: 1em; padding-right: 1em; line-height: 1.3em }
.pim { padding:0 }
.sludge { padding:0; float: left; max-width:100px;margin: 0 }
.sludge img { margin: 0 }
.sludge img:hover { opacity:.7}
._ { 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 .4s }

/* @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 li { display: inline; margin-right: .5em }
footer ul { padding-left: 0.5em }
footer { display: block; margin: auto; max-width:100%; position: relative; }
body article { margin: auto }
.eof { margin: auto }
.drop { display: inline }
nav { margin: auto }
.maud { margin: auto }
.rope {margin: auto}
}

.box {
 display: flex;
 justify-content: center;
}

.box .pim { width: 33% }
.src {padding: 1em; list-style-type: none }

._ img { width: 100%; object-fit: cover; height: 150px }
br { clear: both }


@font-face {
  font-family: 'Anastasia';
  src: url('/assets/Anastasia.woff2') format('woff2'),
      url('/assets/Anastasia.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* @media (max-width: 640px) { */
/* nav{float:none;max-width:100%} */
/* article{max-width:100%;float:none} */
/* #mags img {max-width:100%;width:100%} */
/* } */