nav {font-size:.9em;text-decoration:none;max-width:90%}
.icon { width: auto; max-width:2em; margin-left:0; float: left }
nav a{text-decoration:none; margin-right:.5em}
footer a { text-decoration: none; font-size: .8em }
footer p { text-align: right; }
a{color:black}
a:hover{color:gray}
article {max-width:40em; margin-bottom:3em}
article p { font-size: .8em; margin:.3em 0 .3em 0;}
article p a,  #pager a { text-decoration: none; }
body{padding:.5em;font-family:sans-serif !important; max-width:40em; margin:auto}
.desc{margin-top:.3em;margin-left:.5em}
:focus{outline:2px solid gray}
h2{font-size:.8em; font-weight: normal; margin:0; padding:0}
ul { list-style-type: none }
hr{display:none}
img{display:block;max-width:100%;margin:auto;width:100%}
#pager{display:block;text-align:center;margin-left:.5em;line-height:1.5;max-width: 40em}
#pager a{padding: .3em}
#pager .curr{background: black; color: white}

@media (prefers-color-scheme: dark) {
body{color:#bbb; background:#282828}
a{color: gold}
#pager .curr{background:gray;color:black}
a:hover{color:gray}
#alltags a:hover{color:gray}
article a { color: darkgray }
article a:hover { color: #bbb }
.icon { filter:invert(100%); }
}

@media only screen and (max-width: 640px) {

article img { margin-left:-.5em; margin-right:-.5em;
 width:calc(100% + 1em);
 max-width:calc(100% + 1em);
}


}